Design comparison
Solution retrospective
On my first iteration, I was not able to style as close to the preview as possible, however, after seeing others' solutions I was able to improve the styling and HTML markup. All in all with more practice I will improve.
Community feedback
- @obocanegra-devPosted over 1 year ago
Hello Malcome! 👋
Congratulations on your amazing design work! Your effort and creativity are truly commendable.
Here are some suggestions to further enhance your project:
I highly recommend using semantic elements instead of relying heavily on
<div>
s. Semantic elements like<header>
,<nav>
,<main>
, and<footer>
add meaning and structure to your HTML, improving accessibility and SEO.If you have only one heading, it's better to use
<h1>
instead of<h2>
. This ensures proper hierarchy and emphasizes the primary heading of your page.For the image, it's important to provide a descriptive
alt
attribute, such as "QR code to Frontend Mentor website". This helps users understand the purpose of the image, especially for those who rely on assistive technologies.When specifying font sizes, it's recommended to avoid using pixels and instead use relative units like
rem
orem
. This ensures better scalability and responsiveness across different devices.Adding
text-align: center;
will help align the content in the center and bring it closer to the original design. This will provide a visually consistent experience.You're almost there! Incorporating these suggestions will help further align your project with the original design.
Keep up the great work, and feel free to ask if you have any questions or need further assistance. Good luck with your future endeavors! 🚀✨
Best regards, Oscar
Marked as helpful1@MalcomeBaggettPosted over 1 year ago@obocanegra-dev I want to say I appreciate the time you took to respond with feedback, thank you.
1
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