CSS Grid - Ultimate MasterClass | Sigma Web Development Course - Tutorial #39

[@CodeWithHarry]

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

[@owaisahmadshah6744]

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.

[@mhtechnoworld5527]

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 🙏🙏🙏

[@Its__AnkitSahu]

Sigma Batch Op.... Thanks Bhai for everything....❤❤❤

[@asadchaudhary5935]

js kab start kr rahay hooo

[@vivaanyadav1st]

#SigmaBatchOp

[@amitmauli]

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!!!

[@mdshahanwajhussen]

pura video to dekhlo

[@Retroo.69]

jaat

[@memorybyte]

i can not do it

[@gauriyadav3710]

Kya sir ne backend v poora cover kia hai??

[@lovedietfood]

@@gauriyadav3710 ha bhai ha

[@Hafijur0211]

🎯 Key Takeaways for quick navigation: 00:00 📐 *CSS Grid is a layout tool used to create grids in CSS, simplifying the process of designing layouts compared to floats and positioning.* 01:50 📏 *CSS Grid allows defining the number of columns and rows, and their sizes using properties like `grid-template-columns` and `grid-template-rows`.* 04:38 🗃️ *Understanding grid lines, grid cells, grid tracks, and grid areas is essential for effective use of CSS Grid.* 07:58 🛣️ *Grid lines and cells can be named for easier reference, enhancing readability and maintenance of the code.* 13:08 🆔 *Grid areas can be named, allowing a more intuitive way to define and place items within the grid using `grid-template-areas`.* 16:54 🏞️ *Another method involves using `grid-template-areas` to directly name and allocate areas for items within the grid, simplifying layout organization.* 19:42 🖼️ *Using named grid areas like 'nav', 'side', 'article', and 'footer' makes it easy to allocate and position items within specific sections of the grid.* 20:11 🎨 *CSS Grid allows you to control the layout of items, specifying grid areas for them.* 21:37 🌐 *You can make items overlap by defining their grid areas, providing flexibility in layout.* 22:34 📐 *The FR unit in CSS Grid allows you to create flexible and responsive layouts.* 23:58 🚧 *The gap property helps create spacing between grid items, both row gap and column gap can be customized.* 24:53 🔄 *Justify and align items can be used to center items within their grid cells.* 26:49 🔄 *Individual items within the grid can be aligned or justified using align-self and justify-self properties.* 27:46 🔁 *The repeat function simplifies the creation of multiple columns or rows with the same size.* 28:14 📏 *The minmax property allows setting a minimum and maximum size for grid items, ensuring flexibility.* 30:04 🧭 *Justify content and align content help position the entire grid within its container.* 31:00 🏞️ *Place content and place items provide a shorthand for aligning and justifying content within the grid.* Made with HARPA AI

[@Ebombay-pm6wi]

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

[@sadi404]

bro this topic was very hard

[@dazzleflystudio2605]

Seriously harry bhai mai apse bor nhi hota u r soo sweet and good teacher inthe world thank so much Allah apko sahat de

[@vikashalder2743]

CSS grid is hard but the teacher explained vary well. I haily recomend this awesome Ultimate MasterClass to every one. Love you #HarryBhaiya #SigmaBatchOP

[@Naqib-Ullah-Programmer]

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

[@saaifbanday8437]

Best Css playlist on KZbin

[@hanzalamansoor]

I mean this is mind blowing that professional web dev takes time to understand this difficult concept of grid but you made it look so easy that we all understand this concept in just a one video, bravo for your efforts.

[@AryanJC07]

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 🎉

[@mrnobody8350]

THIS MAN IS SUCH A MASTER BLASTER IN TEACHING YOU DESERVE A MILLION TON RESPECT ... AMAZED, ONE OF THE MOST DIFFICULTS TOPICS BUT U MADE IT SO EASY TO UNDERSTAND....👌

[@fizafashion6595]

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

[@noxknock2740]

world cup sai to bhar ho gaya

[@adeelahmad3889]

un pa chr @@noxknock2740

[@BlackVoz]

​@@noxknock2740Bhai video Dekh Aur ja Tu Idher larne Aya hai? ajeeb log

[@junaidexplainer941]

Don't worry. Harry Bhai humein ek web developer zroor Bnaien Gai. Sare log reply mein likho Brober

[@anieditz-00]

Waalikum us Salam

[@targetme5716]

How much effort you are giving!😮😮😮 to clarify our concepts on every topic of CSS just mind blowing.love you Harry sir ❤❤❤

[@editingzone.1393]

Grid-template-areas not working in chrome and edg can u tell me which browser you are using ?

[@lovedietfood]

@@editingzone.1393 it works in chrome

[@KrishnaKumar-kj5sw]

@@editingzone.1393 Updated Chrome hoga to work karega

[@ShubhamGupta-dr8jq]

kabhi bhi doubt ho toh harry bhai ka video dekh lo, full detail explanation rehta hai, hats off you big brother, love you 3000.

[@JiveshGoel010]

This is the best tutorial anyone can get to learn CSS grid. 😄

[@himanshumudgal7170]

the amout of effort that you put to make our concepts crystal clear is just unmatchable. Hats off to you man.

[@chirpy_ashi]

i love your way of teaching ...lots of respect for your efforts and for you😊😊

[@deepakkansal9112]

are aunty aap bhi web dev sikh rhi h

[@sirfpdhaibkl]

@@deepakkansal9112 hahahahhhaha

[@saymanlal]

One of the best video's ever on CSS grid cleared the complete concept with proper explanation and examples!!! Thanks Sir ji

[@MohiniJat-j6g]

😮 toughest video of css till now 😊

[@HannanZahid-us7ht]

absolutely

[@darkpikachu123]

#pinme Key points in this lecture: 1. fr means fraction - helps in distributing grids evenly. 2. repeat saves time in setting fractions. 3. minmax functions helps in adjusting cell width and height with minimum and maximum set values. 4. align-self, justify-self, justify-items, align-items works within grid cells. 5. "justify-content", "align-content" works within the entire grid container, "place-content" does both of their jobs in one go. 6. "justify" arranges items around the main axis and "align" arranges the items around cross axis. 7. Use "gap" instead of "padding" in grid or flex. 8. Lastly always try to use "start" and "end" rather than "flex-start" or "flex-end".

[@dymjgaming8546]

Thanks for key takeaways

[@abhishekmathur1042]

Knew grid before but came to know about number of different properties by watching your video🤟🤟

[@suchetapal]

Blessed to have this course, better than any paid courses available. Thank you so much. 🙏#SigmaBatchOp 😇

[@mp3prime]

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.

[@SUDHIRKUMAR-id8vy]

Ek dusre se connection bana ke rakho taki ek dusre ki help kar sako....?

[@deepakkansal9112]

connection ke chakkr m uski lena chata h naa @@SUDHIRKUMAR-id8vy

[@rexhan__]

Yes​@@SUDHIRKUMAR-id8vy

[@sayanmukherjee1445]

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.

[@sudarshanhazarika8662]

best explanation of CSS Grid on the internet, looks so easy to learn it from you, thank you harry sir

[@editingzone.1393]

Grid- template- areas not working in edg and chrome . So what can i do ?

[@editingzone.1393]

Can you tell me which browser are you using ?

[@therealartist9]

@@editingzone.1393 incognito browser

[@GuglePhutus-m3c]

Best mentor ever thanks haris bhai you're doing great work for the students

[@vishalgarg3177]

this video is awesome sir, thankyou very much for your efforts. It means a lot, really 😎

[@abhiramcs6581]

#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 ❤️❤️❤️❤️❤️

[@mp3prime]

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.

[@mp3prime]

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.

[@TheRealWokeGuy]

harry bhya iss video ko dekhne ke bad aisha lag rha hai ki puri css ek trf grid ek taraf

[@marufhussain3348]

I am very excited for this course and Sigma batch is OP❤

[@RehanPathan-3221]

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

[@Android-17]

😮 CSS Grid done ✅ Complex concepts explained in a really simple way Thank you Harry Bhai 🙏 #SigmaBatchOP 🔥

[@whitemask-Community]

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

[@amisharaj123]

jaise jaise series bdh rhi complexity bdhti ja rhi 🙃🙃🙃

[@official__alim]

Hnnn

[@riturajsharma3937]

@amisharaj123 yrr agr tere job lag jye to mere bhi lag vadio

[@harshvardhan_singh1130]

Hnn yrr too much difficult 😢

[@SUDHIRKUMAR-id8vy]

Ek dusre se connection bana ke rakho taki ek dusre ki help kar sako....?

[@ashoknayak-le3zz]

If don't increase the complexity, learning just HTML and CSS might take three months, while mastering web development could take up to three years. If you feel like Harry sir learning faster, seek other resources or areas to improve your skills in those topics.

[@TejasWasnik]

Tutorial 39 done. ✅ SIGMA BATCH OP!

[@AllinOne-fe7tw]

How much effort you are giving! to clarify our concepts on every topic of CSS just mind blowing.love you Harry sir

[@ayushkhaire6244]

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

[@mp3prime]

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.

[@ravikaransingh124]

Sigma batch op ❤

[@Beauty_salon56]

Harry bhai , i am really really thankful to you for providing us this expensive course without any cost .

[@TSHGaming1843]

Best video On Grid i have seen till now #SigmaBatchOP

[@ravikesharwani3285]

imp tips for justify and align : self , item , content in grid form 25:25 to 31:34

[@AltcoinAdventurers]

Harry be like : Samaj agya hoga 😊 Me : Baingan 😂😂😂

[@HannanZahid-us7ht]

😂😂😂

[@yuvrajkumarsingh4984]

finally after exploring many videos i understood css grid thank you harry sir for such wonderful video

[@AN_Bhagat]

#SigmaBatchOp #Harry Sir❤❤

[@mrcode73]

Through this course, I have become a really academy-free student. Harry Brother you are awesome. 🥰😍🥰😍

[@ratnadeepg]

Please make a complex web-page using CSS Grid... It will be very helpful for more clarity...

[@MohammadAlikhanKhan-u4v]

Now I finally understand css grid😊 thanks Harry bhai

[@DeepikaDecodes]

Amazing video. 👏 Thank you for making such a great video.❤

[@mdshahanwajhussen]

pura video to dekhlo

[@allgood3976]

This Sigma Course is Milestone

[@Love_39_Gaming]

39th Day #SigmaBatchOp❤❤

[@NileshGuptaA-rr6yb]

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

[@skalwaghe56]

Great masterclasses full topic in 1 shot ! #SigmaBatchOP

[@learndaily01]

😁mast,,,poora web development seekhunga.... sukriya harry bhai...😁

[@SketchBoyofficial]

i don't understand why Grid is important

[@triggedgaming426]

For adjusting photos and box using grid

[@sanjayrajpoot1807]

Our Super hero One of the best Harry Bhai👑

[@riturajsharma3937]

Puri css ek trf or akele gird ek trf

[@moneyiseverything7193]

04:02 CSS Grid simplifies layout creation in CSS. 08:04 Understanding the basic terminology of CSS grid layout 12:06 Understanding grid template rows and columns 16:08 Defining grid rows and columns with CSS shorthand 20:10 Naming grid areas and placing items in the grid 24:12 Understanding and utilizing the FR unit in CSS grid layout 28:14 Setting different column and row gaps in CSS Grid 32:13 Explanation of using minmax function and aligning items within grid container

[@Anshumanmishhra]

6 November 2023 2:34 PM, Yes I'm doing this beautiful course regularly #SigmaBatchOP

[@abhishekmathur1042]

Sigma web development course of harry bhai is OP🔥🔥

[@AwaisMughalFans]

I wish I will be a pro developer like Harry Bhai

[@AwaisMughalFans]

Thanks Harry bhai to gave me a heart

[@CodeGenetics]

best course ..beats all the paid and free courses

[@rachit.6110]

Crystal Clear Explanation Harry bhai

[@cheryrj8305]

watched it 2 times , i fully understand the concept , harry bhai , to me its was a difficult concept , thanks for making it easy and concise , perfect for IT students , you are the best teacher . i really appricate your effort and hard work . ❤

[@Asfandyarwali-j4y]

Hello Harry bhai I started the course today. Thanks for such detail course.

[@mdsohanurrahmanhridoy1343]

Completed 39❤ Understood the CSS Grid....Thanks vai❤

[@techfun8528]

Here Knowledge overloading concept arises bt nice explanation bro...🎉🎉🤩🤩

[@movehard1851]

❤️🙏 Sigma Batch OP ❤️🙏

[@RASTUDIO_0]

This CSS Grid tutorial was awesome...

[@priyankarakshit2383]

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

[@deepakkansal9112]

bhai bol dia

[@abdul-ahad191]

Best free course!🥰

[@pravalsingh9140]

Sigma WebD batch sbse OP🤟👍 Harry bhai hai to moomkin hai🙂

[@anshpethe]

Harry bhai on the Top

[@AdarshPhani.04]

IT'S really very high level content, which cannot be found anywhere.....your teaching is awesome sir....❤#sigmaBatchop

[@comingsoon876]

Harry bhi on the fire #SigmaBatchOp 🔥❤ Let's begin day 39 😍

[@this_is_joydip]

🎉 Thank you HARRY BHAI ❤❤

[@LikhariCollection]

sigma batch op thanks for providing best cource for free❤❤

[@MeghaRelan-z1s]

sir your teaching is awesome

[@manshalkhatri9289]

Sigma Batch OP ! THE BAR IS RAISING UP !

[@humayonakhtar2004]

sala kahi p esa course nai milta best teacher meri tara hi dusro ki help krna chahte

[@Priyanka-ec9gx]

SIGMA BATCH OP! Best course!!!💕

[@hirenparkar7480]

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🔥🔥

[@kirtansinghsolanki2794]

One Of The Best CSS Grid - Ultimate MasterClass #SigmaBatchOP#SigmaBatchOP 👍🏻👍🏻 Sigma Web Development Course harry bhai dil khush kar diya Css grid concept clear

[@mixinformation5646]

Amazing videos thank you for giving us this course for free

[@FreeLancer-pl8ev]

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"

[@Ranjeet_47]

Best Free Course Available On Internet

[@mayanksharma_WebDeveloper]

Sigma batch OP.

[@ailascommentatory9716]

mujhe dusra treeqa area k zariye target krna Zaida ahha laga hai. Zaida onvenient and asan hai.

[@Code_gen]

Css grid to sbse touff wala topic he pr Harry bhai ne achese smajaya

[@rutujahursale1510]

Harry Bhai has raised the bar like anything

[@modarmulihansda7803]

best coding chhanel

[@a8hi_24__]

Place item center apne end me btaya itna useful h thanks 🥲

[@timungasangho]

The best explanation ever

[@bunny4173]

best lecture on css grid ...love from Pakistan

[@CodeWithBipin_7]

Congratulations harry bhai aaj 7 million subscribe ho gaya 😊❤️ gau or tau aapka nam mae kar dunga 😂😂love from nepal my best teacher please come to nepal ❤️😊

[@wizard.01]

I recommend watching it twice for better understanding

[@EngineerSoul2005]

bhaiyaji bhaukal macha diye🔥❤‍🔥

[@TraptiGupta-s2s]

#SigmaBatchOP in future if ever we will be asked that from where you have learned this difficult topic , surely we will recommend this beautiful course to them ... Bro your energy will not be wasted , we can proudly say we learned web development from a heavenly guy, name Harry #harrybhai #sigmawebdev #codewithharry ❤💙💜❤

[@SuraUdaykiran]

Great explanation, sir!🎉

[@priyapathak3146]

Thank you so much bhai 🙏

[@srijan_tripathi]

Sigma Batch OP!

[@EXPERIMENTSHOW.]

Thank you soo much bro ❤ Love you 🏆