Design comparison
SolutionDesign
Community feedback
- @chryspenalberPosted 19 days ago
Strengths:
-
Good use of Bootstrap:
-
Well-structured HTML:
- The markup is clear, easy to follow, and well-organized.
-
Responsive Design Considerations:
- The
@mediaquery effectively handles the display of elements based on screen size, showing a desktop view or mobile view as appropriate.
- The
-
Nice Styling:
- Custom CSS works well with Bootstrap, especially the hover and active states on the "Add to Cart" button, which adds interactivity.
Areas for Improvement:
1. Incorrect Placement of
<main>Tag- The
<main>tag is inside the<head>, but it should be inside the<body>.
2. Incorrect Custom Font Name
- There is a typo in the custom font names.
"CostumFontBold"and"CostumFont"should be corrected to"CustomFontBold"and"CustomFont". - Ensure that the font files exist in the specified paths.
3. Overuse of Inline Styles
- There are many inline styles used throughout the HTML (
style="..."), which can make the code harder to maintain. - Move the styles to a separate CSS file or place them within the `` tag, but it should be a
<button>element since it is an interactive control.
Summary
Your code is generally well-structured and follows good practices for layout and design. With some minor adjustments to the placement of tags, font usage, and inline styling, the code will be much more maintainable and accessible.
0 -
Please log in to post a comment
Log in with GitHub
Join 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