General comment: all my advice is visual as I think you are an excellent coder already. Can’t wait to see your future projects!
In desktop-view your navigation is not centred vertically.
In mobile-view your pricing-items have no margin in the bottom. They sort of ‘stick’ together. Adjusting your code by 1 line fixes this:
grid-template-columns: 1fr 1fr;
//Lets add a grid-gap :) , 1 or 2 rem should do the trick.
That’s the nice thing with grid, you don’t need to rely on margins as much. You can use a grid-specific property. I haven’t tried it yet but I think it works or will work with FlexBox too.
SUPER WELL DONE [and thank you] on naming your HTML elements. It was a pleasure understanding what was what in seconds, I’d say you’re more strict than myself at times. Learned a thing or 2 from you
Small tip: try adding this to your HTML and tell me if you prefer how it looks. I’m originally a veeeery visually-orientated person so a clean font is beautiful vs the stock font serif fonts in browsers .
//Add a font! I think Chrome already has this inbuilt so no need to link anything. Or perhaps it's codepen that has the font, I've no clue.
font-family: 'Roboto', sans-serif;
- You’re quite far in terms of understanding your code I feel. In fact I’d say you are slightly further than myself in pure coding [I saw some JS which I started about 3 weeks ago].
So I think a good idea, unless it is not your cup of tea, would be to go over some UI principles. How can you communicate everything better visually? I found that question fascinating around 7 years ago so I went in that direction first.
I can’t draw to save my life so I always attempt making extremely minimal designs like I did with my product landing page.