Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

LOOPSTUDIOS LANDING PAGE 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 ]

#accessibility#lighthouse#bem
Abdul Khalid πŸš€β€’ 72,140

@0xabdulkhalid

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


πŸ‘Ύ Hello, Frontend Mentor Community,

This is my solution for the Loopstudios Landing Page.

  • Scored 98.6% on Google Pagespeed Insights! 🀩
  • Comes with Custom navbar w/ scroll-in & scroll-out animation πŸ”₯
  • Accessible hamburger menu w/ ES6 πŸ”
  • Actually i delayed to post this solution, this was completed about 5 months ago βͺ
  • Minified the css files to improve site performance πŸš€
  • Used Prettier code formatter to ensure unified code format βš™οΈ
  • Layout was built responsive via mobile first workflow approach πŸ“²
  • Had a lots of fun while building this challenge ! 🀠
  • Feel free to leave any feedback and help me to improve my solution πŸ’‘

.

πŸ‘¨β€πŸ”¬ Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

Community feedback

@MelvinAguilar

Posted

Hello there! πŸ‘‹ The solution you provided five months ago for this challenge looks great! 🌟 However, I have a few suggestions to address some potential drawbacks in terms of accessibility:

  • Firstly, let's talk about the "main__creations" section:

    The elements in that section have a hover effect, making them seem like interactive elements such as buttons or links. Since you're showcasing a list of "creations", and users might expect to navigate to these "creations" by clicking on them, it might be more accessible to implement actual links (<a>) instead of using <div>.

    Now, here are the drawbacks of using <div> instead of a link:

    • Users who rely on keyboard navigation can't easily move through the "creations" using the Tab key.
    • There is no pointer cursor in your solution.
    • Users might expect some action to occur when they click on the items.

    For a more elegant solution, you might want to consider implementing some of the techniques shared on this page: Cards - Inclusive Components πŸ“˜.

  • Consider adding a "Skip to main content" link to your solution:

    This helps users bypass header links and directly access the main content, improving the experience for those using screen readers or keyboard navigation.

    You can follow a guide on how to create a "Skip to content" link by visiting the following link: How to Create a "Skip to Content" Link | CSS Tricks πŸ“˜..

  • Media Queries and Horizontal Scrollbar:

    Lastly, a horizontal scrollbar appears between 56em (896px) and 1024px due to a single media query and the "OUR CREATIONS" section. You could either add more media queries or use the RAM (Repeat, Auto, Minmax) technique in CSS to avoid the need for multiple media queries.

    You can learn more about the RAM technique here: Repeat, Auto, Minmax | Web.devπŸ“˜..

These suggestions are aimed at enhancing your project's accessibility. Keep up the fantastic work! If you have any questions or need further assistance, feel free to ask. 😊

Marked as helpful

1

Abdul Khalid πŸš€β€’ 72,140

@0xabdulkhalid

Posted

@MelvinAguilar Thank you for providing detailed insights for my solution.

For now i have made changes for accessibility on creations section. I think we don't want to add explicit roles for ul & li like role="list", role="listitem". Is it okay ?

I have not used RAM in my entire css journey so in future i can give it a try, the resource you shared is absolutely valuable!

Thank you.

1

@MelvinAguilar

Posted

@0xAbdulKhalid

We should consider using explicit roles like role="list" and role="listitem" because some screen readers, specifically VoiceOver in Safari on macOS and iOS, tend to remove list element semantics when "list-style: none" is applied in CSS. Without these roles, users won't hear that the content is a list or receive information about the number of items.

Note: Website checkers might consider it unnecessary, but it's essential for accessibility.

For more information, you can refer to the following sources:

1
Pratyushβ€’ 60

@pra-23845

Posted

can you just tell me how did you make that animated sticky navigation bar i know how to make sticky navbar but not with animation i really like that one and i want to use it

1

Abdul Khalid πŸš€β€’ 72,140

@0xabdulkhalid

Posted

@pra-23845 Yeah it's my pleasure to explain that feature to you!

Let's take a look on code first,

window.onscroll = function() {

const header = document.querySelector("header");

 if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
  header.classList.add('header--active')
 } else {
   header.classList.remove('header--active')
 }
};

Here's the breakdown,

  • It selects the <header> element in the HTML document using document.querySelector("header") and assigns it to the header variable.

  • It attaches an onscroll event handler to the window. This event handler is triggered whenever the user scrolls on the webpage.

  • Inside the event handler, it checks the vertical scroll position of the page using document.body.scrollTop and document.documentElement.scrollTop. If the scroll position is greater than 20 pixels from the top of the page, it adds the CSS class "header--active" to the <header> element using header.classList.add('header--active'). Otherwise, if the scroll position is less than or equal to 20 pixels, it removes the "header--active" class using header.classList.remove('header--active').

  • In short, this code makes the header element change its appearance (e.g., background color or style) when the user scrolls down the page, and reverts to its original appearance when the user scrolls back up to the top. This is often used to create a "sticky" header effect or to reveal additional navigation options as the user scrolls.

Let me know if any doubts you may have regarding this feature.

1
Pratyushβ€’ 60

@pra-23845

Posted

i cant tell you how much happy i am right now i just learn a new thing

thank you i really like your coding @0xAbdulKhalid

0
Saad Hishamβ€’ 1,750

@Saad-Hisham

Posted

Welcome back, bro πŸŽ‰πŸ˜…

1

Abdul Khalid πŸš€β€’ 72,140

@0xabdulkhalid

Posted

@Saad-Hisham I'm happy to hear you warm welcome Bro! 🀠❀️

And by the by, Assalamu alaikum warahmatullahi wabarakatuh Brother πŸ«‚

1
Lucas πŸ‘Ύβ€’ 104,540

@correlucas

Posted

Congrats for the Mentor of the year!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord