Sass and CSS grid for first time

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  A few suggestions for you, I hope these are helpful 🙂

  • logo can't be a H3. I'd have that as a word inside a link like other nav items (and it's generally established clicking the logo will take you 'home'
  • Make sure you've got visible focus states on all interactive elements, including slider links
  • The design breaks at mid sized screens. Some of this is down to really poor design on this particular challenge though (readability of the desktop menu over an image is terrible! 😆)
  • Shop now would be an anchor tag, not button (it's navigation, not action)
  • I'm not sure how search engines would react to having multiple h1s in a page, but that's a common issue with sliders/carousels. Again, the design's fault really. Just raising as it's the kind of thing you'd want to talk through with a designer and marketing team if on a real project.
  • About our furniture title should be a h2. Headings must always go in order
  • Same section, that heading is touching the section above for me. Looks like it needs some vertical padding as well as horizontal?
  • Similarly, give text-container some larger bottom padding on desktop to make sure the shop now button doesn't touch the slider controls
  • The mobile nav toggle needs to be a button, not a div, and have a label readable by assistive technology (e.g. aria-label)

  Good luck. there's a lot of work in this one and it's not easy!

  1

  ---

  

  Luca Di Molfetta•365

  @dimolf345Posted over 3 years ago

  @grace-snow Hi Grace!

  First of all THANK YOU SO MUCH for all these pieces of advice! I agree with you about the lack of the design for middle-size screens, in fact I think I would go for pro account soon.

  I started this challenge because I found it a good one to begin practicing CSS grid. As I wrote, It was the first time I used CSS Grid and SASS, so for me was an experiment.

  Anyway, I will try to remake it later from scratch, after re-studiying better the HTML markup :)

  In the meantime, I think I would try other challanges. I'm so sorry the design broke, on my 24" inch monitor I used the Firefox dev tool to make sure that it worked for different size screen. Anyway I will check.

  Thank you again!

  0