Design comparison
Solution retrospective
Last I did was on July 2023. Starting back bit by bit. Still a long way to go
Community feedback
- @petritnurediniPosted 10 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:
-
HTML Semantic Elements:
- Consider using more semantic HTML5 elements like
<section>
,<article>
, and<header>
. For example, theflex-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.
- Consider using more semantic HTML5 elements like
-
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.
- Instead of using IDs for styling (e.g.,
-
Image Optimization:
- Consider using responsive images with
srcset
andsizes
attributes. This ensures that the browser can pick the most appropriate image size, improving page load times. Learn about responsive images here.
- Consider using responsive images with
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 helpful1@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 -
- @danielmrz-devPosted 10 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 helpful0@zulamirsofianPosted 9 months ago@danielmrz-dev Thank you for your kind feedback, will keep in mind for the next challenge š
1 - Use
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord