There is a lot Teachers of HTML*CSS , But for me you are the best . i always say that everything need to be learn need a good teacher and a good teacher is someone who explain something hard and make it easy . Teacher is the key for learning Guys if you don't understand something it's because of the teacher and not your brain . Thank you mmtuts
so far so good, i wanted to use CSS grid but decided to give this a try and yeah its pretty cool. now i just have to center the site and see if i can get my navigation working right "sticky nav" see you soon. thanks
I've been learning HTML, CSS and PHP for the last year. Love your tutorials they so easy to follow and understand, your a great teacher Daniel. Would it be possible for you to do a basic WYSIWYG tutorial?
Css grid is amazing, the future of web design. Flex box takes the pain out of current day layouts. Both are fantastic and flex box has been around for a few years now and that is the reason it has better browser support. That’s buddy great video 👍
Wow, great vid ! Clear examples, including explaining and showing all possible parameter-values (even the missing ones in your editor ...) Super, super cool ! Thanks mmtuts.
Brilliant way to explain the tutorial mate... Loved the animation helped me visualise the actual layout as you were explaining/tying it. Well done!!!!! I will watch this over & over until I get it in my thick scull :-)
Love this tutorial and everything that you do, Daniel! One piece of feedback, if it's helpful: five identical strings of Lorem Ipsum text are not the best choice for demonstrating the various styling options of flex box. While it would've taken a few more minutes to set up, I'd suggest for a future video to create several differently colored div blocks. Thanks again!
Well done! I especially like the "Real Time View" you provide along the coding. May I ask you how this section is created/animated? Greetings from Munich, Germany.
feel like there should be a part 2 to this because im trying to use flexbox instead of float now and i dont feel like i got enough from this video be able to use it. like if there was an example video on flex boxes while you made a website that would be pretty helpful
I don't know why, maybe it's an update but for me the paragraph would just start a new line when it got to the edge of the container which means that it divided it's self into 4 text boxes across the screen instead of one going underneath.
Thank you for the video, can you please put the browser and the coding side by side please. So that you don't have to jump between the two. The tutorial was awesome thank you
Finally someone was able to clearly explain what the heck this flexbox thing is all about. That said, using more examples - as opposed to words - would make your video even better ;)
Thank you for your videos. I just want to mention that the default value of align-items is stretch not flex-start. When I was doing practice I confused thinking flex-start is default as you said.
Hi MMtuts , I love your videos , I think you are so awesome. I subscribed to your patreon . The only question I have , is whether you will maybe include some of the gitfiles to the code.
Recently I use CSS Grid to create entire page layouts for practice, but I think it is a great idea to mix Flexbox into it :) You don't have to stick with only one.
is there a way to align based on the content instead of the div box, i have pictures that dont fill the whole div box but i want them next to eachother
I used (float) in my flexbox project to have text wrap around my image. Was there a better way? 500 px for the container means we design for cellphone first i assume? I don't really understand how to use the inspect tool in Google chrome, am i the only one? i did not see an option to design for an iphone 6.
Thanks for the video. BUT what If i want to create a navigation bar, with three 4 items? Let´s say I want to put the first 3 items all close together to the left, and the 4ºone I want to put it all to the end right of the nav bar. If I select the 4ºitem in CSS with a class (for example) and I put "align-items: flex-end" nothing happens. And If I select all the 4 items, then, well, I just can´t do what I want. How something like this would be approached?
Hi, can you help me please? I have 3 items in a container and I want the first 2 to be positioned next to each other on the left side but the third one I want to be positioned on the right side using flexbox, i tried everything but i haven't found a solution so far.
If you want to place text next to an image, then you just need to create a small flex container, which then has the text and image inside of it. Here is an example: div { display: flex; flex-flow: row wrap; } Here is some text If you want multiple images and text after one-another, then just add more :) Here is some text Here is some text Here is some text Here is some text
mmtuts did you say you wanted to see some of the projects we had made? Seeing our screw ups might give you more onsite on our knowledge base and how we understand. I am trying JavaScript also and although I understand it.... I still can't always do it or figure out what to do with it or why I need some of the things it can do. I figure that's because I really dont know it well enough yet.. Feel better soon!
You can make navbars with it...make a unordered list and apply and done..all li elements will line up next to each other without dealing with floats and clear. Anywhere that you need boxes aligned next to each other. Have a bunch of divs inside a parent div and give the parent div a display of flex and you have a windows 8/10 style tiles on your website
NEW UPDATED 2023 COURSE AVAILABLE! 🙂
You can find it here: th-cam.com/video/v8jDnBYc0bs/w-d-xo.html&ab_channel=DaniKrossing
There is a lot Teachers of HTML*CSS , But for me you are the best .
i always say that everything need to be learn need a good teacher and a good teacher is someone who explain something hard and make it easy .
Teacher is the key for learning Guys if you don't understand something it's because of the teacher and not your brain .
Thank you mmtuts
You're a life saver. My own instructor couldn't tell me how to correctly make a simple two-column flex box.
Hi everyone :) The next HTML and CSS lesson is finally here. Even though it took a bit longer than expected. Enjoy!
Hej ven! Jeg elsker dit arbejde og mange tak for at dele din viden med verden!
Hvilken editor platform bruger du?
@@TheElevenBravo da hell?
@@epic_waffle2359 I think it is actually spelled backwards. try reading it reverse. :)
@@TheElevenBravo He uses atom.io
I’m still struggling to find the video on your page
Thanks so much. My mind was stuck when it comes to Flexbox now I am still getting it.
This was so confusing until I watched your video. Thank you so much bro!
This new approach with animations is really cool, I can imagine how much additional time it took, but it's really a new level. :)
Thank you :) I'm glad to see that it was appreciated. It took quite a while extra hehe
It really was extremely helpful, thanks a lot for investing your time! Your lessons are really awesome and you are a great teacher!!
The animations here provide true value. Thanks for your hard work
Awesome illustration. 😊
i guess it's kind of off topic but do anybody know a good website to stream new series online?
This "Real Time View" representation is really helping a lot. I wish it were present in earlier videos as well :)
I like how the way you teach the process; it is very efficient and easy to understand. I appreciated it alot, bro.
This is one of the best tutorials on Flexbox that I have seen in tech channels in TH-cam! Definitely on my Top 3.
I like how you also explained some of the HTML as well. As a beginner, its easier to get a better understanding of the layout.
I've learned this on school there it was a bit sketchy, and now I know everything, thank you!
Such Detailed Explanation. Bless you man
I normally dont comment on tutorial videos, but let me say your tutorials are easy to follow, applicable and to the point, keep it up!
This is by-far the best tutorial for flexbox, I could find on youtube. Thanks!
Superb quality
That real time view is SUPER helpful!!! Thanks!
so far so good, i wanted to use CSS grid but decided to give this a try and yeah its pretty cool.
now i just have to center the site and see if i can get my navigation working right "sticky nav"
see you soon. thanks
Thanks for the cool tutorial. That's a lot of valuable information in a very short amount of valuable time. Just great!
I've been learning HTML, CSS and PHP for the last year. Love your tutorials they so easy to follow and understand, your a great teacher Daniel. Would it be possible for you to do a basic WYSIWYG tutorial?
Css grid is amazing, the future of web design. Flex box takes the pain out of current day layouts. Both are fantastic and flex box has been around for a few years now and that is the reason it has better browser support. That’s buddy great video 👍
I also love the animation! It vastly facilitates my understanding of your teaching. Thank you for putting so much effort in making these videos!
Wow, great vid !
Clear examples, including explaining and showing all possible parameter-values (even the missing ones in your editor ...)
Super, super cool !
Thanks mmtuts.
This was the video many were waiting thanks!
This is nice!
Great video :)
Brilliant way to explain the tutorial mate... Loved the animation helped me visualise the actual layout as you were explaining/tying it. Well done!!!!! I will watch this over & over until I get it in my thick scull :-)
If i forgot how flex-box works my mind just automatically remembers you HAAHAH that just shows how awesome and precise your explanation is
i love the animation it makes the teaching way easier
Love this tutorial and everything that you do, Daniel! One piece of feedback, if it's helpful: five identical strings of Lorem Ipsum text are not the best choice for demonstrating the various styling options of flex box. While it would've taken a few more minutes to set up, I'd suggest for a future video to create several differently colored div blocks. Thanks again!
Your videos are so amazing. Thank you so much for this quality of tutorial!
You solve my problem thank you
i loved this new approach
Thank you very much!!!!!!!
Thank you for all your videos, its helping a lot.
awesome tutorial
Thanks! I understand it a little better 😀
Well done! I especially like the "Real Time View" you provide along the coding. May I ask you how this section is created/animated? Greetings from Munich, Germany.
Thanks so much...
feel like there should be a part 2 to this because im trying to use flexbox instead of float now and i dont feel like i got enough from this video be able to use it. like if there was an example video on flex boxes while you made a website that would be pretty helpful
i dont feel that
your video is helpful for me. thanks a lot.
tnx a lot..this help how to using flex..
Best tutorial i've watched so far. Well done m8.
P.S Which laptop r u using?
Learned a lot! Thanks! :)
Awesome!!!!
you were more chatty than i would like but atleast i learned so thank you
i loved this method it's very easy and efficent to use thanks alot
How can I choose the appropriate dimensions(width /height) for each template such as header, navigation, asid, main content and footer.
I don't know why, maybe it's an update but for me the paragraph would just start a new line when it got to the edge of the container which means that it divided it's self into 4 text boxes across the screen instead of one going underneath.
By the way, how did you use the real time use. Is that a sort of platform that I can download?
Thank you for the video, can you please put the browser and the coding side by side please. So that you don't have to jump between the two. The tutorial was awesome thank you
Finally someone was able to clearly explain what the heck this flexbox thing is all about. That said, using more examples - as opposed to words - would make your video even better ;)
Flex-Box. Beautifully explained. Thanks.
{2022-09-21}
Thank you
Just subscribed
love the real time view
Thank you for your videos. I just want to mention that the default value of align-items is stretch not flex-start. When I was doing practice I confused thinking flex-start is default as you said.
What's the difference between using flex-basis and width
you forgot to mention align-self property ,btw nice video!
Hi MMtuts , I love your videos , I think you are so awesome. I subscribed to your patreon . The only question I have ,
is whether you will maybe include some of the gitfiles to the code.
If u use more of the realtimeviews then it would have been easier for beginners to learn it!:o rtv is a good way to show it
thanks thanks thanks
this is perfect.. thanks..
201 episodes in and i feel I have learned more than what I learned in high school
maybe with the browser, you could've assigned different colors to the text that correlates
How can I get the real time view as yours?
It would be a great example if you do a small website with flex box
Thanks for the awesome tutorial man. Just curious which should i use CSS Grids Or Flexbox. Which one is better?
Recently I use CSS Grid to create entire page layouts for practice, but I think it is a great idea to mix Flexbox into it :) You don't have to stick with only one.
that realtime preview is pretty cool! did you program it yourself, or did you use some software to do it?
is there a way to align based on the content instead of the div box, i have pictures that dont fill the whole div box but i want them next to eachother
I wonder what justify-items would do ? At @19.30 minutes ? Anyways great tutorial 😀
162k web student were blessed by this video
I used (float) in my flexbox project to have text wrap around my image. Was there a better way?
500 px for the container means we design for cellphone first i assume?
I don't really understand how to use the inspect tool in Google chrome, am i the only one?
i did not see an option to design for an iphone 6.
First!
Nope :)
box-sizing is the way to go.
Thanks for the video. BUT what If i want to create a navigation bar, with three 4 items? Let´s say I want to put the first 3 items all close together to the left, and the 4ºone I want to put it all to the end right of the nav bar.
If I select the 4ºitem in CSS with a class (for example) and I put "align-items: flex-end" nothing happens. And If I select all the 4 items, then, well, I just can´t do what I want.
How something like this would be approached?
@Pauli Liatto just make a class for 4th item and than make float: right; that's it
Hi, can you help me please? I have 3 items in a container and I want the first 2 to be positioned next to each other on the left side but the third one I want to be positioned on the right side using flexbox, i tried everything but i haven't found a solution so far.
Do you think you can show how to make something fit the screen, because when i put the width and height at 100% there's still space.
It is because you haven't applied any reset styling to your website. I show how to do this in lesson nr 6 :)
Well, I don't know what I'm doing it's wrong. After 10:21 isn't the same as yours, haven't this space in center and all the paragraphs is side by side
Hello i would like to know the text/code editor you are using
It is called Atom.
Thanks for prompt response
Yeah already did
Hi Dan, i was wondering how you got that real time view up. is it a special programme? Great video as always ;)
Hehehe no I animated it in while editing the video :) using Adobe Premiere Pro
Hehe, would be nice if someone created a programme showing that :)
sir, please do live project using html and css as well responsive designing.
My previous project and the next video talks about responsive design :)
how to put text beside an image with flexbox without using float?
The div, with a div inside is still a concept i am not yet clear on.
If you want to place text next to an image, then you just need to create a small flex container, which then has the text and image inside of it. Here is an example:
div {
display: flex;
flex-flow: row wrap;
}
Here is some text
If you want multiple images and text after one-another, then just add more :)
Here is some text
Here is some text
Here is some text
Here is some text
The next episode that I upload on Monday will also have an example of how to do this :)
mmtuts did you say you wanted to see some of the projects we had made? Seeing our screw ups might give you more onsite on our knowledge base and how we understand.
I am trying JavaScript also and although I understand it.... I still can't always do it or figure out what to do with it or why I need some of the things it can do. I figure that's because I really dont know it well enough yet..
Feel better soon!
What is this good for I'm new at web development
It essentially replaces "float" in CSS, and allow us to customize HTML elements further.
You can make navbars with it...make a unordered list and apply and done..all li elements will line up next to each other without dealing with floats and clear.
Anywhere that you need boxes aligned next to each other. Have a bunch of divs inside a parent div and give the parent div a display of flex and you have a windows 8/10 style tiles on your website
14:00
I used to think flex box was cool until I found out the hard way the ADA compliance issues using it.
Huh? Pls expound
cool tool but it is complicated a little bit.
please sir make a SVG animation toturail please sir
After watching this video go to flexboxfroggy.com/ for extra practice
Your welcome and good luck!
I think i am going to wix.com...
Should this be #21?
clicked on ur vid cuz i think ur cute
I'm sorry but why do you always have to sing the last word of the end of every sentence?
I just realized that when I generated a random paragraph, the first sentence was the same as yours.
lol
any indian here?
Don't worry you are not alone...
It would be a great example if you do a small website with flex box