@elaineleung
Posted
Great work Andrea, congrats on completing your first Frontend Mentor project! Your solution looks great, and the code looks good and readable too.
About the CSS feeling clunky, is it because you feel certain declarations (like flex) are being made over and over? Sometimes it might be beneficial to just write a flexbox class with properties that doesn't change, and then put it in containers that need it; then for flex properties that vary from container to container, those can go on the container's class selector instead.
What I like to do is to check out repos of experienced CSS gurus like Kevin Powell and see how he writes his CSS. That's something you can consider as well, and also check out his YouTube channel if you haven't heard of him yet; he's done some FEM tutorials that are worth watching.
As for suggestions, I see that you got the font families repeated a few times. Try putting those as a custom variable and then use them whenever you need:
:root {
--ff-primary: 'Montserrat', sans-serif;
--ff-secondary: 'Fraunces', serif;
}
p, h2 {
font-family: var(--ff-primary);
}
h1 {
font-family: var(--ff-secondary);
}
Also, I'd add a cursor: pointer on the button so that it turns into a pointer.
Great work, Andrea, and keep coding!
Marked as helpful
@andiedoescode
Posted
@elaineleung Thanks so much for your feedback! I'll definitely keep working on those custom variables and condensing some properties.
