Submitted 24 days ago

QR Code

Snigdha Sukun• 10

@snigdha-sukun

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I’m proud of myself for creating and deploying my first live application. Although it’s a simple app, it was my first time doing this. I used online references to complete the solution, but next time, I plan to rely more on my own efforts. Throughout this process, I learned a lot about CSS and how to deploy using Vercel.

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

I encountered some difficulty while writing the CSS code, particularly in accurately positioning the QR element according to the design. I referred to a few CSS tutorial websites for syntax and values, and after some trial and error, I was able to get it right.

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

CSS techniques

Community feedback

Pirate• 170

@ima9gh

Posted 24 days ago

Hello there!

𝗖𝗼𝗻𝗴𝗿𝗮𝘁𝘂𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗼𝗻 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

𝗬𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗹𝗼𝗼𝗸𝘀 𝗴𝗿𝗲𝗮𝘁.

I have a suggestion to improve your challenge!

●To move the card to the center of the page, change the 𝗖𝗦𝗦 code:

body{ 
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; 
box-sizing: border-box;
}

●To correctly break the words in your 𝗤𝗿 𝗰𝗼𝗱𝗲:

𝘄𝗼𝗿𝗱-𝗯𝗿𝗲𝗮𝗸 can be used to break words and make texts more similar to the main challenge.

𝗜𝗳 𝘁𝗵𝗲𝘆 𝗮𝗿𝗲 𝗻𝗼𝘁 𝗯𝗿𝗼𝗸𝗲𝗻 𝗮𝘀 𝘆𝗼𝘂 𝘄𝗮𝗻𝘁, 𝗷𝘂𝘀𝘁 𝗿𝗲𝗱𝘂𝗰𝗲 𝘁𝗵𝗲 𝘄𝗶𝗱𝘁𝗵 𝗼𝗳 𝘁𝗵𝗮𝘁 𝗶𝘁𝗲𝗺!

Let me know if this comment was helpful.

𝗚𝗼𝗼𝗱 𝗹𝘂𝗰𝗸 𝗰𝗼𝗱𝗶𝗻𝗴!

Marked as helpful

Please log in to post a comment

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