Learn CSS in this full course for beginners. CSS, or Cascading Style Sheet, is responsible for the styling and looks of a website.
In this course, we cover CSS from the ground up. You will learn everything from basic skills, such as coloring and text, to highly advanced skills, like custom animations.
You will learn about:
•Coloring
•Formatting
•Text
•Layout
•Grid
•Flexbox
•Animations
•Transitions
•And more!
💻 Code: https://github.com/Video-Lab/css-course-content
🎥 Course from Jad Khalili. To view more content from this instructor, visit:
https://www.udemy.com/user/jad-khalili/
⭐️ 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
⌨️ (6:13:32) What to Learn Next
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://www.freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
source
Thanks for featuring me! I hope you all enjoy the content. Good luck learning CSS!
thank you
i wanted to end this in 1 day but i did it in 3 days
i love that course i'm happy it is free because i learnt a lot
cool
its his consistent, almost identical every time "alright! lets move on"
I like it Picasso
This video is great so far, however for some reason the descendant " " and direct descendant ">" selectors (around 53:30 in the video) won't work for me in VSCode and come up with red underscores, and errors such as "colon expectedcss(css-colonexpected)". My code seems to be identical to his, so is there some setup step I've missed?
Thank you very much.
is this all you need to know for CSS ?
It took me a week to get through this whole video. I gotta say I learned a lot but I still feel extremely lost. Like I always hear from all these diffrent channels "ABC" always be coding and it will start to click.
https://youtube.com/channel/UCgy4v_mKKLotxZyVJJpAsYQ
nice
nice
nice
Good luck learning CSS!
Wow!
nice
nice
nice
Thanks a lot bro
nice
I will go ahead
Done with the course.
Thanks.. let's move on
nice
nice
nice
wow
nice
Where can i find initial files ?
Thanks for creating this content, really helpful!!!
1:07:24
2:16:04
~ is called a tilde.
huge thanks to you brother
At 40:33, He said that hover effect won't apply due to specificity, I think if he had explained that a lil' more it would have been awesome. So, for every one else I'm explaining it! "CORRECT ME IF I'M WRONG!"
Simple words:
if simple styling has id selector or inline styling is used with that element and selector with hover is either element selector or
a class selector it wont work. In case of simple styling with id selector, selector with :hover should also be id selector.
like this:
"
#title{
color: yellowgreen;
}
#title:hover{
color:red;
}
every other case will work as usual.
Same is the case with first-child, last-child, nth-child(n):
will work:
.list-item:last-child{
color: blue;
}
li:last-child:hover{
color: steelblue;
}
—————————————
#list-item-id:last-child{
color: blue;
}
#list-item:last-child:hover{
color: steelblue;
}
won't work:
#list-item-id:last-child{
color: blue;
}
.list-item:last-child:hover{
color: steelblue;
}"
In case of inline-styling even :hover with id selector wont work.