I like your sophisticated use of the CSS element>element selector here. You have used the features of grid and flex to their full potential, especially your use of grid-column: 1/-1 which is so snazzy👌 .
Here are a few suggested improvements for future reference:
It's great to see you added media queries for mobile responsiveness, to avoid repeating code you could just include the specific styling rules that you want to change at a different screen size.
You could be more consistent by using all hex codes or all rgba codes to select colours.
You use a mix of rem units and px units. I would suggest sticking to just rem almost always, the merits of which are outlined in this article from the precourse material.
In reference to line 94, using outline: none causes accessibility issues for keyboard users. This article explains why and gives suggestions on accessible alternatives if you don't like the look of the default browser focus outline.
Cool glow-in-the-dark theme - love it! 🌙 ✨
I like your sophisticated use of the CSS
element>element
selector here. You have used the features ofgrid
andflex
to their full potential, especially your use ofgrid-column: 1/-1
which is so snazzy👌 .Here are a few suggested improvements for future reference:
hex
codes or allrgba
codes to select colours.rem
units andpx
units. I would suggest sticking to justrem
almost always, the merits of which are outlined in this article from the precourse material.outline: none
causes accessibility issues for keyboard users. This article explains why and gives suggestions on accessible alternatives if you don't like the look of the default browser focus outline.