Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Community feedback
- @BigO-DevPosted 7 months ago
Semantic HTML Assessment:
- The use of
<figure>
for the profile picture is appropriate and semantically correct. - However, the
div
elements used for buttons should be replaced with semantically correct elements, asdiv
does not convey any meaning about its content.
Suggestions for Improvement:
- Replace
div
elements withbutton
ora
(anchor) elements for the links. This is crucial for accessibility becausediv
elements are not focusable or keyboard accessible by default. For instance:<button class="button">GitHub</button> <!-- or --> <a href="https://github.com" class="button">GitHub</a>
- Use
<header>
within the.card
for the name and location if it suits the card's context, improving the document structure.
Accessibility Assessment:
- The image has an appropriate
alt
text, which is good for accessibility. role="main"
is redundant on the<main>
element, as<main>
inherently carries that role.
Suggestions for Improvement:
- Ensure that interactive elements (currently marked as
div
) are accessible. Use<button>
or<a>
with properaria-label
attributes if the text content is not descriptive enough. - Add
:focus
styles along with:hover
to improve keyboard navigation visibility.
Responsive Design Assessment:
- The CSS ensures that the card is centered and should render fine on different devices due to the use of percentages and viewport units.
Suggestions for Improvement:
- Test the layout at various breakpoints to ensure the card scales properly. Consider implementing media queries if the current setup does not suffice for all screen sizes, especially smaller devices.
Code Quality Assessment:
- The CSS is well-organized, using CSS custom properties would enhance the maintainability of the color and font styles.
- The selectors are straightforward and the classes are appropriately named.
Suggestions for Improvement:
- Move CSS to an external stylesheet if it’s not already, for better separation of concerns and reusability.
- Use CSS custom properties for color and other frequently used properties. For example:
:root { --primary-bg-color: hsl(0, 0%, 12%); --button-hover-bg-color: hsl(75, 94%, 57%); } .button { background-color: var(--primary-bg-color); &:hover { background-color: var(--button-hover-bg-color); } }
- Validate the CSS to ensure there are no syntax errors (e.g., missing semicolons or incorrect properties).
The code effectively sets up a visually appealing social links profile card. Emphasizing semantic HTML and accessibility improvements will greatly enhance its functionality and user experience, particularly for those using assistive technologies. Adding responsive design elements will ensure the card looks good on all devices.
0 - The use of
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