HTML, SCSS, JS, WEBPACK

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Hi, Karol-Czyzewski 👋

  Congrats on completing another challenge! Your solution responds nicely, although you might want to include some max-widths to the layout as it gets a bit stretched out on large screens (i.e. 1920px).

  To clear up those accessibility and html errors:

  • add an aria-label to your button
  • add alt attributes to your images, even if you just leave them blank (ex: alt=“”)
  • for your footer social links, you could add title tags to your svgs, although I believe adding an aria-label to the anchor tags wrapping the svgs also works.

  The navigation links on desktop don’t match the design. I highly suggest trying to create the gradient underline effect. Using a ::before or ::after pseudo-element is really handy for this.

  Speaking of the navigation, I noticed you have two separate navigations for desktop and mobile (I did this in one of my solutions once too 😅). This isn’t best practice. Instead you could use a media query to change the styling between desktop and mobile. Sometimes this can be a bit tricky, but it’s worth the effort!

  For your next project, I really encourage you to try a mobile-first approach. I find it much easier than doing desktop first. It's a bit of an adjustment at first, but again, well worth it. 😄

  Hope this helps and happy coding!

  2

  ---

  

  Karol-Czyzewski•75

  @Karol-CzyzewskiPosted over 3 years ago

  Hi, 👋 brasspetals Thank you for your feedback and advices. I will try to improve HTML, navigation and @media.

  Greetings! :)

  1