New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs
Add Google Fonts to your web design here: https://www.youtube.com/watch?v=N4e3XCD_E8E&lc=z234sxpyvmmlytcwb04t1aokgqn2ra244pkcbj1fp0rwrk0h00410
In this video I go over how I use CSS Grid to make responsive layouts. I show you how to take Sketch designs to create the layout structure. Then I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then make the grid in CSS. I use grid-template-columns and grid-template-rows to define the number and size of each element and then I use grid-template-areas to define each block of the design.
Once the web design is completed I show you how to make this design responsive by adding an ‘@ media’ and defining the columns, rows and areas for the mobile view. Finally I apply CSS styling to the font, colors and alignment to make the final polished design.
View the Code here: https://codepen.io/angeladelise/pen/YzXLdyq?editors=1010
In this video I show you:
0:16 – How to get started with a Sketch layout design
1:11 – How to add grid lines
1:22 – How to define the columns
1:51 – What is FR
2:03 – How to define the rows
3:17 – The HTML code
4:24 – Display Grid
4:50 – How to create the columns with CSS
5:26 – How to create the rows with CSS
7:09 – How to use grid template area
8:05 – How to write grid template area in CSS
10:16 – How to add a column and row gap
11:02 – How to make this design responsive
13:40 – Add CSS variables
14:34 – How to add font styling
15:26 – Overview of CSS Grid
What kind of tutorial would you like to see next? Let me know with a comment below!
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2…
—
Gear
Microphone – https://amzn.to/34bDTxH
Hard Drive – https://amzn.to/30m5E5M
—
Let’s Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
—
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
source
This is very very helpful! Thanks
Best video I've seen so far. Thank you!
Software used for design?
I tried it on my vs code but my page went blank i tried and nothing showed up after adding the grid areas I can’t see anything is all blank
childT If I had know it was that simple a long time ago. I learned more on YouTube in a few weeks then I did in college!
you're the best!
Great… You teach like an IT teacher…
Thanks
Hi Angelia, love your clear efficient style. Absolutely excellent.
This is a very nice video tbh
As you make website after zooming all the stuff get spoil you know about it if we zoom after making website using htm k and css
Plz reply and have me solution plz reply 🙏
thanks alot you helped very much
I made a few mistakes, but when I reviewed it one more time and saw that my code finally worked the way I wanted it to, I was very happy.
thanks so much
my responsive not working
Thank you, this is so helpful
First one capable of making a explanation simple enough so i can get it , thanks!
Your tutorials are so clear and concise. Thank you so much!
Today I watched more than 5 grid videos.. but your video only very clear and crispy. thanks for the video.
I'm in school now for full stack web developer and have to say thank you so much with how you explained everything. I was not so great with CSS, but this really gave me a better understanding how it works.
well instructed layout ,thanks for sharing your knowledge
Thank you 🙂
finally someone who really dealt with the problem in realistic way great video it really helped me a lot
Thanks very much!!!
Asmr👍
You are great!