A perfect first challenge if you're new to HTML and CSS. The card layout doesn't change from mobile to desktop, so it's ideal if you haven't learned about building responsive layouts yet. The main challenge is to build out this QR code component and get it looking as close to the design as possible.

I don't have access to the Figma sketch so the design is not pixel perfect.

• Semantic HTML5 markup
• SASS for the CSS styles
• Use of gulp for compiling and minifying the html & css files and generate sourcemap files, I also added the prefixes for various browsers using postCSS
• Flexbox & Grid
• Desktop-first workflow

1. Figma - Paste your design image to check the size of containers, width, etc.
2. MDN - For revisiting topics on technical subjects in this case the use of grid CSS properties.

A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!