Landing page HTML/JS/CSS

Community feedback

• 

  P

  Jairo Valderrama•420

  @jairovg

  Posted almost 2 years ago

  Hi Carlos, congrats on your solution; here are some comments that might help you to improve it:

  Accessibility and semantics

  • Here is your heading map:

  1 - The Bright Future of Web 3.0?
  2 - New
  3 - Hydrogen VS Electric Cars
  3 - The Downsides of AI Artistry
  3 - Is VC Funding Drying Up?
  2 - Reviving Retro PCs
  2 - Top 10 Laptops of 2022
  2 - The Growth of Gaming
  

  • Even the New title has a correct hierarchy, this is the text the assistive technology will read out loud; I would consider an enhanced title with a part for screen readers only like "New articles" or "New posts".
  • The three elements of the .top-news should be h3 each of them and the section.top-news element misses its heading to enhance the assistive technologies experience. You may use a .sr-only class so it may be visually hidden.
  • The same section uses an ordered list to display its articles, however, you're using a span to enumerate the items.
  • The images in the same .top-news section are being treated as decorative images as they have an empty alt attribute. I'm wondering if they don't add any value to the related content.
  • I used to recommend the size hack you're using to override the base font size for simple calculations, but not anymore. I invite you to read this interesting blog post named Should I change the default HTML font-size to 62.5%? which explains the cons behind this hack and an approach to calculate the font-size using sass functions.

  Styles

  • It's better to use colour tokens based on their semantic use rather than their colour names. It's better for future refactors or a theme feature, in which case it's even better to use CSS variables.
  • Try to not use deep nesting in your sass rules and not to make them dependent on other elements or it will be difficult to reuse some of your components. Instead, think about them as independent components.
  • The images of the .top-news section are stretching at some breakpoints.

  Others

  • You're using two nav for the .header-nav duplicating all its children. It should be created as a single component changing its appearance using css only.

  I hope you find it useful. I'm happy to look at your solution if you make other changes.

  00

  Marked as helpful
• 

  Adel•820

  @aliadelharrat

  Posted almost 2 years ago

  Congrats on completing this challenge 😍

  I typically utilize a JavaScript array to store links, which I then employ for both mobile and desktop applications, particularly when working with ReactJS.

  Happy coding 👋

  00