This is my solution to the QR code component coding challenge on Frontend Mentor.
The goal was to build a simple, responsive QR code component that matches the provided design. The challenge is focused on fundamental front-end skills, specifically HTML and CSS.
- HTML5 - For structuring the content, including the card, image, and text.
- CSS3 - For all styling, including layout, typography, and responsive design.
- Flexbox - Used for centering the card on the page.
I created a semantic HTML structure with:
- A single
<main>container to hold the entire card component. - Inside the main container, I used a
<div>element for the card itself. - Within the card div, I placed the
<img>tag for the QR code and a separate<div>for the text content. - The text content div contains an
<h1>for the heading and a<p>for the descriptive text.
- Mobile-first approach 📱
- Typography Imported and applied custom fonts
- Layout I used Flexbox on the element to perfectly center the card both horizontally and vertically on the page.
- Card Styling I applied a background color, border-radius, and box-shadow to the main card container to match the design.
- Spacing Used padding within the card div to create the correct spacing around the image and text.
-
Centering with Flexbox: This project was a great refresher on using Flexbox to easily center an element on the screen without complex positioning.
-
Basic Box Model: I reinforced my understanding of the CSS box model, specifically how padding, margin, and border-radius work together to style components.
-
Project Workflow: It was good practice to follow a clean workflow: setting up the HTML structure first, then moving on to basic styling, and finally refining the details to match the design.
- 🌐 Live Site URL: QR code component coding challenge