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 ...
*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.
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...
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!!
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 ✌
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!
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.
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.
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.
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.
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 :) .
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
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.
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!
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!! ♥️
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.
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.
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.
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😊😊
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!
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.
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:
@@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
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!
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!
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)
Way to remember the shorthand property for the box model: Adjusting Margin and paddings is TROUBLESOME: Trouble = T R B L
3 роки тому
men you are a great great teacher, your simple and precise. The greatest i found on the internet and out of internet. things are easy in their core but some people like to explain it harder...dont know why... you did the job.
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
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!
@@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 :)
@@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
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.
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?
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.
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!
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!
grid-template-columns: 1fr 2fr 1fr; ->gets 3 columns with 1 fraction, 2 fractions, 1 fraction simultaneously. Or 25% 50% 25% of the width. the same for rows.
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
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
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
@@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
@@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.
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!
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!
The + and ~ selectors are explained wrong. A + B means directly the first B after the A. (which means they share the same parent) A ~ B means all siblings that are type B and come after A. (which also means they share the same parent)
Thanks for featuring me! I hope you all enjoy the content. Good luck learning CSS!
Thanks for providing good stuff. :)
Learned a lot of things.
Ok lets go ahead
Thx for this tut !
I think you forgot adding positioning lectures in this
@@rajeshbajaj6336 And also media queries .
I watched whole thing from first to last second, even write down some important things. It is amazing that courses like this are free.
i agree this helps out my studying on college a lot
I always write every single thing
I 13 not in college but I'm in 7th grade
I love learning programming languages
Are you now from zero to hero?😁
Can we atleast have a moment of slience for legends like this
teaching us for free
they deserve absolutely everything in the world
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 ...
@@FekuEntertainmentLtd tru lol
Amen to this!
@@FekuEntertainmentLtd lol
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
maybe also think about donating some money
@@thenujansandramohan8930 i agree
💅
In order to remember in what order to enter values for margin and padding just remember them as clockwise :
top -> right -> bottom -> left
TRBL , I remember them by thinking treble but spelled TRBL
@@yrgbx6026 Basically Treble without its e's
@@rishdhisabith2585 basically treble without the vowels
@@itsnarroblox Sounds about right
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
you aren't the person who made this video though
@@Charles-cb3lo stfu its obvious he can create the timestamps by watching the contents of the video
How to do this
Thanks
Few days ago I'm zero in CSS and now i think I'm going towards hero in CSS thanks man
*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.
Thank you, İ'll keep it in mind
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
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
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
Super bro & thanks
You're amazing thx ❤
You wasted your time. He had all this in the video description. Lol.
thanks bro u made my task easier....
@@pritishpattnaik4674 Again, it's all in the description section of this guy's video. Lol.
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...
Good point. They really provide a lot of value. It’s nice to see.
same here bro
i was also thinking about donations when i ll get job...
the same here 1st year software engineering department
Like seriously.... that is what is on my mind
I finished this course in 3 days! Very informative and simple explanations that a beginner can grasp. More of this to come pls!
Started on Monday , completed on Saturday , one ween completely utilized and a SKILL added . THANK YOU SO MUCH for sharing knowledge .
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.
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!!
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.
Its called video editing.
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 ✌
How is it going now?
What's the update now?
Hey guys, I just want to say thank you! for inspiring me to start my channel. You guys are awesome!
great content! got my sub.
Awesome content codicts keep going!
Saw you channel. Love the videos.
just subbed
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!
"It's only six hours, I can do this"
Took several weeks
bro it's months* to me
This is actually damn complicated! :))
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.
@@darsheelsavla9725 Good luck on that
@@trangbui1910 oh I completed it in the next morning lol
This is the greatest css programming video in youtube give this person a golden medal please
To get certificate....ua-cam.com/video/Cb5oUAL0Pns/v-deo.html
Things I've learned in this video:
1. How to CSS
2. How to move on
Sameeee
3. Forget everything
lol
don't give up keep tryin...
What do you mean by sameee
Watching lecture and making notes and meanwhile practicing and trying to make my own template! Thank mate!
6 Hours and in exchange you learn CSS? Great.
3 Days Later: I Finally watched 2 Hours!!!!
damn so relatable...hahah
OMG it`s so true. Same was at html video))
@@Chef-w8t yeah. It's true for every long course.
Right!
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.
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.
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.
friend I am from South America some advice to learn to program quickly👍
kinda weird that pseudo selectors are introduced first before the very basic things like coloring text, and changing background color
how did you finish this course in a day,? teach 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
If you understood this video click the like button
You could have edited the timestamp for properties after copying it from the description
Super bro
shooting this lecture even on christmas ! dedication level ! THANKYOU
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.
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 :) .
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
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.
Wow same can i know what you are learning now
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!
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!! ♥️
this is
the best free online coding class
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.
Girl: Lets break up...
This guy: Aight, lets move on.
CS go 😉
lol
Niceeee :)
ROFL
I had this in my head every time I heard it lol
i like the way you say: "Just keep that in mind and you'll be fine"
this is by far the best tutorial ever, thank you!
Finally completed! Loved the course! Really, the best course ever!
the best ever!! I'm in 2022 and watching this. Highly recommended, really good work. Thanks for all the team you're the best
the best video I have ever watched on CSS
same here
@@gormarduck1658 yeah
are you part of the team?
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!
I like the way he says : "Alright, Let's move on" at the end of every lesson.
same!
@LAVA_MAN stfu
It is satisfying
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.
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.
congrats
A moment of silence for those who think they can make a website after learning html and css🤐
@@fahanfarooq3844 yeah, maybe just a website's design
@@Just_like_that1234 for being a complete web designer you need to learn javascript too
By web designer i mean to design a website..."literal"
The BEST CSS tutorial! You are a fantastic instructor. Really well organized and simplified. Thanks a bunch!!
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😊😊
@@naninani3116 indeed😁 best of luck, there are some challenges ahead 😊
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!
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.
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*
@@nomadicfathersons that hover effect is cool
@@nassimback yes nassim..django provides lot of inbuilt features.. It's a great python framework
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:
Damn bro, you aint been back in 3 years ?!😂😂😂💔😂
Your teaching skill is awesome! You covered almost everything in CSS3. Thank you so much for such a great course!
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
@@Chnx050 yeah im having the same doubt
@@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
@@Chnx050 did your doubt get resolved? is this valid for 2023
@@26manasviverma14 I don't study CSS anymore
This is one of the best CSS tutorials you can get online.
It's crazy that these things are free. This guys deserve all the best in the world.
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!
What is his name and does he have his own UA-cam channel too?
VideoLab by Jad Khalili
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.
Me: "6 hrs only?? I am gonna do this.
Me(18 days later).: I am done now.
dont give up bro
18 days aren't actually bad im watching the 3 hrs js session for 1 month now and i got only 1,5 hrs ://
thats the point of learning guys
I'm in 3 months 😅
totally normal
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.
You are a legend of programming mentors who also gave us code to understand (and for copying and pasting that) more easily who little confused like me
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!
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)
Yo thanks for your time and effort
@@gwenaeloppitz3972 dudeeee that's amazing
@@rashid5271 happy that it can help someone :)
Thanks
There is a mistake in timestamp. "(0:09:38) What are Properties?" there should be "(1:09:38) What are Properties? "
Way to remember the shorthand property for the box model:
Adjusting Margin and paddings is TROUBLESOME:
Trouble = T R B L
men you are a great great teacher, your simple and precise. The greatest i found on the internet and out of internet. things are easy in their core but some people like to explain it harder...dont know why... you did the job.
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...
i love how he says "alrights let's move on"
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
Hey! Did you take notes?
@@tomisinawoniyi9126 yes I did and created a mini project
@@hanza69 well done! Follow me on twitter… let’s connect! @tomisin2k
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!
@@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 :)
@@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
How are you guys doing now? Did you made any progress?
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.
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?
Best css course made available on UA-cam
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
I completed this in two days. Thank you so much for this course.
You should stick to the cricket
@@tayadevijay lol
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.
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!
Excellent free course on CSS...way better than those faulty paid course in hindi
i love the way you say,alright, lets go on
"Alright, let's move on!"
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!
use of grid-item width makes confusion to understanding grid-template-column and grid-template-row
grid-template-columns: 1fr 2fr 1fr; ->gets 3 columns with 1 fraction, 2 fractions, 1 fraction simultaneously. Or 25% 50% 25% of the width. the same for rows.
Completed in half time with 2x speed with full understanding.
Fast way to cover course
I like the way he say "lets move on"
Hey guys this means a lot , bless you guys
who else enjoys the soothing sound of him saying "aiit lets move on!"
Meeee
I also say it with him
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
To sum up all in a few words" you are more than a teacher man !!!!!!' Thank you!!
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
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
@@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
@@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.
@@vrushabhpatil2867 what
@@dontbetoxic4387 ?
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 😍😍😍
hey are you developer now
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!
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!
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?
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.
I'm back to this video after spending 2 weeks on CSS Grid. Hoping to finish this video by Friday (May 1st)!
@@ze_chooch I finished it too! In one and a half weeks though.
Theeeeeeee best css course I have ever taken in my life
Finally done with JS, HTML and CSS. Now only halfway through vue and then start to learn react! Thanks for your channel!
I hope you’re working now fren
Thank you for generous effort by posting here. You did a great job. You help me n thousands of others who want to learn.
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!
FreeCodeCamp I'm waiting for the website to get back again so I can continue my learning over there. Thanks for the video!
We were performing an update. It should be back up now.
@@freecodecamp NOO! It's still not working properly. Please finish it as soon as possible. All the best!
"Let's move on" I'm so glad you end every section with that for dynamics sake
This man has mastered in teaching flex box and grid
The + and ~ selectors are explained wrong.
A + B means directly the first B after the A. (which means they share the same parent)
A ~ B means all siblings that are type B and come after A. (which also means they share the same parent)
Really cool stuff out there!!
Nice tutorial! Specially like the way u say " Let's move on " 😂❤
Yeah me too same
Done with the course.
Thanks.. let's move on