10 | CSS FLEXBOX TUTORIAL FOR BEGINNERS | 2023 | Learn HTML and CSS Full Course for Beginners
HTML-код
- Опубликовано: 9 июл 2024
- Create Layouts Using CSS Flexbox | Learn HTML and CSS | HTML Tutorial | CSS Flexbox Tutorial. In this CSS Flexbox tutorial you will learn how to use Flexbox which is a new feature in CSS. Flexbox lets us align HTML elements in many ways and create layouts using CSS.
➤ TIMESTAMPS
00:00:00 - What is Flexbox?
00:01:08 - What I have so far...
00:02:47 - Create a flexbox container!
00:03:30 - flex-direction
00:05:25 - flex-wrap
00:06:29 - justify-content
00:09:50 - align-content
00:11:49 - gap
00:13:26 - Style container items!
00:13:26 - order
00:14:54 - flex-basis
00:16:25 - flex-grow
00:18:48 - flex-shrink
00:20:02 - align-items
00:21:38 - align-self
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon and RUclips Memberships to share improved and updated lesson material, and for a small fee you can access all the material either from my memberships or Patreon, depending on your preference. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Memberships: / @dani_krossing
Patreon: / mmtuts
![mgk - I Think I’m OKAY (with YUNGBLUD) (Sad Version) [Official Music Video]](http://i.ytimg.com/vi/7AC1uqQLIg4/mqdefault.jpg)
As a beginner I watched a few videos, 25 to go. Good videos with very clear and understandable explanation.
I really enjoy the way you discuss every part, it's very detailed. Are you considering in teaching JavaScript as well?
this is the first video that I couldn't keep up with you, I'll do some reading and come back to it
As the lessons go on, I show how to use Flexbox in actual examples, which might be easier to understand 🙂 so you can just skip this for now and return to it later
@@Dani_Krossing i'd delete this TMI. LOL
Excellent, thanks for sharing.
Thanks for the videos Dani, the content is very good, very easy to follow, and the explainations are just brilliant.
Dani ! Your teaching skills are wow. I have watched 80% of your videos. I am dreaming to ever become a web developer 😅😅. With love from Belgium.
Thanks for the video dani, even though I have a lil knowledge on css styling / layout i look forward to your videos and refresh that knowledge!
Really glad I discovered your channel. Excellent content, clearly and articulately explained with a great presentation style and manner. Many thanks for all the hard work that goes into these. Greatly appreciated.
I like all the videos I have watched from your web dev content, I have watched a lot of other people and I was never able to completely understand, sometimes it to easy it's really hard.
Thank for the teaching , very good 🎉🎉🎉🎉🎉
Thanks for this videos. Took notes (on MSWord) like you suggested.
very informative😭😭💯💯
This was fantastic thanks, div's always have frustrated me and I've defaulted back to tables so this makes it much easier to understand why they drop down below and not beside each other!
King is back
Hello Dani Krossing. Remember that video you made on how to make a player health system? I used it and after a little tweaking it worked great! But you never showed how to make the player die. I tried but I can't figure out how to do it on my own, so can you please show how if you have the time? That would help me a lot. Thank you.
I just use Bootstrap Grid now which works with WP too of course. I couldn't go back to using float and flexbox etc.
Using frameworks should always be the end goal when building commercial sites. 🙂 But in a course like this where you are learning HTML and CSS for the first time, it is important to learn how to build sites “manually” to get the understanding down.
All your 2023 video are excellent. However there is something missing, which is one video, where you take all your individual videos, which ends up with one video of a an actual website, which if we are stuck, can refer to your individual video for the answer. What do u think?
20:00
Lemme just "flex" my developer lazyness by saying I use tailwind css. 😆
Soo close on getting dark mode, it burrrnnnzzzz, please Dani please make the background dark 😭🤣
What I see many sites not do that offer dark mode by prefers color scheme is making sure their website doesn't flash when (re)loading, to prevent that you can add a style tag in the header that sets the body background to your dark color 😉
Since my React website is a web app that needs to fetch a lot of data from the user to get ready I even included a loading screen with all its styling in the index page, no flashing and the user sees something is working instantly.
I’m having a problem with when you added new div tags like the repeated 1,2,3 div tags
The colors just got bigger and stayed on a line like the purple on a column green on another column same with the last color,it did not follow the flex like the purple color coming after the last color wish is can show you a picture of it😢,it’s making me sad right now sir
What can I do to make it like yours
One like per video is not enough
Hi... I need your help
You are always more than welcome to write a comment asking a question for me or others to answer. 🙂
@Dani Krossing need help creating multi div using flex. Is there any email where I can show you the design?
@omer habib As soon as a comment says "I need your help", without being followed by the issue, 90% of the time it's because the person wanna get "in touch with me" hehe. 😅
Unfortunately I don't do private interactions with my viewers. 🙂 But you are always more than welcome to describe your issue in detail in the comments.
May I know why there is no grid video in this course? Is it not that important?
I haven’t gotten around to it yet 🙂 there is a grid video in my older course, which is still valid
@@Dani_Krossing Thank you, i will definitely watch it
it is important, but you will use Flex for the most part, unless you are working with a framework or other similar tools.