This project was a lot of fun but really hard for me who isn’t very gifted when it comes to the design side of things.
So far it only displays as it should on larger screens. I can’t seem to figure out how to fit everything neatly when viewing on mobile.
Wow looks awesome! I am working on the same project right now.
Looking pretty slick!
If you want to better understand using CSS Grid in a responsive fashion you should check out:
This should give you plenty to chew on with CSS Grid. Best of luck!
And don’t sell your design skills too short, you made a solid and attractive layout.
Wow thanks. I’ll check them out now.
I feel like grid has made things much easier but I still really don’t understand how to use it. Like when I would use grid-columns / grid-rows instead of grid-areas. Grid-template-areas just seems eliminate the need for the other 2, although I’m sure I’m wrong about that.
When you define
grid-area these are directly equivalent. Except one is very human readable the other is still explicit to a fault.
grid-template-… are a way to have grid have some Flexbox like features while still being grid.
You would not want to mix them much but they each have roles to play. And these features play nice with flexbox, so it’s not an either/or but “which best solves the issue” question.
Using CSS grid for page layout is kinda like using Excel to format a letter, it works and produces some amazing results, but you do need to think through it that little bit more.
Wow man! great job!
I would suggest that the
contact links be fixed at the top of the page. For the email input, add
for = "email" inside of the input tag.