Design comparison
Solution retrospective
Bingus
Coding is fun
What challenges did you encounter, and how did you overcome them?The color
property changes the outline color as well
After some research I learnt about the outline-color
property, and also about the font-weight
property so that's nice.
I thought the buttons would center with the body but turns out it didn't. Then I realized I can center things inside the container.
What specific areas of your project would you like help with?I don't know how to properly use classes. As in, maybe I made too many classes and that I could have achieved this without some of them. I don't know tho
Overall I am just worried if I did things "correctly" or efficiently.
I also want to know why my solution is smaller compared to the design. I felt like it's an easy fix but for some reason I can't figure it out
Community feedback
- @MikDra1Posted 3 months ago
If this comment was useful please mark it as helpful 💗
This CSS code is well-structured but could be improved in the following ways:
- Accessibility:
Ensure sufficient color contrast, especially for button hover states. The black text on a green background may not meet accessibility standards. Consider adding focus states for interactive elements like links.
- Responsive Design:
min-height: 100svh; is a good approach but could have compatibility issues. Consider using fallbacks or testing across different browsers. Use relative units (em, rem) for padding and margins to enhance responsiveness.
- Optimization:
Consolidate repeated styles, such as padding in .container and buttons, to make the code more efficient. Consider more descriptive class names instead of big-weight, mid-weight, etc.
- CSS Variables:
Expand the use of CSS variables for font sizes and other recurring values for easier future adjustments.
- Comments:
Adding comments to explain sections of the code can improve readability and maintainability.
These enhancements will improve accessibility, responsiveness, and code efficiency.
0 - @nielsfechtelPosted 3 months ago
Nice design, looks good!
- I don't know how to properly use classes. As in, maybe I made too many classes and that I could have achieved this without some of them.
I like the way you added those classes, e.g. small-weight, mid-weight etc. - they're utility classes like TailwindCSS uses, I recommend you look it up if you don't know it. A pretty common CSS design pattern I'd say.
- I also want to know why my solution is smaller compared to the design. I felt like it's an easy fix but for some reason I can't figure it out
I think that's just small things adding up, e.g. the image is bigger, and the spacing between elements as well as padding is bigger.
0 - @Irenity0Posted 3 months ago
the card is too small and the effects are supposed to be on active not hover. There are rooms for improvement but good job
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