Skip to content
Submitted 7 months ago

Frontend Mentor QR Web Challenge Using HTML5 & CSS

Saifullah Shaukat•40
@saifullahshaukat
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?

I wanted to take a moment to express my heartfelt gratitude for creating such an incredible platform for aspiring frontend developers like myself. Your dedication to providing realistic coding challenges has truly been instrumental in helping me improve my skills and grow as a developer.

The challenges offered on Frontend Mentor have not only allowed me to apply theoretical knowledge in a practical setting but have also inspired creativity and problem-solving. The feedback and support from the community have been invaluable in my learning journey, fostering a sense of camaraderie and motivation.

I am continuously impressed by the quality of the challenges, the user-friendly interface, and the commitment to fostering an inclusive learning environment. Your platform has empowered countless developers worldwide to hone their craft and pursue their passions in web development.

Thank you once again for your vision, hard work, and dedication to the frontend development community. I am truly grateful for the opportunities Frontend Mentor provides and look forward to continued growth and learning with your platform.

Warm regards, Saifullah Shaukat

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

The part where viewport needed to be managed with device ratio, Yes I did overcome it.

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

This was first time posting a live site, I will forever keep you guys in prayers

Community feedback

  • Bernardo Poggioni•5,280
    @R3ygoskiPosted 7 months ago

    Hello @Saifullah104, congrats for your first project.

    A tip about your HTML structure, try never skip headings tag, like in your project you started with <h3>, this is a wrong approach, because it's can directly affect the page accessibility, I highly recommend to always use <h1> tag. If you want to see more about this, here's a link: W3School - Heading Levels.

    And to centralize your project, you can remove the padding from the body.

    And again, congrats, your project is very good, if something I said was unclear, please comment below and I will try to help in the best possible way.

    Marked as helpful
    0
  • lotusbomb•80
    @lotusbombPosted 7 months ago

    Welcome to the club! I, myself, is also trying to gain my feet back in coding. May consistency be our motto

    Marked as helpful
    0
  • Sivaprasath•2,520
    @sivaprasath2004Posted 7 months ago

    Hello i`ll wishing for your completion project solution.

    • I will give some suggestion i believe its used for improve your skill.
    • In CSS You will use
    h3 {
    padding: 30px 36px 22px;
}
    • I will recomand for Using rem values for padding provides a scalable and flexible approach, especially when considering accessibility and responsive design.
    h3 {
    padding: 2.5rem 3.2rem 2rem;//adjust the size 
}
    Marked as helpful
    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