In this video I will cram as much as possible about CSS. We will be looking at styles, selectors, declarations, etc. We will build a CSS cheat sheet that you can keep as a resource and we will also create a basic website layout. We are using CSS3 but mostly the basics. I will be creating an advanced CSS course with animations, etc. I do have a Flexbox in 20 minutes video as well if you want to learn flexbox.
21 Hour HTML & CSS Course:
https://www.udemy.com/course/modern-html-css-from-the-beginning/?referralCode=EB0470C43F3C3E9AA306
CODE: Code for this video
http://www.traversymedia.com/downloads/csscrashcourse.zip
HTML CRASH COURSE VIDEO:
https://www.youtube.com/watch?v=UB1O30fR-EE
BECOME A PATRON: Support me directly for even $1 per month
http://www.patreon.com/traversymedia
ONE TIME DONATIONS:
http://www.paypal.me/traversymedia
FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia
source
Time Stamps
Intro
0:00–0:25 —- Intro
0:25–2:02 —- Before We Begin
2:02–2:55 —- What is CSS?
2:55–3:30 —- What We Need To Start
3:30–5:33 —- Creating a CSS file (Sublime)
5:33–7:11 —- Methods For Adding CSS (mistake at 6:18, meant to say "Internal" not "Inline CSS")
CSS
7:11–11:14 —- Color (all 3 methods)
11:14–13:31—- CSS Selectors
13:31–15:46 —- Colors in CSS
15:46–20:00 —- Web Safe Fonts (sizes, weights, and height)
20:00–24:53 —- Class and Id
24:53–33:00 —- Box Model, Margin and Padding Shorthand, and Borders
33:00–39:10 —- Text Formatting Styles (list style 38:34–39:10)
39:10–44:20 —- Links (images 42:20)
44:20–51:20 —- Forms (button style 48:30–51:20)
51:20–57:10 —- Alignment and Floating
57:10–1:03:41 —- Positioning in CSS
1:03:41–1:06:20 —- Setting Images As Element Background
1:06:20–1:08:55 —- Pseudo Classes
1:08:55–1:25:10 —- Making Own Website (Outro)
you're wizard Harry. Thank's for the guide
Great video!
Thank you!! Was waiting for how to style images as list items .. but only got colours .. I saw this website that had awesome images and text as list items and was wondering how it was done ..
Amazing tutorial. Thank you very much Brad 🙂
Thank you so much for this video! The length was perfect and even if it would have been longer, it would be great. You are an awesome teacher! I have learnt so much!
thank you so much about the video! where can i find the code you wrote? i cant find it in here…
These video are awesome
This Video is Gold. Better than some coveted Udemy Courses.
I paused the video very often and made copious notes and then went ahead and detailed those notes via MDN Web Docs.
I would like to thank you Brad for uploading this content for free. I will buy your Udemy course now.
I like the pace at which you are teaching. Would suggest however that you create a series like 'Kevin Powell' rather than one video.
Thanks a ton!
superb course! thank u bro!
Awesome stuff! I've been struggling with CSS for years! I never could figure out why stuff didn't want to follow my instructions. Now, after watching this video… I feel like a master!!! Thanx for sharing this!
This was very helpful. Thank you.
THIS was definitely one of your better videos. More recent videos are like… watch-me codalongs rather than actual tutorials. Your Angular video starts off strong but less than half-way through you totally lose everyone and rocket on ahead.
23:55 whats the point of using two div tags with 2 different names to edit the same div container. could you not have just done size and color together? New to all of this. Still in the beginning stages of learning, so please let me know.
thanks sir you have such a amazing way of explaining things ….
25:27 timestamp just because my mom called me 🙁
"you can use any image you want"
…me using pictures of cookies the whole time…
Thank your very much, I've learned a lot about HTML and CSS in these videos (I've also seen the HTML Crash Course for absolute Beginners) and it motivated me to go even further. I'm really excited to improve my (very little currently) skills with your videos 🙂
tq sir
Thank you
Why can't I see code for this video?
You said inline twice
this is the best video explanation of ccs3 i've seen, other videos start off easy for a few minutes then get right into the hard stuff immediately. i have to recommend this vid to my class
Very helpful! Thank you for this and your HTML video! 🙂
Man this video tested my patience lmao 😀
44:37
45:42 how did adding 500px margin to the top ended up with the page having spaces at the bottom?
This is so helpful thanks 🙏
BARRA BORROM hahahaha man I laughed so hard at 1 AM
Very informative content
Amazing man 😬😬😬watch whole video in 25 min
Best Course for CSS, you are an excellent teacher. Thanks for the video and for sharing your knowledge. Going to check your other videos for HTML and JS, for sure i am going to learn a lot from them.
Really learnt a lot
How i wish i could watch your udemy classes but unfortunately not have enough money. I think I should stick here at youtube.
Danko
Thank you so much Brad for this amazing tutorial, God bless you
This was great. after i took fundamentals of css on codecademy, i really didnt feel like i had a firm grasp on the material. after watching and working along with this video i feel much more confident and knowledgeable
Great tutorial.. thank you!
Border-Bottom 🙂
i loved both your css and html crash course and im planning to go for the javascript crash course as well as python and django. I am back to refresh my skills after forgetting all i learnt in college simply because i lost motivation due to rejection in job because of having hearing disability. hopefully. I can do well no since I can read caption and follow your guide. I am also going to see videos from Mosh Hommedani as he also explains so well like you do when I watched for a few minutes from his python for beginner video. I also like how Alex the Analyst explains about data analytics in his video. I do want to start my career with Data Science while also do web development as a side work because i want to live as a digital nomad and looking forward to courses on Data Sciences and Analytics as well while I sharpen my web development skills from your YouTube Channel as well as from Mosh's and Alex the Analyst. Thank you Brad. <3 Love from Nepal.
9:50
If You Dont Wanna Do The Font coloring in css Do This:
<font color="[color]">
thanks man loved it
I've learned so much about HTML, CSS and just Sublime itself watching your videos. Awesome presentation.
"We'll say 'goodbye world'" – you doing okay Brad?