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

Responsive two pager with form using vanilla JS and SASS

#sass/scss

@Eric-Ferole

Desktop design screenshot for the Officelite coming soon site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I realized that when a have more than one page, I really need to separate CSS. One for each pages I guess ? Next project I'll work with the [SASS 7-1 architecture] (https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture). I'm pretty sure this will help me to be more organized in my files and find stuff more efficiently. Any recommandation or comment about my code ?

Community feedback

Vanza Setia 27,855

@vanzasetia

Posted

Hey, Éric Férole! 👋

Congratulations on finishing this challenge! 🎉

I won't recommend separating the CSS unless you have a good reason to do it. Since you are using Sass, I recommend organizing the Sass files instead. And, yeah, you can use the "7-1 architecture" approach to structure your Sass files.

I have some feedback on this solution.

  • Remove the word "logo" from the alternative text for the logo. Avoid having any words that are related to the word "image" whenever you are writing the alternative text for images. The semantic meaning of the img element is already enough.
  • Not every image needs alt text. If the image does not provide any meaningful content, such as an illustration, consider using empty alt text (alt=””). This saves your screen reader users time as they navigate the page.
  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
  • Always specify the type of the button. It will prevent the button from behaving unexpectedly.
  • In your CSS, I noticed this selector .cards .card__header .card__description which would much be as .card__description . I recommend only nesting when you want to style pseudo-elements, pseudo-classes (:hover, :focus, etc), and @media queries. It's a good practice to keep the CSS specificity as low and flat as possible. High specificity will make your stylesheet hard to maintain.

I hope this helps! Happy coding! 😄

1

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