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

Styling with Sass

@laura-nguyen

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

proud of my code being DRY

What challenges did you encounter, and how did you overcome them?

n/a

What specific areas of your project would you like help with?

When I look at other people's solutions, some of them have a base and abstract folder for their styling. I would like to learn what that is and why that is used.

Community feedback

haquanq ®️ 1,585

@haquanq

Posted

Hello @laura-nguyen 👋👋

I like that your solution looks good and close to the design!

About the CSS folder structure:

  • There are many ways to structure your project files (not only CSS) and standards out there that has different purposes.
  • These base or abstract folders (could be named differently based on your preferences) exist for the matter of composition and modularization your CSS code into something that could be described as reusable, scalable and maintainable code .

About your solution for this challenge:

  • Don't use fixed height on containers, when your content overflow vertically, users can't scroll. Use min-height: 100vh instead to assure that the container will be at least the same height as the viewport and it's scrollable.
  • Avoid unnecessary <div> wrapping for 2 reasons.
    • <div> has no particular semantic meaning.
    • You are wrapping elements that won't change there layout according to the design (they stay vertically center) so <div> is redundant.
  • You can start using more semantic HTML markups (for better SEO and accessibility). For example, the quotation can be wrapped inside <blockquote>, the address can be used with <address>, these social links can be structured with <ul> <li> to state that there is a list of link items (they have the same context - links to social pages - screen readers will announce how many item in the list when focus on it and which item index they are currently focusing on). Consider using <article> or <section> to wrap a part of content (based on the content type - section or article?) that has a heading to it .

Hope this help, have a nice day 🐧😙🐌

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