バレンタイン 😈• 64,190
@VCarames
Posted
Hey @ArchieK9, great job on this project!
Some suggestions to improve you code:
-
For accessibility purposes, it’s best to use rem/em instead of px for your CSS property values.
-
To properly center your content to your page, add the following to you <body> element:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(30, 38%, 92%);
}
and delete the following from your .parent class:
.parent{
background-color: hsl(30, 38%, 92%);
display: flex;
justify-content: center;
align-items: center;
}
- To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…
It’ll look something like this:
:root {
--primary-color: value;
--secondary-color: value;
--tertiary-color: value;
}
And to use the variables you’ll use the var() function. So it’ll look like this.
h1 {
color: var(—primary-color);
}
Heres are some articles regarding CSS Variables.
You can also take a look at my projects and see how I use it.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://www.w3schools.com/css/css3_variables.asp
Happy Coding!
0
Achilike Justice• 250
@ArchieK9
Posted
@vcarames
Thank you very much for this
0
