Mastering CSS Grid Model in 2021🔥 - Build 5 Layouts🎖️ || CSS 2021

Master the CSS Grid Model by Building 5 Responsive Layouts in 5 Levels🔥 across various screen sizes in 2021 🎖️

Interested To be a Professional Web Developer?
Then Subscribe today and Join my Gang! 😎 Because this Channel is All about Practical Web Dev projects following industry Best Practices 🎖️

Time Stamps -

0:00 - Intro
0:48 - Set-Up
4:37 - Level # 1
6:50 - Level # 2
11:22 - Level # 3
15:52 - Level # 4
19:39 - Level # 5

Have a Question or Project idea? Let me know about it in the comment box down below. 👇

Both Suggestions & Criticisms are Highly Appreciated ❤️

Follow me on:

Queries Solved -
1) How to Make CSS Grid 2021
2) How to make website Responsive
3) Media Query with CSS Grid
4) CSS Grid Tutorial
5) How Grid Template Areas work
6) Practice CSS Grid Layout
7) CSS Grid tutorial 2021
8) How CSS Grid works

#CSSGrid #GridLayout #ResponsiveLayout #breakpoint #js #webdev #screenlayout #gridtutorial #responsive #css #scss #javascript #cssjs #js #responsive #htmlcssjs #htmlcss #figmadesign #csstutorial #webdev #webdevtutorial #frontend #frontendtutorial

[mathis-meth]

Joy, if you really want to put anything out just because people are saying you must be regular, then make more content just like this video. Different patterns, more content. Really useful stuff. Responsive grid code can make our lives so much easier. Love this video so so much.

[agungaurelius]

Waoo...super genius man. This is what I am looking for. What I like the most of Indian programmers are they explain everything in more details. I love Indian. Warm regards from Indonesia❤

[ikechukwupeter]

Honestly, What I finally grasped was grid template areas. I appreciate man.

[earnstein]

Everyday I watch a video from Joy's channel and it's always worthwhile ❤️

[Shehryarkhan-do]

this guys is genius, get your subscriber

[burhansk]

Superb. Excellet way of multiple screen design.

[NahidAnam]

Glad to hear your voice man, it's been so long.

[srikargunnam]

Hey Joy, nice explanation, one small thing i want to add is that there is no need to write 12 times the characters, instead you can achieve the same in 2 to 4 characters in a row like below, check it out :)

@include query(tablet){
.container{
grid-template-areas:
"a a a"
"b b b"
"c d d"
"e f f";
}
}

@include query(mobile){
.container{
grid-template-areas:
"a a a"
"b b b"
"d d d"
"d d d"
"c c c"
"e e e"
"f f f";
}
}

[tsdineshjai]

Thank you Joy! except for the SCSS( coz i have no knowledge about it) I have understood perfectly.

[rlexplorer]

Please bro make sass full tutorial in one video

[muhammadali]

I watched flexbox and grid cheatsheet tutorial, your explanations are mind-blowing. don't know SASS. please, could you make a video about SASS?

[abhijitbarman]

👍👍Thanks bro ❤️❤️
I am already learning css layout.
Make more videos on css layout.

[olekrumian]

its so easy, when you talk about it, thanks

[shohelrana]

Very good tutorial concept. I love this.

[aelfar]

4:37 oh excuse me, I didn't realize we weren't already coding! XD

[annadoudement]

Thank you for your work, it's great! And many thanks for Figma file, it's very useful

[LicenceMiDz]

Oh can you do a tutorial how you make your amazing videos

[philip]

Can you do a tutorial on the SCSS media query setup, and any other useful scss/js tips

[LV-iibi]

the scss queries didn't work with my vscode and live server so i switched it to css

[dedekinc]

Thanks for the video, but the one i did is not responsive (mobile and tablet)....