Design comparison
Solution retrospective
I think I managed to make it look like the original, at least on the desktop screen, so I am proud of it. I also took the time to check all the details regarding the padding and margin to have the same amount of space everywhere where it is required. I realized that there is a big amount of time ahead to take to analyze the project, before starting coding.
What challenges did you encounter, and how did you overcome them?having the right amount of space everywhere was difficult. I managed to do it, but there might be a more efficient way to do it. Plus, I was blocked by the fact we couldn't use Media queries for the mobile version, so I am not sure I managed to do this part properly.
What specific areas of your project would you like help with?I will definitely need help with responsive design, especially if we can't use media queries. I tried to find a way to change the font using VW, but it was inefficient. So, all advice is welcome. And if you notice a mistake on any other topic, please feel free to correct me :)
Community feedback
- @kareemsakrPosted 14 days ago
Use semantic tags where possible. Instead of <div class="container">, consider using a <main> or <article> if this content is the main focus of your page. Avoid <div> tags when a more meaningful element can replace them.
A <button> should not contain a heading tag (<h3> in this case). Buttons are typically used for actions (like form submission or navigation), and wrapping a heading in a button is semantically confusing. If “Learning” is a label or category indicator, it might be better as a <span> or <p> styled as a badge instead of a button.
Use <time> for the date, with the datetime attribute for machine readability. This helps screen readers and improves accessibility.
<time datetime="2023-12-21" class="date">Published 21 Dec 2023</time>
Headings should follow a logical order for accessibility and SEO. Avoid skipping heading levels (<h1>, <h2>, <h3>, etc.). If "HTML & CSS foundations" is the main title, use <h1> only once, and make sure subsequent headings follow a hierarchical structure (<h2>, <h3>, etc.) based on their importance. Avoid using <h2> for the description. Instead, use a <p> tag for non-heading text.
Marked as helpful0@AuroreLPPosted 14 days ago@kareemsakr Thanks a lot! these are very helpful tips for a beginner like me :)
1@kareemsakrPosted 14 days ago@AuroreLP Good luck on your journey. An amazing method to review your code is using something like chatgpt. Ask it to review your code based on the industry standards, best practices or even HTML/CSS specifications. If it suggests a change to your code, ask it why and learn. If the information is overwhelming, don't stress yourself. Just read it once and over time, it will start to make more sense.
0
Please log in to post a comment
Log in with GitHub
Join 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