Design comparison
Solution retrospective
I'm really proud of the organization of the project, especially the use of CSS variables to make it easier to manage colors and fonts. This allowed me to maintain a consistent overall style while making the code more easily modifiable in the future.
I might spend more time on animations and transitions to add a bit more interaction, for example playing more with hover effects.
What challenges did you encounter, and how did you overcome them?I had to organize my CSS variables for colors, fonts, and sizes carefully to maintain consistency across the project. It took a bit of thought up front to figure out how to structure these variables optimally.
What specific areas of your project would you like help with?I am open to any feedback regarding the organization of my code or other suggestions for improvement!
Community feedback
- @MikDra1Posted 2 months ago
If you want to make your card responsive with ease you can use this technique:
.card { width: 90%; max-width: 37.5rem; }
On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful0 - @StroudyPosted 2 months ago
Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…
-
For future project, You could downloading and host your own fonts using
@font-face
improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts -
Setting
font-size: 62.5%
can affect accessibility by reducing the default browser font size, potentially making text harder to read for users with visual impairments. This does make it easier to work out the relative units but at what cost? -
Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
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