CSS Flexbox Course

No video

CSS Flexbox Course

Рет қаралды 328,541

Күн бұрын

Once you've learned Flexbox, you'll wonder how you ever managed to build websites without it. This course gets you up to speed as quickly as possible. You can take the interactive version of the course here: scrimba.com/g/gflexbox
Flexbox gives you all the tools you needed in order to properly arrange content inside flexible containers. Given that all websites need to be flexbile and responsive these days, Flexbox is a must-have skill for web developers.
The course contains the following:
- Your first Flexbox layout
- Main axis and cross axis
- Justify Content
- Positioning items
- The flex property
- Align items
- Flex direction column
- Wrapping
- Flex grow, shrink
- Order
- Creating a responsive Navbar
- Creating a Flexbox image grid
You can connect with the course creator Per Harald Borgen via Twitter: / perborgen
--
Learn to code for free and get a developer job: www.freecodecamp.com
Read hundreds of articles on programming: medium.freecodecamp.com

Пікірлер: 307

@NorlynCodes 4 жыл бұрын

0:00 -Your first Flexbox layout 2:04 - Main axis and cross-axis 3:55 - Justify Content 6:22 - Positioning items 10:00 - The flex property 15:01 - Align items 19:09 - Flex direction column 23:09 - Wrapping 25:15 - Flex grow, shrink, basis 34:01 - Order 37:09 - Creating a responsive Navbar 42:42 - Creating a Flexbox image grid

@mustafamahmud2977 4 жыл бұрын

Norlyn Piquero Thanks

@NorlynCodes 4 жыл бұрын

Mustafa Mahmud You’re welcome

@rakibhasan2692 4 жыл бұрын

Thanks

@letsgoletsgo5081 3 жыл бұрын

Thanks

@sravanstg234 3 жыл бұрын

Thank you!

@silviugherman7432 6 жыл бұрын

The idea of thinking in terms of axis really helped me grasp how different flex properties affect the items based on the flex-direction value of the container (default or not).

@Jwarddesign-ca 2 жыл бұрын

I understood the majority of the flex property before, but I was confused with the whole grow/shrink values. This is by far the best explanation. Thanks!

@PedroDVC 3 жыл бұрын

I've been trying to understand Flexbox from different resources and this one stood out, for sure!! Thank you for the great content!

@juantoledo4857 6 жыл бұрын

Wow... Extremely well organized and presented and very clear and precise explanations. Thank you!

@Knards 6 жыл бұрын

All of Per's courses are like this. Very well done and interactive

@malaicristian360 5 жыл бұрын

Dude, this explanation is just great. Very clear and efficient! Subscribed to the channel after this video. Thank you.

@rafaelalvesduarte9117 6 жыл бұрын

Your voice is so clear to hear that it becomes so easy to understand.

@CknSalad 6 жыл бұрын

The flex-shrink, flex-grow, and flex-basis explanations and examples really helped. 26:00 for those that want to skip to that section.

@TheKrisu98 3 жыл бұрын

Exactly. Was looking for this info in this video :)

@morathanan 3 жыл бұрын

Man, i dont know who you are, but at the age of 35, i only started learning code. Im struggling with flexbox for a while now, and you made it so clear its amazing! Thanks a lot.

@kaderlakhdar5735 4 жыл бұрын

You realy helped me here, havent see others explaing the case about the need of putting flex:1 if we want one item to take more width, without declaring flex to the other items... also the css declararation specification was a good reminder , thank you ❤️

@etimhossana4432 2 жыл бұрын

Thank you so much, i have been struggling with div and flexbox for a couple of days now i kept searching for materials until i found this particular one and it has solved all my concerns. Thanks!

@EnesKab 2 жыл бұрын

This lecture is a proof of how some other guys out there tend to make things super complicated. Thank you !

@KarinaStavenes 4 жыл бұрын

This was really helpful, thank you! It was good to see how the grid moved with the different examples, which I hadn't quite understood when doing the exercises for the CSS Grid and Flexbox challenges. Thanks so much!

@gobi7764 3 жыл бұрын

I ran through grids and flexbox at a stretch and forgot most of it, So here I am

@shankerm3959 4 жыл бұрын

Bite-sized lectures really do the job. Very well presented and explained. Thumbs up!

@udaysharma444 3 жыл бұрын

This was the best flexbox explanation I've ever seen

@naveedalirehmani2959 3 жыл бұрын

i had this video in offline and i got it from a fellow classmate and after watching this video i thought that you deserved a like because this tutorial is just amazing thank you so much for creating this tutorial so i came on YOutube and tracked down this video just so i can press that like button

@rahulshaw7673 4 жыл бұрын

You don't Know How Happy Am I !!! I have been learning Css Flexbox for three Days But Didn't Understand anything but this tutorial Solved my all problems you are better than some of the Udemy Courses

@digigoliath 4 жыл бұрын

TQVM for this. It is well organised & presented. We are guided through the lesson examples with clear explanations and in an easy to understand manner. I especially like the interactive scrimba version where we get to do instant practice. I highly recommend this video!!

@harshitanand3798 3 жыл бұрын

Wow. Simply wow. So well organised and presented. Loved it. Thank you for the awsome content.

@aawferris 4 жыл бұрын

Such a clear and well-explained tutorial. Thank you very much for your hard work!

@adithyasanthosh30 4 жыл бұрын

One of the best video tutorial to get started with flexbox. Thank you so much :)

@deepaks.m.6709 6 жыл бұрын

Thank you freecodecamp for doing this course as a video :)

@rishigovindhan4619 3 жыл бұрын

i Think You Know Tamil

@deepaks.m.6709 3 жыл бұрын

@@rishigovindhan4619 yeah I know :)

@trex_son5705 5 жыл бұрын

Impressive job, awesome audio, loved the Grid course to, very interactive, its just like a tutorial for dummies, pardon me but in video format.

@mariopizzaro 2 жыл бұрын

I've came across this course recently, thanks a lot !!!

@leesungchan7162 4 жыл бұрын

"Hey!" at the begining of seach section. :) I like it

@EliasKibret 3 жыл бұрын

I was reading flex box documentation but this video helps me to understand flex box more quickly

@hartdev05 3 жыл бұрын

Didn't feel like 48 minutes at all! Thanks a lot for this tutorial!

@alokranjan476 5 жыл бұрын

Very informative and content is well explained. Thank you very much. Keep posting such videos.

@neophytech007 4 жыл бұрын

before this tutorial i was really confused about flexbox..this cleared all my doubts

@colekrause5882 3 жыл бұрын

Best teacher for anything HTML or CSS related by far!

@zeropressure5409 3 жыл бұрын

one of the best explanation ever, thank you

@questscape 4 жыл бұрын

I have landed the right video for "flexbox". Clear explanation and great examples. Thank you freecodecamp :)

@itsprinceyadav 3 жыл бұрын

All doubts cleared! I now have a better understanding of flexbox. Honestly, this is the best tutorial for flexbox on KZfaq.

@kirankandula2779 4 жыл бұрын

A perfect video to completely understand flex. Thanks for it.

@emmanuelzelarayan2561 4 жыл бұрын

Thank you freecodecamp. Thanks to you I learn something new every day.!

@riteshmahajan9472 4 жыл бұрын

very intersting ! I would have to go through this video a couple of times to get down all the concepts. Anyways Thanks a lot man ! You made my day :)

@robertbarr3638 4 жыл бұрын

I really enjoyed that video, I think you have explained flex box very well!

@drivenbycuriosity 3 жыл бұрын

Thanks a lot for this 🙏🙏 tutorial. Very organized content & superb explanation 🔥🔥🔥

@francislambert5189 2 жыл бұрын

Hi, Per. I needed a moment and I got this to write. Awesome video for those that-need -to-know. Peace: )

@Jasna88 3 жыл бұрын

First video i saw on scrimba, its great, u have great voice

@amandafinbarrs2060 2 жыл бұрын

Thank you again freeCodeCamp. Amazing video!

@naspre6736 3 жыл бұрын

Thank you for the content you provide. This is helping me turn my life around.

@kevinzhang8974 6 жыл бұрын

this is a very practical video ... I learned many tips from this .. Thank you!

@chadrackkyungu2167 4 жыл бұрын

it was amazing i didn't have any clue in Flexbox but after learning this tutorial i'm fine now

@karahitto Жыл бұрын

Excellent video, this really helped finally get it.

@rohithbti2k7 3 жыл бұрын

Pretty nice explanation! Made flexbox very clear to me..thanks!

@HordanJarbinger 4 жыл бұрын

Per Harald Borgen is an amazing teacher! Thanks!

@vangelisefthimiatos964 3 жыл бұрын

Heyyy!!! Indeed he is.

@fanuel2198 4 жыл бұрын

Thank you very much for such an educational video ! Nice presentation and easy to understand

@whitney2603 3 жыл бұрын

Amazing video, feelin' like a flexbox pro!

@KARIAP 2 жыл бұрын

when i first started learning HTML & CSS, i had no problem. FlexBox, though, was so hard to understand for me. Maybe because i was 14, but i really had a hard time understanding it for some reason. This was the last Flexbox video i've watched.

@nidhi131 5 жыл бұрын

Excellent Video Very Very Thanks . I learned whole flex-box

@jawaddev808 4 жыл бұрын

"Heyyyyyyyy" I love it :D

@ShahFaisal-fs4wu Жыл бұрын

Greeting Sir, Excellent explanation Sir saw lot of tutorials but you are the best. no words to thank you

@mohaimennobel8558 3 жыл бұрын

i don't understand English so much but your speaking so easy to learn.Thank you sir

@oscarpauzerfilho2003 3 жыл бұрын

Yeah!!! You did a VERY NICE JOB!!! Congrats and Thank You so Much.👍👍👍👍

@Pspisripoff 5 жыл бұрын

Dude, no joke, i love you! Thanks! :D

@luancardosolc 4 жыл бұрын

FreeCodeCamp is awesome, I am becoming a big fan hahahha

@abubakarkibria9024 5 жыл бұрын

Well explained. Love the way the content creator present things! 9.99 out of 10....he he he

@AM-oe7ix 5 жыл бұрын

+0.01, 10/10

@albertcastaneto7245 2 жыл бұрын

Finished! Thank youuuu!

@bishalbhatta6236 6 жыл бұрын

A great video, helped me to understand Flexbox. Thanks.

@niwanthakaweragoda9480 3 жыл бұрын

Amazing video! Such a clear explanation!

@nishantnimish7825 21 күн бұрын

Still the best video on flex box 6 years later

@magalyriera 2 жыл бұрын

Very easy and I like your style of teaching thank you!!!

@alimedani0296 5 жыл бұрын

Thank-You sir, this helped me style a lot!!!

@awaiskhalid4593 3 жыл бұрын

greatest flexbox vedio watched till today. hats off to you sir

@raghuramkumar3121 3 жыл бұрын

Excellent Explanation !!! Thank you ...

@renukar1286 2 жыл бұрын

The best video for FLEXBOX

@sravanstg234 3 жыл бұрын

This was very helpful. Thank you so much.

@ThePein124 6 жыл бұрын

thank you very much for that effort, you did a god presentation there

@danutzz8 4 жыл бұрын

another great video! ;) cheers! keep them coming!

@rogemmarkperez7417 2 жыл бұрын

best css flexbox tutorial ever!

@vittorioiamarino7568 6 жыл бұрын

Thanks for this fantastic video, learning a lot

@haccuk 6 жыл бұрын

Thank you for this video. I hàve also watched your grid vìdeo and that is equally excellent and well explained. However are you able to do a multi level drop down navigation, which additionally will only appear on small screen sizes by clicking MENU or similar?

@Roccowschiptune 3 жыл бұрын

Incredibly helpful, thanks!

@tuyenscorner 2 жыл бұрын

It's very easy to learn. Thank you so much

@kevinzhang8974 6 жыл бұрын

For Lecture 11, "Bonus - Reponsive Navbar", did you do any styling in basis.css for the ul and li? For example, set "list-style-type" to "none" for li? Can you share? Thanks!

@arpitj07_ 3 жыл бұрын

Well it's seems he used "list-style-type:none". But i want to know how did he styled "search" input such that there's no border and only an underline in its place.

@bigk2367 2 жыл бұрын

@@arpitj07_ border: none; outline : none;

@kundamugishasarah3443 4 жыл бұрын

its well explained and very precise, thank u so much

@0815CrossLight 6 жыл бұрын

Audio and video are out of sync in Lecture 7. Great video though!

@Beecherina 5 жыл бұрын

I was looking for a comment about this :D

@conaxliu9677 4 жыл бұрын

Glad you mentioned 'Lecture 7'. I was about to just close this video thinking the remaining would also be out of sync.

@bqrkhn 3 жыл бұрын

@@conaxliu9677 I was about to close thinking my HomePod is out of sync :-D

@conaxliu9677 3 жыл бұрын

@@bqrkhn Maybe it is. 😆

@jal2375 6 жыл бұрын

Really helpful. Thanks a ton :)

@computerscince8430 3 жыл бұрын

the best flex box totourial ever thanks : )

@zakhariihusar6975 3 жыл бұрын

Man your code is organised really neat 👍

@redsevenbox 6 жыл бұрын

This video just saved my life.

@deadredsky 3 жыл бұрын

Last night a DJ saved my life

@worldclasscode1847 2 жыл бұрын

Nice vid! Flexbox is key. One of the most important 3 features of CSS. And without CSS you cant do nothing on the web.

@gaajendrenvivegananthan6364 7 ай бұрын

What are the rest two ?

@trivender007 3 жыл бұрын

Thank you .. very nice.. this is gold

@amberbdr8168 4 жыл бұрын

Thank you so much.. i really enjoyed your teaching.👏👏👏

@arthurfloriano5445 3 жыл бұрын

This is a great course, but I wish you would have linked your code for the second CSS stylesheet "basis". Its hard to match up what you are doing if we don't know what's going on behind the scenes there (I'm a beginner). Otherwise, great course.

@RNeilen216 2 жыл бұрын

I second that. How did you get each div a different color? In addition, when i set my container class height to 100%, it stretches to the bottom of the screen. My content looks nothing like yours.

@Valdaur 2 жыл бұрын

He showed the CSS code at the start of the video. You should be able to copy it in a couple of minutes.

@markovvoz8849 2 жыл бұрын

This was very good, huge Like

@t-h787 3 жыл бұрын

you sir, are an absolute hero

@elenastefanovska1133 5 жыл бұрын

GREAT explanation!

@prakashreddy438 3 жыл бұрын

Freecodecamp is teaching freeof cost...u people doing a great job...

@israeltareh1966 2 жыл бұрын

Great job .Fantastic content .keep it up .

@Hacking-NASSA-with-HTML 5 жыл бұрын

Man, sorry I even do not know your name, Big Big thanks to you, and a lots of prosperity for your unbelievably cool lessons! You said there is lessons about CSS Grid, where I can find the link? Thanks in advance!