quite similar to the design provided
What challenges did you encounter, and how did you overcome them?The biggest challenge was that the figma design didn't exist so I worked on it based on the existing design photos
Hi Rido,
Your solution looks good and I did see some things I could improve in my own solution.
One of the points in the challenge was to make sure visitors could go through the buttons with their keyboard. The focus that's on the buttons then (white outline) is different from your hover (lime green). Did you mean this to be different?
At the moment there is quite some styling in the html index file itself. I myself find it easier to put this in a seperate css file.
Hope this helps.
Regards, Ineke
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
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
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.
CSS is a big challenge for me. So any tips and advice for cleaner code would be amazing.
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 :)
