Skip to content
Submitted 6 months ago

QR code component solution using plain CSS and HTML

Martin Mička•20
@Mareddie
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 was able to write some CSS! As someone with very strong background in backend development, cloud and devops, this is a nice change of pace.

I would definitely write CSS in more scalable way next time. I was aiming for the best replication of the design, so if I wanted to scale the design a bit, I would need to improve the solution (e.g. less specificity for texts, etc.)

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

Reading design file was a bit of a hassle at first, reading Figma without DEV mode is clunky. I'm not gonna pay for Figma unless I actually use it for real project.

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

I think that further down the line, spacing, gaps and layout will be a tricky to do right without frustration.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Darkstar•1,440
    @DarkstarXDD

    Looks good. You have avoided lot of mistakes everyone does on this first challenge. Here are couple more improvements you can do.

    • The "Improve your front-end..." text can be the heading of the card. You can use a h1. In a real site this card would be placed in a page along with some other content, so it's unlikely the card heading would be the h1. It would probably be a h2 depending on the context. But in the given scenario you can use a h1 for it.
    • Use landmark elements in your page. There should always be a <main> element, wrapping the main content of the page. In this case your div with the class .container can be the <main>, instead of being a <div>. Some other landmark elements would be <header> and <footer>. Both are usually for content that repeats across multiple pages of the site. <header> usually contains the company logo and the navbar and is positioned at the very top of each page. <footer> is where the attribution stuff go and is positioned at the very bottom. So your attribution should actually be inside a <footer>. You can change the div with the class .attribution to be <footer>.
    • You can make the alt text bit more descriptive. Instead of just saying QR code, you can mention where the QR code leads to as well. I would use something like "QR code leads to frontendmentor.io".
    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