This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This is a solution for QR code component based on the provided desktop design.
- semantic HTML5 markup
- CSS custom properties
- Flexbox
Image and Paragraph Alignment/Spacing Issue: The initial visual misalignment between the image and the text blocks due to the different widths of these blocks, even though I was trying to center them with Flexbox. Understanding that align-items: center; centers the blocks as a whole, not their internal content if the blocks have different widths, was key.
Setting width: 100%; on the image helped to fill all available space within the card (after padding), which significantly improved visual alignment with the text.
I plan to improve on these areas:
-
Responsive Design: use of media queries and fluid units
-
Deeper understanding of Flexbox: better understanding of already known properties
-
Figma: navigating tools, extracting infos for CSS etc.
-Josh W. Comeau:Interactive Guide To Flexbox
Frontend Mentor - @dinruz
GitHub- @dinruz