hi there! ๐
a couple of things I packed up for you after looking at your code:
HTML:
- for SEO and accessibility manners all HTML files should contain an h1 tag (one and only one)
- header tags are not about
font-size
orfont-weight
(you modified the font size on the h2 tag anyway), but they supposed to give semantic meaning for the page, giving structure to the page (mostly this followed along with visual hierarchy asw)
CSS:
-
use relative units instead of pixels, it helps with responsive design, and also gives the chance for users with bad eyesight to increase the font size of the page.
-
your
.main__container
CSS selector doesn't do anything in the sense that you could apply all these to thebody
itself. -
don't apply fixed
width
orheight
to your elements, let their child elements determine these dimensions. if you really want to determine dimensions for your elements usemax-width
ormin-width
-
you used all these:
.main-container .info-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
but they can be replaced by a text-align
property and some padding. Flexbox and Grid are powerful tools indeed, but over-relying on them is not good either, sometimes you can just use padding and margin to do the same.
Hope this was helpful ๐
Good luck and happy coding! ๐ช
Marked as helpful
@IncorrigibleSpirit
Posted
@kodan96 Hi, Koda! Thank you so much for your feedback. I highly appreciate all the details and explanations you offer me. I will fix these little details ASAP. ๐
Happy coding!