Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Responsive QR-code page.
- What have I used?
- HTML
- CSS
Community feedback
- @MiguelN794Posted 1 day ago
Sure, here is the feedback:
-
Semantic HTML:
- The HTML structure is mostly semantic. The use of
<main>
,<div>
,<h1>
,<p>
, and<footer>
tags is appropriate. However, consider using a<section>
tag instead of a<div>
for the container to enhance semantic meaning.
- The HTML structure is mostly semantic. The use of
-
Accessibility:
- The
alt
attribute for the image is well-used, providing a description for screen readers. - To improve accessibility, consider adding
aria-label
attributes where necessary, such as on the links in the footer to describe their purpose. - Ensure that the color contrast between text and background is sufficient for readability.
- The
-
Responsive Layout:
- The current HTML does not include any responsive design elements. Ensure that the CSS includes media queries to handle different screen sizes.
- Use relative units (like percentages or viewport units) instead of fixed units (like pixels) for widths and heights to make the layout more flexible.
-
Code Structure, Readability, and Reusability:
- The code is well-structured and readable. The indentation and spacing are consistent.
- Consider using classes or IDs to target specific elements for styling or JavaScript functionality, which can improve reusability.
-
Design Consistency:
- Without the design reference, it's hard to determine if the solution differs considerably from the design. Ensure that the CSS matches the design specifications provided by Frontend Mentor.
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