Design comparison
Solution retrospective
Using global variables in :root
What challenges did you encounter, and how did you overcome them?Adaptive layout, detailed study of the Figma
What specific areas of your project would you like help with?For the first time I came across variable fonts, I hope that it turned out correctly
Community feedback
- @Ineke84Posted about 2 months ago
Hello Tatiana,
Good job on finishing the challenge. It looks spot on in the comparison.
I recently (during the same challenge) learned some things that might also be interesting for you:
-
Use semantic html (with tags like <main>, <article> etc) , that way you can make a webpage more informative for browsers and search engines.
-
I also missed it at first, but the hover not only changes the color of h1, but also creates a bigger dropshadow.
-
You could also use global variables for the font-sizes. I created 3 variables with font-sizes. With 'clamp' as I used it you have a linear scale from small to bigger font-sizes. But if you use media-queries you also only have to define what the size is for each media query and you don't have to set the font-size for element seperately again (you wouldn't need h1 and .description in your media query).
--font-size-heading: clamp(1.25rem, 5vw - 1rem, 1.5rem); --font-size-medium: clamp(0.875rem, 5vw - 1rem, 1rem); --font-size-small: clamp(0.75rem, 5vw - 1rem, 0.875rem);
Hope you find it usefull!
Ineke
Marked as helpful0@PavlinovaPosted about 2 months ago@Ineke84, thank you so much for expanded feedback. Oh, i did not noticed dropshadow too! Thank you :) And especially thanks for climp, i didn`t hear about this 😀
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