Submitted 4 months ago

QR Code Component

Jonathan Peters•230

@QMS85

A solution to the QR code component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Im proud that i took the time to work through the project, step by step

What challenges did you encounter, and how did you overcome them?

The challenges i faced were: Centering the code component, making the image responsive, balancing the typography, creating subte shadow effects, mobile responsiveness, so he component adjusts to different screen sizes

What specific areas of your project would you like help with?

Honestly, i think i need to take more time out to practise CSS, as some of the stuff, im familiar with, but this project has made me realise that i need to take some time out just to code, in this case CSS

Code

Please log in to post a comment

Community feedback

Marzia Jalili•9,670
@MarziaJalili
Posted 4 months ago
Hats off to your project!

Some tips to keep in mind in your next projects:
- First, for centering the card, you could go with grid instead of flex since it's much more simple.
Updated it to:
```
/* current code */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

/* updated code */
display: grid;
place-items: center;
```
- Second, void using px units for font-size as it happens to cause some issues. Instead, use rem or em units to make the web more responsive.
- The color of the heading is a darker one, bro. You can find the exact code of the colors in the style-guide.md file provided by the challenge.
- Lastly, in your next projects, considering filing all the images in one folder for a cleaner repo.
Have fun building up masterpieces!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord