CSS Grid - Ultimate MasterClass | Sigma Web Development Course - Tutorial #39
HTML-код
- Опубликовано: 6 июн 2024
- Access the Sigma web development course playlist: • Sigma Web Development ...
➡️ Source Code: github.com/CodeWithHarry/Sigm...
➡️ Notes and CheatSheets: www.codewithharry.com/notes/
➡️ English Subtitles are now up for all the videos!
TimeStamps ⌚:
00:00 - Introduction
00:36 - Sigma Intro
00:48 - Why CSS Grid?
02:18 - grid-template-columns property
04:24 - Grid Line and Grid Cell
05:01 - Grid Track and Grid Area
09:43 - grid-row and grid-column properties
13:10 - Naming Grid lines
16:38 - Grid Template Area
22:27 - fr Unit
24:01 - Gap Property
25:25 - align-items & justify-items
27:35 - repeat syntax
29:05 - justify-content & align-content
31:49 - Sigma Outro
►Checkout my English channel here: / @programmingwithharry
►Instagram: codewithharry
Download UltraEdit Trial for Free: bit.ly/UltraEdit-CWH
python, C, C++, Java, JavaScript and Other Cheatsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python Course with 5 Projects: • Python Crash Course in...
Python[15 Hr]: • Python Tutorial For Be...
Python Advance[3.5 Hr]: • Python Programming Cou...
Python[1 Hr]: • Learn Python In Hindi ...
Python[2 Hr]: • Python Tutorial In Hin...
Python[15 Min]: • 15 Minute Python Tutor...
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr]: • Learn Php In One Video...
php[2.3 Hr]: • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min]: • HTML 5 Tutorial For Be...
CSS[8.5 Hr]: • CSS Tutorial In Hindi ...
CSS[1.4 Hr]: • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr]: • How To Make a WordPres...
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial ...
MongoDB[2 Hr]: • MongoDb Tutorial For B...
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr]: • Linux Tutorial For Beg...
JQuery[1.1 Hr]: • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr]: • Git & GitHub Tutorial ...
►Complete course [playlist]:
React: • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java: • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Python Django: • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo: • Data Structures and Al...
Follow Me On Social Media
►Website (created using Django Rest & Angular): www.codewithharry.com
►Facebook: / codewithharry
►Instagram: / codewithharry
Twitter: / codewithharry
Comment "#HarryBhai" if you read this 😉😉
I tried to create the best CSS grid resource out there and it took real hard work to create all those images, animations and analogies . Hope this video will teach CSS grid to millions of students for free 💝
Source code and english subtitles are now up for all the videos #SigmaBatchOP
Love you sir, this is very amazing course. I never touched CSS but after taking this course, in this time I am really able to create wonderful websites. Thank you sir for this new sigma series and the 100 days of Python.
Bro Ap Se Question Pochna Ta Ke Agar Ham Sirf Python Ko Pro Level Tak Sekh Le To Hame Other Languages Ko Sikhna Ke Zarorat hai Ya Nahi.
And Wo Konsa Kam Hai Jo Python Se Nahi Ho Sakta Jis Me Other Languages Ke Need Hoge Hame.
Please Reply 🙏🙏🙏
Sigma Batch Op....
Thanks Bhai for everything....❤❤❤
js kab start kr rahay hooo
#SigmaBatchOp
Really it is one of the most difficult topics in css but you have made it so easy....i understood it just because of you sir...thanks a ton!!!
pura video to dekhlo
jaat
i can not do it
Assalam O Aliakum. I am from pakistan. I am taking the Sigma web devlopment course. Truly speaking i always felt scared from the topics of grid and flex box but today from this course all the topics are clear. I request to continue this course it was helping me alot to bulit my strong concepts. Thanks
world cup sai to bhar ho gaya
un pa chr
@@noxknock2740
@@noxknock2740Bhai video Dekh Aur ja Tu Idher larne Aya hai? ajeeb log
Don't worry. Harry Bhai humein ek web developer zroor Bnaien
Gai. Sare log reply mein likho Brober
Waalikum us Salam
Mere ko to bada maza araha hai is series mei abhi tak all clear hai❤. Ab to web dev master krke rahunga bhale kuch bhi hojaye ❤. Thank you Harry bhai 🎉
Seriously harry bhai mai apse bor nhi hota u r soo sweet and good teacher inthe world thank so much Allah apko sahat de
thank you sir i am naqib ullah from pakistan and recently I started django from your channel it's usefull and I able to make websites after watching 30 videos. thank you sir
CSS grid is hard but the teacher explained vary well. I haily recomend this awesome Ultimate MasterClass to every one. Love you #HarryBhaiya #SigmaBatchOP
Best Css playlist on RUclips
Oh man, This Web Develoment course is fabulous and also what your energy are. word falls short to spoke about this course. This free course is very much valuable more than any premium course with its high quality.
This is the best tutorial anyone can get to learn CSS grid. 😄
Blessed to have this course, better than any paid courses available. Thank you so much. 🙏#SigmaBatchOp 😇
Help Me 😭😭🙏🙏🙏
I encountered an issue while trying to install Kali Linux on my HP G8 notebook. Here's what happened:
1. I created a bootable USB drive for the installation.
2. During the installation process, I mistakenly selected what I believe was the C drive (which contains Windows) as the installation target.
3. After completing the installation, I noticed that only the command-line interface of Kali was available, and the graphical interface was missing.
4. Later, when I attempted to boot into Windows using the Grub bootloader, I encountered an error that prompted me to perform an automatic repair and troubleshoot.
5. In an attempt to fix this issue, I entered some commands in the command-line interface, including "choose disk," "list disk," "clear," "format," and "fs quick" commands, repeating some of them.
6. Unfortunately, this led to a new problem: I received an error message that said, "boot device not found, please install an operating system on your hard disk."
7. As a result of this error, I'm now unable to boot from the USB drive or access my operating systems.
I'd appreciate any guidance or solutions to address these issues.
Ek dusre se connection bana ke rakho taki ek dusre ki help kar sako....?
connection ke chakkr m uski lena chata h naa @@SUDHIRKUMAR-id8vy
Bhaii bahot hii acchese explain kiya hai yeh topic
Grid1 ko samajne keliye time laga maine 3 times video dekha till grid 1 in start
Grid 2 was easy
Aur finally abhi pura CSS grid ka concept samaj gaya
#sigmabatchop🔥🔥
I am very excited for this course and Sigma batch is OP❤
Best mentor ever
thanks haris bhai you're doing great work for the students
How much effort you are giving!😮😮😮 to clarify our concepts on every topic of CSS just mind blowing.love you Harry sir ❤❤❤
Grid-template-areas not working in chrome and edg can u tell me which browser you are using ?
Hello Harry bhai I started the course today. Thanks for such detail course.
Knew grid before but came to know about number of different properties by watching your video🤟🤟
I'm grateful for the time and energy you've invested in creating this MasterClass. Your commitment to helping others succeed in web development shines through, and it's students like us who benefit greatly from your expertise. Thank you for sharing your knowledge and making the learning process both enjoyable and rewarding. Here's to mastering CSS Grid and creating amazing web layouts, all thanks to your outstanding guidance! 🌟🚀 #SigmaBatchOp #CSSGridMastery #SigmaWebDevelopment #SkillBuilding #StayCommitted
Sigmabatchop bhaiya ji❤❤❤ puri video dekhne bad bol rha hu jo bhi ish batch ko follow kar rhe h vo bhut ache web developer bnege
😁mast,,,poora web development seekhunga.... sukriya harry bhai...😁
One Of The Best CSS Grid - Ultimate MasterClass #SigmaBatchOP#SigmaBatchOP 👍🏻👍🏻 Sigma Web Development Course harry bhai dil khush kar diya Css grid concept clear
Now I finally understand css grid😊 thanks Harry bhai
Hi harry bhai i watch your videos when you have 500k sub you are best teacher thank you for teaching us.
Sigma web development course of harry bhai is OP🔥🔥
i love your way of teaching ...lots of respect for your efforts and for you😊😊
are aunty aap bhi web dev sikh rhi h
but harry bhai ki dekhne k baad kabhi bhulu ga hi nhi itna easy way mai sikhaya bhai nai "HARRY BHAI K AAGE KOI TIK SKTA HAI KYA HARRY BHAI ROCKING"
What an explanation harry bhai you just got a new subscriber
Harry bhai op ❤ ......
Topic chahe koi bhi ho harry bhai ka tutorial sb me best h .....🎉❤
This is the best resources for free .
More than 70 percent students learn frm ur vdos .....
❤❤❤❤❤❤❤❤❤❤❤
Thank you so much for ur such contribution
bhai bol dia
Amazing videos thank you for giving us this course for free
harry bhya iss video ko dekhne ke bad aisha lag rha hai ki puri css ek trf grid ek taraf
this video is awesome sir, thankyou very much for your efforts. It means a lot, really 😎
Crystal Clear Explanation Harry bhai
#sigmabatchop
Harry bro..I don't know how to say about your style of teaching through words.like its a feeling!!
You are one of the best teacher I have ever seen in my life.
The hardwork you take for creating this tutorial is awesome..
Very eagerly waiting for your next video
❤️❤️❤️❤️❤️
Help Me 😭😭🙏🙏🙏
I encountered an issue while trying to install Kali Linux on my HP G8 notebook. Here's what happened:
1. I created a bootable USB drive for the installation.
2. During the installation process, I mistakenly selected what I believe was the C drive (which contains Windows) as the installation target.
3. After completing the installation, I noticed that only the command-line interface of Kali was available, and the graphical interface was missing.
4. Later, when I attempted to boot into Windows using the Grub bootloader, I encountered an error that prompted me to perform an automatic repair and troubleshoot.
5. In an attempt to fix this issue, I entered some commands in the command-line interface, including "choose disk," "list disk," "clear," "format," and "fs quick" commands, repeating some of them.
6. Unfortunately, this led to a new problem: I received an error message that said, "boot device not found, please install an operating system on your hard disk."
7. As a result of this error, I'm now unable to boot from the USB drive or access my operating systems.
I'd appreciate any guidance or solutions to address these issues.
Help Me 😭😭🙏🙏🙏
I encountered an issue while trying to install Kali Linux on my HP G8 notebook. Here's what happened:
1. I created a bootable USB drive for the installation.
2. During the installation process, I mistakenly selected what I believe was the C drive (which contains Windows) as the installation target.
3. After completing the installation, I noticed that only the command-line interface of Kali was available, and the graphical interface was missing.
4. Later, when I attempted to boot into Windows using the Grub bootloader, I encountered an error that prompted me to perform an automatic repair and troubleshoot.
5. In an attempt to fix this issue, I entered some commands in the command-line interface, including "choose disk," "list disk," "clear," "format," and "fs quick" commands, repeating some of them.
6. Unfortunately, this led to a new problem: I received an error message that said, "boot device not found, please install an operating system on your hard disk."
7. As a result of this error, I'm now unable to boot from the USB drive or access my operating systems.
I'd appreciate any guidance or solutions to address these issues.
IT'S really very high level content, which cannot be found anywhere.....your teaching is awesome sir....❤#sigmaBatchop
Ab tu 1 video 2 baar deikhni par rhi
By the way love you harry bhaii❤❤
Sigma WebD batch sbse OP🤟👍
Harry bhai hai to moomkin hai🙂
best course ..beats all the paid and free courses
Our Super hero One of the best Harry Bhai👑
Bhai aaj he video sikhne me mera pura din nikal gaya 😅😅 bhai bahot tuff course hai mera nasib ki muje free me itna achha course mila ❤❤❤
#sigmabatchOP
bro this topic was very hard
We really appreciate the kind of efforts you are putting in for us for making it easy which is amazing. Thanks a lot for remain so kind in this course harry bhai #SigmaBatchOp Love you🌹❣
Harry bhaiya generally people think that paid courses offer more but you are going to prove it false. After some time people would realize the value of this content and then your each video would have views in millions. 😊😊😊💝💖💝💖💝💖💝💖
Amazing video. 👏 Thank you for making such a great video.❤
pura video to dekhlo
Best free course!🥰
Here Knowledge overloading concept arises bt nice explanation bro...🎉🎉🤩🤩
finally after exploring many videos i understood css grid thank you harry sir for such wonderful video
Css grid to sbse touff wala topic he pr Harry bhai ne achese smajaya
I will become the best Web developer like Harry Bhai. After the sigma development express course.
#SIGMA BATCH OP
sigma batch op thanks for providing best cource for free❤❤
best lecture on css grid ...love from Pakistan
sir your teaching is awesome
The best explanation ever
best explanation of CSS Grid on the internet, looks so easy to learn it from you, thank you harry sir
Grid- template- areas not working in edg and chrome . So what can i do ?
Can you tell me which browser are you using ?
@@editingzone.1393 incognito browser
Harry bhai on the Top
Note : Grid can be used for responsiveness .
By the way , very enhanced quality + content + clearance + concept understanding far better than the last web dev course . I am thats why watching again #SigmaBatchOp
Help Me 😭😭🙏🙏🙏
I encountered an issue while trying to install Kali Linux on my HP G8 notebook. Here's what happened:
1. I created a bootable USB drive for the installation.
2. During the installation process, I mistakenly selected what I believe was the C drive (which contains Windows) as the installation target.
3. After completing the installation, I noticed that only the command-line interface of Kali was available, and the graphical interface was missing.
4. Later, when I attempted to boot into Windows using the Grub bootloader, I encountered an error that prompted me to perform an automatic repair and troubleshoot.
5. In an attempt to fix this issue, I entered some commands in the command-line interface, including "choose disk," "list disk," "clear," "format," and "fs quick" commands, repeating some of them.
6. Unfortunately, this led to a new problem: I received an error message that said, "boot device not found, please install an operating system on your hard disk."
7. As a result of this error, I'm now unable to boot from the USB drive or access my operating systems.
I'd appreciate any guidance or solutions to address these issues.
I was really struggling on the " justify-content " and " justify-items " from a long time.
Dude you're awesome. Thanks brother for the course.
#100daysofcode
#sigmawebdevelopment
#sigmabatchop
Harry Bhai has raised the bar like anything
Sigma Batch OP ! THE BAR IS RAISING UP !
Harry bhi on the fire #SigmaBatchOp 🔥❤
Let's begin day 39 😍
Please make a complex web-page using CSS Grid... It will be very helpful for more clarity...
SIGMA BATCH OP! Best course!!!💕
mujhe dusra treeqa area k zariye target krna Zaida ahha laga hai. Zaida onvenient and asan hai.
Tutorial 39 done. ✅
SIGMA BATCH OP!
crystal clear harry sir . the best course ever #sigmabatchop
Thanks for providing this amazing course #sigma batch op
jaise jaise series bdh rhi complexity bdhti ja rhi 🙃🙃🙃
Hnnn
@amisharaj123 yrr agr tere job lag jye to mere bhi lag vadio
Hnn yrr too much difficult 😢
Ek dusre se connection bana ke rakho taki ek dusre ki help kar sako....?
@@SUDHIRKUMAR-id8vy shi baat hai bro apne Instagram I'd send krna
You are great 👍👍 Harry bhai❤❤
#SigmaBatchOP Thanks Harry Bhaiya for all your Hard Work to provide such quality content. ❤
great vedio bhaiya 👍❤
maja saa hi aaagya bhiya aapka is grid ko complete kar ke
Proudly, student of #sigmawebdev ❤ catching up soon
6 November 2023 2:34 PM, Yes I'm doing this beautiful course regularly #SigmaBatchOP
Thank you so much harry bhai for this course 🔥🔥🔥🔥 #SigmaBatchOp
#SigmaBatchOP Well done hamare coding ke jeetu bhaiya🥰🥰. & Thanks a lot....
Hats off to you Harry Bahi you taught us grid really well #SigmaBatchOP ❤
best coding chhanel
this topic is feels slightly difficult but i will understand dcoz you will make it easy thankyou harry bhai
#sigmabatchop
harry bahi itne acche se samaz nahi aaya par 2-3 baar dekhe ne se aa jayea ga
me bhi ak video bar bar dekha hu alag alag logo ka
Sigma Batch OP One of the best Batch Ever
#SigmaBatchOp ..this is the best course..learning a lot from this❤🇵🇰
Love you, Harry Bhai ❤
You are a genius 💪
#SigmaBatchOP
op harry bhai
grid bhaut shi smjh aagya
Thanx #HarryBhai for a thorough and clear explanation of CSS grid. #SigmaBatchOP
Sigma batch op ❤
Hats off to you man 💪
best video on grid
As soon as match over ❤
Sigma batch OP
Harry Bhai opiest
😮 CSS Grid done ✅
Complex concepts explained in a really simple way
Thank you Harry Bhai 🙏
#SigmaBatchOP 🔥
1st View Harry Bro❤ Love You From Bangladesh 🥰
Best video On Grid i have seen till now #SigmaBatchOP
As Always Sigma Batch OP ❤
The outro section refreshed me once again to move further to your lecture #sigmaBatchop
thnx bhaiya :)
completed on 6/3/24
Sach btau to I was waiting ❤❤
thank you so much for clearing my grid
#SigmaBatchOP
Love You Harry Bhai Your course is changing our life thanks you for lauching this course I Love you Harry Bhai May God Bless You❤❤❤❤❤
Thank You Harry Bhai💖
Thank you so much bhai 🙏
congrats for 5 millon
Super Class this one 🔥🔥🔥🔥🔥🔥🔥🔥