Pretty much a case study in how to make a tutorial. No filler, no fluff, no BS, just 100% solid meaty goodness. Thank You for sharing your knowledge. Super useful.
I have been studying web dev on youtube for some time now, and have watched many of the guys doing what you do.. you are most definitely one of the best. I appreciate what you do!
Wow! I am so stoked about flex boxes! This is great, I can't believe how nice you are to do all these great tutorials for everyone. I have been binge watching your channel like Netflix :-D Thank you!
Ninja you are the coolest explainer in youtube. I have a loooooot of channels to learn css and other programming stuff, but your videos are the most helpful. Thanks!
This is awesome. I'm a newbie to web dev and although I have heard about Flexbox, I haven't looked through it till now. This flex feature is amazing, so powerful and convenient. Thanks for your amazing vids ;) Keep it up
Net Ninja.. thank you for existing. Things Udemy teachers could not explain after buying a couple of courses, your material seems to make everyone enjoy while understanding things.
@The Net Ninja I really want to thank you for your tutorials - I really struggled with creating a menu using flexbox - alot of sleepless nights LOL. You explained it sweetly and simply - shout out to you!
Great stuff!!! I have learned more from you about Flex in 12 relatively short tutorials than I have by reading goodness knows how long articles elsewhere. It is fairly simple really. Thank you so much for this and for the clear way you explain things. By the way, any pointers you can give (or have you got any tutorials about this anywhere?) on how to add dropdown menus while staying within the flexbox method? Would be very much appreciated.
Hey Ninja, Love the video. Like how you said ul is the flex container, and li is the flex children. Really helped me understand how to target children from parent. Thanks again!
time 4:25, for beginners like me, ( Flex: 1 1 0 ) mean (flex: flex-grow flex-shrink flex-basis) :) The Net Ninja, what type of theme You are using in brackets? EDIT: Smarth Theme Dark
Thanks a million. the perfect instructor. Systematic, logical, clear and no beating around the bush. The justify-content (your code line 45) did not work for me. tried on FireFox and on chrome (both on Ubuntu 18.04). I commented out the flex 1 1 0 and it worked.
Great tutorial. Just a little note: floating ul elements to the right doesn't change the order of li(s), floating li elements is what causes them to reverse order.
Hey man, just found your channel and I have to say a BIG thanks for the videos! Really helping me on my journey to becoming a Web Developer. Quick question, would Flexboxes be the go to method for layouts for you today?
I hope you can make one more that is advanced like a 3 column layout with header and footer. Left column is for navigation(maybe 200px), center column is where the main space is then rightmost column is also close to 200px and can be used for updates. When browser is resized to the same width as cellphones, the left navigation changes from text to icons and can be hidden. The rightmost column goes under the main column. The header stays on top and footer can stay at the bottom or fixed position. It's kinda like a real website/app. Thanks a lot! :)
Very cool! You are doing a mobile-first approach here, aren't you? With specifying media queries for the bigger screen rather than the other way around?
Man, you are just awesome. I have one question. You used this in media query. Can we used this in desktop display and in media query can we use display: block for responsive?
Hi Shaun great tutorial as always! Just a quick question, how come you have both a width of 100% and then also a max-width of 960px on wrapper? Would max width 960px margin 0 auto not be all you would need to center it? Thanks! ( If anyone else knows the answer I would really appreciate it if you could let me know :) ).
is the navigation in the same flexbox as the main content or are they two different sections ? asking because i want the main content box to have padding or space on the sides BUT i want menu to take up entire width of browser. i hope i explained it well. please reply, i follow your javascript tut also. new subscriber.
In the wrapper class why have width to 100% and max-width to 960px? I get the function of the max-width in order to keep the elements inside in the middle but I don't get the width to 100%
Hi i have an problem I made everything what you explained in this video! It works in Google Chrome, Opera, Mozilla Firefox, Internet Explorer but there is a problem in Safari! Flex is not working safari! How can I fix this?
im having trouble knowing when the nav ul or the nav ul should be targeted for styling. does anyone have any tips that could possibly help me understand more?
Why do you use justify-content: flex-start; for the nav ul when you already say flex: 1 1 0; for the nav li? What does the flex-start achieve in this case? When I comment it out, the style remains the same. Thank you.
After I've put position:fixed on my navbar (which was made with flexbox) it messed EVERYTHING up. It doesn't make any sense. Can someone explain how to use fixed positions with flexbox?
I have completely followed your code. But for some reason the nav is just stacking on top of each other, and looks the same full screen as it does shrunk. Why? I've gone through it a few times, and still no joy.
Pretty much a case study in how to make a tutorial.
No filler, no fluff, no BS, just 100% solid meaty goodness.
Thank You for sharing your knowledge. Super useful.
Thanks Sam!
I have been studying web dev on youtube for some time now, and have watched many of the guys doing what you do.. you are most definitely one of the best. I appreciate what you do!
Wow! I am so stoked about flex boxes! This is great, I can't believe how nice you are to do all these great tutorials for everyone. I have been binge watching your channel like Netflix :-D Thank you!
Awesome, thanks :). Really glad you like them!
Ninja you are the coolest explainer in youtube. I have a loooooot of channels to learn css and other programming stuff, but your videos are the most helpful. Thanks!
Thanks so much :).
He is the best ! Thank you again !!!
This is awesome. I'm a newbie to web dev and although I have heard about Flexbox, I haven't looked through it till now. This flex feature is amazing, so powerful and convenient. Thanks for your amazing vids ;) Keep it up
Net Ninja.. thank you for existing. Things Udemy teachers could not explain after buying a couple of courses, your material seems to make everyone enjoy while understanding things.
@The Net Ninja I really want to thank you for your tutorials - I really struggled with creating a menu using flexbox - alot of sleepless nights LOL. You explained it sweetly and simply - shout out to you!
Your tutorials are extremely helpful. I refer to them for specific problems and always find the solution. Thanks!
His video tutorials learn me so much. It's clear and very detailed. Bought his JavaScript course on Udemy!
Awesome job, very helpful and informative.
Thank you :D
Great stuff!!!
I have learned more from you about Flex in 12 relatively short tutorials than I have by reading goodness knows how long articles elsewhere.
It is fairly simple really.
Thank you so much for this and for the clear way you explain things.
By the way, any pointers you can give (or have you got any tutorials about this anywhere?) on how to add dropdown menus while staying within the flexbox method?
Would be very much appreciated.
I love your videos, short, clean and very helpful. Not like others. And those ninja stuffs are so cool
That's how i like a code, simple and clean. Thanks a lot!
Hey Ninja,
Love the video.
Like how you said ul is the flex container, and li is the flex children. Really helped me understand how to target children from parent. Thanks again!
time 4:25, for beginners like me, ( Flex: 1 1 0 ) mean (flex: flex-grow flex-shrink flex-basis) :)
The Net Ninja, what type of theme You are using in brackets?
EDIT: Smarth Theme Dark
Thank you Kon!
Finally!!!
There's also justify-content: space-evenly. Quite useful indeed!. Cheers for the tutorial.
Nice addition... Thanks :)
Thanks a million. the perfect instructor. Systematic, logical, clear and no beating around the bush.
The justify-content (your code line 45) did not work for me. tried on FireFox and on chrome (both on Ubuntu 18.04). I commented out the flex 1 1 0 and it worked.
Great tutorial. Just a little note: floating ul elements to the right doesn't change the order of li(s), floating li elements is what causes them to reverse order.
As with all your videos, extremely helpful and well explained. Thank you
thank you useful and easier than it would be without using flex
These are good tutorials.I'm enjoying them.
I enjoyed the entire video..loved it truly :D
question: why do you not use a class for the , , etc? is it just because it's redundant?
awesome tutorials! i love em, many thanks for your efforts
A good tutorial clearly explained. Thank you.
Best tutorial easy and simple.. awesome bro ..
It's so beutifull - i feel happy in my guts. Good work and nice paste to follow
Ninja im recommending you for a knighthood, arise SIR.
You. Are. A. DEMIGOD!
I like the ninja style
Brilliant! Exactly what I was looking for and very well guided through it! Subscribing right away :-)
Awesome Tutorials as always +++++++++ thank you 🙂🙂
Ninja's spacebar died from its injuries after this tutorial series
Exceptional stuff. Thank you!
Man , you are THE BEST !
very helpfull it will help me with my midterm :)))
Excellent! Thank you very much!!
Very good job, keep up the good work!
Hey man, just found your channel and I have to say a BIG thanks for the videos! Really helping me on my journey to becoming a Web Developer. Quick question, would Flexboxes be the go to method for layouts for you today?
Awesome sir
👌👌👌👌
wow, flexbox is awesome
This is beautiful.
I really like this one!
Glad you like :D
I hope you can make one more that is advanced like a 3 column layout with header and footer. Left column is for navigation(maybe 200px), center column is where the main space is then rightmost column is also close to 200px and can be used for updates.
When browser is resized to the same width as cellphones, the left navigation changes from text to icons and can be hidden. The rightmost column goes under the main column. The header stays on top and footer can stay at the bottom or fixed position. It's kinda like a real website/app.
Thanks a lot! :)
Hello,I'm new in web design and it appears that I fall in love for web designing.I have subscribed on you account.I will keep following you.
Thank you my friend you are the greatest. Thank you so much.
Congratulations ....90k subscribers
Thanks :). Hopefully not long before the big 100K :)
Very cool!
You are doing a mobile-first approach here, aren't you? With specifying media queries for the bigger screen rather than the other way around?
Excellent! Excellent! Excellent! Thank you! Keep it up ! :)
can i say one thing :
i am in love
Great tutorials for a beginner! Though I am confused about the Mediaquery..would this now look different on a mobile version and how? Thank you
Thanks a lot brother.
Well done teacher, this is very helpful for me !! , I'm thank you :D
this was great!
thank you!
thanks very helpful .can i recommend changing upper case in logo cause it hard to read at first glance
Why did the text align uncommented later worked outside of the media query section ? @ 5:05
At 4:24 you applied the flex: 1 1 0; to the list items, will you please explain what the last two numbers mean and/or do? Thanks!
Man, you are just awesome. I have one question. You used this in media query. Can we used this in desktop display and in media query can we use display: block for responsive?
ty from Russia =) u are rly cool man! =)
Thanks :)
Fantastic Video Bro :)
You are a king! Thanks
what do you use please ? is it sublime text or not ??? and thanks you
Great Job man. Quick question.. how could I approach making the Nav stick to the top of the page?
Hi Shaun great tutorial as always! Just a quick question, how come you have both a width of 100% and then also a max-width of 960px on wrapper? Would max width 960px margin 0 auto not be all you would need to center it? Thanks! ( If anyone else knows the answer I would really appreciate it if you could let me know :) ).
is the navigation in the same flexbox as the main content or are they two different sections ?
asking because i want the main content box to have padding or space on the sides BUT i want menu to take up entire width of browser. i hope i explained it well. please reply, i follow your javascript tut also. new subscriber.
Much thanks!
I have a question that if I use the justify content and other sub properties of flex on li or a then it doesn't work. Can you please tell me why?
you need set width for them
Beautiful
Спасибо добрый человек!
In the wrapper class why have width to 100% and max-width to 960px? I get the function of the max-width in order to keep the elements inside in the middle but I don't get the width to 100%
i would really need a lot of help on ruby on rails please! your the best teacher dos far
#Grateful
+Rush Jop Hey, Ruby stuff will come soonish :)
Thank you!
hello.
i have a question.
can i use justify-content and flex property together?! or i should use one of them alone?!
thank you helpful
Hi i have an problem I made everything what you explained in this video!
It works in Google Chrome, Opera, Mozilla Firefox, Internet Explorer but there is a problem in Safari! Flex is not working safari! How can I fix this?
im having trouble knowing when the nav ul or the nav ul should be targeted for styling. does anyone have any tips that could possibly help me understand more?
THE BEST !
Thank you So Much......
You're welcome!
cant we add padding when displayed flex ???
i cant believe navigation can be coded so easily by flex.
Thank you)
i would like to have preview like you.. when i am in css file to show me on browser what am i doing live :)
Wonderful
Why do you use justify-content: flex-start; for the nav ul when you already say flex: 1 1 0; for the nav li? What does the flex-start achieve in this case? When I comment it out, the style remains the same. Thank you.
Z zk you wont need flex-start here because its the default value for the justify-content attribut
After I've put position:fixed on my navbar (which was made with flexbox) it messed EVERYTHING up. It doesn't make any sense. Can someone explain how to use fixed positions with flexbox?
I have completely followed your code. But for some reason the nav is just stacking on top of each other, and looks the same full screen as it does shrunk. Why? I've gone through it a few times, and still no joy.
make sure there is space after and:
@media screen and /*insert space here*/ (min-width: 768px)
i didnt understand what does @media screen do in css in general
Please how is your browser refreshing automatically as you make changes on your code?
How can I add a border on 'nav a:hover' without moving the element?
What is the editor you are using? and the OS?
+Ed Hendrickson It's Windows 10, and the editor is brackets - brackets.io/ :)
very cool
What editor are you using in the video?
it's brackets
If i want logo in dat nav then wat should i do
What about space-evenly?
Can we refer to the UL element directly?
ex:
ul{
color: white;
}
yes
What does *flex: 1 1 0;* ? The first 1 i get, but not the following 2 numbers...
Never mind it is explained in Tutorial #6 (at the end).
Thank you for these great tutorials!!
Cool
i am from bd.. .its so good
Nice bro like
But it's not responsive.
is someone here has figured what to do with responsive dropdown menus ?