Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

Design preview for the QR code component coding challenge html+css

Mateusz Kordyś•30
@Mateusz-wink
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hello I just started to check and improve my skills with frontendmentor.io. My first project is to build out QR code component and get it looking as close to the design as possible using only HTML + CSS. My questions are: -Will my project show up in center of page in both mobiles and PCs, because i didnt specify width for any of them. I just used some sort of margins, paddings and flexboxes. If not what should I change or i guess add to make it work as it was told in instruction. -What should I focus on, when starting such project? I started on creating divs, header, and paragraph and then adding styles using css, im newbie in that and would appreciate some advanced programmers opinions. Thanks!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • David•7,960
    @DavidMorgade
    Posted almost 3 years ago

    Hello Mateusz, welcome to the community and congrats on getting the first challenge done!

    Let me try to answer the questions the best I can:

    : -Will my project show up in center of page in both mobiles and PCs?

    Working on desktop but failing in mobile, this is caused by the way you centered it, try not to use position to center the main elements from your layout, instead of that you could have use flexbox on the body, you just need to set the min-height: 100vh of the body, so it takes the whole browser screen, then with flexbox center your component.

    If you want to get this done in your project, first of all remove position, top, left, margins, height and widths from your body, also the margin from your <div class='container'>.

    Then use flexbox in the body like this:

    body {
        font-family: "Outfit", sans-serif;
        background-color: hsl(212, 45%, 89%);
    
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    

    With this it will get centered in the screen for any type of syze!

    What should I focus on, when starting such project?

    Since you are starting out in CSS, just do it the way you are doing, create your html skeleton and then start adding styles trough classes, in the future you will find out that having some starting values as CSS variables for colors, sizes, weights will save you a lot of time, also having default values for your headings, paragraph, container... those are just utility class that you will just write on start because you are 100% sure that you are going to use them.

    Hope my feedback helps you, if you have any questions don't hesitate to ask!

    Marked as helpful
  • Shane Chaffe•900
    @Chaffexd
    Posted almost 3 years ago

    Hey Mateusz, a really good attempt at the challenge! Looks like you nailed it!

    I would recommend a few things to answer your questions:

    • Personally, I wouldn't style the body with hard coded widths in px, it's better to use em/rem measurements for responsiveness. This article overs it pretty well (it's a short read): https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

    • If you're concerned about something always being in the center, use flex! Flex is designed for positioning your divs. Instead of your margins, you could have just done: display: flex; justify-content: center; align-items: center; And then this way you've aligned items on the x and y axis without playing with margins.

    To answer your question, the position of your element will remain the same since you've added those margins but it isn't the best approach. If you've got 15 mins: https://www.youtube.com/watch?v=fYq5PXgSsbE&ab_channel=WebDevSimplified Web Dev Simplified covers topics like flex and grid really well!

    Look forward to seeing what you build next!

    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
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.

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