CSS Grid Tutorial #9 - Grid Areas

Hey gang, in this CSS grid tutorial I want to show you how we can create a grid-like structure using grid areas and the grid-template-areas property.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
Other tutorials:

----- HTML FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

============== The Net Ninja =====================

================== Social Links ==================

[HaBhBo]

this blew my mind, it's so simple and easy.
css grid is life.

[gregjerry]

Nothing made me front end work than dealing with CSS layouts, but you've made grid look easy, Kudos Bro

[junotrazakarison]

If you notice, you mispelled the grid-template-columns: repeat(4, 1fr). Instead of grid, you wrote gird on this video Grid Areas. However, the desired results were met and that is freaking awesome and amazing. You saved lots of people right here.

[AlexBooster]

Wait!... He misspelled grid as "gird" and it still worked?
Now, that's awesome! :)

[antchamberlin]

Your tutorials are out of this world, best I've seen on YouTube. Big thanks!

[farhan-app]

Watching this towards the end of 2018. This series is priceless. I've learned so much and I'm not even finished yet.

[nicholaskent]

This is the best invention since the wheel, and you are the best damn teacher.

[leoqiao]

I can't believe what I just watched... That is just insane...

[digiexploration]

re gird

As someone mentioned, you don't need that line. What I would guess is that once he added the "header header header header " it assumed the 4 columns. Notice that when he first added the "gird" line and refreshed, it didn't show 4 columns. ;)

[robingather]

The devs who made this are heros. You're one too.

[JudWhite]

Love it man! I'm guilty of rarely taking the time to thumbs up videos or comment but you killed it here. I was like 'if he doesn't show CSS Grid areas with media queries he's f'ing dead to me' then BOOM next video, perfect wrap! No time wasted and all real practical stuff.

Every single 'frikkin' awesome' was felt and totally deserved. Remember clearfixes? Remember calculating widths in JS? Remember how feasible it was to have two totally different markups for desktop and mobile? I know I'm 2 years late but seriously, compared to the lineage and promises of semantic markup vs. styling we've been promised over the years: tables, floats, flexbox, and JS tramposos (contributing back for some of the (presumably?) British idioms you taught me) this is GAME CHANGER and it's not an exaggeration even in 2020.

I go to other channels to get my feet wet then come over here to refine (both styles have their place, I think). I feel like there's enormous pressure for some content creators to do what's hot, learn it at a surface level, then do a half-assed course and try to be first to upload. Every educator learns when they put together material, but it's evident you'd already had some real experience or done more than your fair share of playing around. As long as the tech remains viable your videos will be timeless. Thanks for that.

Loved your Flutter course too, better than anything on Udemy I've seen; Google's is good, but everyone has a pace and style they like. I'll revisit it again when it's time to do a mobile app. It's hard to ignore the momentum behind React Native but I do believe Flutter will at least land in the ranks of viable tech for creating native mobile apps, though I have much higher hopes for it.

I just enrolled in your Modern JS course on Udemy for Business, looking to sharpen some skills.

One question: Would you consider the React web course still relevant for a beginner? I know they do or used to change at breakneck speed. My buddy wrote a book on React years ago and by the time it was on the shelves it very sadly wasn't worth the paper it was printed on. This was around the time they switched to semver versioning. Regarding your React course, I suppose this will be evident as I run through the first bits.

I've gone longer than expected, might as well wrap with a small snippet about myself: I started working full-time in 2000 doing development (more-or-less it was all just called 'development' those days); dabbled in frontend tech here and there but the browser inconsistencies of the time, and even up until very recently if you had to support older version of IE, felt like a pile of trivia and heuristics I didn't want to accumulate and I mostly stayed on the backend, and have made a really good career out of it despite it being a bit of a specialty these days. With the state of things and knowing my own tolerance level for useless trivia regarding the browser and even tech stacks/frameworks that go in and out of vogue (I do have some tolerance for change, but frontend is completely insane at times), I feel like for myself this is the right time to get into it at a serious level and tap into that missing piece.

In a nutshell, bloody cheers, mate. Thanks again.

[seanymiller]

I didn't see the point of grid-area until this tutorial. Great job!

[Shakeel]

Amazing tutorial series for newbies learning CSSGrid

[frixaco]

OMG! Finally I can forget my nightmares with floats!!! Thank you so much!!

[justinrodrigotrajano]

Wow! That was amazing! My front-end ninja skills just increased by a lot of points. Thanks for being a good teacher!

[akmalmaulanaazzam]

man...this courses you`ve make is really awesome, short and to the point

[RameenFallschirmjager]

When I watch a video from your channel, I become an automaton! Because instantly I smash the like button!

[ezgie]

Thank you! i've watched quite a few tutorials on css grid and this made it all click finally!

[lesterjohnson]

Great!!! OCD issues: I miss the karate guy in the intro..

[Loppy]

This is amazing, I never knew CSS could be so cool!