Build a Responsive Grid CSS Website Layout From Scratch

In this video we will build a responsive Grid CSS layout using grid template areas. We will also be using other modern CSS features and techniques like css variables, rem units and flexbox.

CODE:

MY CSS GRID CRASH COURSE:

WES BOS COURSE:

💖 BECOME A PATRON: Show support & get perks!

VISIT MY WEBISTE: Check Out My Udemy Courses

FOLLOW TRAVERSY MEDIA:

[nickpaul]

Learning so much Brad. Thank you! I'm 70; When I did websites, <table> was king!

[andyyoung]

Can't Thank you enough. My skills are continuing to grow in part to the awesome content you tirelessly create for the community. Thanks again Brad!

[WorktrainingV]

I am 59, have just started learning code and love your teaching style. Teaching by building a beautiful webpage is great. CSS can be so overwhelming with its multitude of options so looking over your shoulder as you code a real webpage is a privilege. It is a far cry from lessons that produce aesthetically challenged product that you could not display on a website. They just focus on flooding one with CSS tricks. Instead, you built something cool in the process of teaching. I also like the very warm, calm and confident tone of voice which allows me to listen for long periods without feeling auditory fatigued. Your teaching style speaks volumes to me. Thank you for sharing this.

[minhdang]

Man everything you do, you make it seem so effortless. I always learn something new watching your videos. You're amazing and the level of skill I aspire to reach.

[marthin]

You are a Legend, love your work. You have given me so much free learning and your voice is relaxing. Thank you and have a wonderfull day.

[karenfinney]

Thank you Thank you Thank you!!!! I'm no expert but a keen learner. This tutorial has just pulled all of my limited knowledge together and it makes more sense now. I like to keep things as simple as possible for my own website.

[playfair]

Just finished and even took time to go back and read over code at separate intervals to ensure I understood how it all was working. I must be super visual, because following you helped me understand what was going on with the grid way more than all the reading I've done about it in the past. Been following you for a while, thanks for all the years of service and helping the community like you do.

[christinec]

Thank you so much. This is the easiest attempt I've ever had at a responsive website. I can't wait to go through some of your other videos. This was awesome.

[tommyzDad]

LOL: Brad says "it's not the prettiest thing in the world." Well, sir, compared to my "crayon drawing" website, your demo site is the bloody *Mona Lisa*.

[davidspeigle]

great tutorial - everything works in Oct 2019
- thanks again Brad

[mahtoosacks]

After being away from site building for almost 10 years, I was a little overwhelmed stepping back into it. You sir, made me feel like I had put on well-worn boots that slipped right on. I also learned an amazing new skill which was a major pain in the butt at the time that I stopped coding.

I remember having multiple stylesheets that all had to be linked in, with multiple versions of the site in order to work.

Thank you!

[JamesLewis-ejon]

This is EXACTLY what i've been looking for! I'm just starting out and I was having some difficulty properly understanding how to get the structure and the layout for my HTML & CSS... Your video has helped me immensely and I thank you! :)

[mrMinstrel]

Amazing dedication to teach us...thank's Brad!

[n_fan]

45:32 minutes of pure gold !!, i could not thank you enough bro :)

[diegofreire]

I just love Brad's content! I like the way you code and explain things. You make things easy to pick up. Thank you so much, Brad!

[johnlabuci]

thanks alot Brad.. i love the way you code, pause, explain what the code does n continue again.. very helping in understanding and appreciate it man

[Suilven]

Learn something new each time "Awesome"

[macaronivirus]

wow, i've just figured out how css grid works, thank you.

[roquerodriguez]

Nothing short of amazing. As a novice web dev, learning grid has really inspired me. Now to make that portfolio website I keep talking about! THANK YOU!

[rickloesch]

Love your videos, I too am in my 60's quit doing web design about 10 years ago because I had to
much trouble aligning things with floating them. You make learning Grids easy..THANK YOU