3-col-preview-card-component with flexbox

Looking at the html, I recommend

• changing the font links in the head to links not imports, and doing all fonts in one link. Google fonts gives you the links you need, including a preconnect one.
• fixing the formatting/indentation on html. That will become so important as you progress. It's hard to read at the moment because of elements starting and ending on the same lines in some places.
• changing all the buttons to anchor tags. 'learn more' implies it's taking you somewhere - navigation. So we have to use the element for navigation.

I hope that all makes sense

In css, I would

• definitely change font size to rem (never px)
• maybe use reusable classes on the buttons
• use mix-blend-mode screen on all buttons to create a cutout text effect to make them the color of their background instead. Then you could have the same hover effect for all too if you wanted, using something like opacity or just changing the background color.
• maybe start the desktop styles earlier

@grace-snow Thank you for your many tips! 🥰 Again so much to learn for me😅 What do you mean by "clear focus-visible styles"? The style guide said font-size: 15px. Would you recommend to change it to rem? Maybe 1rem because it equals 16px? Or 0.9rem? I will google mix-blend-mode screen and reusable classes 😉 Thank you! 🤩

@ellienndea yes always convert px to rem, especially with font sizes. You work it out by doing desired-font-size/16, so in this case it would be 0.9375rem.

If you use scss you have have a reusable function that takes in pixels and returns rem to the css, that's quite handy.

By clear focus-visible styles, I mean make it really obvious to keyboard users where focus is as you tab around the page. You can do this with :focus but that affects all focus, including clicks on buttons and inputs etc. There is a new css property that's worth implementing now called :focus-visible which allows you to styles the focus with keyboard differently, making it really obvious. Eg you might have

a:focus-visible {
   outline: solid 0.25rem orange;
   outline-offset: 0.25rem;
}

(or similar effect using box-shadow for curved buttons)

@grace-snow Thank you for the explanation and the tips! I changed it. 😊

@tediko Thank you so much for the tips and the explanation! 😀

@palgramming Thank you! I totally forgot the hover state 😲😬.

@ellienndea no problem so many things to watch for on these projects