@antoniomontoia
Posted
Presence of Semantic Elements:
The HTML structure effectively uses semantic elements, such as <main>, <div>, and <ul>. The navigation tabs are implemented using a list (<ul> and <li>), which is semantically correct for navigation links.
Accessibility Features
The alt attribute for the profile image is well-defined, and the navigation links include aria-current and aria-disabled attributes. However, ensure that all interactive elements, such as buttons and links, have sufficient color contrast against their backgrounds to meet WCAG guidelines. For example, the contrast between the border color and background color of the buttons should be checked.
Responsive Design
The layout is responsive, utilizing Bootstrap’s grid system and utility classes effectively. The use of classes like vh-100 ensures that the content is centered and adapts well to different screen sizes.
Improvements: While the layout looks good on the first breakpoint size, the upper tabs keep their size when downscaling. Consider adding more specific media queries if needed to fine-tune the layout for smaller screens.
Code Structure: The HTML and CSS are well-structured, with a clear hierarchy and organization. The use of Bootstrap classes goes beyond the scope of the project but proves to be quite helpful in this case.
Readability and Reusability
The code is readable and reusable. The use of Bootstrap classes makes it easy to understand the layout and styling at a glance.
Design Alignment
The solution does not closely resemble the intended design. While creativity is valuable, the primary goal is to align with the target design as outlined in the style guide. Thoroughly read the style guide before starting a next project, and I reccomend you to keep personal creative projects distinct from frontmentor assignments.
