CSS Flexbox - Ultimate MasterClass | Sigma Web Development Course - Tutorial #38

Подписаться 6 млн

Просмотров 165 тыс.

50% 1

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 ⌚
Timestamps
00:00 Introduction
00:47 Sigma Web developer Intro
00:57 Flexbox
05:22 Justify Content & Align Items
08:05 Flex Direction
09:45 Flex Axis
13:41 Flex Wrap
15:11 Align Content
16:53 Wrap Reverse
17:19 Flex Flow
18:09 Gap Property
20:34 Common Mistake
21:00 Item Property: Order
23:47 Flex Grow
24:54 Flex Shrink
25:59 Align Self
26:49 Conclusion
27:35 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...
Web Development- • Web Development Tutori...
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 😉😉

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 1,6 тыс.

@infinity2_50 7 месяцев назад

You are legend brother lot of people getting jobs through your videos and non tech background students also refer your videos to learn coding. Thank you so much for these free resources. You are teaching in very efficient way that everyone can get understand very easily. 🙏

@rabailwaheed7051 4 месяца назад

Absolutely ❤ Thanky so much

@dinonathbarman9320 3 месяца назад

Thanks harry vai love you

@-.-_._-- 6 месяцев назад

What makes Harry's tutorials different to most other ones is that he also tells about the real world use cases

@suvo910 4 месяца назад

But consistency milega Harry vai sei😂

@gauravswami6213 3 месяца назад

ofcourse not a single youtuber will tell that there will be no issue if you leave the video here

@Vilakshan_pal 6 месяцев назад

The best Flexbox tutorial I've seen till now Thank you Harry bhai!

@bingevitality9754 4 месяца назад

me kahi or se CSS padh raha tha lekin at the end flexbox seekhne k liye aana hi pada yaha pe , appreciate your efforts bhai

@iictwalesir 2 месяца назад

apna school se

@Rizwan78611 Месяц назад

@@iictwalesir baikaar hai yr apna school

@backdoorguy1 Месяц назад

yhi se padhle css bhi

@Rizwan78611 29 дней назад

hmmm

@jagdishyadav1686 7 месяцев назад

Literally maine apne 2 sal ke web development me aisa nahi smjha you are legend bro love you from heart

@user-nz5lr3qr8z 7 месяцев назад

Sigma Batch OP........I blindly follow your channel since last year from C programming to Web Development to DSA and many more......Nobody can reach your level sir......heads off to you sir....🥰🥰🥰

@AnshumanPM 7 месяцев назад

Sigma Batch OP 🔥

@sadiyafirdouspatel620 7 месяцев назад

Flexbox perfectly covered and understood #HarryBhai #SigmaBatchOp ❤️❤️ Top Notch Quality Content Bro

@sunnyyadav1870 5 месяцев назад

The guru who give us real world knowledge along with 100% content just in 30min...❤

@AwaisMughalFans 7 месяцев назад

Not only like. I love this course the most ❤

@pulkitgandhi9545 7 месяцев назад

Amazing Video, I learnt CSS from you around 1.5 years back from your CSS in one video. Just one note for all the beginners here - FLEX PROPERTIES are supposed to be applied on the parent element (container) and not on the individual elements. If you understand this, 50% of the flexbox is cake for you

@SiddharthSharma-cp5vk 7 месяцев назад

lamo dedd

@backdoorguy1 Месяц назад

just three properties for items: flex-grow/flex-shrink (hardly ever used), and align-self (self explanatory with the self keyword) to align individual item

@lakshyarajdash 25 дней назад

I designed my portfolio only by using flexbox and grid videos. Thanks Harry bhai. You're the real legend of coding. I'm a legend of coding in my school due to your videos. Hats off Harry bhai❤

@manojkumar3696 6 месяцев назад

sigma batch is op . and harry bhai is bta nahi skta . You are legend brother lot of people getting jobs through your videos and non tech background students also refer your videos to learn coding. Thank you so much for these free resources. You are teaching in very efficient way that everyone can get understand very easily. 🙏

@anirudhsharma5575 7 месяцев назад

Sigma batch op

@swastikachatterjee8814 7 месяцев назад

YAY! VERY VERY EXCITED! #SIGMABATCHOP! THANK YOU FOR THE NEW VIDEO SIR❤️🙏

@billwallislambivan 3 месяца назад

Harry bhai i am from Bangladesh. I follow you ..and i am so happy to have found you as my teacher. I have no words to explain to you how much you helped me to learn web development . Love you harry bhai from Bangladesh 🇧🇩🇧🇩🇧🇩

@neutral776 Месяц назад

that was the best part of the course so far, I mean so far it was awesome, but this particular video was next level and it made flex box intuitive for me..

@aamish.iqbal01 6 месяцев назад

Summary of the video: justify-content and align-items: Control horizontal and vertical alignment of items within a flex container. Flex direction: Determines the main axis for item layout (horizontal or vertical). Flex Axis: The main axis determined by flex-direction. Flex Wrap: Specifies whether items wrap onto a new line when space is limited. Align content: Aligns lines of items when wrapping occurs in the cross-axis. Flex Flow: A shorthand property for combining flex-direction and flex-wrap. Gap property: Sets spacing between grid or flex items (replacing older gap properties). Order property:The order property in CSS is used in Flexbox layouts to change the visual order of flex items without altering the source code order. Key points about order: Row-Gap and Column-Gap: Older properties for gaps in flex containers, replaced by the gap property. Flex Grow and Flex Shrink: Control how items expand and contract based on available space. Align Self: Overrides align-items for individual flex items, allowing custom alignment.

@texturefflive5700 6 месяцев назад

can you please write the summary of every video so I can write them in my notes

@armyrusharmyrush6737 6 месяцев назад

Thanku so much because of Summary the video❤

@kumarudi 7 месяцев назад

Seriously Waiting This Sir❤❤

@abhishekanand8574 3 месяца назад

Harry bhaiya generally people thinks 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. 😊😊😊💝💖💝💖💝💖💝💖

@udaytewary3809 6 месяцев назад

#SigmaBatchOp One tip which I felt important while studying flexbox is that all the properties of flexbox whether it is applied on items or container "Heavily depend upon flex direction that whether it is flex direction row or column" So while applying any property we must be aware of the flex direction and also along which axis it is getting applied that either main axis or cross axis

@user-wx8xh8nb2f 6 месяцев назад

Hello Harry bhai ! I hope this message finds you well. I wanted to express my gratitude for providing such valuable content on cs and programming. Your resources have been instrumental in my journey as a student of CS aspiring to become a successful developer . Your dedication to education and sharing knowledge is truly commendable. Thank you for offering top-notch content for free, and for being a guiding light for aspiring students like me. Your contributions make a significant difference in the learning community. Warm regards, Mohit #sigmaBatchOp

@Shrey.17 7 месяцев назад

Eagerly waiting for today's Video 🥺

@Time_with_Salman 6 месяцев назад

All concept cleared of Flexbox .. thanks Harry Bhai

@ishantsharma8139 7 месяцев назад

Your teaching style is god level ❤

@iam.manniii 7 месяцев назад

Sigma batch op

@user-ul9yt1li8z 7 месяцев назад

Awesome sir . Very impressive , I am from Pakistan. And alot of my friends watch your content , I have no words to explain you . I have just one request for you sir that complete all the required things that are needed for a person to become a full stack developer and become independent . Cover the techs like js , js es6 , react , node , git and GitHub, and a suitable database for these languages . Also do some real projects using these languages and techs. ❤❤❤ great love from pakistan

@user-hs7ej6fs5x 5 месяцев назад

Amazing, Outstanding and very informative. God bless you brother. You are really a gift for students.❤❤

@hasnainalam1898 6 месяцев назад

Thank you harry BHI for providing such quality content free of cost

@NIMahin 7 месяцев назад

Best instructor 💯💪❤️

@vasu2239 4 месяца назад

Kis kis ne ye video 2-3 baar dekha h😊

@Krishna_Shukla_371 2 месяца назад

4 bar😂😂

@UjjwalSharma.861 2 месяца назад

@@Krishna_Shukla_371bro main to sem exam se pehle krke gya tha js tk ab waps se recallation krrha😂

@youtubemofi Месяц назад

6 times💀🫶🏻

@OxxLewran 14 дней назад

11 ti😊

@ShambhuSanjiv 13 дней назад

Bhai only one time dekha + execution + note writing= better understanding + more time investment

@chirpy_ashi 6 месяцев назад

you are just great.....fabulous ....explained it in such an easy way....lots of love and respect for u😄😄

@amannegi2016 7 месяцев назад

Tq harry bhya❤

@RehanPathan-3221 7 месяцев назад

I'am looking forward to exploring more tutorials from this series and applying these newfound skills to my web development projects. Kudos to Sigma Web Development Course for creating such an invaluable resource for the developer community! 🌟💻 #CSSFlexbox #WebDevelopment #SigmaWebDevelopmentCourse #SigmaBatchOp #BarobarHaiHarryBhai

@RehanPathan-3221 6 месяцев назад

@CodeWithHarry: Harry Bhai, sending you healing thoughts and positive vibes. Wishing you a swift recovery. Get well soon! 💐🌟 #GetWellSoon #SendingLoveAndHealingVibes #4|11|23

@shaikyaseenyaseen7692 6 месяцев назад

harry this is really an ulmitae course on flex box every time i was having an confusion in this justify and aling but after seeing ur video am fully prepared love u bhaiii 🥰🥰

@imukhan755 Месяц назад

Truly appreciate your efforts @harry bhai it was great learning experience.

@salman_shady 7 месяцев назад

Harry Bhai ❤❤

@sumedhtayade821 7 месяцев назад

First like bhai

@RishiRajxtrim 7 месяцев назад

Humne to aapke Like ko bhi like kar liya. You win!!🎉

@sajalgupta2204 4 месяца назад

It is by far the most comprehensive, detailed and to the point tutorial on Flex-Box Model Thank you harry sir. #SigmaBatchOP.

@aizajsamani8894 4 месяца назад

Barobar 13:17

@tariniprasadmohapatra4434 7 месяцев назад

#sigmabatchop_bhai❤❤❤❤❤🎉🎉🎉

@tariniprasadmohapatra4434 7 месяцев назад

Thanks bhai for giving me your heart❤

@mddipu7248 7 месяцев назад

❤❤❤❤

@workprabhsingh6038 6 месяцев назад

Some video force us to comment and Harry's videos are one of those videos.....Very Imformative Course...#sigmabatchop 🔥

@Motion_strategy 2 месяца назад

Barabar hai bhai ...best Flex box tutorial ever seen ....🌟

@NishantKumar_N 2 месяца назад

maja aa gaya iss video ko dekhkar, ek hi baar me accha se samajh me aa gaya. bahut shandar explanation hai.

@motivatainmenthub...5062 4 месяца назад

harry is hero by nature and character also...fun and learning at same time . SIGMA BATCH OP

@VinaySingh-hu5sy 16 дней назад

Sigma Batch OP You are amazing Harry. Your RU-vid videos very helpful for me.

@huzaifasaleem8390 3 месяца назад

One of the best explanation of Css Flexbox ❤

@omwatisahu9240 2 месяца назад

A student can also can learn coding by this a easy understanding by harry sir😊

@mohdrayees8919 4 месяца назад

Thank you so much sir for explaining all concepts of flexbox❤

@ujjwalssharma8149 Месяц назад

Thank you harry bhai for this video, this was very helpful ❤

@amitvishwakarma558 2 месяца назад

harry bhai :-video chodke jaa sakte hoo .....😶‍🌫 his mind:- (processing 🤔) abe kya boldiya😬 ..correct kr usse harry bhai:- magar jana mat chodke aage bhot kuch bataunga🤣.. btw I am loving this course bro

@HuzaifaSaran 4 месяца назад

thanks haris bhai... may u get more than more.. really it helped

@manishkushwaha5450 2 месяца назад

0:45 Sigma Batch OP. 13:18 Barabar hai bhai. thank you for valuable things you teach us.!

@GamerPandit-oe7ng 5 месяцев назад

Thanks harry bhai aap ki vajah se mai free me padh pa rha hu nhi to mere sir ne 10000 ka course tha jo ki mai nhi kharid sakta tha so thanks sir is course ko lane ke liye

@RidwanulIslam-wp9qr 6 месяцев назад

This video solved my flex property problem . Thank you Harry vai

@demonsahil7841 Месяц назад

Sigma Batch OP ,,,, Thanks It Really Helped

@aryan7396 2 месяца назад

🔥🔥🔥 All Doubts Cleared .....

@pandagirl1104 2 месяца назад

All concept become clear in 27 mints❤

@poolking-ws6sm 3 месяца назад

sigma batch op main janta hoo ye maine bhaut late follow kiya h course lakin main regular hoon

@DipuKumar-qt1qn 3 месяца назад

Same

@Admin9o5 2 месяца назад

Thanks for your efforts Harry bhai ❤❤❤

@dakshataramteke1838 3 месяца назад

very nice video it is easily understandable for me and concept is very clear Thanks.

@thuldaivines2864 3 месяца назад

sigma batch op . Thank you harry vai. My dream as a web developer comes true.

@MdKaif-io4pm 5 месяцев назад

Thank You Bhai Lots Of Love From Karnataka.

@user-sololeveling 27 дней назад

Sigma batch op harry bhaiiii you are great ap mahan hu

@earneasily12 3 месяца назад

harry bhai bhot saara pyaar thankyou so much for this :)

@dilipkevat4939 6 месяцев назад

Thank you Bhai, aaj bahot kuch sikhne ko mila...❤

@avinashlama4617 6 месяцев назад

sigma batch op ..love your teaching way harry bhai

@NohablaEspnaol 5 месяцев назад

Your course is really better than the paid one, I wasted so much time on the paid one to understand but I am actually understanding every concept faster in your course, thank you Harry!

@shaikshafiulla684 4 месяца назад

which course have you taken bro

@NohablaEspnaol 4 месяца назад

@@shaikshafiulla684 the one by Angela Yu, lot from that is outdated and sometimes hard to understand it gets confusing

@ramugasti06 26 дней назад

Thank you so much for these free resources. You are teaching in very efficient way that everyone can get understand very easily.

@mr.spidey_01 6 месяцев назад

13:24 एकदम बरोबर

@swajannaimur9079 2 месяца назад

best flexbox tutorial bhai.

@shrutimath3330 4 месяца назад

Great explanation Harray 🙌 Sigma batch Op

@Asim_Ali4857 6 месяцев назад

Thanks a lot sir now my concept is clear about flexbox thanks a lot sir

@Ashay39 6 месяцев назад

beautiful explanation of flexbox

@tutoriry2428 6 месяцев назад

Thanks Harry sir I'm learning lots

@utkarsh_singh00930 6 месяцев назад

Best video on flex box on YT ❤❤❤

@user-bq6hr3yk6i 5 месяцев назад

Sigma batch Op raising up the levels now.Nice course and nice video MASHAALLAH.

@prathampatel3664 23 дня назад

Nice explanation

@user-ye4dq9eo4m 3 месяца назад

saw this video twice and now i can teach it to anyone

@shubhanshu53204 6 месяцев назад

Jahaan har channel course launch karne main laga hua hai aap free main padha rahe ho bhaiya (tussi great ho)😊

@RiddleRealm-ny1yo 3 месяца назад

Mind blowing course ❤❤❤❤

@victorb22622 Месяц назад

Harry की कितनी सारी वीडियो देखी और सीखा लेकिन एक बात जो कॉमेंट में मेने लिखा सायाद पसंद ना भी आई हो ,लेकिन फिर से लिखता हु ,की इनको सब कुछ आता है तो अचानक ,कही भी कुछ भी लिख देते है ,जो समझना मुस्कील हो जाता है की भाई ये क्लास कहा ही आया ,क्यू लिखा ,या ये एलिमेंट कहा से आया ? जैसे 22: 24 पर ऑर्डर क्लास करके आइटम के बीच लिख दिया, क्या जरूरत पड़ी ,क्यू लिखा से समझने ही वीडियो बार बार आगे पीछे करना पड़ेगा।इतनी सारी स्टाइल लिखने के बज्झूद सिर्फ विलोएट कलर के बॉक्स ही दिखाई पड़ते हैं ,तो क्या ऑर्डर हुआ केसे पता चलेगा

@satyamtiwari5075 4 месяца назад

very much informative video tq so much harry bhiya

@AyushGupta-ux4gq 5 месяцев назад

The video is a part of the Sigma Web Development Course and focuses on CSS Flexbox. The instructor emphasizes that after watching the tutorial, viewers will have a clear understanding of Flexbox. The tutorial covers practical scenarios and examples to explain Flexbox properties, with an emphasis on making website layouts easily. The instructor highlights that even if viewers are not following the Sigma course, they can still grasp Flexbox concepts independently. The tutorial covers basics like using "display: flex" on the container and properties like justify content and align items to control layout. The concept of main axis, cross axis, and the use of properties like flex-direction, flex-wrap, and align-content are explained. The tutorial also touches on the order property for flex items and introduces the gap property for controlling spacing between items. The instructor encourages viewers to stay tuned for more in-depth concepts in upcoming tutorials. In this segment of the video, the instructor discusses the properties of Flexbox, focusing on "order," "flex grow," "flex shrink," and "align self." The "order" property determines the order of appearance for flex items, with a lower order appearing first. The instructor demonstrates how changing the order affects the layout. The "flex grow" property is explained, illustrating how it distributes available space among flex items. The instructor sets different flex grow values for items, showing how one item can take up more space relative to others. The "flex shrink" property is introduced, highlighting its role in determining an item's ability to shrink when the container size is reduced. Finally, the "align self" property is demonstrated, allowing for the individual alignment of a specific item within the container, overriding the general alignment settings. The instructor concludes by stating that these properties are not extensively used but are essential to understanding Flexbox comprehensively.

@wasifmeher 6 месяцев назад

This is the best video on flex-box 5/5 ⭐⭐⭐⭐⭐

@gowthamivallabhadasu2523 8 дней назад

Thank you Harry bhayya

@paurushbhatnagar5905 2 месяца назад

It is the best video tutorial on flex box

@Islamic_official848 Месяц назад

Sigma batch op 🥀🥀🥀💯💯💯❤️‍🩹❤️‍🩹 Bahot maza aya aur pehli video mein hi smg lag gai achy say thanku harry bhai

@Shabareesha 3 месяца назад

Nicely explained sir

@techworld3000 Месяц назад

#SigmaBatchOp Sab Barobar! 😅 love from Odisha! ❤

@snehagupta4543 6 месяцев назад

very well explained 👍

@prosgang09 4 месяца назад

great explaination

@saadbhai16 6 месяцев назад

Bro you're a blessing for us. Idk How you made this free, What came up to your mind. Take the respect and love. You're Awesome! Watching forward. InshaAllah! #SigmaBatchOP