CSS Flexbox Crash Course
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2021
- Master CSS Flexbox from scratch.
✏️ Course created by DevArsenal Official. Check out their channel: / channel
🔗 The creator has a full CSS and HTML course on Udemy: www.udemy.com/course/beginner...
😀 Coupon Code: GREAT_DISCOUNT
Cheat Sheets:
🔗 www.dropbox.com/s/zuki7ssr385...
🔗 www.dropbox.com/s/5c1a46kavp0...
🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 Treehouse
👾 AppWrite
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
![[#SHORTS CLIP] ครูอึ้ง กรรมการอึ้ง ฮ่าๆ l ซานิเบาได้เบา l One Playground](http://i.ytimg.com/vi/qeBTuMJs4t0/mqdefault.jpg)
Flexbox is the most complex topic in CSS. These Tutorials are blessing for everyone here
Grid is. Flexbox is second.
@@ihsannuruliman3656 right, grid is more difficult.
CSS Grid: '"Am I a joke to you?"
@DevArsenal Official thankyou sir, i really appreciate it all of your works, subscribed!
As a new comer to web development (1 week)i feel like every new topic is the most complex...
And I'm at css basic level...
The anxiety is real...
The tutirial is so cool and easy tho
Going through the FCC curriculum and doing the challenges sometimes didn't clear enough the idea of Flexbox for me, thank you for making this vid, everything is making a lot more sense now.
This is course is like a blessing for every developer. Thank you for your efforts ☺️☺️
I watched this a year ago and found it was the best tutorial for web development you dive straight into the most crucial parts of flex box with this and use of css ratio i was able to recreate high end e commerce sites thank you
Big big thank you!!, I wish I found this video when I first trying to learn about styling. This is the best educational video I've found about CSS in general!
This video has cleared my concept of flex-box properly.So grateful of you❤️
Wow, big thank you, your video helped me a lot! These concepts are kind of a new gymnastic to get used to, but now I'm feeling more... flexible.
Thanks so much for the tutorial, the cheat sheets and this incredibly amazing channel. 🖤🌼
grid or flex; No confusion now. Both are equally awesome. Beautiful teaching .
such a useful feature in simple understanding, thanks for your efforts and keep doing the good work
This video and the cheatsheets are so useful - thank you!!
Nice vid! I love Flexbox. It's so useful. I use it on each and every web page, multiple times.
Oh thank you. I needed this sooo much.
loved this course. so simple and so useful. very well explained
i've been looking for a video that would explain css flex box to me like i'm five and this did that perfectly. i understand now pretty much all the values. thank you very much.
This video came in handy. Thanks for taking the time to do this video.
What are the odds!
I was just looking for a yt flex box guide!
Thank you FCC
@DevArsenal, thank you so much for this video. I found flexbox sometimes to be so simple to understand and at the same time so confusing. Please make more videos like this. Thank you Sir
Thank you so much for this
This course was truly a blessing for me
this is good to learn since i'm going to a course with css in a few weeks
My mind: You need to understand flexbox
FCC: Gbam! Here you go...
Thank you 🙏 FCC team
Thank you so much for this!
Now I'm aware of flex-box capabilities.
Thank you so much for for this educative tutorial. I benefited a lot. Thumbs up👍
Great content. I'm definitely buying the course right now! And I made the purchase ✌️
How much does it cost?
This video deserves more likes and viewes, great tutorial !!
It’s awesome, you read my mind!
Same literally I was struggling with a project with constant use of flexbox. FCC reads our minds
Thank you! I was struggling to understand flexbox
Very helpful, crisp. Thanks!!
Great explanation. Thanks a lot! Greeting from Colombia.
This has been very helpful. Thanks for the tutorial.
Its very wonderful course. Its good to watch all beginners, expert...
Thank u for this course free code camp 👍...
The trouble with Flexbox is the sheer number of items to remember and be acquainted with. Although the makers tried mightily hard to make the items' names indicate their function, it is still hard to remember them all. These cheat sheets and your illustrations (arrows and pointers) helped a ton. Thanks, man.
Wow i learned alot of new tricks in this video that i didn't know about, thank you
Exactly what I need!
Thank you so much for helping us.. And especially for cheat sheets, these are also very beneficial
Great content. One item of feedback - would have been nice if the cheat sheets were printable, but that's such a minimal thing for such great work! Thank you :)
Thank you so much for this 🙏🏻 Reading about flexbox as a beginner is pretty confusing. But with a visual representation + voiceover, it helped out immensely. Thank you again!
Super clear & super powerful information. Thank you very much
A good lesson. Helped me figure out the basics of flex
This course is gold
thank you! this video is awesome
Thank you!
TNice tutorials was honestly so helpful. I’ve been working around soft, whether it be church, singing in a band, or theatre for most of my life so tNice tutorials
Nice, I really liked it. Thank you for the video.
All flex properties explained well. But very good video. Liked 👌❤️
Thank you very much. It is really helpful css course.
In the cheat sheet for Flex parent, to center a div think there is a typo - justify-direction, should be justify-content right?
Is it possible to use a single container to make a 4-box design. Two on top, two on the bottom - looking like a big square. I've been able to achieve this by having two separate containers and then using each item to take up half of the container. And then they naturally stack on each other making that design. But I feel like it is possible to do with one container and I'm not understanding something.
thank you very much for this amazing video and cheatsheet
thank u james, explained well.
Great! Now I can center a div inside of a div.
Thank you so much for this video sir. ❤ from India.
A very good course. Thank you very much
awesomeeeeeee content, clear and simple
Do one on css grid as well!! Grid is important and a bit tricky as well.
Hi this video is super informative, could you tell me the plugin which you're using to have this type font for vs code?
I was waiting for this
Thank you for your lesson about Flexbox. I printed Cheat Sheets and I studied and repeated.
Thanks!
Awesome video tutorial! 👏
this is some high quality tutorial!
i love this channel so much
Nice video and much appreciated!
Excellent cheat sheets.
Help: When he typing background-color: (#cacaca), this first bracket are all color around this #cacaca. is this an extension? if extension exist what name this is?
thank you
really thank you
I am taking this. 😍😍😍
22:18 Why would selectors "item-3" and "item-4" work without adjusting the html file(like adding a custom class) kinda stuck here
I don't know if anyone has pointed out about the mistakes in the container property cheat sheet.
In the cheat sheet a, the black box containing actual code is showing flex-direction property instead of appropriate properties. Please take a look.
Pretty smooth !
Thanks for this upload !
Well Explained
We're want a crash course like that but for grid
what is justify-content: stretch;?
Thanks
bro is gonna kill me with the fonts!
Thank youuuuu
Thx u a lot!
There will be a Grid CSS course soon?
thank you so much
Thank you for the great tutorial. I was wondering how to get the Editor and Browser windows side by side so you can simultaneously resize them to fill your entire screen.
I think he has a Mac, he put the windows in full screen side by side mode, in windows 10 you can snap to side and resize both at and time too
god bless you guys!!!
Great video
Great video. You wouldnt happen to have that cheat sheet for CSS Grid would you?
What the extension for css completion?
Hi, please create a blockchain tutorial and I want to run this blockchain then how can I do it?
make the same video for grid , excellent!
Thanks for the tutorial! Appreciate it!
1 Question: In the pdf, you provided (A-Container Properties), For Centering elements, you gave this below code.
container {
display: flex ;
height: 50px;
justify-direction: center ;
align-tems: center;
}
My question is, are the last 2 lines correct?
good lesson
"gobbledygook" 😩👌
I am going to be use this word from now on when I don't understand something
Love from Pakistan. Please make course of deployments and pwa
If the PDF does not fit on a page, is it really a cheat sheet?
Also why 2 PDFs? Just not just a 2 or 3 page single PDF document?
Thank you guys, from Colombia, hello to all the Freecodecamp team
how can he write the code with live-preview? is that some kind of vs code extension, he use?
@DevArsenal Official thanks 🙏✨
If you do this:
display: flex;
justify-content: center;
align-items: center;
Go into devtools and hover over this item, we can see that there are some dashed lines, what is this?
good 👍
Please bring a Grid Layout Crash Course
@DevArsenal Official Grand!
Yeah, definetely will check it out!
God teachers are online than the classroom.
Awesome! How can I get the cheat sheet videos?