CSS Full Course - Includes Flexbox and CSS Grid Tutorials

[@freecodecamp]

⭐️Course Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:01:25) Change the Color of Text ⌨️ (0:02:33) Use CSS Selectors to Style Elements ⌨️ (0:04:33) Use a CSS Class to Style an Element ⌨️ (0:06:10) Style Multiple Elements with a CSS Class ⌨️ (0:06:59) Change the Font Size of an Element ⌨️ (0:08:10) Set the Font Family of an Element ⌨️ (0:08:52) Import a Google Font ⌨️ (0:10:11) Specify How Fonts Should Degrade ⌨️ (0:11:55) Size Your Images ⌨️ (0:13:19) Add Borders Around Your Elements ⌨️ (0:14:55) Add Rounded Corners with border-radius ⌨️ (0:15:24) Make Circular Images with a border-radius ⌨️ (0:15:55) Give a Background Color to a div Element ⌨️ (0:16:58) Set the id of an Element ⌨️ (0:17:47) Use an id Attribute to Style an Element ⌨️ (0:19:34) Adjust the Padding of an Element ⌨️ (0:20:36) Adjust the Margin of an Element ⌨️ (0:21:11) Add a Negative Margin to an Element ⌨️ (0:21:40) Add Different Padding to Each Side of an Element ⌨️ (0:22:26) Add Different Margins to Each Side of an Element ⌨️ (0:23:01) Use Clockwise Notation to Specify the Padding of an Element ⌨️ (0:24:15) Use Clockwise Notation to Specify the Margin of an Element ⌨️ (0:25:08) Use Attribute Selectors to Style Elements ⌨️ (0:27:29) Understand Absolute versus Relative Units ⌨️ (0:28:53) Style the HTML Body Element ⌨️ (0:29:34) Inherit Styles from the Body Element ⌨️ (0:30:54) Prioritize One Style Over Another ⌨️ (0:32:11) Override Styles in Subsequent CSS ⌨️ (0:33:24) Override Class Declarations by Styling ID Attributes ⌨️ (0:34:59) Override Class Declarations with Inline Styles ⌨️ (0:35:35) Override All Other Styles by using Important ⌨️ (0:36:28) Use Hex Code for Specific Colors ⌨️ (0:37:19) Use Hex Code to Mix Colors ⌨️ (0:38:20) Use Abbreviated Hex Code ⌨️ (0:39:22) Use RGB values to Color Elements ⌨️ (0:40:05) Use RGB to Mix Colors ⌨️ (0:41:38) Use CSS Variables to change several elements at once ⌨️ (0:42:54) Create a custom CSS Variable ⌨️ (0:43:33) Use a custom CSS Variable ⌨️ (0:44:39) Attach a Fallback value to a CSS Variable ⌨️ (0:45:25) Cascading CSS variables ⌨️ (0:46:44) Change a variable for a specific area ⌨️ (0:47:08) Use a media query to change a variable ⌨️ (0:48:06) Create Your First CSS Grid ⌨️ (0:48:49) Add Columns with grid-template-columns ⌨️ (0:49:43) Add Rows with grid-template-rows ⌨️ (0:50:41) Use CSS Grid units to Change the Size of Columns and Rows ⌨️ (0:52:34) Create a Column Gap Using grid-column-gap ⌨️ (0:53:11) Create a Row Gap using grid-row-gap ⌨️ (0:53:38) Add Gaps Faster with grid-gap ⌨️ (0:54:26) Use grid-column to Control Spacing ⌨️ (0:55:59) Use grid-row to Control Spacing ⌨️ (0:56:43) Align an Item Horizontally using justify-self ⌨️ (0:57:33) Align an Item Vertically using align-self ⌨️ (0:58:04) Align All Items Horizontally using justify-items ⌨️ (0:58:31) Align All Items Vertically using align-items ⌨️ (0:58:58) Divide the Grid Into an Area Template ⌨️ (0:59:59) Place Items in Grid Areas Using the grid-area Property ⌨️ (1:01:00) Use grid-area Without Creating an Areas Template ⌨️ (1:02:43) Reduce Repetition Using the repeat Function ⌨️ (1:04:51) Limit Item Size Using the minmax Function ⌨️ (1:05:47) Create Flexible Layouts Using auto-fill ⌨️ (1:06:39) Create Flexible Layouts Using auto-fit ⌨️ (1:07:32) Use Media Queries to Create Responsive Layouts ⌨️ (1:09:05) Create Grids within Grids ⌨️ (1:09:49) Use display: flex to Position Two Boxes ⌨️ (1:10:20) Add Flex Superpowers to the Tweet Embed ⌨️ (1:11:04) Use the flex-direction Property to Make a Row ⌨️ (1:11:54) Apply the flex-direction Property to Create Rows in the Tweet Embed ⌨️ (1:12:39) Use the flex-direction Property to Make a Column ⌨️ (1:13:06) Apply the flex-direction Property to Create a Column in the Tweet Embed ⌨️ (1:13:44) Align Elements Using the justify-content Property ⌨️ (1:15:49) Use the justify-content Property in the Tweet Embed ⌨️ (1:16:33) Align Elements Using the align-items Property ⌨️ (1:18:00) Use the align-items Property in the Tweet Embed ⌨️ (1:18:42) Use the flex-wrap Property to Wrap a Row or Column ⌨️ (1:19:21) Use the flex-shrink Property to Shrink Items ⌨️ (1:20:14) Use the flex-grow Property to Expand Items ⌨️ (1:21:14) Use the flex-basis Property to Set the Initial Size of an Item ⌨️ (1:22:02) Use the flex Shorthand Property ⌨️ (1:23:40) Use the order Property to Rearrange Items ⌨️ (1:24:15) Use the align-self Property

[@anshumankushwaha8159]

Which text editor u use?

[@freecodecamp]

scrimba.com

[@anshumankushwaha8159]

@@noblesavage149 😅😅

[@jawadazimi8607]

freeCodeCamp.org i sir can you send me the code of them

[@srinualla6497]

@@anshumankushwaha8159 sublime text editor

[@atharvudape4459]

I want to learn CSS with mike cos I have learned HTML n python with him his explanations helps me to understand it much bettor plz 😔😔

[@pineapplesarecool6901]

Just go to the giraffe academy channel it is his own channel

[@atharvamishra4848]

@@pineapplesarecool6901 My name is Atharva and yours Atharv in mine last (a) is silent but in u?????? Any difference

[@atharvamishra4848]

My name is Atharva and yours Atharv in mine last (a) is silent but in u?????? Any difference

[@kavitapanchal7993]

Lmao same here

[@user-wc1sm8cj8s]

Beau Carnes is the person behind freeCodeCamp and the one that runs this KZbin Channel. We should be thankful to him.

[@t6hp]

This feels more like a walkthrough for specific tasks or problems. I prefer the way Mike explains it because he gives an intro to the different tools while explaining the main concepts. In other words, since this is my first time ever watching a video on CSS, I feel like this is ahead of my level. I need someone to break down the concepts first before moving on to guided practice. It's like people who go teach kids that 1+1=2, without first explaining what numbers are and what is an addition, to begin with.

[@AcidiFy574]

will this do? kzbin.info/aero/PLLAZ4kZ9dFpNO7ScZFr-WTmtcBY3AN1M7

[@sagar_20004]

@@AcidiFy574 Thanks bro.

[@lavanyaarya5108]

Whichever property i don't understand, i just google it separately and watch a short video....that's way more helpful to understand in basic terms :)

[@simpumoon]

my g, all you need to know is that it works, and keep moving forward. Plus most of CSS involves the box styling, and flex box, or at least what I use. Been really enjoying this one, obviously I'm a year late to this so I hope that you got CSS done by now. Once you learn you never forget so.

[@thoughts8182]

@@simpumoon That guy is just full of excuses. I guarantee by now he still hasn't bothered to learn CSS.

[@ozzyfromspace]

I love how clear and to-the-point you are. It makes learning online so much easier imo :)

[@lilcoah6519]

frs

[@edberaga]

yeah, better then college professor

[@yoshimitsu8643]

Does anyone find this difficult?

[@edberaga]

@@yoshimitsu8643 it can be difficult for beginner

[@yoshimitsu8643]

@@edberaga really I’ve been coding for less than a week. And there’s an 11hr corse on HTML5 and css3 on KZbin which I’m 8 and half hrs in. But I find all the concepts really easy to grasp. Well ofcrz coding can be perfected through practice. But there are a lot of people who say they find it hard to understand some concepts. And it’s kinda always at the back of my mind about when the complex part comes. But this has been really my addiction throughout the week

[@ozzyfromspace]

Seeing how aptly described classes can make it easier to design your CSS with the class="red-text" example at the beginning just made me get it. So cool. Thank you!

[@danadancu1370]

I love how clear and to-the-point you are. It makes learning online so much easier. Thank you!

[@entity5209]

Everyone after realising that the guy who teaches css isnt mike: My disappointment is immeasurable, and my day is ruined

[@Muhammad_Waleed]

I am also Sad🥺🥺🥺😟😟😟😟😭😭😭😭

[@JosephHerreraLeon]

kzbin.info/aero/PLLAZ4kZ9dFpNO7ScZFr-WTmtcBY3AN1M7

[@Muhammad_Waleed]

@@JosephHerreraLeon Thanks but it's not very Comprehensive I mean it don't covers everything

[@JosephHerreraLeon]

True, best I could find though.

[@Muhammad_Waleed]

@@JosephHerreraLeon Thanks Buddy❤️

[@joshuasusanto4258]

15:42 "it makes a circle!!!" "yaaaaay" lmao that expression

[@lil_jap_kid]

That teacher lol

[@dudem5447]

wholesome

[@guffiz478]

wholesome af

[@BigTastyWithBacon]

Thank you, I was just looking for a video to refresh my CSS knowledge :D

[@mrcoder7327]

You look more angry than happy because of your profile pic

[@art_emini]

@@mrcoder7327 lol

[@vinodaradya]

Mike's teaching is too good in understanding as like HTML , pls make a crash course on this. Appreciate it.

[@pulakchakma5947]

Here is the link to Mike's CSS Tutorials. kzbin.info/www/bejne/jYuVpqR9oK2iiJI

[@tiagotaquelim1776]

Finished today the Responsive web design course. I recommend it !

[@tadejdanev5030]

link?

[@tiagotaquelim1776]

@@tadejdanev5030 It's the freeCodeCamp.org curriculum. The first chapter.

[@tadejdanev5030]

this? Responsive Web Design Certification (300 hours) @@tiagotaquelim1776you got certificate? :)

[@tiagotaquelim1776]

@@tadejdanev5030 yes

[@darryl331]

Is it free?

[@saiakhil4751]

Sir, you are doing a commendable job of teaching students for free. I will never forget your generosity and will repay you for sure once I start earning.

[@francislambert5189]

I will agree too that...Seriously..! Peace :)

[@damilolaogunleye8420]

WHOA!!!!!!!! this is more than a gift THANK YOU SO MUCH

[@UstadJi]

Awesome And A Very Timely Upload, I Needed It Badly. Thanks For This Wonderful Course Cheers

[@mrxXxkink]

this is probably the one of the best tutorials on youtube

[@vssudarshan89]

You're the boss! Thanks for the systematic listing of css, html and JavaScript resources.

I love this guy energy! very nice tutorial for beginners :D

[@abebrosiczki637]

Goodness me, the feeling when your code works is unbelievable.. 🙏😃

[@kishikishi6676]

Hayss im only coding using my phone because I cant afford laptop 😔. I want to be a web developer someday

[@freecodecamp]

Keep learning and you will become a web developer! Here is an article about another developer who learned to code on a phone: medium.freecodecamp.org/how-i-went-from-programming-with-a-feature-phone-to-working-for-an-mit-startup-40ca3be4fa0f

[@mrcoder7327]

Even a student made all of his internet school projects using a phone

[@zaynmalik-vw5ci]

bro i am selling my laptop just for 4000rs take it bro

[@maestro1918]

Don't worry dude. You're not alone at all. I'm coding on my tablet and it's really awesome.

[@sul3y]

I am sorry dude, keep learning you'll become a web developer.

[@m00mai]

you make everything seem so easy

[@dzen8067]

The feeling of had finished the video is rewarding

[@jamayelhrifat]

😀 your tutorial is simple to understand, but catches up all single details.

[@Johanyjn6]

Thank you tons 🙏🏼 I love you guys! ✊🏼

[@sachintank5166]

You are the hero we want and the hero we need.❤️

[@saksham5882]

some much simplification...you the best man!

[@WonderTechie]

I was hoping for transform and animate properties in this course, but learnt even more than that.

[@adityamehta7648]

Dude just woke up and decided to make a "On-point" video, 💀that's the content we r looking for

[@ev_dash]

i took 13 pages of notes from this. Good stuff

[@iamgauravjoshi]

Please make a CSS crash course ft. Mike Dane. He's such a good instructor.

[@AhonaHP]

Hello.....I am from Bangladesh..I learned a lot from you....I don't know how I will thank you..really!!!! I love you a lot....Sir......

[@MrHydrent]

It makes a circle!!!!! Love the enthusiasm :)

[@ayubomaraden867]

Thank you for your free education.

[@bz86054]

I just love freeCodeCamp

[@francislambert5189]

They Do Not Dissapoint. For Sure...Peace :)

[@jadenyoon5236]

Mike is best, but this video is good too, I gave it a like.

[@rohithreddy4323]

Try to move the screen while editing something in the code

[@DavidKonsi]

Good video, but at minute 20:21 it would have been even more helpful to see that you are actually only changing the padding configuration of the class .blue-box Unfortunately this was not visible. Same applies to later moments of the video

[@shogun_1154]

Pls mention ads man pls I feel bad when I take knowledge from you for free

[@vaibhavmatere18]

Same here...

[@vaibhavmatere18]

There should be a donate option

[@tophinski]

@@vaibhavmatere18 There's a donation link on their website.

[@Zionism_Exposed]

yes i feel bad too.

[@pearlsswine]

*cringe* If you really feel that bad about taking his courses for free, you can always donate to their organzation. Oh wait, you want them to be paid, just not with *your* money *, right?

[@parasmyname784]

Awesome work dude. God bless you

[@DavidHdezES]

The Penguin 🐧 was so cute that I started to get lost from there 😂

[@huifangliu9352]

It's wonderful because it's easier for me to understand it. I appreciate it. ;)

[@webworldzone962]

Nice video..you are doing great..since I also run education channel but also love to see other youtuber who are educating people worldwide. Keep the good work 👍

[@melvinmathew7312]

thank you bro found it very easy and clear as a beginner

[@mohammadrasoulfard-habibi3066]

This is brilliant, thank you.

[@samgedam0]

Thanks a lot from the bottom of my heart. I am grateful for what you are doing.

[@Saint_Laurent_freak]

Just love Dave Gray❤❤😭

[@nielskhf]

I am waiting for this for so long!

[@lmirage4740]

So is the html for the padding section supposed to look like this? margin padding padding

[@bouthaynabelkacem6356]

Exactly my question rn :(

[@rafinjobayer]

We want mike who taught us html. Please bring him

[@mtz21601]

You might want to take another look at about 21:30 you cant actually see what your changing in the video. Thank you by the way as these courses have been a big help to me if I wasn't broke I would donate but that's my reason for taking the courses hopefully someday I will be able to afford it. edit: spelling

[@fireballgfx]

very good to refresh that stuff. thank you

[@ViniciusPrado]

Great! I learned many things that I did not know.

[@SoCBrain]

Amazing course, thank you!.

[@FRONTRUS]

*To the everyone reading this* : Sending Virtual hugs to everyone who needs it, Stay Safe! 😷

[@jadijohnson2899]

Html css javascript game project kzbin.info/www/bejne/Y4uuqICil96lapo

[@Ch_HayGrower]

The Course is very helpful thank you for creating it, I have being learning so much already about coding, the Only thing that bothers me is when you make a childish expression, as if you are talking to kids. It really bugs me please stop that, I am almost 25

[@anthonyglennmenor1700]

thank you... web developer/designer in a year (hopefully)! 😁

[@championogunsina6062]

Any progress?

[@shn2666]

??

[@douglasede9300]

Are you a web developer/designer, yet?

[@theparrot271]

Underrated af.

[@AnaMaria-ul9qk]

Great tutorial, thank you very much!

[@codingforfreecertification6840]

Watch this to take test....kzbin.info/www/bejne/eZOYoIh3gZWDpNU

[@emmanuellaryea1203]

great, your tutorial was very help full. Thank you

[@wendyteoh7523]

Thanks for the tutorial!

[@georgelopez9088]

Great video. Thanks I learned a lot.

[@alexanderpierre2067]

Thank you! Love it!

[@ahmedazizabbassi]

thanks a lot I benefited from your lesson

[@АндрійХоптій]

Thank you. It was very interesting and informative.

[@donfeto7636]

Thanks Guys u increase the information system of the world :D

[@belgardboy]

Firstly, thank you for this free, quality content. I am a near complete beginner, so still in the 'Is it for me/ Can I do this? stage'. I do wonder though, is learning these skills without certification acceptable? I hope to cover HTML/CSS/JavaScript over the coming months and see how I get on, but, in order to work with these new skills, will an employer look for a Cert? If so, is there a way to get a Cert through freeCodeCamp? I hope that isn't too cheeky to ask. I am grateful for the courses, and I look forward to learining more about this coding world.

[@emmanuelchukwuemeka6264]

hi @Colm Jolly, you can also get certificates @freeCodeCamp, just keep at it you can do it.

[@rppavlek]

love, respect and many thanks to you... though, I have to say, because of the way you talk it was like listening to Mr. Slave :-D

[@joshguevara9570]

If someone goes through this video alone and becomes comfortable with the concepts taught, is ok to say that one "knows" CSS or should more learning be done?

[@adhaujang4894]

omg! A tutorial that I can catch up to!.

[@thewildsisters4596]

i guess we can all agree mike is a better tutor and i would buy a full course if its expalined by him we wont mike back please can you get mike to do a video on css instead of this guy he is not helping us at all i never learned one thing through out the whole tutorial were as i picked up everything in the html course thanks mike

[@gio4690]

19:37 (bookmark#1) 43:37(bookmark#2) 1:02:43(book mark#3)

[@samchikuvadze6454]

Mike's teaching would really work on this one as well

[@shirkophobe]

Many thanks!

[@hrithikvishwanath1617]

Your Generous ....😊 Thanx for the video🙏

[@youtubeaccount0x073]

I lost you when you started talking about variables.

[@jadenyoon5236]

To clarify, variables are containers that store information, like a water bottle that stores water, or a a wallet that stores money. When you assign a value to a variable, the variable essentially becomes that value. like if you write x = 4, then you can do something with x, like write "x" number of letters, which in this case would be 4 letters. (hope this helped cuz I am not very good at explaining things ;-;)

[@mohammadadil3401]

Thank u so much I really appreciate your course I'm in the penguin sections know and I'm little lost cause you did go through it fast and I don't think it's the best to explain with this drawing i mean it's something new in a sudden Sorry if my English not so good

[@hasnainabbasdilawar8832]

Anyone reading my comments before watching: *HIGHLY RECOMMENDED*

[@hindustaniscreenager6735]

(0:11:40) He tries to comment the code like in C#, that gave me a heartily laugh

[@aneunjieroine3169]

mike is super organised simple and good u just got me super confused

[@codingforfreecertification6840]

This link will not confuse you...kzbin.info/www/bejne/eZOYoIh3gZWDpNU

[@Aidualc321]

Good Tutorial. Bad that the screen was cutted at some points

[@geralt9036]

*It makes a circle!* and I was like *YAY*

[@MuhammadZaid12]

😂

[@bhagiradhkodamanchili5565]

Ur giving helpful info. But try to filter what is best for the audience and mainly how they can follow. Anyways, I've learned almost everything about programming from ur channel. :)

[@pydzio]

around 20:00 (padding settings) I needed to go somewhere else to learn about it. The idea of padding and margin is poorly described and video doesn't follow the cursor...

[@Zionism_Exposed]

yes i agree

[@Ar_Jey_]

Me 2 !

[@peaky7761]

Yes 😒

[@malkiatsingh3057]

Yea

[@soomro5972]

Agree

[@sobeidalagrange7129]

Great to review!!! Thanks :).

[@UmutiteNigel]

I learnt some things but I was looking for something advance

[@davidgere9989]

You want us to learn way faster then we could. It's like you jump whole sections of learning.

[@Spark_Books]

git gud

[@user-pq3in6ee5p]

Sir ur brilliant Thank you so much

[@arytiwari3789]

I am a complete beginner and want to know that what is the difference in this course and the 6 hour course on the same channel. What topics go untouched in this video?

[@sergiomendoza6833]

Quality material thanks

[@thewildsisters4596]

i prefer the tutor that explained html he was alot better he went into more detail knowing that we are most likely going to be beginners watching the guy that explains this css course just rushes through and does not explain alot plus he talks to us like were kids i prefer it if you broke down everything instead of teaching like we already know what your taking about

[@justaprogrammer3764]

this guy is so suitable to be a nice canadian guy, just standing there in the cold and being nice.

[@LearningSimplified]

Interesting. Thanks for the video...

[@abebrosiczki637]

From 14:55 suddenly Beau becomes possessed by some happy unicorn and becomes super elated.. 😂

[@rejinmathew8349]

the explanations where good at the beginning I appreciate that, but after that it becomes difficult to understand.

[@jadijohnson2899]

Html css javascript game project kzbin.info/www/bejne/Y4uuqICil96lapo

[@tadejdanev5030]

you're great many thanks.

[@nope8306]

i m in a class that i dont understand even a sigle and watching a class i love

[@Akaash449]

pls reupload the video after correcting the mistakes. in several segments whatever code you're typing is not visible on the screen

[@komirishettiharish3469]

Where is MR Mike? I loved his lecture

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@motilaldhanak6911]

Anyone plzz tell where is Mike Dane 🥺🥺 he's last lecture uploaded two years ago. Is he okay plzz smone tell him we need him 😔

[@aceroyal4306]

in some parts of the video it isn't possiblee to see the code you're modifying to get the results explained like when explaining the margin and padding for example