Design comparison
Community feedback
- @antoniomontoiaPosted about 1 month ago
Semantic HTML and Accessibility: The current implementation relies heavily on <div> elements, which lacks semantic meaning. To improve accessibility, consider using semantic HTML elements like <main>, <section>, and <header> to provide better context.
Responsive Layout: The layout looks good across various screen sizes, and your use of Flexbox is commendable. This approach effectively contributes to the responsiveness of your design and aligns well with the original design.
Code Structure and Readability: The code is generally well-structured and readable, but the excessive use of <div> elements can obscure the document structure. Aim to incorporate more semantic elements for clarity and maintainability, while also noting that your method of creating color styles in CSS is a great practice.
Design Consistency: There are some discrepancies between your implementation and the original design, particularly in styling details. To improve consistency, keep the original design accessible while you work, and pay attention to padding, margin, line-height, and color to better match the intended look.
Keep up the great work!
0
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