Design comparison
Solution retrospective
What I'm most proud of is that I actually made this project without the figma file because fig file really helps a lot especially in adjustments, spacing, height, and sizes of each element.
What challenges did you encounter, and how did you overcome them?The challenges I encountered while doing this challenge is using grid and also pseudo properties like hover I still don't understand how it really works I just search a references online on how to use hover or implement hover in my design.
What specific areas of your project would you like help with?I would love to know more about manipulating flexbox and using grid because it really helps me from placing one div to another or making a structured design and manipulating the html tags.
Community feedback
- @MikDra1Posted about 2 months ago
Well done, here are some things to review π:
-
Overusing div tags: Try using more semantic HTML elements like
<section>
,<header>
, and<article>
. Itβll help with both accessibility and SEO. -
Neglecting responsive design: Make sure you're using media queries and following a mobile-first approach so your site looks great on all devices.
-
Inconsistent class naming: Itβs easy to end up with a mess of class names. Consider using a system like BEM for better organization and scalability.
-
Not testing across browsers: Donβt forget to check how your site looks in different browsers like Firefox and Safari. Cross-browser testing is super important.
-
Ignoring accessibility: Focus on features like keyboard navigation, contrast ratios, and ARIA labels. They make your site usable for more people.
-
Using fixed heights for elements: Setting fixed heights can cause overflow issues. Use
min-height
or allow content to expand naturally to avoid problems. -
Not using responsive images: Be sure to use
srcset
or the<picture>
element to optimize images for different devices. This improves performance, especially on mobile.
Hope you found this comment helpful πππ
Good job and keep going πππ
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