CSS Flexbox - Ultimate MasterClass | Sigma Web Development Course - Tutorial #38
HTML-код
- Опубликовано: 14 июн 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 ⌚
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 😉😉
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. 🙏
Absolutely ❤ Thanky so much
Thanks harry vai love you
The best Flexbox tutorial I've seen till now
Thank you Harry bhai!
What makes Harry's tutorials different to most other ones is that he also tells about the real world use cases
But consistency milega Harry vai sei😂
ofcourse not a single youtuber will tell that there will be no issue if you leave the video here
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
apna school se
@@itwalesirji baikaar hai yr apna school
yhi se padhle css bhi
hmmm
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....🥰🥰🥰
Literally maine apne 2 sal ke web development me aisa nahi smjha you are legend bro love you from heart
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 🇧🇩🇧🇩🇧🇩
Sigma Batch OP 🔥
Not only like. I love this course the most ❤
All concept cleared of Flexbox .. thanks Harry Bhai
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..
YAY! VERY VERY EXCITED! #SIGMABATCHOP! THANK YOU FOR THE NEW VIDEO SIR❤️🙏
Sigma batch op
Flexbox perfectly covered and understood #HarryBhai #SigmaBatchOp ❤️❤️ Top Notch Quality Content Bro
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
lamo dedd
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
In my openion this was the most comprehensive video about CSS flex box
thank you
Seriously Waiting This Sir❤❤
Your teaching style is god level ❤
Sigma batch op
Barabar hai bhai ...best Flex box tutorial ever seen ....🌟
Best instructor 💯💪❤️
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
you are just great.....fabulous ....explained it in such an easy way....lots of love and respect for u😄😄
Eagerly waiting for today's Video 🥺
Tq harry bhya❤
Amazing, Outstanding and very informative. God bless you brother. You are really a gift for students.❤❤
One of the best explanation of Css Flexbox ❤
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
Harry Bhai ❤❤
Thank you so much sir for explaining all concepts of flexbox❤
It is by far the most comprehensive, detailed and to the point tutorial on Flex-Box Model
Thank you harry sir. #SigmaBatchOP.
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
Kis kis ne ye video 2-3 baar dekha h😊
4 bar😂😂
@@Krishna_Shukla_371bro main to sem exam se pehle krke gya tha js tk ab waps se recallation krrha😂
6 times💀🫶🏻
11 ti😊
Bhai only one time dekha + execution + note writing= better understanding + more time investment
Thank you Bhai, aaj bahot kuch sikhne ko mila...❤
Truly appreciate your efforts @harry bhai it was great learning experience.
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.
can you please write the summary of every video so I can write them in my notes
Thanku so much because of Summary the video❤
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
@CodeWithHarry: Harry Bhai, sending you healing thoughts and positive vibes. Wishing you a swift recovery. Get well soon! 💐🌟 #GetWellSoon #SendingLoveAndHealingVibes #4|11|23
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❤
harry bhai bhot saara pyaar thankyou so much for this :)
First like bhai
Humne to aapke Like ko bhi like kar liya.
You win!!🎉
#sigmabatchop_bhai❤❤❤❤❤🎉🎉🎉
Thanks bhai for giving me your heart❤
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 🥰🥰
thanks haris bhai... may u get more than more.. really it helped
❤❤❤❤
Thank you harry bhai for this video, this was very helpful ❤
beautiful explanation of flexbox
harry is hero by nature and character also...fun and learning at same time . SIGMA BATCH OP
This video solved my flex property problem . Thank you Harry vai
excelent. sab doubts clear. thank you so mutch.
very nice video it is easily understandable for me and concept is very clear Thanks.
🔥🔥🔥 All Doubts Cleared .....
It is the best video tutorial on flex box
Thanks for your efforts Harry bhai ❤❤❤
Best video on flex box on YT ❤❤❤
Thank You Bhai Lots Of Love From Karnataka.
saw this video twice and now i can teach it to anyone
maja aa gaya iss video ko dekhkar, ek hi baar me accha se samajh me aa gaya. bahut shandar explanation hai.
All concept become clear in 27 mints❤
Thanks a lot sir now my concept is clear about flexbox thanks a lot sir
Sigma Batch OP ,,,, Thanks It Really Helped
This is the best video on flex-box
5/5
⭐⭐⭐⭐⭐
best flexbox tutorial bhai.
Great explanation Harray 🙌
Sigma batch Op
barobar hai bhai.....barobar hai....
Legendary Harry sir you are the best 🤝☝️
Harry bhaiiiiii OP 🔥 as always ❤
Mind blowing course ❤❤❤❤
Sigma Batch OP
You are amazing Harry. Your RUclips videos very helpful for me.
Thank you so much for these free resources. You are teaching in very efficient way that everyone can get understand very easily.
A student can also can learn coding by this a easy understanding by harry sir😊
Nicely explained sir
very well explained 👍
very much informative video tq so much harry bhiya
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
#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
sigma batch op . Thank you harry vai. My dream as a web developer comes true.
bro drops best courses
Totally understandable content
Sigma batch Op raising up the levels now.Nice course and nice video MASHAALLAH.
its took me to whole day to complete this one tutorial😀
Thanks harry bhaiya❤️
bahot he awesome sir
Barobar hai harry bhai ❤
great explaination
Flexbox very helpful in web developer then grid and float LoveThat
thnx bhaiya :)
completed on 4/3/24
jabardast video bhai
0:45 Sigma Batch OP.
13:18 Barabar hai bhai.
thank you for valuable things you teach us.!
such me mza a gya❤❤
baroobarr hai harry bhai
Nice explanation
thx bro u are a life saver
Thank you Harry bhayya
This video is amazing
Barabar hai bhai❤❤
barabar hai harry bhai😄
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. 😊😊😊💝💖💝💖💝💖💝💖
Thanks harry brother
excellent course sigma batch op
thanku harry bhai