Styling with Sass

Community feedback

• 

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  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