CSS Flexbox Crash Course

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

[@marianagranadosgonzalez09]

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.

[@lokeshr9794]

This is course is like a blessing for every developer. Thank you for your efforts ☺️☺️

[@JarvisCodes]

Flexbox is the most complex topic in CSS. These Tutorials are blessing for everyone here

[@ihsannuruliman3656]

Grid is. Flexbox is second.

[@thanatp5498]

@@ihsannuruliman3656 right, grid is more difficult.

[@chubbyBunny94]

CSS Grid: '"Am I a joke to you?"

[@vincent3542]

@DevArsenal Official thankyou sir, i really appreciate it all of your works, subscribed!

[@maxcharacterlimitreache-]

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

[@lawrencemotions8720]

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

[@p.eriksonsaragi7129]

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!

[@saifabdullahzarab1051]

This video has cleared my concept of flex-box properly.So grateful of you❤️

[@LaGrossePaulik]

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.

[@richcaro3132]

grid or flex; No confusion now. Both are equally awesome. Beautiful teaching .

[@apotheosisaurel9248]

Thanks so much for the tutorial, the cheat sheets and this incredibly amazing channel. 🖤🌼

[@chomzzycute1289]

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.

[@dprym]

such a useful feature in simple understanding, thanks for your efforts and keep doing the good work

[@learntocode1878]

@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

[@abiharvey4984]

This video and the cheatsheets are so useful - thank you!!

[@diogos7233]

This video came in handy. Thanks for taking the time to do this video.

[@worldclasscode1847]

Nice vid! I love Flexbox. It's so useful. I use it on each and every web page, multiple times.

[@johnmg1999]

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!

[@abhishes]

loved this course. so simple and so useful. very well explained

[@relytheone853]

Thank you so much for this! Now I'm aware of flex-box capabilities.

[@landsfadern2]

this is good to learn since i'm going to a course with css in a few weeks

[@haifzhan]

It’s awesome, you read my mind!

[@narc7885]

Same literally I was struggling with a project with constant use of flexbox. FCC reads our minds

[@padmasreesaiveeraaswaamy2359]

Great content. I'm definitely buying the course right now! And I made the purchase ✌️

[@jeromevaillancourt6489]

How much does it cost?

[@douglasreybberido]

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.

[@abrh2793]

What are the odds! I was just looking for a yt flex box guide! Thank you FCC

[@dennisobediahleboe7274]

Oh thank you. I needed this sooo much.

[@mordecaimusa9496]

Thank you so much for this This course was truly a blessing for me

[@miriammunetsi1833]

Thank you so much for for this educative tutorial. I benefited a lot. Thumbs up👍

[@copaceticobserver]

Thank you! I was struggling to understand flexbox

[@mohammadthousif7439]

This video deserves more likes and viewes, great tutorial !!

[@albertjjimenezp]

Great explanation. Thanks a lot! Greeting from Colombia.

[@athithakarikalan1222]

Its very wonderful course. Its good to watch all beginners, expert... Thank u for this course free code camp 👍...

[@TranquilTinglesTV]

Thank you so much for helping us.. And especially for cheat sheets, these are also very beneficial

[@lonleybeer]

Wow i learned alot of new tricks in this video that i didn't know about, thank you

[@sumantamukherjee406]

Very helpful, crisp. Thanks!!

[@litonhumayun]

This has been very helpful. Thanks for the tutorial.

[@sadhappy8860]

Super clear & super powerful information. Thank you very much

[@PerryCodes]

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 :)

[@thecasemakerindonesia6071]

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

[@MrVirusDi]

A good lesson. Helped me figure out the basics of flex

[@vinceramcesoliveros6739]

Great! Now I can center a div inside of a div.

[@keweml3544]

Exactly what I need!

[@algorithmscodes-9927]

this is some high quality tutorial!

[@fullStackInKannada]

Nice, I really liked it. Thank you for the video.

[@miskerbirhanu4439]

Thank you very much. It is really helpful css course.

[@snansahmarov1524]

All flex properties explained well. But very good video. Liked 👌❤️

[@vpundir3024]

I was waiting for this

[@avantikaroy5146]

Do one on css grid as well!! Grid is important and a bit tricky as well.

[@lionelfaith3646]

This course is gold

[@dyrelta9095]

Thank you!

[@imuser007]

thank u james, explained well.

[@raadhaswami]

awesomeeeeeee content, clear and simple

[@webjaved]

Awesome video tutorial! 👏

[@josephkamande3219]

A very good course. Thank you very much

[@rimavedeckiene2203]

Thank you for your lesson about Flexbox. I printed Cheat Sheets and I studied and repeated.

[@quincylarsonmusic]

Thanks!

[@user-cj3xy2qe7h]

Thank you so much for this video sir. ❤ from India.

[@shiuandai0426]

thank you! this video is awesome

[@ziadezzat8802]

We're want a crash course like that but for grid

[@julient6508]

Pretty smooth !

[@usenmfonuko3271]

My mind: You need to understand flexbox FCC: Gbam! Here you go... Thank you 🙏 FCC team

[@bipinmaharjan4090]

I am taking this. 😍😍😍

[@RahulKumar-ed9vw]

thank you very much for this amazing video and cheatsheet

[@franklee8099]

Nice video and much appreciated!

[@MrTomro]

i love this channel so much

[@KZap_]

Thanks for this upload !

[@edgeorge6243]

Thx u a lot! There will be a Grid CSS course soon?

[@napoleon3242]

bro is gonna kill me with the fonts!

[@sayeddileri3461]

god bless you guys!!!

[@richardhaynes1127]

Excellent cheat sheets.

[@alexgordienko93]

make the same video for grid , excellent!

[@dumidupramith3881]

really thank you

[@mahendranath2504]

thank you so much

[@fireworks6795]

thank you

[@SubashK-zc6ip]

Well Explained

[@t20sgrunt36]

Great video

[@mps_unltd]

Great video. You wouldnt happen to have that cheat sheet for CSS Grid would you?

[@erickvazquez9113]

"gobbledygook" 😩👌 I am going to be use this word from now on when I don't understand something

[@futboystar1883]

Thanks

[@alexdesouza8696]

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.

[@kevinmccallister7647]

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

[@hashirnouman8355]

Love from Pakistan. Please make course of deployments and pwa

[@razinulkarim5207]

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?

[@bakhtiyorumarov6555]

good lesson

[@ahmedalkhier5811]

Plz make one video for grid system

[@somunelavalli]

Awesome FCC

[@tlawatt]

Thank youuuuu

[@olaegberebecca4995]

Awesome! How can I get the cheat sheet videos?

[@Naveen-ef2dg]

Hi this video is super informative, could you tell me the plugin which you're using to have this type font for vs code?

[@vijayabhaskarj3095]

I've just searching for some CSS tutorial on and this pop up.

[@jesux_fstack]

Thank you guys, from Colombia, hello to all the Freecodecamp team

[@chubbyBunny94]

hey future me, start from 25:00 - flex basis, grow and shrink!

[@DaniloSilva-pl3sq]

Please bring a Grid Layout Crash Course

[@DaniloSilva-pl3sq]

@DevArsenal Official Grand!

[@DaniloSilva-pl3sq]

Yeah, definetely will check it out!

[@user-yo3oq5mj2l]

good 👍

[@briankgarland]

Good video. But I did laugh when you said "we are coming to the end of this video" and the video was only about 45% of the way through. 😆

[@rainbowking4097]

God teachers are online than the classroom.

[@newazsharifsaikot8283]

Please, one more video about css grid

[@newazsharifsaikot8283]

@DevArsenal Official thanks

[@dextroyer3525]

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.

[@WSBWallstreetBets]

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.

[@zadilkhwaja]

Please make a CFD OpenFoam tutorial 🙏🙏

[@magicmedia7950]

I wish you can zoom your screen so we can enjoy your tutorials on the go using mobile screen

[@punith023]

In the cheat sheet for Flex parent, to center a div think there is a typo - justify-direction, should be justify-content right?