Design comparison
Solution retrospective
I thoroughly enjoyed the challenge of this project and appreciated the opportunity to dive deeper into CSS Grid. It allowed me to enhance my skills and explore new techniques in layout design.
What challenges did you encounter, and how did you overcome them?-
Syntax Selection
- One of the main challenges I encountered was deciding which syntax to use in various situations. With multiple ways to implement CSS Grid, it was sometimes tricky to determine the best approach for the layout I envisioned. I found that taking the time to experiment with different methods helped clarify my understanding, but it added some complexity to the coding process.
-
Font Size Adjustments
- I experienced a bit of stress while working with font sizes. Initially, I struggled to achieve the desired visual hierarchy and readability. However, through trial and error, I was able to find a solution that worked well for the design. This experience taught me the importance of patience and flexibility when adjusting styles.
Overall, while I believe the code isn't the most streamlined I've written, it is functional and meets the project requirements. I recognize that there are areas for improvement, particularly in optimizing the code for better readability and efficiency. i would really appreciate any suggestions that could help me improve my code.
Community feedback
- @MikDra1Posted 3 months ago
Nice one 😀,
Here are some things to review:
-
Consolidate Media Queries: Combine similar media queries for .card-1, .card-4, and .card-5 to reduce redundancy.
-
Use CSS Variables for Spacing: Replace hardcoded values like padding, margin, and gap with CSS variables for consistency.
-
Reduce Repetition: Combine styles for cards that share properties (e.g., .card-1, .card-2, .card-4) into a common class.
-
Minify Font Imports: Import only the necessary font weights to reduce loading time.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful1 -
- @TedJenklerPosted 3 months ago
Hi @Abimzz,
Nice project! Here are some suggestions for improvement:
Consider adding semantic HTML elements to your project. For example, you could use <article> or <section> tags for your cards, which would enhance accessibility.
Try to minimize the use of <div> elements. When you do use them, add aria-label="describe it" to help screen readers and improve search engine optimization.
Hope these tips help!
Best, Teodor
Marked as helpful0
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