@neildeo
Posted
This is a great piece of work which matches the design almost exactly, well done! Brilliant spot to notice that the bullet points in the Preparation section should be centred, and great job getting that to work, I did not notice that at all when doing the challenge myself.
There are some easy points to improve to get a better visual match: some of the font weights are too heavy (800 instead of 700; you actually defined variables for font weights but haven't used them!), and the h1 should be the darkest grey colour.
One other thing to maybe focus on in the future is making sure the design looks good at a range of sizes: while this solution is a near perfect match at the specified screen widths, it doesn't resize well for intermediate sizes (or sizes below 350px, which I think exist on some folding phones now?). One way to get around this is to set the container width to 100% for smaller screens using a media query, instead of specifying a pixel width.
Finally, I also got frustrated by the number 1 not matching the design. I think it's something to do with the font design at different weights but I could be wrong. In any case, I just made peace with it for this challenge. In the real world, if it bugged me enough I would just use a different font!
To conclude, again great job on the list (and table) styling, it's really clean and your code is nice as well. The semantics of the HTML are strong and the code is well organised. Keep it up!
Marked as helpful
