Design comparison
Community feedback
- @ExtendoGHPosted about 2 months ago
Feedback on Your Work
Design
-
Overall Size: The project looks good, but it is slightly smaller compared to the design specifications. According to the design, the container's width should be 384px, whereas you used 320px.
-
Border Radius: The border radius on the container is a bit too small. It should be 20px.
-
Spacing: The spacing between text elements is larger than in the design. Consider reducing the gaps for better alignment.
Code
-
Alt Text: Writing longer and descriptive
altattributes for images would improve accessibility and make your website easier to use for people with disabilities. -
SEO Improvements: Consider adding tags like
meta descriptionandmeta keywordsin the<head>section to enhance the website's SEO potential. -
Responsive Design: To make the project fully responsive, it is recommended to use only rem units. Here's an article explaining why: Fedmentor - Font Size & Units. While you mostly use
rem, there are instances (e.g., padding or margins) wherepxunits appear.
Additional Notes
- The project looks great overall!
- Flexbox Usage: It's awesome that you used flexbox for spacing between elements. Great choice!
- Color Variables: Defining color variables is an excellent practice, especially for larger projects.
- Global Reset: Including a global reset at the beginning of the file is another fantastic habit.
Keep up the good work! š
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