I don't have specific questions, any feedback on improvement is welcome.
I don't have any specific questions, but any suggestions to improving my solution are very welcome.
I would love to hear if there's another/better solution for the positioning of de blogpreview and the attribution at the bottom. I want the card vertically centered in the middle and the attribution at the bottom of the screen as longs as this would fit. If the blogpreview gets to big with a narrower screen only then the attribution should move further down so you would need to scroll down to see it just below the card. At the moment I fixed it with flexbox and height with clamp(). But I'm not really sure about it.
Any other feedback is also very welcome.
Any other feedback is also appreciated.
I completed this challenge quite some time before learningpaths, I already got some feedback.
Most proud of that I finished it quite quickly.
What challenges did you encounter, and how did you overcome them?The most challenging was to think about how to make the preview responsive, decide when to make the grid change to two columns.
What specific areas of your project would you like help with?I don't have specific questions, any feedback on improvement is welcome.
Hi Ademuyiwa,
I used grid with (first) 1 column. On a screen size of minimal 40rem I switch to 2 columns (first column is the image, secons column contains all content).
Hope this helps.
Regards, Ineke
Hi, Could it be that something went wrong with uploading your solution to github? It doesn't really look like the screenshot you uploaded and the responsiveness seems broken.
Kind regards, Ineke
Hi Opeoluwa,
Your solution looks visually really good and responsive. A few suggestions:
Hope you find this helpfull.
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 :)
