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:
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
Tweets by 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)
Amazing!
❤❤❤❤❤
nice
GOAT
55:00
Inline style crew rules!
Thanks Brad! I enjoyed this video, I bought your course Tailwind CSS in Udemy and you told me to check this video first, thanks bro! I learned a lot. I also followed your course Python Django Dev To Deployment in my subscription to PACKT. Now I can proceed to Tailwind CSS from scratch.
I was losing my mind because the background of the #sidebar wasn't changing.. SO I was like alright, let me see what happened in the html side of things… It was capitalized, the id being capitalized threw me on a spiral
45:00
0:47 the reason i love html is it is strict and css have 1000s of ways to do the same thing
Target box 1 doesn't work. Please help
border borttom🤣🤣🤣🤣🤣 reduced all the pressure for the rest of the video, keep doing the good work👍
Learn alot thank u so much
Thanks a lot for this tutorial, really helpful
Stuck at 43:00. My code only works when check.png is saved in CSS file instead of Images file like the video. Is it bc I'm using Atom?
https://youtu.be/lWgZ1hG00sc
Watch this video this is very helpful
when i get my first front-end developing job paycheck, im going to donate to your patreon.. you will be a big part of my self-taught education, to date. thank you so much for the video!
Many thanks, gonna rewatch this a couple of times to learn it all.
Absolutely great video! I took a step back from Web Development after finishing college for personal reasons and decided to come back. This was the perfect refresher video for me bringing me back to a lot that I remember but some things I forgot! Looking forward to more classes 😀
45:51 Bookmark
めちゃわかりやすい
33:01
I'm very gratefull for the quality content that you give us. Also I have a question: why don't you use "rem"? You are a great teacher, thanks!
nice
nice
Thanks a lot!!
56:17 – I have the exact main-block and sidebar float and width but for some reason my text won't go all the way to the right side of the website, but instead go under the second heading box with some spacing under the the first lorem paragraph. Anyone else having this issue and know the fix? I rewatched the whole video to see if I missed a issue with my codes but have the exact same coding for both my index and style but getting a different outcome.
You are good. Like and enjoy your way of teachings.
Why my 'display: inline' does not work on the list items?
Thank you. Very informative for a novice. in 1 1/2 hours I took 3 weeks of in-class sessions.
51:14 i fuck up somewhere and now im stuck KJHASDJAHSDKASHDJKA I DONT KNOW WHAT TO DO.
12hs later
i figure it out.
Thanks for the video. It was really helpful.
ok i'm ready to get a little more technical now
Thanks, i am from Indonesia and really need this tutorial. Css styling makes me confused. This tutorial is really helpful, love it ❤❤❤
This is great. thank you
ok hold on. let's give it a break for day 3 1:03:39