CSS Flexbox Intro | Flex CSS Tutorial for Beginners

Подписаться 311 тыс.

Просмотров 22 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this CSS Flexbox introduction, we will explore the CSS flex properties you will frequently use with flexbox. This is a CSS tutorial for beginners with flexbox and is part of a CSS for Beginners playlist.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
Intro to CSS Flexbox | Flex CSS Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:26) Setup & Starter Code Review
(02:28) display: flex
(03:23) justify-content
(05:22) align-items
(06:37) flex-direction changes everything
(08:40) Reversing the rows and columns
(09:04) flex-wrap
(10:20) flex-flow shorthand
(11:30) align-content
(12:46) Flex items can also be flex containers
(14:01) flex-basis
(15:24) flex-grow
(17:02) flex-shrink
(19:11) flex shorthand
(20:49) order property
(23:28) Practice with Flexbox Froggy
🕹️ Learning Games:
🔗 Flexbox Froggy: flexboxfroggy.com/
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
🔗 HTML Special Characters and Entities: unicode-table.com
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
🔗 MDN - Columns: developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: developer.mozilla.org/en-US/d...
🔗 MDN - Flexbox: developer.mozilla.org/en-US/d...
📚 Typography Resources:
🔗 MDN: Fundamental Text and Font Styling - developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - www.cssfontstack.com/
🔗 MDN: Styling Links - developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about CSS Flexbox for Beginners helpful? If so, please share. Let me know your thoughts in the comments.
#css #flexbox #flex

Опубликовано:

8 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 60

@DaveGrayTeachesCode 2 года назад

When flexbox was introduced it dramatically changed how we think about constructing CSS layouts. It is essential to understand the fundamentals of flexbox, and in this tutorial, we'll review all of the flexbox properties that you will frequently use and explore how they can impact your CSS layouts. If you are just getting started with CSS, I recommend going to the beginning of this CSS for Beginners playlist: ru-vid.com/group/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

@nikoryu-lungma Год назад

Flexbox is the main tool I used to make the website responsive. From the projects I have worked with(in the companies I worked at), i can summarize 4 common ways that most developers use to make their websites responsive. They are: - Flexbox, a.k.a display: flex - Grid - @media, a.k.a media query - Using custom hooks of ReactJS. In the last company I worked at, they created a custom hook called "useResize", then they use that hook to make the screen responsive. Those are 4 common methods I see Developers do. I don't know if there is more, so you are welcome to show me more

@johnmcaulay4348 Год назад

Dave you have a true gift for teaching. I was already pretty good with CSS, but watched this playlist anyway and I gotta say, I learned a lot more and was able to sure up a lot of my knowledge that was lacking in certain areas. This playlist was literally full of "aha" moments for me. Thank you! I think at the end of last year I predicted 100k subscribers for you by the end of 2022 and it's looking like you're well on track for that, congrats on all the hard work my friend!

@DaveGrayTeachesCode Год назад

Thank you for the kind words, John! 🙏 Building this CSS playlist and course was good for me as well. I had what I thought was a good understanding of CSS, but I continue to learn as I teach, too! Always good to review the fundamentals. 💯

@t6hp 11 месяцев назад

This was helpful and succinct as well, thank you so much!

@DaveGrayTeachesCode 11 месяцев назад

Welcome!

@ilijajovanov3857 Год назад

Dave, thanks a lot for this wonderful tutorial, I have learned a lot from you.

@DaveGrayTeachesCode Год назад

You're very welcome!

@Grihlo Год назад

Thank you Dave! That's where things are getting more complicated.. and that Froggy adds some fun to the learning process - great advice at the end of the video to play for practice!

@DaveGrayTeachesCode Год назад

Very true! The games can be challenging and fun! 💯

@yatin1370 Год назад

Flexbox Froggy was such a good way to test the concepts!

@ahmadsebaey1830 Год назад

You're a great teacher Dave ❤️

@DaveGrayTeachesCode Год назад

Thank you, Ahmad!

@sonamohialdin3376 Год назад

Awesome tutorial thank you very much

@DaveGrayTeachesCode Год назад

Welcome!

@iambrijeshtoo Год назад

Thank you!

@reitei1756 Год назад

Thank you for the great explanation and also thank you for recommending flexbox froggy, really fun!

@DaveGrayTeachesCode Год назад

You're welcome!

@ajaysan2765 Год назад

Thank you so much

@DaveGrayTeachesCode Год назад

You're welcome!

@muhammadsheharyar3052 Год назад

Thank you, Sir.

@DaveGrayTeachesCode Год назад

You are very welcome!

@haregka7430 Год назад

Wow! Best teacher!!!

@DaveGrayTeachesCode Год назад

Thank you for the kind words! 🙏💯

@GabrielSouza-yy2rq Год назад

Phew this is a dense subject. Better get a notebook and take some notes to help assimilate the content. Anyway, your teaching makes it much easier to understand the topic. Thank you Dave!

@DaveGrayTeachesCode Год назад

You're welcome! The recommended game at the end helps you learn how to apply some of these rules, too. 🚀

@David-ek1ye 2 года назад

Another top-end tutorial. Your teaching skill is really good, Dave. Thanks a lot.

@DaveGrayTeachesCode 2 года назад

You're very welcome, David! 🙏💯

@jipeejoce1353 2 года назад

This is a very great tut for a reminder ( but not too beginner friendly imo).

@DaveGrayTeachesCode 2 года назад

Thank you for the feedback. 🙏

@vishaldeswal4413 5 месяцев назад

Hi Dave, I got one problem regarding align-content and align-items, I have written same code till 12:36 timeline. But instead of writing align-content: space-evenly I have used align-content: flex-start. it is working fine when flex-items are wrapped in multiple lines on change size but when flex items are not wrapped in multiple line, even then align-content: flex-start is overriding the align-items: center property. Could you just tell me why this is happening.

@ahmad-murery 2 года назад

Not sure whether or not there will be a part2, if not maybe it worth mentioning that we also have some useful properties such as justify-self/align-self Thanks Dave,

@DaveGrayTeachesCode 2 года назад

No part 2 in this series. I wanted to give everyone a good start with the Flexbox fundamentals. There are so many properties and full multi-hour courses exist for both Flexbox and Grid so you will find me leaving some out. Your suggestions are good additions! Always great to hear from you, Ahmad! 🙏💯

@ahmad-murery 2 года назад

@@DaveGrayTeachesCode Fair enough, not trying to pretend to be smart (I'm not), I only wanted to say "Hello" by adding a comment, I do really appreciate your continuous efforts to simplify the complexity of web development 👏👍🚀

@DaveGrayTeachesCode 2 года назад

@@ahmad-murery your comments are always welcome my friend 🙏

@IramKahkashan Год назад

Hi Dave, Before applying Flex when we set the box class width and height then when I change the height to 50px then its change as it should but in min-width doesn't effect the container, width always occupy all space in container either min-width is 100px or 50px. We are not providing min-width:100% to occupy all space in container horizontally then why all container becomes dark horizontally. Expecting response, Thank you.

@mischief9499 5 месяцев назад

because box (declared as div here) is a block level element and it takes the full width of its parent

@bnmbnm7278 2 года назад

hi. I still can't find the 14th lesson in the github... And, will you teach about css link svg?(url(svg link)....), thank you

@DaveGrayTeachesCode 2 года назад

Thank you for the request and also for the reminder - uploading the source to Github right now!

@TejaDurgi 2 года назад

hey! can you please check out CSS playlist u added something by mistake into your css playlist.

@DaveGrayTeachesCode 2 года назад

Fixed! Thanks for the note! 💯

@iramimran3117 Год назад

Hi Dave, hopefully everything fine. I am trying your flexbox awesome tutorial. Please tell me one thin when reduce the screen dimension at very very small my div stop to shrink and overflow the container, how can I resolve it? Expecting response.

@DaveGrayTeachesCode Год назад

When you say "expecting response", it is not necessary. It implies I don't respond unless you say that, but I usually do. I'm sure that is not your intention but I wanted you to know it is not necessary every time you post a question. Your size issue can be impacted by several things. Does anything in the page have a minimum width? They won't shrink beyond that size.

@iramimran3117 Год назад

@@DaveGrayTeachesCode Oh ok next time I'll not write expecting response.

@iramimran3117 Год назад

And you always respond.

@iramimran3117 Год назад

@@DaveGrayTeachesCode body{min-width:100vh}

@DaveGrayTeachesCode Год назад

@@iramimran3117 not recommended. You dont really need a min-width on the body. It will be 100% and shrink relative to the size of the viewport.

@uniquebanda69 2 года назад

I LOVE YOU .teaching-skill { 100%, auto}; #knowledge {100px, 100px}; Lots of LOVE from India👌❤️

@DaveGrayTeachesCode 2 года назад

Thank you so much my friend! 🙏 Very creative comment! 💯🚀

@designsxnellgraphics8667 2 года назад

Thanks Dave. I have to say ur method of teaching is top notch

@user-jc5tu4el4d Год назад

Its hardly understand for me flex box from your video. Could you modify flex box concept for beginner. But thanks for share you knowledge for these concepts

@DaveGrayTeachesCode Год назад

It may help you to read other articles and watch other videos about it, too. Also, try out the Flexbox Froggy game I recommended.

@user-jc5tu4el4d Год назад

@@DaveGrayTeachesCode Yep I try read article and try the game at the last .thank you for it .