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
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'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?
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!
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
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.
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.
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
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
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.
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.
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.
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.
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?
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.
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 ;)
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: ruclips.net/video/v8jDnBYc0bs/видео.html&ab_channel=DaniKrossing
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
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?
You're a life saver. My own instructor couldn't tell me how to correctly make a simple two-column flex box.
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
Great video :)
This "Real Time View" representation is really helping a lot. I wish it were present in earlier videos as well :)
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 👍
This is by-far the best tutorial for flexbox, I could find on youtube. Thanks!
This is one of the best tutorials on Flexbox that I have seen in tech channels in RUclips! Definitely on my Top 3.
I've learned this on school there it was a bit sketchy, and now I know everything, thank you!
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!
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.
Such Detailed Explanation. Bless you man
Flex-Box. Beautifully explained. Thanks.
{2022-09-21}
I also love the animation! It vastly facilitates my understanding of your teaching. Thank you for putting so much effort in making these videos!
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?
Thanks so much. My mind was stuck when it comes to Flexbox now I am still getting it.
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 :-)
This was the video many were waiting thanks!
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!
This was so confusing until I watched your video. Thank you so much bro!
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 like how the way you teach the process; it is very efficient and easy to understand. I appreciated it alot, bro.
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!
Your videos are so amazing. Thank you so much for this quality of tutorial!
i love the animation it makes the teaching way easier
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.
That real time view is SUPER helpful!!! Thanks!
How can I choose the appropriate dimensions(width /height) for each template such as header, navigation, asid, main content and footer.
By the way, how did you use the real time use. Is that a sort of platform that I can download?
Superb quality
Best tutorial i've watched so far. Well done m8.
P.S Which laptop r u using?
This is nice!
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.
your video is helpful for me. thanks a lot.
i loved this new approach
Thanks! I understand it a little better 😀
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
Thank you very much!!!!!!!
awesome tutorial
You solve my problem thank you
What's the difference between using flex-basis and width
Thank you for all your videos, its helping a lot.
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
Learned a lot! Thanks! :)
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.
Thanks so much...
tnx a lot..this help how to using flex..
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.
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.
that realtime preview is pretty cool! did you program it yourself, or did you use some software to do it?
i loved this method it's very easy and efficent to use thanks alot
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.
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
you were more chatty than i would like but atleast i learned so thank you
Awesome!!!!
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.
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
you forgot to mention align-self property ,btw nice video!
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
love the real time view
Thank you
Just subscribed
How can I get the real time view as yours?
201 episodes in and i feel I have learned more than what I learned in high school
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 :)
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 ;)
this is perfect.. thanks..
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
Hello i would like to know the text/code editor you are using
It is called Atom.
Thanks for prompt response
Yeah already did
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!
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 :)
After watching this video go to flexboxfroggy.com/ for extra practice
Your welcome and good luck!
It would be a great example if you do a small website with flex box
maybe with the browser, you could've assigned different colors to the text that correlates
I wonder what justify-items would do ? At @19.30 minutes ? Anyways great tutorial 😀
162k web student were blessed by this video
box-sizing is the way to go.
thanks thanks thanks
sir, please do live project using html and css as well responsive designing.
My previous project and the next video talks about responsive design :)
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
First!
Nope :)
please sir make a SVG animation toturail please sir
Should this be #21?
clicked on ur vid cuz i think ur cute
I used to think flex box was cool until I found out the hard way the ADA compliance issues using it.
Huh? Pls expound
I'm sorry but why do you always have to sing the last word of the end of every sentence?
cool tool but it is complicated a little bit.
I think i am going to wix.com...
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