The best part is that you also provide entire code and notes.Even some paid sites dont provide such basic things.Amazing!! Keep making videos on web d!!🙂😊
I learnt Flex-box from Coding-Ninja but I had a lot of doubts , after watching this video everything is clear now ...Code with Harry is really better than any other paid course.... and thank you so much bhaiya !!
Harry Bro there's no-one who could have taught it any better. Thank you for this series and also for doing it for society i.e. for free, it now even inspires me to do something for this society to make it better. Thank you very much brother.
Best tutorial for CSS flexbox. Best free online resources for learning CSS flexbox. This is the best playlist for learning HTML, CSS and JS. One stop for all sort of web development courses. Really like it !!!!
No matter where I get stuck in my path to be a software developer, i come to code with Harry channel and everything is resolved ❤ great respect to you @codewithharry !
Harry bhai, today I just tried instagram profile page using html and css. I didnt even know how to add a image but only because of you I could do this. It was not 100 percent perfect but I can say 80 to 85 percent perfect. I also got confidence that watching your tutorials I could do many more things. Thanks infinity. Hope to see more interesting tutorials from you. You are the best
@@projectsnik305 "Align stretch" will arrange items vertically in the same way "space evenly" arrange them horizontally. So to arrange the items evenly in vertical position using Align stretch you need to have items in vertical position (which are by default in horizontol position) so first use "flex-direction:column;" to have items in vertical position and then distribute them evenly using "align-items:stretch" and see the effect.
Harry bhaiya sachi me mai vertically center k liye mare ja rhi thi😂 lekin aaj vo problem is video se solve ho gyi 😊 Thanks a lot for this wonderful series 😇😊🙏.
At first, Thank you so much for providing most of the programming series. superb bro, your all tutorials are awesome. I think you are one of the best programmers in the world. Some institutes are not teaching with such quality after taking money while you are teaching for free. So that any poor student can realize their dream of learning programming languages. And I am a big fan of you like you are a big fan of Picker and Emmit 😂😂😂 Again Thank you because I can learn everything about programming with you whatever I want to learn. 😊
Harry bhai, you made the most useful part of CSS , crystal clear. Before watching the video , i was very much confused with flex box, flex box item properties ... 😍😍Thanks...
Brother your teaching style is amazing hats off to you brother. please try to teach css grid and bootstrap as well if you can in this series and also if you can make the same playlist for PHP with SQL it would be a great help thank you for your efforts and time cant be expressed in words
The best tutorial fa beginners..I lost the hope that I couldn't learn before I started to watch.. once I saw ua tutorial now I think I can achieve..Nd Can become a web developer ...thank u so much harry
bro after long time spend watching videos on youtube you r one who clear my flex-grow, flex-shrink and flex-basis concept. Good job bro and Thanks for this video.
Thank you sir.... for such useful contents. I never knew that I'll be able to learn web development in such a easy and effective manner. But it is going possible.. Because of you. I really like this style of teaching. Really incredible videos and awesome and effective way of study. i hope you'll never stop! So humble and well explained. I'm happy I found your channel. absolutely love to all of the effort that you put into these videos. Appreciate the work that you put into making these videos. Hats off to your dedication
20:50 "Align stretch" will arrange items vertically in the same way "space evenly" arrange them horizontally. So to arrange the items evenly in vertical position using Align stretch we need to have items in vertical position (which are by default in horizontol position) so First use "flex-direction:column;" to have items in vertical position and then distribute them evenly using "align-items:stretch" and see the effect.
Thankyou so much dear sir for making this wonderful tutorial about flexbox This is mostly recommended to all of you guys who search for the flex box tutorial in css
Well described, i must say this course is much better than the paid course i ever had. Thankyou so much harry for such a nice video!!! Stay safe. jai hind
Awesome tutorial. Initially I don't like CSS at all. But after watching your playlist I like CSS part. Thank you harry bhai for such great content in most easy to understand explanation. Thanks a lot.
At 23:42 when u copy pasted the justify-content note to align-element at line 35, you should have changed the note to-> align elements will align the content in vertical direction, instead of writing the note as- justify-content will justify the content in vertical direction. Hope it helps.
Thankyou so much Harry brother for this kind of content. Even i bought a course from popular website i can't share the name but good name in coding but as compair to your content in youtube their content was zero 0.
Here some twist in flex-wrap:wrap; property when you give width of your container 100% the elements wrap and come to new line as you decrease width in Toggle Device Toolbar using Chrome Dev. If we set width of our container in some pixels like width : 900px ; then the elements inside container are wrapped fixed so it no more coming to new line when you decrease width in Toggle Device Toolbar...
actually, the align-item: stretch; is used to stretch the element in cross axis, It is not used for vertical alignment just wanted to point that.. the course is DOPE harry bro
Thank you Harry Sir....Your tutorials and way of explanation is amazing....Please make tutorials on Jquery and Bootstrap as well....Thank you once again ..
justify content always positions the boxes on main axis and align items is used for cross axis, not always horizontal and vertical it depends on the relative position of main axis
Harry Bhai your course(videos+notes) makes it very easy to understand every concept I when I look at the previous videos these are so much easy to understand because of your notes..Thank you very much for your precious efforts
hello Sir, thanks for the tutorial. In the align-items: stretch; we need to remove the height of the item because it is fixed when we remove that then this stretch property will work. Thanks.
thank you harry bhai for your courses for free I can't afford money on whitehat But I learnt html,css, Java, javascript, Php, C++, C with the help of harry bhai next target python! and mobile and app development
Sir, I am creating a navigation bar and take two div for left box and right box in it. when I am trying to shift left box in left and right box in right using position property and sets respectively- top 5px and left: 10px,top: 5px and right: 10px ,both boxes overflow the navbar and navbar shrinks in a single line. should I set the height of navbar or if you have any other better alternate please tell me.
You can put two boxes in div with class navbar and set properties of navbar accordingly(Didn't understood your doubt clearly but I think this will help)
You are great, your tutorial is awesome, if those website developer had missed this tutorial definitely he/she missed something. I definitely touch your feet, if I get a chance to meet with you it's my pleasure!
Your explanation that justify-content works in the horizontal direction, and align-items works in the vertical direction is incorrect. They depend on the flex-direction. A better way to understand the behavior of these two properties is by knowing about the two axis in Flexbox: Main axis and Cross axis. The Main Axis runs along the direction (flex-direction) of the flex layout. It is horizontal when flex-direction: row; (default) It is vertical when flex-direction: column; The Cross Axis runs perpendicular to the Main axis (that is, it is vertical when main axis is horizontal, and vice versa). The Flexbox properties justify-content and align-items target each of the axes. justify-content always affects the main axis align-items always affects the cross axis Please take a moment to study the diagram at 1:27, and fully grasp this tiny little detail. Everything else in Flexbox will become so much clearer after that.
Yes got it flexwrap ❤❤😊 nice way to explain all the things last time I am not be abl to do but I saw again next day then I am able to do perfectly thx for your guidance ❤️❤️👌👌
Hey can you help me out with "flex-wrap: wrap", it doesn't work on my system. When I reduce the screen size the boxes don't wrap, they just disappear according to the screen size
flex-wrap:wrap; basically wraps the flex items inside the flex container. That's why if you are trying it with "flex-direction:column;" it may not be giving the desired result. If you want to get the desired result put flex-wrap:wrap as comment when you are using "flex-direction:column"
8:00 Flexbox(display:flex)
10:30 flex-direction
12:55 flex-wrap
15:20 flex shorthand(flex-flow)
16:45 justify-content
19:40 align-item
25:00 order property
26:30 flex-grow
28:00 flex-shrink
33:30 align-self
29:37 flex-basics
weldone!!!
The best part is that you also provide entire code and notes.Even some paid sites dont provide such basic things.Amazing!! Keep making videos on web d!!🙂😊
I learnt Flex-box from Coding-Ninja but I had a lot of doubts ,
after watching this video everything is clear now ...Code with Harry is really better than any other paid course.... and thank you so much bhaiya !!
Bhaiya 😂
coding ninjas is not good right for web dev
bhaiya bolna jaruri tha kya
@@pawanthakuni996 Bengali ladkiya Kam ho jaane k baad aisa hi krti h hai 😂
Shreya, What your review on Coding Ninjas as i am thinking to join.
It will be very helpful to me.
Thanks
No matter wherever you search a material to learn new things, you will always end up coming back to Harry. Because he is simply the best out here...
Bhai wo container ki height kaisa set karni hai
@@mirzamohsinbaig6481 container waale div ko target karke
Harry Bro there's no-one who could have taught it any better. Thank you for this series and also for doing it for society i.e. for free, it now even inspires me to do something for this society to make it better. Thank you very much brother.
@@Moizoref fr bro 🤣
Guru ji mujhe pehle boht tough lagti thi ye sab cheeze... Par apki videos dekhke alag he confidence aaya h mujhme
The best part is he always starts writing the code from the beginning,, makes to feel much comfortable.
Given three hours to watch this vedio and try on my own whatever you taught... Superb hats off to you sir ..
19:58 Log vertically center karne k liye marte hai.
I really felt this.
Ha bhai😂😂 me bhi vhi sunke comment likhne aya tha🤠
Best tutorial for CSS flexbox. Best free online resources for learning CSS flexbox. This is the best playlist for learning HTML, CSS and JS. One stop for all sort of web development courses. Really like it !!!!
No matter where I get stuck in my path to be a software developer, i come to code with Harry channel and everything is resolved ❤ great respect to you @codewithharry !
Harry bhai, today I just tried instagram profile page using html and css. I didnt even know how to add a image but only because of you I could do this. It was not 100 percent perfect but I can say 80 to 85 percent perfect. I also got confidence that watching your tutorials I could do many more things. Thanks infinity. Hope to see more interesting tutorials from you. You are the best
One thing I wanna point out is that-
align-item : stretch ; is by default not flex-start.
Thanks for your lectures.
The stretch value stretches the flex items to fill the container (ye bas default hota hai)
Align Stretch is not working ☹️
@@projectsnik305 "Align stretch" will arrange items vertically in the same way "space evenly" arrange them horizontally. So to arrange the items evenly in vertical position using Align stretch you need to have items in vertical position (which are by default in horizontol position) so first use "flex-direction:column;" to have items in vertical position and then distribute them evenly using "align-items:stretch" and see the effect.
Finally my flex box is clear. Most of the educators do not cover the whole set of properties. Harry did it.
Harry bhaiya sachi me mai vertically center k liye mare ja rhi thi😂 lekin aaj vo problem is video se solve ho gyi 😊
Thanks a lot for this wonderful series 😇😊🙏.
After all the research I did, I can now finally conclude that this playlist is the best playlist for the web development course. Thanks Harry bhai!❤
@Bilal Ali 🤣🤣😏🤫
bro pichle 2 vdo mei vi same comment tha
@@CodingGuide11 Aage aur bhi milega😊
@@thrilleracaste400 okay 👍😆
Bhai kaam k comments niche rh jate h pls mt kro
One of the best course to learn web development from beginning (Noob to Pro level)
At first, Thank you so much for providing most of the programming series.
superb bro, your all tutorials are awesome. I think you are one of the best programmers in the world. Some institutes are not teaching with such quality after taking money while you are teaching for free. So that any poor student can realize their dream of learning programming languages.
And I am a big fan of you like you are a big fan of Picker and Emmit 😂😂😂
Again Thank you because I can learn everything about programming with you whatever I want to learn. 😊
border: 2px solid black😂
codewitharry fan where are you
@@nitishdas1838 haha
bro Html & CSS is not an programming language
Lorem34
Now got the understanding of Flexbox. Just completed the lecture number 28. The video was very detailed and comprehensive. Thanks
First of all thanks Harry Bhai...to explain it in easy convenient way💓 and hats off for who invented visual studio code and worked on developing CSS..
Harry bhai, you made the most useful part of CSS , crystal clear.
Before watching the video , i was very much confused with flex box, flex box item properties ...
😍😍Thanks...
you are welcome
Brother your teaching style is amazing hats off to you brother. please try to teach css grid and bootstrap as well if you can in this series and also if you can make the same playlist for PHP with SQL it would be
a great help thank you for your efforts and time cant be expressed in words
The best tutorial fa beginners..I lost the hope that I couldn't learn before I started to watch.. once I saw ua tutorial now I think I can achieve..Nd Can become a web developer ...thank u so much harry
I really wish I had teachers like you in my school. Really appreciate your work. :)
I learnt CSS and html from your videos. All contents are taught in a very simple way all students can understand.
Thank you sir...
bro after long time spend watching videos on youtube you r one who clear my flex-grow, flex-shrink and flex-basis concept. Good job bro and Thanks for this video.
the struggle he was doing when explaning space around was a real challenge
i just got every thing after just seeing the gapping hahaha!
Bhai wo container ki height kaisa set karni hai
Thank you sir.... for such useful contents. I never knew that I'll be able to learn web development in such a easy and effective manner. But it is going possible.. Because of you.
I really like this style of teaching.
Really incredible videos and awesome and effective way of study. i hope you'll never stop!
So humble and well explained. I'm happy I found your channel. absolutely love to all of the effort that you put into these videos. Appreciate the work that you put into making these videos. Hats off to your dedication
One of the best course to learn web development from Noob to Pro level...
Thank you so much bhaiya 🙏🙏
I'm very thankful to you sir.
I learned many of things from your video.Thanks for giving us so much for free.
may god bless you.
Sir You are great
20:50 "Align stretch" will arrange items vertically in the same way "space evenly" arrange them horizontally. So to arrange the items evenly in vertical position using Align stretch we need to have items in vertical position (which are by default in horizontol position) so First use "flex-direction:column;" to have items in vertical position and then distribute them evenly using "align-items:stretch" and see the effect.
Thankyou so much dear sir for making this wonderful tutorial about flexbox This is mostly recommended to all of you guys who search for the flex box tutorial in css
thank sir you are good teacher of web developer
Well described, i must say this course is much better than the paid course i ever had. Thankyou so much harry for such a nice video!!! Stay safe. jai hind
exactly brother
One of the best teacher i have ever seen in my lyf hats off u
Video and ita content is ausm .
Really cool teacher and such teaching method is needed in schools/colleges for better result😅
Awesome tutorial. Initially I don't like CSS at all. But after watching your playlist I like CSS part. Thank you harry bhai for such great content in most easy to understand explanation. Thanks a lot.
this channel should be named codding with legend
*coding
thank you ,harry bhai...kam karte karte socha nahi tha k kabhi stack se reated kuch sikh paunga ...god bless you bro
At 23:42 when u copy pasted the justify-content note to align-element at line 35, you should have changed the note to-> align elements will align the content in vertical direction, instead of writing the note as- justify-content will justify the content in vertical direction.
Hope it helps.
Ty brother
Thankyou so much Harry brother for this kind of content. Even i bought a course from popular website i can't share the name but good name in coding but as compair to your content in youtube their content was zero 0.
And thanks alot for all the free videos you're making for us...i definitely wanna meet u once in my life time.god bless you
Great Harry bhai.
You are not just teaching you are also creating cheetsheets
I will recommend your channel to everyone I know who wants to learn programming! you're doing a great job!
I am learning web development, your tutorials are just legendary 🔥🔥🔥🔥
You are doing great job ....God bless you:-)
thanku harry bhai.
Yahi vah jagah hai jaha aapko saare item mil jayenge .😀🥰🥰🥰 webdevlopment video.
If flex-wrap is not working on your system use max-width instead of width in flexbox-container.thank you
that happens bro ignore.
@@Binod-cx5lj It wasn't still working for me bro.
Thanks bro
it does bruh ...
thanks
Really, your courses are better than any paid courses out there.
This is huge 😍😍😍 Thanku so much for this video !!
Harry bhai you are the best really itne ache se sab kuch apne samjhaya hai ..
Here some twist in flex-wrap:wrap; property when you give width of your container 100% the elements wrap and come to new line as you decrease width in Toggle Device Toolbar using Chrome Dev. If we set width of our container in some pixels like width : 900px ; then the elements inside container are wrapped fixed so it no more coming to new line when you decrease width in Toggle Device Toolbar...
i'm facing this problem and now find solution ... thanks .
Sir you are awwesome trainer . Country needs more trainers like you.
actually, the align-item: stretch; is used to stretch the element in cross axis, It is not used for vertical alignment just wanted to point that.. the course is DOPE harry bro
Cross axis vertical axis hi hota h
@@mahendrakumarkhichi7879 chhod bhai kuch logo ka kaam hi nooks nikalna hota ha. Zaada samajhdaar ban ne ki koshish kar raha tha voh
You have got the best CSS tutorial on the internet...
Thank you Harry Sir....Your tutorials and way of explanation is amazing....Please make tutorials on Jquery and Bootstrap as well....Thank you once again ..
Nice demonstration..
you are true concept lover and provide the correct knowledge...
i am very inspired..
i have to say .. BIG FAN SIR...
now I understand the difference between aligning and justify
Best Tutorial on FlexBox, Thank you So Much Harry Bhaiyya 🥳🥳, Apse accha aur koi bhi explan nahi karsakta hai.
l
justify content always positions the boxes on main axis and align items is used for cross axis, not always horizontal and vertical it depends on the relative position of main axis
Bro when will u continue Android and ML course. Plz start whenever u get time. Ur the best.
🙏💕
Best tutorial I found in youtube... Awesome man... Keep it up.
Thanks for sharing this informative tutorial. You explained it very well!!
Isko cover karne mein 3 din laage... mind blowing tha...yeh part...Thank you
"and i will see you next time" , best part for me in the video
bhai you are Wikipedia, really you have abundance of knowledge, thank a lot.............
AT this time period 12:41 you can see how much hardwork, he has done for us
Mate he is making MONEY...
your explanation is so smooth and satisfying...Best teacher Harry sir 🙌🥳
Addicted to the beat which plays at the end of every video of harry
mindblowing harry Bhai teaching us mindblowing stuff. If Oscar or Nobel was given to RUclipsrs, Harry Bhai would be the first Indian to get that.
It's make floating and positions less important 😂😂
Yes
Your English is breaking my humour
Yes
@@MonkeyProduction619 so your humour is weak
Hmm float and postion crying inside a centred div's corner
Best & Easy flexbox video I've ever seen on youtube
Please make detailed course on Data Structures and Algorithm those who want this please comment 🙏
👍
yes bro u r right please make courses on data Structures and Algorithm
@@adityacheke4142 the course is there.
yes please make
arte bas karde mera bhai har video ma comment kiya hai bas karda na course ban chuka hai
You are pure gold my friend 💯
This video was indeed interesting!
love from Karnataka bro♥♥♥.u r helping us a lot and helping in improve our grades and confidence to face fear and exam .........
I knew some CSS but this is the first time I came to know about flex. Thank you Harry bhai
Flex is better than floating and positioning
@@ashiskanu7101 True and I am enjoying it
Harry Bhai your course(videos+notes) makes it very easy to understand every concept I when I look at the previous videos these are so much easy to understand because of your notes..Thank you very much for your precious efforts
Harry Ergonomic key boards avoid, wrist stress and efficient long working hours. thanking you for sharing, great knowledge.
Harry bhai....bohot Maja aa raha tutorial mein.....dhanywad 🙏🏻🙏🏻
note : you can use flex-start and flex-end in justify-content also
yes
Love you Harry bro, you explained us these topics in simplest ways.
Thank you very much...😊
Your explanation is amazing. Believe that!!!
this video is best one learned tons of things from random creators but all my doubts cleared here at 22:13 still watching
Thank you, sir
for explaining about display = flex
I am getting difficulty in the display = flex
display: flex;
Harry bhai salute to your efforts, dedication n मेहनत for us.
LUV U BRO
sir boostrap tutorial need in this series
Yes sir we need a course on bootstrap
Yes.. bootstrap tutorial please..
i like your teaching style. beginner like me easily understand. Awesome.
hello Sir, thanks for the tutorial.
In the align-items: stretch; we need to remove the height of the item because it is fixed when we remove that then this stretch property will work.
Thanks.
thank you harry bhai for your courses for free I can't afford money on whitehat But I learnt html,css, Java, javascript, Php, C++, C with the help of harry bhai next target python! and mobile and app development
is it necessary to set width in % rather than in px to use flex wrap property?
i dont think so
hmmm i agree but not too much
no i guess
percentage or px is just a property of width for the element you can use both of these for the flex-wrap property.
U r a Gem Harry bhai..♥️
Flexbox ne to dil khush kr dia.
Sir, I am creating a navigation bar and take two div for left box and right box in it. when I am trying to shift left box in left and right box in right using position property and sets respectively- top 5px and left: 10px,top: 5px and right: 10px ,both boxes overflow the navbar and navbar shrinks in a single line. should I set the height of navbar or if you have any other better alternate please tell me.
You can put two boxes in div with class navbar and set properties of navbar accordingly(Didn't understood your doubt clearly but I think this will help)
Check out Video #26, Project 1
You are great, your tutorial is awesome, if those website developer had missed this tutorial definitely he/she missed something. I definitely touch your feet, if I get a chance to meet with you it's my pleasure!
Your explanation that justify-content works in the horizontal direction, and align-items works in the vertical direction is incorrect. They depend on the flex-direction.
A better way to understand the behavior of these two properties is by knowing about the two axis in Flexbox: Main axis and Cross axis.
The Main Axis runs along the direction (flex-direction) of the flex layout.
It is horizontal when flex-direction: row; (default)
It is vertical when flex-direction: column;
The Cross Axis runs perpendicular to the Main axis (that is, it is vertical when main axis is horizontal, and vice versa).
The Flexbox properties justify-content and align-items target each of the axes.
justify-content always affects the main axis
align-items always affects the cross axis
Please take a moment to study the diagram at 1:27, and fully grasp this tiny little detail. Everything else in Flexbox will become so much clearer after that.
so effective teaching Sir... thanks so much for making this topic so easy to understand.
Sir, when i m assigning flex-direction value to column and flex-wrap value to wrap, it doesnot work out. May you help me out?
Yes got it flexwrap ❤❤😊 nice way to explain all the things last time I am not be abl to do but I saw again next day then I am able to do perfectly thx for your guidance ❤️❤️👌👌
Hey can you help me out with "flex-wrap: wrap", it doesn't work on my system. When I reduce the screen size the boxes don't wrap, they just disappear according to the screen size
try decreasing the width and height of boxes
bhi mere sath bhi yahi ho ra hai
koi solution mila kya
You can try adding this piece of code inside head tag:
flex-wrap:wrap; basically wraps the flex items inside the flex container. That's why if you are trying it with "flex-direction:column;" it may not be giving the desired result. If you want to get the desired result put flex-wrap:wrap as comment when you are using "flex-direction:column"