Vanilla JS, CSS

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  Hey @julis923 - lovely job here! 🙌 The page looks great and responds really well! 👍 I had a go at this one a while back and found it pretty tricky!!

  I'll mostly comment on the HTML as I think your JS looks pretty complicated and I only have a few mins!

  Most importantly, I think that you could take advantage of some more HTML elements that would improve the semantics of your page, and perhaps allow you to use less JS. Some suggestions here:

  1. Try using a header wrapper for the top section instead of a div and wrap the navigation in a nav. You could also use the main element for the major part of the page. This will help people using assistive tech to access your page easily.

  2. Sticking to the page structure, ideally you should only have one h1 per page, and levels should not be skipped (at the moment you have a h1 followed by a h3 for example). This is for the same reason above.

  3. There are also much more things we could explore here, like using input elements for the check circles all wrapped inside a form (if we used radio buttons you would automatically only be able to check one), using a checkbox instead of a button for bookmarking etc.

  When combined with things like :checked ~ .a-sibling-you-want-to-modify you can use much less JS and avoid quite a bit of extra work. For example, using the selector above you can make additional sections appear below (like on the large modal) when they are checked rather than using JS.

  Lastly, I would also try to make sure that you have some outline styles so that people using the keyboard can access and use the page easily. Again, using an appropriate HTML element will get you 90% of they way there with this for free! (e.g. buttons, links, inputs all have this and other functionality ready to go).

  I don't think you'll have any problem learning about this stuff if you haven't already as it's simple in comparison to the JS you have learnt, but I'd suggest it's time well spent.

  But great stuff and keep up the good work!!! 👍 Cheers 👋

  2

  ---

  

  Juliet•235

  @julis923Posted over 3 years ago

  @dwhenson Thank you so much for taking the time to review my code and give such helpful feedback! It's great to get such constructive advice for the future. Especially excited to look into the :checked pseudo-class selector :) and I'll be more mindful of accessibility/semantic HTML on my next project. Thanks again!

  0

  

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  @julis923 here’s a simple explanation of the potential of the :checked class. https://css-tricks.com/almanac/selectors/c/checked/

  It’s simple, but if you imagine a div or something at the same level as the input and changing the display property you can have lots of fun!

  Cheers

  0