Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 10 months ago

QR Code Component using HTML and CSS

pure-css, semantic-ui
Den Mark•50
@devmork
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

What I'm proud of is that I completed this project using only the knowledge I currently have without the help of AI. For my next challenge I will be careful in deciding what tags to use in order to have a readable and structured html code.

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

There's not much challenge I counter during making the project. I only forgot the tags and how to use them since I stop learning front end for a year. Before I take the challenge I did some reading in w3schools and watch tutorials in YouTube to refresh.

What specific areas of your project would you like help with?
  • Using flexbox property
  • Proper usage of flexbox property
  • Proper usage of html tags
Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grace•32,130
    @grace-snow
    Posted 10 months ago

    Hi, well done on getting this close to the design! However there are a few problems here and some general learning points to pick up. I hope this helps.

    • First minor HTML tips. When building out a single component demo like this try to think of it as you would in a real project, as if you're building it to be dropped into a real site. This is a card component. It would never be the main landmark or serve the main title (heading) of a page. That tells you too things: This needs to be a div/article/section inside the main landmark, probably with its own class for styling, and the heading should be a lower importance level like h2.
    • Also think through the alt text. What if this component is used multiple times on a page? "QR code" isn't descriptive enough as the img alt text. It needs to say what the image is (QR code) and where it goes (to FrontendMentor.io).
    • get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use. This has problems due to that missing reset (explained next).
    • The img must not have a width and height in css. All.it needs for the sizing is what's already included in the css reset : display: block; max-width: 100%;. In this case it would be good to give it an aspect-ratio property too so the browser knows to save the right space for it as it loads (good for performance).
    • This solution currently breaks at some screen sizes like small mobile landscape because you have limited the height of the body. Don't limit the height of any elements that contain text, including the body. Instead, give it a min-height: 100svh. Using min height instead of height there is an important distinction. You want to tell the browser to make the body at least as tall as the screen (not exactly as tall as the screen, which creates problems when that content can't fit into the height!).
    • The card should not have a width. Use max-width instead and make this in rem not px. You can optionally give it width 100% too but no explicit width. That's another important distinction. You want to tell the browser "don't let this go wider than the limit I've set, but let it go narrower if it needs to, like if it can't fit in the available width". And using rem is good there because it means the layout will scale correctly for all users including those who have a different text size setting in their browser or device.
    • it's very important to never set font size in px. Use rem instead. I've written a full post about why this matters.
    • this component should never hit the screen edges. Add a little spacing so that can't happen. The simplest way to do that here is probably just adding a little padding in px to the body.
    • Don't nest css selectors unnecessarily. All that does is increase css specificity, making it harder to maintain and harder to read. Use single class selectors wherever possible.
    Marked as helpful
  • Kostya D.•20
    @dvgldev
    Posted 10 months ago

    It seems to me that the box shadow is different from the one in the layout, but the work is excellent, there is nothing to complain about. Probably the author added his own twist ;)

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
Frontend Mentor logo

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.

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

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