Skip to content
Submitted 6 months ago

Responsive QR code component with semantic HTML elements and flexbox

Ujjwal Srivastava•50
@Usri96
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 am happy that completed the design and made it somewhat responsive for the resolutions mentioned in the challenge

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

I faced the challenge in developing through mobile first approach, but with desktop resolution I made it.

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

I would like help in making screens responsive

Community feedback

  • Henna Singh•30
    @hennasinghPosted 6 months ago

    Great work on your first frontend mentor solution in the learning path. Good Points

    1. Semantic HTML
    2. Flex display on the body
    3. Same design as the challenge

    Improvements:

    1. Your ReadMe could be made more personal to you. Add your learnings and issues you faced and how you solved them.
    2. Responsive Design is achieved with media queries depending on the screen size or using flexbox layout model. In your code, you can wrap all vertical elements (image, heading, paragraph) in one div and give it a flexbox display with evenly spacing. Flexbox is really great in making websites responsive. The reading material as recommended by Frontend Mentor can help here https://web.dev/learn/design

    Happy Coding!

    Marked as helpful
    0
    Ujjwal Srivastava•50
    @Usri96Posted 6 months ago

    @hennasingh Thank you for taking the time to review my solution. I have started reading the suggested material in parallel. Hoping to get better with the challenges.

    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