@Ineke84
@Pavlinova
Submitted
What are you most proud of, and what would you do differently next time?
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
@Ineke84
Posted
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 helpful
@DomLeverment
Submitted
What are you most proud of, and what would you do differently next time?
Proud to have finished the project, still a lot of learning to do.
What challenges did you encounter, and how did you overcome them?
I found it difficult to centre the container until i found out to specify the min-height 100vh in the body.
What specific areas of your project would you like help with?
CSS is a big challenge for me. So any tips and advice for cleaner code would be amazing.
@Ineke84
Posted
Hi Dom, Your solution looks really good (I didn't use flexbox myself yet, but it's so logical now I see your solution).
A few things you could take another look at are:
I hope this helps :)
