HTML5, CSS3(flexbox and media queries)

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  I'm afraid this needs a lot more work.

  I recommend you pause and come back to this later after doing some simpler UI challenges. In particular, I recommend reading up on:

  • Accessible/Inclusive collapsible sections (inclusive components by Heydon Pickering is a good read on this). This is inaccessible to keyboard and assistive tech users at the moment because of the HTML you've chosen before anything else
  • Alternatively the disclosure summary element would be a good inclusive way for you to do this functionality without javascript
  • If wanting to use js for this, you need to use interactive elements and look up how to do simple class toggle on a queryselectorAll e.g. using a foreach instead (this could all be done in about 2 lines of js rather than what you have at the moment)
  • why min- and max- width and heights (probably in rem) would be better for responsiveness than explicit values in percentages. Open devtools on the side and resize your browser a lot to see what's happening
  • Why font sizes should never be in pixels, always rem/em
  • What alt text is, why it matters and how to write it.

  Really, there seems loads to address on this. But they are all super common issues that everyone faces. That's why I 100% think you should not try to fix this right now, but take a step back and do more newbie-level HTML and CSS only challenges before returning to refactor this one.

  Once you've gone through those simpler challenges you will be much better placed for this one.

  All the best

  0

  ---

  

  Aastha Anand•345

  @aasthaanand123Posted over 3 years ago

  @grace-snow Thank you for the feedback. This was really informative and I did not know many things I could have done like using disclosure summary element. I'll try to incorporate this and will keep in mind your suggestion of coming back to this after doing some simpler challenges Thanks!

  0