Responsive landing page using Grid, Flexbox, SASS and JavaScript

Community feedback

• 

  T

  Grace•31,530

  @grace-snowPosted about 2 years ago

  Hi

  It's really important at this stage to learn how to do a disclosure pattern properly. By that I mean the mobile navigation toggle. This must be done as follows:

  • inside the nav but before the list of links have a button
  • this button must have the aria-expanded attribute so it's boolean value can toggle on click
  • the button must be accessibly labelled eg "toggle navigation"
  • inside the button you can have two images if you want but these should be treated as decorative and have pty alt as your button is already labelled

  These steps ensure that the nav can be toggles by all users and that state is communicated to screenreaders

  Other suggestions

  • unless a site is called logo, don't use that as alt text on a logo
  • don't use that awful javascript void thing in anchor tags. Clicking a logo link takes you to the homepage so href is /
  • ideally the alt on logo or label on link if using that method should say "name of site - Home" so the destination of clicking the link is communicated too
  • never style on IDs. That's not what they're for! You shouldn't ever increase css specificity either if you can avoid it. Use classes
  • please Indent your code consistently. It is sooooooo hard to read at the moment! Your code editor can even do this formatting automatically for you
  • read more should definitely be an anchor tag
  • as you've not included links on any other articles, how would users Read them?
  • consider using a list for the list of articles in the new section and the list of articles at the bottom
  • the bottom list of articles is even numbered just like an ordered list
  • numbers like 01 make no sense at all as headings. If using an ordered list they become redundant/decorative and can be aria-hidden. Even if not paragraphs would make more sense than headings
  • if images are meaningful they need proper descriptions in the alt attribute. Briefly describe it like you would if someone can't see it. And don't use words like "image" in alt text (its already an image element)
  • the images appear distorted/stretched when I preview this. Consider using the object fit property

  Marked as helpful

  1
• 

  P

  Adriano•42,640

  @AdrianoEscarabotePosted about 2 years ago

  Hi Alessandra Casole, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

  To resolve do this:

  <a id="btn" type="submit">Read more</a>

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Alessandra Casole•60

  @alessandra-casolePosted about 2 years ago

  @AdrianoEscarabote Thank you for the tip, you're totally right! :)

  0