Insure landing page using Sass and bundled by webpack

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  Hi, Claude! Congrats on submitting another solution. 🎉

  When it comes to Sass/SCSS architecture, the 7-1 pattern seems to be considered the standard. However, it can be a bit overkill for smaller projects, so there are some simpler organization methods - like the 5-1 pattern. Hopefully these will give you an idea of how you can better organize your files. 😄

  A few other suggestions to make your solution even better:

  • ::before and ::after pseudo-elements are very handy for decorative image placement like the swirl patterns in the intro.
  • For better semantics, .footer__links could be a nav element with an aria-label with something like “footer menu” in order to distinguish it from the nav in the header. The link headers and links themselves might also be better suited as a ul with links inside li tags like you did in the header menu.
  • From about 620px ~ 1100px, the style is very cramped. I suggest adding another media query to account for tablet widths so that your solution looks good on all screen sizes.

  Marked as helpful

  0

  ---

  

  Claude•290

  @claude1018Posted over 2 years ago

  @brasspetals Thanks for suggestions..

  The decorative images part in the intro part takes me time to decide what to do

  I forgot you could also call the .footer__links as nav.

  I know its cramped to the middle size because I though to only copy the mobile and desktop design. But in my future projects/challenges here I will try to add a media query for tablet.

  1

  

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  @claude1018 The decorative images are very tricky on this challenge. Just throwing out another suggestion. 😄 Pseudo-elements make it really easy to place things without interrupting the rest of the dom or cluttering up HTML. However, there's nothing wrong with how you handled them here. 👍

  I think it's good practice to always make sure your projects look good on all screen sizes. However, this can be difficult as the free challenges do not provide you with a tablet design, so you have to just make one up for yourself.

  Anyway, good job on this one and happy coding! 😄

  Marked as helpful

  0