MENU

Fun & Interesting

Build a QR Code Component (Frontend Mentor)

Dave Cross 🇨🇦 211 2 months ago
Video Not Working? Fix It Now

"A perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet." Card layouts are used everywhere in modern web dev. In this video, we start establishing the pattern and use it in Frontend Mentor's _first_ UI challenge. No media queries, but we do plan for the future and leave the door open for responsive behaviour. Original Challenge & Starter Code: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H 00:00 - Intro 05:20 - Add the card markup 09:20 - Why use `picture`? 13:40 - Add some CSS tokens 25:25 - Add global styles 29:30 - Add composition styles 38:20 - Add block styles 47:00 - Wrapping up

Comment