Skip to content
Submitted 6 months ago

Responsive QR code landing page using HTML and CSS

Uche Ofatu•260
@Macnelson9
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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-IPosted 6 months ago

    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
    @Macnelson9Posted 6 months ago

    @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
    @Macnelson9Posted 6 months ago

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

    1
    Alex•3,130
    @Alex-Archer-IPosted 6 months ago

    @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
    @Macnelson9Posted 6 months ago

    @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-IPosted 6 months ago

    @Macnelson9

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

    Marked as helpful
    0
  • Rafael•10
    @jagunceiroPosted 6 months ago

    The qr code isn't opening

    0
    Uche Ofatu•260
    @Macnelson9Posted 6 months ago

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

    0

Please log in to post a comment

Log in with GitHub

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