@DarkstarXDD
Posted
Some HTML tips:
-
You need to have a
<main>element in your webpage. It’s a landmark element. -
In this project you can change your
qr-codefrom a<div>to a<main>and remove theqr-code-containerdiv. It’s not needed. -
You need to have a
h1in your webpage. Source -
In this project “Improve your front-end…” is a heading. You can use the
h1for it. “Scan the QR code…” is a<p>all right. -
You don’t have to create a
<div>for each<p>.<div>can be used to group some elements together. No need to create a<div>for each element.
The HTML structure would look something like this:
<body>
<main class="qr-code-container">
<img />
<div class="text-content">
<h1></h1>
<p></p>
</div>
</main>
</body>
Regarding your centering issue:
-
Don’t set a fixed width for the
body. body it self is ablockelement so it will have all the available width. So remove thewidth: 1440pxyou have set on the body. -
Set the
min-height: 100vhon the body. This makes sure the complete height of the screen is available for the body. vh stands for viewport height. Meaning, take 100% of the viewport height. -
Now the body has the complete width and height of the screen available for it. And since you have used flexbox, all the content on your webpage should be centered on the screen. (Make sure you remove the
position: relativeandtop: 80pxin your.qr-code class.) Your body should look like below.
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Importing google fonts:
- You have set
font-family: Outfitin your text but you haven’t imported the fonts. - You need to import the font from https://fonts.google.com/specimen/Outfit
- On that page scroll and select the needed font-weights you need for this project.
- Then on the right side you will see a code snippet. Copy and paste it in your HTML
<head>section. - Now you can use the font in your CSS.
- Make sure to add a fallback font to it. Like this.
font-family: "Outfit", sans-serif;So if the "outfit" font is not available a default sans serif font will be used.
Couple other things:
-
Don’t use the
widthandheightproperties on the container. -
They set fixed widths and heights on the container, removing the containers ability to dynamically resize.
-
Instead let the content inside the container decide the size of the container.
-
But specify a
max-widthproperty so the container won’t get too large on really big screens or if you simply want to control the final size of the container.
Add these 3 lines to the top of your CSS file:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
*means select all elements. So the properties specified in here will be applied to all the elements in your webpage. This is also called a CSS Reset. You can google more about it.- This will remove any default
paddingormarginapplied by the browser. After doing this you can removemargin: 0on your body. box-sizing: border-boxmakes sure the width and height of your elements include the border and padding sizes too.
Not sure how i explained things is clear or not. Please do ask if anything was unclear, ill explain if i know about it or someone with more experience can help.
Marked as helpful
@jayann284
Posted
@DarkstarXDD Thanks for the advice!! Looking forward to implement it to future projects.
