Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Desktop Design QR Code

Abaso• 90

@originalboss

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the QR code component coding challenge

This is a solution for...

QR code component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

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?

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted

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

1
dselimovic02• 220

@dselimovic02

Posted

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

0
P
Øystein Håberg• 9,430

@Islandstone89

Posted

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 :)

2
Abaso• 90

@originalboss

Posted

@Islandstone89

I understood everything except for the inline-padding. I couldn't find a good example of how to use inline-padding on a paragraph.

1
P
Øystein Håberg• 9,430

@Islandstone89

Posted

@originalboss it's just a shorthand for padding-left and padding-right, as long as you are writing horizontally, which most people do in Western Europe atleast.

You can read more about it here.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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