Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @Tahaaitabi!

  Your solution looks excelent!

  I have just one suggestion:

  📌 In order to make your HTML code more semantic, don't skip heading levels - start with <h1>, then use <h2>, and so on.

  Unlike what most people think, it's not just about the size and weight of the text.

  • The <h1> to <h6> tags are used to define HTML headings.
  • <h1> defines the most important heading.
  • <h6> defines the least important heading.
  • Only use one <h1> per page - this should represent the main heading/title for the whole page.

  All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  Taha•40

  @TahaaitabiPosted 10 months ago

  I will implement this on my next project, Thank you for the tip! 👌@danielmrz-dev

  1
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  First off, congratulations on completing your Frontend Mentor project! It's a fantastic accomplishment to turn a design into a functioning web page, and you've done a great job. Here are some best practices and recommendations to enhance your project:

  HTML & CSS Best Practices:

  • Semantic HTML: Using semantic elements like <main> is great for accessibility and SEO. Consider adding more semantic elements where appropriate, like <article> for the blog card.
  • Image Accessibility: Good job using alt attributes for images. This is crucial for screen reader users.
  • CSS Variables: Excellent use of CSS variables for managing colors and fonts. This makes your stylesheets more maintainable.
  • Responsive Design: Your use of media queries is good. Make sure the design looks great and functions well on all device sizes.
  • Font Size Units: For better accessibility and responsiveness, consider using relative units like em or rem instead of px for font sizes.

  Code Organization:

  • CSS Organization: Your CSS is well-organized. As your project grows, you might want to consider organizing your CSS into multiple files, like separating resets, utilities, and component styles.
  • Comments in Code: Adding comments in both HTML and CSS can help make your code more understandable, especially when working with teams or revisiting your code after some time.

  Accessibility:

  • Keyboard Navigation: Ensure that all interactive elements are accessible via keyboard navigation. This is important for users who rely on keyboard-only navigation.

  Performance:

  • Optimize Image Loading: Consider using modern image formats like WebP for better performance, especially for larger images.

  Learning Resources:

  • To dive deeper into semantic HTML, MDN Web Docs is a great resource.
  • For CSS best practices and advanced techniques, CSS-Tricks offers a wealth of information.
  • To learn more about web accessibility, WebAIM is an excellent place to start.

  Keep up the great work! Remember, each project is a step forward in your web development journey. Your progress is impressive, and by continually applying best practices, your skills will only get stronger. Keep pushing forward!

  0