Design comparison
Community feedback
- @MelvinAguilarPosted over 1 year ago
Hello π. Congratulation on successfully completing your first challenge π ! !
I have some recommendations regarding your code that I believe will be of great interest to you.
HTML π·οΈ:
- Use semantic elements such as
<main>
and<footer>
to improve accessibility and organization of your page.
Font π€:
-
The
<link>
that you're using to import the Google Font is not correct. To import a font, follow the steps below:-
Go to the font's page on Google Fonts: https://fonts.google.com/specimen/Outfit.
-
A sidebar will appear with a code snippet that you can use to import the font.
-
Copy this code snippet and paste it into the <head> section of your HTML document.
-
Now you can use the "Outfit" font in your CSS by specifying
font-family: 'Outfit', sans-serif;
.
The correct <ink> rule to import the "Outfit" font from Google Fonts with multiple weights would be:
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet" />
-
CSS π¨:
-
Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource π. -
To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here π.
Using flexbox layout:
body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
Using grid layout:
body { min-height: 100vh; display: grid; place-content: center; }
Also remove this:
.middle-container { /* margin-top: 100px; */ /* margin-bottom: auto; */ /* margin-left: auto; */ /* margin-right: auto; */ padding-bottom: 20px; /* height: 400px; */ . . . }
CSS Reset π:
-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0@kosiplamikPosted over 1 year ago@MelvinAguilar hi. thanks for the recommendation you give to me, its very important to my journey to be good at this. again, thank you very much
0 - Use semantic elements such as
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