Basic css html js solution without framework/prepro

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  Hi, this looks great! I can't check code though as the code links not working. If it's a private repo it needs to be made public to work

  1

  ---

  

  Gwenillia•160

  @GwenilliaPosted almost 4 years ago

  @grace-snow oh thanks, i just made it Public. I forgot sorry

  0

  

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  Nice one @Gwenillia ☺

  Looking at the code, I'd recommend you look more into semantic html. All the way through it looks like some misunderstandings about what elements to use at the moment. For example

  • no h1 on the page atm
  • some sections / articles have no meaningful content
  • lots of headings without content underneath
  • articles where it should probably be list items with anchor tags
  • anything interactive needs to use an interactive element, like a button or link (eg nav button)

  Other thing I notice is alt text on the logo needs to say the name of the site/product, otherwise assistive tech has no way of knowing what it's called.

  With javascript it looks fine how you've done it but I'd recommend using js to toggle classes and handling tee styling all in css rather than using js to add inline styles. Just a general best practice thing

  I hope that's helpful. The solution looks really really good

  1

  

  Gwenillia•160

  @GwenilliaPosted almost 4 years ago

  @grace-snow yes thanks for the big feedback :) I will really take note of using li rather than article. I didnt know about the last point and i think it sounds logic so yeah, it will help me for the future :)

  About headings, i use them cuz I thought it was like heading of the cards and when you land on article's page you get the heading back but maybe it would be better to use something else as there is no real content in the same page i suppose?

  Thanks again for real it is helpful. Also for the alt text on logo, I didn't really know about accessibility and still don't know much how it works :/

  0