Skip to content
Submitted 3 months ago

QR-Code Component using HTML, CSS, and Vercel Deployment

accessibility
Abdelrahman Emara•10
@AAEmara
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm proud of using CSS Variables and using Semantic HTML, where I brokedown the design into different <div> tags, to control styling the different HTML elements. This helped me to overcome my fears.

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

I had a little challenge of putting the QR-Code component in the middle of the body element.

I managed to overcome this, by using Flexbox and the flex-direction property was set with the column value, and finally, applied the justify-content and align-items properties to be at center.

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

I would like to know if there was a better way to structure my HTML code, and if any header level would be used for the first sentence used in the QR-code component.

Also, I used CSS Variables and tried my best in styling the component, but I feel there always could be better. Are there any guides or rules to follow that I've missed in my approach to style the HTML elements? Could they be less verbose, if applicable?

Code

Please log in to post a comment

Log in

Community feedback

  • João Vitor•720
    @jvssvj

    Hi friend, great solution 👏. To improve your HTML you could use semantic tags. For example, in your card you could use a main tag, in the header-content div you could use a section and eliminate the header-rectangle div, since it is not necessary. In the attribution div you could use a footer, since it is the page footer. Another tip is not to use fixed width (in some cases) in this case, you could use a maximum width, for example:

    .component {
  width: 100%;
  max-width: 500px; //as needed
}

    This is for screens smaller than 375px. Use whenever necessary for your website to adjust to different screens.

    Marked as helpful

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