Hello Saeed. Excellent work. Your code is well-organized and easy to follow. I pretty much used the same technique to center the main container.
Here are a couple of suggestions:
- Consider using CSS variables. I use them to store the design colors. Here's how I use them:
:root {
--color-green: hsl(75, 94%, 57%);
--color-grey-700: hsl(0, 0%, 20%);
--color-grey-800: hsl(0, 0%, 12%);
--color-grey-900: hsl(0, 0%, 8%);
}
.container {
background-color: var(--color-grey-900);
}
I know the syntax is weird but it's totally worth it.
-
Would you like to remove the vertical scroll bar? Try setting the
.main
container's height to95vh
and the attribution container to5vh
. This way your total page height becomes100vh
, instead of the current100vh
+footer-height. -
I would personally use a
p
tag for where it says "Front-end developer and avid reader." This line is a block-level element. Aspan
is more useful for situations where you want to style a portion of the paragraph (or maybe just a word) differently than the rest. -
Consider using Prettier. It's a fantastic plugin available in VS Code. It takes care of formatting your indentations, freeing you to concentrate on writing code. Try this video for a quick setup.