Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive QR code landing page using HTML and CSS

Uche Ofatu 260

@Macnelson9

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Firstly, I am most proud of my ability to pull it off. Lol, thinking about where I started a few weeks ago with zero knowledge of anything concerning frontend development, I must say that I am proud of myself.

Secondly, I would try the mobile first approach next time and wouldn't beat myself up too hard when I can't seem to get something working.

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

I encountered a challenge of moving the QR code component to the center of the screen for the mobile viewport, but I overcame it when I referred back to previous tutorials I had taken on the flexbox technique I used.

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

Basically, just making the codes a bit shorter and more pro-like, if that makes sense, lol.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi! Congrats with your first challenge =)

To make your code shorter you can get rid of the div wrappers and stylize h3, p and img directly.

Also you haven't apply text: wrap and cursor: default property cos it, well, default values =)

Oh, and when you replaced image from image folder you forgot to change path in the src attribute. That is why qr-code isn't loading.

Well, it's a good start, keep learning and doing cool stuff =)

Marked as helpful

0

Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I Thank you very much for your feedback. I still don't understand why the QR image isn't showing up. Can you please guide me further?

1
Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I Thank you very much. I got it sorted out.

1
Alex 3,130

@Alex-Archer-I

Posted

@Macnelson9

Oh, hey, glad you could figure it out. Well done =)

Feel free to ask, comment and stuff if you need =)

Marked as helpful

0
Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I Thank you so much. I got stuck with another challenge, I just shared my solution, could you go check it out please?

0
Alex 3,130

@Alex-Archer-I

Posted

@Macnelson9

I wrote comment to your another challenge. Hope that helps =) Ask, If I wrote something unclear =)

Marked as helpful

0
Rafael 10

@jagunceiro

Posted

The qr code isn't opening

0

Uche Ofatu 260

@Macnelson9

Posted

@jagunceiro Yes sir, I'm trying to figure that out sir.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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