Zulamir's blog-preview-card-main

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  Congratulations on completing your Frontend Mentor project! It's impressive to see your skills in action, especially your attention to responsive design and styling. Here are a few suggestions to take your project to the next level:

  1. HTML Semantic Elements:

     • Consider using more semantic HTML5 elements like <section>, <article>, and <header>. For example, the flex-card div can be an <article> tag, which is more appropriate for content like a blog post.
     • Use <time> element for the publish date to improve semantic meaning and SEO. Learn more about the <time> element here.

  2. CSS Improvements:

     • Instead of using IDs for styling (e.g., #card-photo, #publish), use classes. IDs are more suitable for JavaScript interactions or anchor links.
     • Avoid inline styles in HTML. For example, style="font-size: 18px;" in the anchor tag. It's better to move this to the CSS file for maintainability.

  3. Image Optimization:

     • Consider using responsive images with srcset and sizes attributes. This ensures that the browser can pick the most appropriate image size, improving page load times. Learn about responsive images here.

  Further Learning:

  • Explore HTML5 Semantic Elements on MDN Web Docs.
  • Learn about CSS Best Practices through CSS-Tricks.
  • For image optimization, check out Google's Web Fundamentals.

  Keep exploring and challenging yourself with new projects. You're doing great, and there's always room to grow and improve. Happy coding! 🎉💻

  Marked as helpful

  1

  ---

  

  Zulamir•180

  @zulamirsofianPosted 9 months ago

  @petritnuredini

  Thank you for checking out my solution and providing further reading materials, will apply it into the next challenge 😊

  1
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 9 months ago

  Hello @zulamirsofian!

  Your solution looks great!

  I have a suggestion for improvement:

  • 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.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Zulamir•180

  @zulamirsofianPosted 9 months ago

  @danielmrz-dev Thank you for your kind feedback, will keep in mind for the next challenge 😊

  1