Skip to content
Submitted over 1 year ago

Desktop Design QR Code

Abaso•120
@originalboss
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is there any feedback you can give me? How do you get the right font, I feel like the font does not look right? I'm still a little bit unsure about how vh works when it comes to sizing? Should I use vw when sizing the width? What challenge would you recommend next?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel 🛸•44,830
    @danielmrz-dev

    Hey, @originalboss!

    Congrats on your first project! It looks nice!

    Here's my feedback about your project:

    • You can place your card in the middle of the page by doing this:
    body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;    
}

    Also, in order to work correctly the font needs to be imported from Google Fonts. You can paste this on top of your CSS file:

    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

    I hope it helps!

    Other than that, great job!

    Marked as helpful
  • dselimovic02•220
    @dselimovic02

    vh and vw are abbreviations for viewport height and width which are units just like px(pixel). 1vh = 1% of your viewport height meaning if your vh is, for example, 100px, 1vh would be 1%. viewport is size of screen displaying the content. You can founf out more about units ini this w3schools lecture: https://www.w3schools.com/cssref/css_units.php

    Cheers!

    Marked as helpful
  • P
    Øystein Håberg•13,280
    @Islandstone89

    Hey, let's take a look at how we can improve this.

    HTML:

    • You need a <main>, this is important for accessibility. I would slightly simplify the structure: Remove the container div, and change .card into a <main>.

    • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

    • Headings should always be in order, so you never start with a <h3>. Change it into a <h1>.

    • Never use <br> to force a new text line. The text should flow naturally. If you want to limit the width of the text, you can use inline-padding in the CSS.

    CSS:

    • It's good practice to include a CSS Reset at the top.

    • Remove max-width on body.

    • I wouldn't use Grid here, so remove display: grid.

    • You are not using the correct font, no. You need to select it on Google Fonts, copy the code, and paste it into the <head> of the HTML.

    • It's not common to use viewport units for widths. Remove the width and height on the card. You can use viewport units for heights, as you will see shortly.

    • To center the card horizontally and vertically, use Flexbox on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;

    • Hence, you can remove margin: auto.

    • Remove width on the image. Add display: block and max-width: 100%, to prevent it from overflowing its container.

    • Remove margin on the image. To get space between the image and the edge of the card, use padding on the card itself.

    • Font-size must never be in px. Use rem instead.

    • Add a max-width of around 20rem on the card. This is to prevent it from getting too big on larger screens.

    • Since all the text should be center-aligned, you only need to set text-align: center on the body: Remove it elsewhere.

    As for what challenge to do next, check out this post by Grace Snow, one of the leading contributors here on Frontend Mentor.

    Good luck :)

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