@Stroudy
Posted
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…
-
On your
.card
Change your max with to24 rem
for it to be more responsive, -
Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like
1.5
for flexibility. Avoid using fixed units likepx
or%
, as they don't adapt well to changes in font size or layout. -
Using
font-display: swap
in your@font-face
rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear. -
This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation),
<meta>
description tag missing that helps search engine determine what the page is about, Something like this<meta name="description" content="" />
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟