Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

Qr component challenge

Cesar D.•400
@ThatDevDiaz
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I came across a few challenges when creating this.

The images and text within the container are occupying the entire flex box. Every time I tried creating another flex box for the container to be in, it would mess everything up. the reason for doing this is so I can create the gaps between the image/text and the outer border.

Another challenge I faced was making the image stay a static size. It grows with the page so when I coded the original flex box it looked as intended until re-sizing the screen. It's way bigger than originally designed and I can't figure out how to keep it a static size without messing up all the content within the flexbox.

I tried getting the live site via GitHub desktop but the image would not upload in GitHub. Every time I tried adding the image it seems that the img would not actually import into the html even though I've added it to the repository. Maybe it's a directory issue and I didn't add a full directory for the image? Not sure.

Any advice on the code or better practice adjustments would be greatly appreciated.

*Edit

After receiving feedback from a community member, I was able to apply new found knowledge and techniques to get my project to further resemble the original design. This was a great learning experience and I feel like I understand flex box a lot better. This also helped me dive a little bit further into using Github properly and linking things within Github's repository.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • p1ktas•30
    @p1ktas
    Posted over 2 years ago

    Hey! I've just finished this challenge myself and can help you a bit. In my newbie eyes your HTML is okay-ish, you can fix it by:

    • Adding a ">" symbol at the of end of style.css link;
    • Adding QR image to your qr-code directory and linking to your html by using "./" like so: <img src="./image-qr-code.png" alt="QR code">, dont forget to add "alt" info!.
    • I also recommend using <h1> instead of <h2>, as every page should have an <h1> tag.

    As for CSS, this should help you get a better grasp:

    • Keep your html {} and body {} properties intact, they're ok, everything going down should probably be written from scratch. Also, read into it style-guide.md carefully a few times and fulfill all given tasks!
    • Import a given font, apply it globally.
    • Make your .container {} a flex-container and set it's width. I prefer using rem or px.This should fix your image resizing with the page and place it neatly inside your .container {}.
    • Make your flex-items stack from top to bottom! Read more about it here.
    • Add backround-color, border-radius and padding on all sides to your .container {}.
    • Make all the other needed changes as you go.

    This should point you into the right direction and hopefully, help you finish your project! :)

    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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub