Design comparison
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
- @danielmrz-devPosted 11 months ago
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 helpful1 - @dselimovic02Posted 11 months ago
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 helpful0 - @Islandstone89Posted 11 months ago
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 containerdiv
, 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 useinline-padding
in the CSS.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
Remove
max-width
onbody
. -
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
andheight
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. Adddisplay: block
andmax-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 around20rem
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@originalbossPosted 11 months ago@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@Islandstone89Posted 11 months ago@originalboss it's just a shorthand for
padding-left
andpadding-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 GitHubJoin 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