Using SCSS Flexbox for layout, incorporating accessibility design.

Community feedback

• 

  Andrey•1,130

  @dar-juPosted 3 days ago

  Hi LuRouFan!

  Very good work! There are a couple of things:

  • this task has only one entity - one section, it has a title, description and 4 blocks. You don't need to use a header here. The header is the top part of the site, which contains the logo, menu, etc.
  • a bit of a strange decision to switch from flex to grid in the mobile version. This block can be made entirely either on flex or on grid.

  Otherwise, everything is super. Good luck with the development!

  Marked as helpful

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted 3 days ago

  Hi LuRouFan! 👋

  I like your initiative in adding meta tags and even a schema.

  Here are some feedback on the HTML markup:

  • Combine "Reliable, efficient delivery" and "Powered by Technology." Do you think those two phrases should be read separately? "Reliable, efficient delivery powered by technology" is a phrase that makes sense.
  • Wrap that phrase with <h1>. Then, use <span> to separate those phrases.
  • Use less <div> elements. For example, you can directly style the <p> inside <div class="heading-info"> instead of using an HTML div element. Identify the rest of the <div> elements that can be eliminated.
  • Disable CSS to check your HTML markup. Then, make those four cards, "Supervisor" and the other three, a list element. Try to see if you can understand the purpose of the content. Then, compare it when you use <section>. A list of four items that highlight the features can be understood better than four sections.
  • Write HTML without thinking about CSS. This is the first step towards writing good HTML markup. Otherwise, you end up writing lots of unnecessary <div> elements.
  • Remove each alternative from all icons. Imagine if the page does not have those icons, do you notice any missing information? Icons that only make a website look beautiful are decorative elements. So do not add any alternative text to them.

  I hope this guides you to write better HTML. Happy coding! 😄

  0