CSS Tutorial - Zero to Hero (Complete Course)

[@videolab969]

Thanks for featuring me! I hope you all enjoy the content. Good luck learning CSS!

[@dconnectzone]

Thanks for providing good stuff. :) Learned a lot of things.

[@Darshimir]

Ok lets go ahead

[@migueldomingos4570]

Thx for this tut !

[@rajeshbajaj6336]

I think you forgot adding positioning lectures in this

[@migueldomingos4570]

@@rajeshbajaj6336 And also media queries .

[@blank1387]

I watched whole thing from first to last second, even write down some important things. It is amazing that courses like this are free.

[@dior4558]

i agree this helps out my studying on college a lot

[@MamtaSingh-oh8jp]

I always write every single thing

[@MamtaSingh-oh8jp]

I 13 not in college but I'm in 7th grade

[@MamtaSingh-oh8jp]

I love learning programming languages

[@shortscut7614]

Are you now from zero to hero?😁

[@blackcitadel37]

Whoever created this channel and had the idea of making these courses, i wish the best in life for you and the team behind all this awesome material

[@thenujansandramohan8930]

maybe also think about donating some money

[@peter-jb]

@@thenujansandramohan8930 i agree

[@seekovebot6438]

💅

[@docalba821]

Can we atleast have a moment of slience for legends like this teaching us for free

[@sausthabbirsinghtuladhar1729]

they deserve absolutely everything in the world

[@FekuEntertainmentLtd]

nice of you to say something nice for the teacher here. But bro, moment of silence is usually given when something bad happens. It should be something like, moment of applause! or moment of appreciation, etc ...

[@sausthabbirsinghtuladhar1729]

@@FekuEntertainmentLtd tru lol

[@RockstahRolln]

Amen to this!

[@sammyj6077]

@@FekuEntertainmentLtd lol

[@Sapkaal]

Few days ago I'm zero in CSS and now i think I'm going towards hero in CSS thanks man

[@Codetronics1709]

⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Course Achievements & Results ⌨️ (0:02:36) Introduction to Course ⌨️ (0:11:19) Downloading Necessary Software ⌨️ (0:12:30) Where to Find Project Files ⌨️ (0:14:28) What is CSS? ⌨️ (0:17:09) Creating & Linking a CSS Stylesheet ⌨️ (0:20:39) How to Test a Stylesheet ⌨️ (0:22:12) What is a Selector? ⌨️ (0:25:54) Classes & ID's in HTML ⌨️ (0:31:52) Specificity & When to use Selectors ⌨️ (0:39:13) Pseudoselectors ⌨️ (0:47:58) Advanced Selectors ⌨️ (0:59:30) Attribute Selectors ⌨️ (0:09:38) What are Properties? ⌨️ (1:12:59) The CSS General Rule ⌨️ (1:17:37) Types of Colors ⌨️ (1:24:53) Coloring Text ⌨️ (1:32:30) Background Colors ⌨️ (1:36:56) Images/URL's in CSS ⌨️ (1:42:30) Other Background Properties ⌨️ (1:48:59) Opacity/Transparency ⌨️ (1:52:17) Gradients ⌨️ (2:04:12) Introduction to Types of Units ⌨️ (2:15:57) Text Manipulation ⌨️ (2:23:54) Font Size, Bolding & Style ⌨️ (2:30:33) Font Families ⌨️ (2:37:08) Including External Fonts w/ Google Fonts ⌨️ (2:43:14) Using External Fonts ⌨️ (2:49:07) The CSS Box Model ⌨️ (2:53:18) Changing Content Size ⌨️ (2:59:07) CSS Borders ⌨️ (3:05:51) Margin & Padding ⌨️ (3:15:17) Float & Display Types ⌨️ (3:27:47) What is Flexbox? ⌨️ (3:31:35) Creating a Flex Container ⌨️ (3:34:09) Flex Direction & Wrap ⌨️ (3:38:26) Content Alignment ⌨️ (3:44:45) Flex Item Order ⌨️ (3:49:32) Shrink, Grow, & Basis ⌨️ (4:00:03) The 'flex' Property ⌨️ (4:03:21) Item Alignment ⌨️ (4:08:16) Grid vs Flexbox ⌨️ (4:11:14) Creating a Grid ⌨️ (4:13:30) Template Columns & Rows ⌨️ (4:21:12) Justify & Align Grid ⌨️ (4:28:10) Row & Column Gaps ⌨️ (4:33:13) Column & Row Lines ⌨️ (4:40:46) Grid Area ⌨️ (4:44:38) The Transition Property ⌨️ (4:58:05) Transformation Functions ⌨️ (5:12:26) Creating Animations w/ Keyframes ⌨️ (5:20:30) Adding an Animation ⌨️ (5:23:23) Animation Properties ⌨️ (5:34:49) Website Transformation Challenge ⌨️ (5:38:22) Website Transformation - SOLUTION ⌨️ (5:13:32) What to Learn Next If you understood this video click the like button

[@ushasingh6204]

You could have edited the timestamp for properties after copying it from the description

[@abhinav4026]

Super bro

[@jaegercrown964]

This is one of the finest css tutorial and the fact that this was uploaded 4 years ago, i couldn't find any better css tutorial than this

[@emman8133]

I finished this course in 3 days! Very informative and simple explanations that a beginner can grasp. More of this to come pls!

[@KishanFX]

For those who are watching in mobile And also for me ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Course Achievements & Results ⌨️ (0:02:36) Introduction to Course ⌨️ (0:11:19) Downloading Necessary Software ⌨️ (0:12:30) Where to Find Project Files ⌨️ (0:14:28) What is CSS? ⌨️ (0:17:09) Creating & Linking a CSS Stylesheet ⌨️ (0:20:39) How to Test a Stylesheet ⌨️ (0:22:12) What is a Selector? ⌨️ (0:25:54) Classes & ID's in HTML ⌨️ (0:31:52) Specificity & When to use Selectors ⌨️ (0:39:13) Pseudoselectors ⌨️ (0:47:58) Advanced Selectors ⌨️ (0:59:30) Attribute Selectors ⌨️ (0:09:38) What are Properties? ⌨️ (1:12:59) The CSS General Rule ⌨️ (1:17:37) Types of Colors ⌨️ (1:24:53) Coloring Text ⌨️ (1:32:30) Background Colors ⌨️ (1:36:56) Images/URL's in CSS ⌨️ (1:42:30) Other Background Properties ⌨️ (1:48:59) Opacity/Transparency ⌨️ (1:52:17) Gradients ⌨️ (2:04:12) Introduction to Types of Units ⌨️ (2:15:57) Text Manipulation ⌨️ (2:23:54) Font Size, Bolding & Style ⌨️ (2:30:33) Font Families ⌨️ (2:37:08) Including External Fonts w/ Google Fonts ⌨️ (2:43:14) Using External Fonts ⌨️ (2:49:07) The CSS Box Model ⌨️ (2:53:18) Changing Content Size ⌨️ (2:59:07) CSS Borders ⌨️ (3:05:51) Margin & Padding ⌨️ (3:15:17) Float & Display Types ⌨️ (3:27:47) What is Flexbox? ⌨️ (3:31:35) Creating a Flex Container ⌨️ (3:34:09) Flex Direction & Wrap ⌨️ (3:38:26) Content Alignment ⌨️ (3:44:45) Flex Item Order ⌨️ (3:49:32) Shrink, Grow, & Basis ⌨️ (4:00:03) The 'flex' Property ⌨️ (4:03:21) Item Alignment ⌨️ (4:08:16) Grid vs Flexbox ⌨️ (4:11:14) Creating a Grid ⌨️ (4:13:30) Template Columns & Rows ⌨️ (4:21:12) Justify & Align Grid ⌨️ (4:28:10) Row & Column Gaps ⌨️ (4:33:13) Column & Row Lines ⌨️ (4:40:46) Grid Area ⌨️ (4:44:38) The Transition Property ⌨️ (4:58:05) Transformation Functions ⌨️ (5:12:26) Creating Animations w/ Keyframes ⌨️ (5:20:30) Adding an Animation ⌨️ (5:23:23) Animation Properties ⌨️ (5:34:49) Website Transformation Challenge ⌨️ (5:38:22) Website Transformation - SOLUTION ⌨️ (5:13:32) What to Learn Next

[@Charles-cb3lo]

you aren't the person who made this video though

[@raphtlw]

@@Charles-cb3lo stfu its obvious he can create the timestamps by watching the contents of the video

[@cocplayers8500]

How to do this

[@kcodykobs]

Thanks

[@sofia_isjdk]

I love the way he says "alright, let's move on". But seriously, I can't believe that such courses exist for free. This is pure gold.

[@rishavbhardwaj2930]

2:38 section 1- introduction 2:38 course introduction 11:15 Lets get started 11:20 Downloading necessary software 14:30 section 2- css introduction 15:13 What is CSS 15:58 Why Use CSS? 16:34 How is CSS Used? 17:10 Creating and Linking a CSS StyleSheet 20:40 How To Test A Stylesheet 22:24 section 3- selectors & properties 22:31 What is a selector? 23:18 Selectors: The Element Selector 24:00 Selectors: The Class Selector 25:00 Selectors: The ID Selector 25:55 Classes & ID in HTML 31:54 Specificity & When To Use Selectors 39:15 Psudoselectors 48:00 Advance Selectors 59:33 Attribute Selectors 1:09:42 What are Properties? 1:13:03 The CSS General Rule 1:17:41 section 4- coloring & formatting 1:17:41 Types of Colors 1:24:59 Coloring Text 1:32:36 Background colors 1:37:02 Images/URLs in CSS 1:42:36 Other background Properties 1:49:06 Opacity / Transparency 1:52:23 Gradients 2:04:20 section 5- Fonts & text manipulation 2:04:20 introduction to types of units 2:16:04 Text Manipulation 2:24:02 Font Size, Bolding & Style 2:30:41 Font Families 2:37:17 Including external fonts W/Google Fonts 2:43:25 Using External Fonts 2:49:17 section 6- Layout 2:49:53 Introduction 2:50:41 The Box Model 2:51:14 Padding 2:51:57 Border 2:52:27 Margin 2:53:28 Changing Content Size 2:59:17 CSS Borders 3:06:01 Margin & Padding 3:15:29 Float & Display Types 3:27:59 section 7- Flexbox 3:28:44 Introduction 3:29:19 Flexbox Components 3:31:47 Creating a Flex Container 3:34:21 Flex Direction & Wrap 3:38:39 Content Alignment 3:44:58 Flex Item Order 3:49:45 Shrink, Grow & Basis 4:00:17 The 'Flex' Property 4:03:35 Item Alignment 4:08:30 section 8- Grid 4:08:30 Grid vs Flexbox 4:08:52 Introduction 4:09:30 Differences 4:11:28 Creating a Grid 4:13:45 Template Columns & Rows 4:21:27 Justify & Align Grid 4:28:25 Row & Column Gaps 4:33:28 Column & Row Lines 4:41:02 Grid Area 4:44:45 section 9- Animation & Transitions 4:44:45 The Transitions Property 4:58:23 Transformation Functions 5:12:44 Creating Animations w/Keyframes 5:20:49 Adding an Animation 5:23:42 Animation Properties 5:35:08 section 10- challenge (test) 5:35:08 Website Transformation Challenge 5:38:42 Website Transformation Solution 6:13:54 What To Learn Next

[@sujithkumar4849]

Super bro & thanks

[@lilmermaid5239]

You're amazing thx ❤

[@Olie956]

You wasted your time. He had all this in the video description. Lol.

[@pritishpattnaik4674]

thanks bro u made my task easier....

[@Olie956]

@@pritishpattnaik4674 Again, it's all in the description section of this guy's video. Lol.

[@Teaquilaaa]

*suggestion* while watching the video, open your text editor alongside, and take running notes if you can as comments right on your text editor. watch video for a particular section, try to make notes side by side, if u cant, no problem, after watching video for that particular section, make notes, then next section and so on. before moving on to next next section make sure u go through your previous notes as a small revision. whenever u sit down to make new notes, make it a habit to go through your previous notes....helps a lot :D all the best comrades.

[@kanzanaveed]

Thank you, İ'll keep it in mind

[@mohini33977]

I was an absolute beginner with biology background. Started everything with the scratch and today, I finished this course that is so amazingly taught till the end. The course is perfectly structured, and you will find almost everything covered in this video related to CSS. I don't know if I am a CSS-Hero yet, but yes, I am definitely not a zero now. 😀😀 Kudos to the creators of this invaluable content and good luck to the learners!!

[@kidu52]

It's amazing how he can say "Alright let's, move on" exactly the same everytime. Also thx for the video and keep moving on.

[@number1Don]

Its called video editing.

[@dmitriykhegay1895]

I like the way he says : "Alright, Let's move on" at the end of every lesson.

[@AmAnKumAr-tg4fy]

same!

[@AmAnKumAr-tg4fy]

​@LAVA_MAN stfu

[@HasanVurucu]

It is satisfying

[@fr0sty999]

Hats off to this dude who's giving such amazing and high quality content for absolutely free. at this point i'm 4 hours in the video and i didnt even mind a single ad that has come in between. for such content people would charge to hundreds of dollars but this person is giving it for absolutely free. CHEERS MATE!

[@KARIAP]

6 Hours and in exchange you learn CSS? Great. 3 Days Later: I Finally watched 2 Hours!!!!

[@Ramdoot_Shubham]

damn so relatable...hahah

[@Chef-w8t]

OMG it`s so true. Same was at html video))

[@KARIAP]

@@Chef-w8t yeah. It's true for every long course.

[@badkawaiikitty]

Right!

[@LittyXavier]

i like the way you say: "Just keep that in mind and you'll be fine"

[@sumanmitra202]

Whenever u want to pay and learn something.. FREECODECAMP appear... Truely the best channel for programmer... Thank you.. gonna return something with donations when i ll get my first job.. currently i am in college 1st year...

[@mattmarkus4868]

Good point. They really provide a lot of value. It’s nice to see.

[@helloworld2054]

same here bro

[@vasudeonaik8092]

i was also thinking about donations when i ll get job...

[@AHMED-ts7hv]

the same here 1st year software engineering department

[@joshuaadewale1409]

Like seriously.... that is what is on my mind

[@pooyaestakhry]

In order to remember in what order to enter values for margin and padding just remember them as clockwise : top -> right -> bottom -> left

[@yrgbx6026]

TRBL , I remember them by thinking treble but spelled TRBL

[@rishdhisabith2585]

@@yrgbx6026 Basically Treble without its e's

[@itsnarroblox]

@@rishdhisabith2585 basically treble without the vowels

[@rishdhisabith2585]

@@itsnarroblox Sounds about right

[@मेबीराज]

This guys are actually doing really good work! No ads, free tutorials! They don't even have money to "Activate Windows" 😂, though they are making it free. Just kidding. Thank you!! ♥️

[@uncleiroh3616]

I can't believe a course like this is free. Infinite thank you-s wouldn't be enough to show my gratitude to this channel.

[@fredierensal9410]

Just leaving a comment. To remind myself I was here trying to learn. Just finished the whole video and it was a great experience. Everything I saw on other videos started to make sense after I finished this. Big thanks. 👍 Keep learning everyone ✌

[@searask7018]

How is it going now?

[@hushbingo8538]

What's the update now?

[@hershxalil4556]

42:40 change element of( Li ) 2:18:50 text-manipluation 2:33:33 font families 2:57:07 check your website on the phone 3:12:11 padding (Top right bottom left) 3:35:01 flex direction. Flex-wrap and wrap 4:08:44 Align-self (start, center, end) 4:44:44 transition 5:18:02 animations 5:27:20 animations delay 5:28:52 animations count 5:45:42 display, grid

[@codicts5149]

Hey guys, I just want to say thank you! for inspiring me to start my channel. You guys are awesome!

[@l1braabr1l88]

great content! got my sub.

[@lastjediknight6744]

Awesome content codicts keep going!

[@IshanKesharwani]

Saw you channel. Love the videos.

[@blindsnipergamer7882]

just subbed

[@Pimp482]

Me when I started coding: 100 lines of code must mean a lot of feature Me now: *Writes up to 200 lines of code for a login/registration system*

[@abhiramanne9649]

@@nomadicfathersons that hover effect is cool

[@omkaryadav7445]

@@nassimback yes nassim..django provides lot of inbuilt features.. It's a great python framework

[@naruto58136]

This is the greatest css programming video in youtube give this person a golden medal please

[@codingforfreecertification6840]

To get certificate....kzbin.info/www/bejne/eZOYoIh3gZWDpNU

[@HarmanSandhu-zb7kl]

Started on Monday , completed on Saturday , one ween completely utilized and a SKILL added . THANK YOU SO MUCH for sharing knowledge .

[@trangbui1910]

"It's only six hours, I can do this" Took several weeks

[@yZempX]

bro it's months* to me

[@quocbao6046]

This is actually damn complicated! :))

[@darsheelsavla9725]

I started at 2pm and took breaks in between but I've completed 3hours of the video and it's 8:30pm, let's see if I'm able to finish this before sleeping.

[@trangbui1910]

@@darsheelsavla9725 Good luck on that

[@darsheelsavla9725]

@@trangbui1910 oh I completed it in the next morning lol

[@l.a.xbeast8502]

Not all heroes wear capes. But seriously, thank you for taking all the time you did to make this. We here in the comment section appreciate it a LOT.

[@shapind]

Watching lecture and making notes and meanwhile practicing and trying to make my own template! Thank mate!

[@anamaysarkar6612]

Amazing course, great content. Finished the course in a day. Did learn a lot so hats off to the instructor, especially in the way the course is structured. I work as a software engineer in silicon valley and would really recommend this course to everyone who touch the front end in any form.

[@zwwx2142]

friend I am from South America some advice to learn to program quickly👍

[@Rayer24]

kinda weird that pseudo selectors are introduced first before the very basic things like coloring text, and changing background color

[@rahmanmusah4470]

how did you finish this course in a day,? teach me.

[@anikmojumder]

Can't believe I just completed the video!! I wrote all the codes,learnt all the concepts and completed the challenge. Thank you so much for this amazing course😊😊

[@anikmojumder]

@@naninani3116 indeed😁 best of luck, there are some challenges ahead 😊

[@shadowknight00]

I learned html and now I will learn css to improve my website. BTW I watched your channel's 2 hour long html tutorial to learn html and it helped a lot, thank you for the support and help.

[@heisenberg5873]

Wow same can i know what you are learning now

[@drougnov1828]

Things I've learned in this video: 1. How to CSS 2. How to move on

[@kanekicypher]

Sameeee

[@Xnoob545]

3. Forget everything

[@kskfernando2945]

lol

[@priza_yt]

don't give up keep tryin...

[@jaishankarcr3328]

What do you mean by sameee

[@eleniminadaki6781]

After three years I have to get in touch with css, I started again with this video and I got so enthusiastic with the good communication you have and that you have covered all the basics. For me the way you teach is very pleasant! Thank you.

[@osamaahmed6050]

Started Several Weeks ago, finished the learning part of the course at 10/6/2021, and i just finished the challenge at 14/6/2021 4:07 AM. let this be a reminder for me to come and comment on this video every year and say what i have used this course for :) .

[@Ben-nt1zl]

Really helpful, I have a constant struggle with CSS trying to remember everything, and I don't want to move onto JS until I have mastered it. Thanks for this!

[@Ben-nt1zl]

@@angelsv I've progressed onto JS now partly with thanks to this video, although I could do with building a few more projects and working on media quieries :)

[@aunmaqsood8227]

@@Ben-nt1zl nice, have you made any projects that you're proud of yet? Or something that gives you validation that you can move on? I don't think I'm ready yet, mainly because I'm not satisfied with my projects that I've made using html and css

[@Dextor3400]

How are you guys doing now? Did you made any progress?

[@chaka1530]

You don't need to remember all the things. You can find everything, just need to type it on google and solve your problem. It is just no worth it and also impossible to learn it all.

[@eduardorendon1772]

I am at the exact same point right now!!! I have created a few projects but am not very proud of them, and I am also thinking that I cannot move on to JS if I have not mastered CSS. So, a year later, what can you tell your experience has been? Have you finally mastered it?

[@AYuSh-wq5ui]

2 days ago: Decided to start studing web development 1 day ago : Studied Html 6 hour ago : Started to learn Css Now : Opened Text editor to build a website.

[@Xiler6969]

congrats

[@fahanfarooq3844]

A moment of silence for those who think they can make a website after learning html and css🤐

[@Just_like_that1234]

@@fahanfarooq3844 yeah, maybe just a website's design

[@fahanfarooq3844]

@@Just_like_that1234 for being a complete web designer you need to learn javascript too

[@fahanfarooq3844]

By web designer i mean to design a website..."literal"

[@migueldomingos4570]

This tutorial seems so professional and it is so good! I love it! I cannot congrat you enough!!!CSS from basic to expert in one free tut!Wow!

[@firefoxgaming8439]

thank you! i choose you as a teacher and u teach me goodly though u were not with me. once again thank you. teacher. GOD BLESS YOU A LOT. AND LOTS OF LOVE FROM ME

[@shagoyestudyabroad4003]

I am Gaddisa from Ethiopia I have started the truck of being a full-stack developer yet, I think your courses will help me very well. Since most of other courses have tuitions to be paid I cannot get an interesting video like this before. Tanks very much.

[@sarwat3552]

Thank you Jad Khalil !! It took about one and half a month to complete this full video 👊👊👊🔥 Learned a lot of things in this video and learned something productive in this lockdown period when my school is closed.

[@teawrld5976]

Girl: Lets break up... This guy: Aight, lets move on.

[@mayurkotu3722]

CS go 😉

[@hgrajesh]

lol

[@dzenish.2262]

Niceeee :)

[@makgamer6596]

ROFL

[@Dell88music]

I had this in my head every time I heard it lol

[@wowowowoooww]

i love how he says "alrights let's move on"

[@nexteffect5138]

This is a free course, a free knowledge to all of us. That's why I don't escape ads for this. Hoping for Javascript full course if none yet.

[@mscit_08_omprakash40]

I don't know you but Thank you so much from my side I had started this course on march 25 and finished on April 2 You are such an inspiration to me and many as well. Love from India ❤ more specially is the way to speak thanks again!

[@vincentleteipa7418]

Me: "6 hrs only?? I am gonna do this. Me(18 days later).: I am done now.

[@dellzeymourviernes5147]

dont give up bro

[@Milka-br1xw]

18 days aren't actually bad im watching the 3 hrs js session for 1 month now and i got only 1,5 hrs ://

[@hikohiko9358]

thats the point of learning guys

[@SanthoshKumar-xp1jb]

I'm in 3 months 😅

[@noblenormie1179]

totally normal

[@Ramdoot_Shubham]

shooting this lecture even on christmas ! dedication level ! THANKYOU

[@yZempX]

"Alright, let's move on!"

[@Goro69]

It's crazy that these things are free. This guys deserve all the best in the world.

[@Ibrahimsketche1]

this is the best free online coding class

[@baibhabchakraborty266]

Finally completed! Loved the course! Really, the best course ever!

[@brijeshvishwakarma2845]

Your teaching skill is awesome! You covered almost everything in CSS3. Thank you so much for such a great course!

[@Chnx050]

What's the difference between CSS and css3? Is this course still up-to-date in 2022 Or do I need to learn from the latest course? Thank you in advance

[@wammy4931]

@@Chnx050 yeah im having the same doubt

[@winnerscreativelab]

@@Chnx050 css3 is the lastest version of css . The w3c didn't upload a major update of css since 2017. And css3 is gonna be the standard version of css for a long time

[@26manasviverma14]

@@Chnx050 did your doubt get resolved? is this valid for 2023

[@Chnx050]

@@26manasviverma14 I don't study CSS anymore

[@delightoyedeji3998]

who else enjoys the soothing sound of him saying "aiit lets move on!"

[@captain40i48]

Meeee I also say it with him

[@DanielWinebrenner]

thanks so much for this in depth video. I started learning code and then stopped, decided to finish what i started, so it was nice to have a refresher on css so i didn't have to start The Oden Project from scratch.

[@ankitaprasadgupta7056]

Really cool stuff out there!! Nice tutorial! Specially like the way u say " Let's move on " 😂❤

[@azharuddinmohd6436]

Yeah me too same

[@obiohawisdom1388]

the best video I have ever watched on CSS

[@gormarduck1658]

same here

[@obiohawisdom1388]

@@gormarduck1658 yeah are you part of the team?

[@gwenaeloppitz3972]

After 10 hours of watching a 6h long video at 1.5 speed (find the error) I made these personal notes that i'm happy to share for anyone who saw the video but forgot something. Before I do thank you so much for this I learned a lot! I'll do it in comments of this message because otherwise it's too long!

[@gwenaeloppitz3972]

flex-boxes -used on the container: display: flex; (used on a container (a div for instance) which will then adapt to the size of its children) flex-direction: row/column/row-reverse/column-reverse (used on the container to organize items inside) flex-wrap: wrap/nowrap/wrap-reverse; (if too many items they are sent to the next line instead of being squeezed, reverse sends them up) justify-content: center; (places the items in the center of the container (widthwise)) justify-content: flex-left/flex-right; (sends them to the side) justify-content: space-between; (spreads the items with equal space between them to cover the entire width) justify-content: space-around; (same as the previous but gives each element the same margin) align-items: strecth; (default value, items are streched depending on the height of the box) align-items: center/flex-end/flex-start; (gives back the elements their height and places them verticaly in the chosen position) align-items: baseline; (vertically aligns items depending on their line's height) -used on the items inside the flex box (with inline styling in the video): order: 1; (this item will be displayed first in the flex-box) flex-basis: 100px; (gives the element a minimum width) flex-grow: 1; (compares the flex-grow value of other elements spreading them equaly giving more space to the higher value, proportionaly) flex-shrink:2; (same as grow but for when we reduce the page below the necessary width, the highest value will shrink faster (here twice)) these 3 properties can be regrouped in 1: flex: 0 1 auto; (default values for grow, shrink and basis) align-self: flex-start/flex-end/center (does the same as the container property align-items but for this element only) grid -used on the container: display: grid; (spaces all the elements equally vertivally) grid-template-columns: auto auto auto; (spreads the elements in 3 columns with equal spacing) grid-template-rows: auto auto; (creates 2 rows with equal spacing) justify-content: start/end/center/space-around/space-evenly (works like for flex andignore the grid-template) align-content: start/end/center/space-between/space-around/space-evenly (vertical alignment) grid-row-gap: 200px; (makes the space between rows 200px high) grid-column-gap: 100px; (makes the space between columns 100px wide) grid-gap; 200px 100px; (summarizes the 2 previous props row then column) -used on the items inside the grid (with inline styling in the video): grid-column:1/3; (the element starts in the first column and ends before the 3rd column) grid-row:1/3; (the element starts in the first row and ends before the 3rd row) grid-column/grid-row: 1/span 2 (does the same as above but easier to use, spans on 2 columns/rows) grid-area: 1/ 1/ 3/ span 2; (does the same as above in 1 line (rowStart/columnStart/rowEnd/columnEnd) transitions (used to style the change between 2 states of an element) transition: background 2s ease 1s; (sets the changes to the background to take 2s with default transition after 1s delay) => linear(linear= from A to B without increase or decrease in speed) => ease-in-out/ease-out-in (slows the process in the end or beginning) note: it might be necessary to add -webkit-/-moz-/-o-/ms before transition to make it work on chrome safari/ mozilla/ opera/ edge transform: translation(30px, 20px); (translate the element to the right for 30px and down for 20px) transform: scale(2.5); (scales everything by 2.5 times, also the text unlike when using padding) transform: rotate (-55deg) (rotates 55deg anticlockwise) transform: skew(35deg, 45deg); (rotate around the X and Y axes instead of the center of the element) transform: matrix(1, 0.45, 0.55, 2, 100, 50); (scaleX:1, skewX:45deg, skewY:55deg, scaleY:2, translateX:100px, translateY:50px) animations (they have to be designed separately then added to an element) @keyframes blue-to-yellow { from {background: blue;} to {background: yellow;}} (creates an animation of name 'blue-to-yellow' that gives an initial blue background changing to yellow) @keyframes red-yellow-blue { 0% {background: red; transform: translate (0px, 0px);} 35% {background: yellow; transform: translate (10px, 10px);} 100% {background: blue; transform: translate (20px, 20px);} } (creates animation which has 3 states: initial, after 35%, end. changing the background and translating it to right bottom) -to give an element using whatever selector: animation-name: red-yellow-blue; animation-duration:4s; (when the page is loaded or the element hovered... does the animation for 4s) animation-timing-function: linear/ease/ease-in-out/...; animation-delay: 2s; (adds a delay before the animation starts, can be negative but not a lot of use) animation-iteration-count: 2/infinte (repeats it twice/forever) animation-direction: normal/reverse/alternate/alternate-reverse animation: red-yellow-blue 4s linear 0s 2 alternate; (does the animation red-blue-yellow on 4s in a linar way with a delay of 0s and twice alternated)

[@AL-yh4ol]

Yo thanks for your time and effort

[@rashid5271]

@@gwenaeloppitz3972 dudeeee that's amazing

[@gwenaeloppitz3972]

@@rashid5271 happy that it can help someone :)

[@pitzel]

Thanks

[@catherinaelkhoury985]

the best ever!! I'm in 2022 and watching this. Highly recommended, really good work. Thanks for all the team you're the best

[@Rouge_Raven_]

The BEST CSS tutorial! You are a fantastic instructor. Really well organized and simplified. Thanks a bunch!!

[@urosmilic3300]

Very good content, helped me a lot. Especially for animations, flexbox and grid i thought that is something hard to learn, but you made it look so easy and it actually is. Cheers brother!

[@balogunoluwatobijohn154]

I really salute your teaching methodology. You made every bit of css concept easy to learn and understand. Thank you very much boss. God bless you and your handiwork. You are the best!

[@oluwaseunsorinola7039]

What is his name and does he have his own KZbin channel too?

[@oluwaseunsorinola7039]

VideoLab by Jad Khalili

[@AsuBeats]

Thanks for all the FREE Content Here is a Quick tip for others to make maximum out of this COURSE. 1. Watch the video and Understand 2. Go W3 Schools OR MDN and look for all possible attributes and play with them 3. You can also keep all the property value pairs in a file which will help in future reference 4. Make a lot of Projects These are my opinion. any suggestions are welcomed.

[@GiftormX]

Finished basic HTML course, and now got to this, swear to god if i ever start doing this for a living i will invest my brains out to this channel. Mark my words

[@winnerscreativelab]

i'm 13 and you are a very good teacher. for new ones, don't use grid-column-gap, grid-row-gap and grid-gap. just use gap

[@hanza69]

This course taught me a lot. It cleared all my confusions in CSS course. I finished this full course video within a week because I was practicing every single step and yes I was doing my daily life tasks. Thank you so much

[@tomisinawoniyi9126]

Hey! Did you take notes?

[@hanza69]

@@tomisinawoniyi9126 yes I did and created a mini project

[@tomisinawoniyi9126]

@@hanza69 well done! Follow me on twitter… let’s connect! @tomisin2k

[@ze_chooch]

Day 8 of becoming a web developer. So far, I have 14 hours logged and I've learned the basics of HTML. Now onto CSS. Here we go!

[@ze_chooch]

I’m halfway through the video (3:15:00) and my websites are already looking a lot cooler because of the first half of this content! I’m really looking forward to the second half!

[@kristaqvin]

Sir I have a question. I know html and I want to build a website. If I learn css, can I combine these two in order to make my website more powerful?

[@ze_chooch]

Chris Vintsanis yes, but, depending on what you need, CSS alone may not be enough. You should ask an expert though as I’m a beginning beginner.

[@ze_chooch]

I'm back to this video after spending 2 weeks on CSS Grid. Hoping to finish this video by Friday (May 1st)!

[@kristaqvin]

@@ze_chooch I finished it too! In one and a half weeks though.

[@Jack-gg2gg]

this is by far the best tutorial ever, thank you!

[@tarsierontherun]

Bro. First of all, thank you for making this whole video. I appreciate it. I'd have to correct you on one detail though. @ 52:10 , your explanation was wrong about the difference between Adjacent Sibling Selector and General Sibling Selector. 1. The *Adjacent Sibling* selector selects the element that immediately follows another element. 2. The *General Sibling* selector selects all elements that comes after another element, regardless whether the element being selected immediately follows the element being referenced. Both selectors require that all the elements have THE SAME parents.

[@mr.pineapple8687]

Left one hour to go , hang on there my friend who is with me ,we are on the road to Hero ,Thanks Teacher in advance 😍😍😍

[@ishitabhardwaj1797]

hey are you developer now

[@lilokuki912]

I will finish this video and write notes of all of it in the next six days starting from now Day 1: stopped at 28:00 Day 2 :stopped at 50:00 Day 3: stopped at 1:46:43 Day 4: didn't programme today :( Day 5:didn't programme today :( Day 6: Edit 1:seem's I am going to need more than 6 days Edit 2: 2 weeks have passed I didn't finished the video because I decided to follow the W3schools CSS Tutorial

[@vrushabhpatil2867]

cool man i just watch the vedio in one day in but the thing is watching won't help you need to practice in real then only concept will clear i am again here to learn haha

[@lilokuki912]

@@vrushabhpatil2867 i don't have time to see 6 hours straight and acttualy I spend 3/4 hours andonly watched 1 hour and I can't explain even I was writting the code

[@vrushabhpatil2867]

@@lilokuki912 try trick watch this vedio in speed of 2x. Trust me its not that fast think like u are watching movie, it will finish within 3 hours just sit with water snacks etc dont write anything understand it.Take a break then try to solve the test which is in the end of vedio don't watch solution. Next day u can compare ur answers. It will fly trust me. and if didn't understand repeat the procedure.

[@dontbetoxic4387]

@@vrushabhpatil2867 what

[@vrushabhpatil2867]

@@dontbetoxic4387 ?

[@jagsproduction]

I have just watched 31 mins of this video, and I am loving it. Thankyou so much sir, for providing this free course! I will be learning many new things as I progress in this 6 hrs long course!

[@nellison]

Thanks!

[@Blasio254]

This is one of the best CSS tutorials you can get online.

[@rahulm8619]

Thank you for this amazing course, I'm forever indebted to the instructor for making such an amazing course. A big thanks to the instructor and Free Code Camp!

[@gallusdomesticus1285]

I like the way he say "lets move on"

[@ViratKohli-jj3wj]

I completed this in two days. Thank you so much for this course.

[@tayadevijay]

You should stick to the cricket

[@ViratKohli-jj3wj]

@@tayadevijay lol

[@DaggerIdioticGamer]

"Let's move on" I'm so glad you end every section with that for dynamics sake

[@Earthy35]

Just finished watching the whole thing, wow! Such a great course to get up to date for me who learned CSS in 2009! Really enjoyed learning and understanding the newer stuff! Thank you so much!! I feel more confident to get back to web dev after years being lost in a warehouse lol

[@menaabdo865]

I will finish this video and write notes of all of it in the next six days starting from now Day 1: finished pseudoselector 47:35 Day 2 : Day 3: Day 4: Day 5: Day 6:

[@Realitymymovie]

Damn bro, you aint been back in 3 years ?!😂😂😂💔😂

[@韋冠中]

After I learned this video, now I finish every single task, I will say "Alright, Let's move on"

[@vikk1249]

Hey guys this means a lot , bless you guys

[@drossgamessports9480]

Code camp posts some pretty awful free lessons sometimes but this one in particular is the best. You speak clear English and constantly refer to the task at hand in relation to what is being said and shown. You are a teacher. The others are just KZbinrs.

[@mattwebbertime]

I'm on a roll here folks... a more dev way of thinking about the diff between "ul > li" and "ul li" is like a shallow vs deep copy of an object. If B is a shallow copy of A and A has a nested object, when B changes that nested object, it changes for both B and A. If B is a deep copy, however, when B changes that nested object, A's nested object does not change. I don't know how that make sense for me, but it does. "ul > li" makes a shallow change and "ul li" makes deep change.

[@AschKris]

"Activate Windows" absolute legend

[@MianAffanAli]

There is a mistake in timestamp. "(0:09:38) What are Properties?" there should be "(1:09:38) What are Properties? "

[@beneficarum2803]

Hi, I am a hearing impaired person interested in web development and would love to learn more from this course but the subtitles are very skewed. Is there any chance you might fix them? Thank you a lot!

[@leolefebvre9207]

I have spent 30 min trying to link the css and html file and it gave me so much satisfaction to see my page changing color...

[@muhammadtawhidulislam]

Great video. I love when he says "Alright, let's move on" after every module.💖

[@DigitalCreator45plus]

Thank you for generous effort by posting here. You did a great job. You help me n thousands of others who want to learn.

[@shrishm6990]

wise man once said"alright lets move on"

[@andigashi4054]

Not once but a lot of times

[@dondieggito1931]

I really love it hahahahah

[@kairu9413]

I like the part when he says "Alright Let's Move On."

[@mohammedcool190697]

Finally done with JS, HTML and CSS. Now only halfway through vue and then start to learn react! Thanks for your channel!

[@azeezbalogun4035]

I hope you’re working now fren

[@sltechnology2273]

Thank You Sir, This is a great course to me. I learned Basic to Advance CSS. I got 36 hours to complete this. I'm From Spain. Even I cannot understand English, I can understand what is you learning. Muchas Gracias Señor.

[@alexjamarco]

FreeCodeCamp I'm waiting for the website to get back again so I can continue my learning over there. Thanks for the video!

[@freecodecamp]

We were performing an update. It should be back up now.

[@divyalokjaiswal3186]

@@freecodecamp NOO! It's still not working properly. Please finish it as soon as possible. All the best!

[@dconnectzone]

Thank you for providing all good stuff for free. I'm currently learning python as well html,css . -From Nepal

[@shivlalbhattarai2093]

me learning from Nepal 🥰

[@abhayagarwal5097]

Same here 😂

[@abhayagarwal5097]

But from India

[@riccardomariotto9321]

I'm gonna rewatch all of this and count how many times he said: "It's quite complicated, but when you start using it, it gets easier" Just kidding. This is an insanely good course

[@kahhuanyap6313]

When the "Alright, let's move on" turns into "Alright, thanks for taking the course" it really gives a sense of nostalgia

[@AmAnKumAr-tg4fy]

It's hurt at last when he says "Alright Thank's for taking the course"