Community feedback

• 

  Marzuk Sanni•1,360

  @ZukizukPosted 9 months ago

  FEEDBACK TEMPLATES

  On semantic HTML

  Hello there, Congratulations on completing your first challenge here!

  Your solution looks nice

  I have a few suggestions that I think might be of interest to you.

  - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. The main tag should hold all the main content of you page so note that.

  The semantic HTML tags help search engines and other user devices determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div holds no semantic value.

  The html styling is not styled like this

  html{
      background-color: hsl(35, 94%, 93%);
      border-radius: 2%;
      max-width: 95%;
      padding: 2.5%;
      margin-left: auto;
      text-justify: auto;
      word-spacing: auto;
  }
  

  You gave the body a fixed with which shouldn't be so body{width: 1440px}. These stylings also need to be placed at the topmost of your styles not the bottom.

  @font-face {
      font-family: YoungSerif-Regular;
      src: url(./assets/fonts/young-serif/YoungSerif-Regular.ttf);
  }
  @font-face {
  font-family: Outfit-VariableFont;
      src: url(./assets/fonts/outfit/Outfit-VariableFont_wght.ttf)
      }
  

  You html also need more work on it concerning semantic html, naming of html file, and more and I would like to correct you on all that but the feedback would be too long to do, so suggest you check my solution for this challenge here /my-solution. And if you don't get anything, you can write under it and I would explain to you.

  I hope this feedback is helpful.

  Other than that great job

  Marked as helpful

  1

  ---

  

  SantiMora06•30

  @SantiMora06Posted 9 months ago

  Hello @Zukizuk ! First thank for your comments, guidelines and external links to understand more the semantic html!

  To be honest this part I didn't understood it so well: "You gave the body a fixed with which shouldn't be so body{width: 1440px}. These stylings also need to be placed at the topmost of your styles not the bottom."

  Thanks to you I'll understand now how to naming a file and much more, I checked your solution and, from my point of view, is great, it'll take a some time until i'll do something like that but with your comments I'm already encourage!

  Hope the best for the future!

  0
• 

  Hassan Moataz•1,860

  @hassanmoaaPosted 9 months ago

  Hello @SantiMora06!

  Great Job solving the challenge mate congrats 🎉

  Some suggestions for improvements.

  For the font-size it's is better to use rems and ems.

  font-size: 13px;

  • i see you using pixels for many elements, never use pixels for font-sizes in any element, here's why:

  • Certain font-related CSS properties will render your site completely inaccessible if their value is declared using pixels even once.

  Which properties are affected?

  All of these properties must never ever be declared in pixels:

  • font-size
  • line-height
  • letter-spacing

  If you've used pixels to define any of the above style properties, these will not respect the user's font size preferences!

  • You should use ems, and rems for font-sizes would be better

  This article may help:

  https://fedmentor.dev/posts/font-size-px/

  ➖➖➖➖➖➖➖➖

  Use <main> to wrap the main content instead of <div>. * 📌 Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page. This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  ➖➖➖➖➖➖➖

  Other than that you're good, keep up the good work!

  Marked as helpful

  0

  ---

  

  SantiMora06•30

  @SantiMora06Posted 9 months ago

  First, thank you so much for your suggestions, I'll take them into consideration. Now I'll start working with rems or ems thanks to you! @hassanmoaa

  I didn't know that the difference was that big and I can't appreciate that enough! I'll have this article in mind https://fedmentor.dev/posts/font-size-px/ anytime I need to understand why is important!

  At the same time, the directions you gave me about following the semantic HTML elements like <main> for improving the SEO will help me a lot in future projects.

  Thank you again for your contribution, I hope the best for you!

  1