CSS Flexbox - Ultimate MasterClass | Sigma Web Development Course - Tutorial #38
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 😉😉
Пікірлер: 1 800
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
6 ай бұрын
Absolutely ❤ Thanky so much
@dinonathbarman9320
5 ай бұрын
Thanks harry vai love you
What makes Harry's tutorials different to most other ones is that he also tells about the real world use cases
@suvo910
6 ай бұрын
But consistency milega Harry vai sei😂
@gauravswami6213
5 ай бұрын
ofcourse not a single youtuber will tell that there will be no issue if you leave the video here
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
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
@itwalesirji
4 ай бұрын
apna school se
@Rizwan78611
2 ай бұрын
@@itwalesirji baikaar hai yr apna school
@backdoorguy1
2 ай бұрын
yhi se padhle css bhi
@Rizwan78611
2 ай бұрын
hmmm
The best Flexbox tutorial I've seen till now Thank you Harry bhai!
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....🥰🥰🥰
The guru who give us real world knowledge along with 100% content just in 30min...❤
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 🇧🇩🇧🇩🇧🇩
Literally maine apne 2 sal ke web development me aisa nahi smjha you are legend bro love you from heart
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
8 ай бұрын
lamo dedd
@backdoorguy1
2 ай бұрын
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
Sigma Batch OP 🔥
Not only like. I love this course the most ❤
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..
Flexbox perfectly covered and understood #HarryBhai #SigmaBatchOp ❤️❤️ Top Notch Quality Content Bro
YAY! VERY VERY EXCITED! #SIGMABATCHOP! THANK YOU FOR THE NEW VIDEO SIR❤️🙏
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❤
In my openion this was the most comprehensive video about CSS flex box thank you
Kis kis ne ye video 2-3 baar dekha h😊
@Krishna_Shukla_371
3 ай бұрын
4 bar😂😂
@UjjwalSharma.861
3 ай бұрын
@@Krishna_Shukla_371bro main to sem exam se pehle krke gya tha js tk ab waps se recallation krrha😂
@youtubemofi
3 ай бұрын
6 times💀🫶🏻
@OxxLewran
2 ай бұрын
11 ti😊
@ShambhuSanjiv
2 ай бұрын
Bhai only one time dekha + execution + note writing= better understanding + more time investment
Sigma batch op
Best thing about your videos is....I never feel bored. Seeing Your high energy I also get energy. 😁 Keep it up Sir Your videos are really helpful. You are supporting career of thousands of students . Thank you so much 🙏🙏
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
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
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
All concept cleared of Flexbox .. thanks Harry Bhai
Seriously Waiting This Sir❤❤
Best instructor 💯💪❤️
It is by far the most comprehensive, detailed and to the point tutorial on Flex-Box Model Thank you harry sir. #SigmaBatchOP.
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 🥰🥰
Tq harry bhya❤
Your teaching style is god level ❤
@iam.manniii
8 ай бұрын
Sigma batch op
Amazing, Outstanding and very informative. God bless you brother. You are really a gift for students.❤❤
maja aa gaya iss video ko dekhkar, ek hi baar me accha se samajh me aa gaya. bahut shandar explanation hai.
Eagerly waiting for today's Video 🥺
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
8 ай бұрын
can you please write the summary of every video so I can write them in my notes
@armyrusharmyrush6737
8 ай бұрын
Thanku so much because of Summary the video❤
you are just great.....fabulous ....explained it in such an easy way....lots of love and respect for u😄😄
I want to give you a medal #1 for this video
Harry Bhai ❤❤
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
8 ай бұрын
@CodeWithHarry: Harry Bhai, sending you healing thoughts and positive vibes. Wishing you a swift recovery. Get well soon! 💐🌟 #GetWellSoon #SendingLoveAndHealingVibes #4|11|23
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. 😊😊😊💝💖💝💖💝💖💝💖
❤❤❤❤
First like bhai
@RishiRajxtrim
8 ай бұрын
Humne to aapke Like ko bhi like kar liya. You win!!🎉
harry is hero by nature and character also...fun and learning at same time . SIGMA BATCH OP
Barabar hai bhai ...best Flex box tutorial ever seen ....🌟
#sigmabatchop_bhai❤❤❤❤❤🎉🎉🎉
@tariniprasadmohapatra4434
8 ай бұрын
Thanks bhai for giving me your heart❤
Thank you Bhai, aaj bahot kuch sikhne ko mila...❤
🎯 Key Takeaways for quick navigation: 00:00 🎓 *After this flexbox tutorial, you'll have a solid understanding of flexbox, covering examples and practical scenarios for easy layout creation on websites.* 02:53 🌐 *Flexbox simplifies CSS layout, replacing float and positioning issues. By using `display: flex` on the container, items automatically align left to right.* 05:25 🚀 *Flexbox is frequently used for centering elements. `justify-content` and `align-items` with values like `center`, `flex-start`, or `flex-end` help achieve horizontal and vertical centering.* 08:38 🔀 *Flex direction controls item layout. Changing it to `column` makes items lay out from top to bottom. Additional options include `column-reverse` and `row-reverse`.* 11:55 📏 *Understanding main axis and cross axis is crucial. `justify-content` and `align-items` properties work based on the main axis, while `align-content` is used for multiple lines.* 13:51 🔄 *Flex wrap (`flex-wrap`) handles item wrapping. Options include `wrap`, `wrap-reverse`, and `nowrap`. `align-content` works with multiple lines to control their alignment.* 15:46 🤔 *While `align-items` works with a single line, `align-content` is used for multiple lines in flex containers.* 17:38 📐 *The `gap` property provides spacing between flex items. You can define both row and column gaps, making it easier to control the layout.* 20:30 🚨 *Remember, container properties apply to the flex container, and item properties apply to the flex items. Mixing them up can lead to errors.* 20:58 📦 *The container property `order` can be used to change the order of flex items. Lower values come first, and the default order is 0.* 22:24 📊 *Use the `flex-grow` property on flex items to control how much space they take. Higher values indicate more space allocation. Default is 0.* 24:16 🔄 *`flex-shrink` property determines the ability of a flex item to shrink. It takes a numeric value, and higher values allow faster shrinking. Default is 1.* 26:13 🏹 *`align-self` property on a flex item allows you to override the align-items property for that specific item, positioning it independently within the container.* Made with HARPA AI
Sigma Batch OP You are amazing Harry. Your KZread videos very helpful for me.
Thank you so much sir for explaining all concepts of flexbox❤
very nice video it is easily understandable for me and concept is very clear Thanks.
Sigma batch op 🥀🥀🥀💯💯💯❤️🩹❤️🩹 Bahot maza aya aur pehli video mein hi smg lag gai achy say thanku harry bhai
This video solved my flex property problem . Thank you Harry vai
harry bhai bhot saara pyaar thankyou so much for this :)
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
6 ай бұрын
which course have you taken bro
@NohablaEspnaol
6 ай бұрын
@@shaikshafiulla684 the one by Angela Yu, lot from that is outdated and sometimes hard to understand it gets confusing
Although I had experience in CSS, but I always used bootstrap and didn't have enough knowledge regarding flexbox. This video is the best on flexbox and I can confidently add flex boxes to my pages now. Thank you Harry bhai, this course is just too awesome. #SigmaBatchOP
Best FlexBox Video Harry Bhai Thankyou!!
Sigma batch Op raising up the levels now.Nice course and nice video MASHAALLAH.
Thank you harry bhai for this video, this was very helpful ❤
excelent. sab doubts clear. thank you so mutch.
barobar hai bhai.....barobar hai....
Thanks a lot sir now my concept is clear about flexbox thanks a lot sir
thanks haris bhai... may u get more than more.. really it helped
this lecture was really upto the mark !
Truly appreciate your efforts @harry bhai it was great learning experience.
One of the best explanation of Css Flexbox ❤
0:45 Sigma Batch OP. 13:18 Barabar hai bhai. thank you for valuable things you teach us.!
sigma batch op . Thank you harry vai. My dream as a web developer comes true.
saw this video twice and now i can teach it to anyone
A student can also can learn coding by this a easy understanding by harry sir😊
Thank You Bhai Lots Of Love From Karnataka.
Sigma batch op harry bhaiiii you are great ap mahan hu
Thank you so much for these free resources. You are teaching in very efficient way that everyone can get understand very easily.
It is the best video tutorial on flex box
Great explanation Harray 🙌 Sigma batch Op
best flexbox tutorial bhai.
sigma batch op main janta hoo ye maine bhaut late follow kiya h course lakin main regular hoon
@DipuKumar-qt1qn
4 ай бұрын
Same
Jahaan har channel course launch karne main laga hua hai aap free main padha rahe ho bhaiya (tussi great ho)😊
Legendary Harry sir you are the best 🤝☝️
bahot he awesome sir
Totally understandable content
This is the best video on flex-box 5/5 ⭐⭐⭐⭐⭐
Thanks for your efforts Harry bhai ❤❤❤
All concept become clear in 27 mints❤
definitely a worthy course.
very much informative video tq so much harry bhiya
very nice explanation✨
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.
baroobarr hai harry bhai
jabardast video bhai
thnx bhaiya :) completed on 4/3/24
Mind blowing course ❤❤❤❤
🔥🔥🔥 All Doubts Cleared .....
Sigma Batch OP ,,,, Thanks It Really Helped
Barabar hai bhai❤❤
Barobar hai harry bhai ❤
barabar hai harry bhai!(13:15)
barabar hai harry bhai😄
flex-direction main & cross : borabar hai bhai!
its took me to whole day to complete this one tutorial😀
Nicely explained sir
great explaination