*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)
Traversy Media I request you to include the real world example to that course. there are plenty of tutorial which shows transition and animation of just one square box but nobody implement it to real world website unfortunately. As always liked your video before starting as I am 100000% sure of the quality! God bless
and only 3 hours and 269 lines of css code later I finished the tutorial part of the video. As a kinesthetic learner I really appreciate videos like this. I came out of a bootcamp and was not confident with my css abilities. Coding along with this video helped me get a grasp on how the different properties work and gave me some good examples on how they're used. Thanks!
Thank you, Brad. I'm a 38-year-old guy. I work as a commercial relationship manager, but as a result of this quarantine, I wanted to learn new abilities and decided that programming is a key ability to have in nowadays world. I've been learning Python and now I started with your tutorials on HTML and CSS. So I want to extend my gratitude to people like you who create content for people like me who have no previous knowledge, and wish you the best in this endeavor. Thanks to you and other people who go straight to the point it is easier to learn. (sorry about my grammar, I'm a native Spanish speaker btw)
as you speak I feel like you speak about me, I already finished python and straight away I start HTML and CSS in this great channel, I took Python with mosh Hamadani.
I am 32, i work as truck dispatcher, and after 7 years, i am tired of it, I have just completed the html crash course, i still do not feel comfortable, but i think i can do this, hopefully after some time, i can learn this and make a career change, how did it turn out for you? any advice?
I watched this a few years back. And this and the html video were the two videos which made me realize that I could code. I was in a very hopeless situation at the time I first watched it. Now, something other than coding worked out for me, but, I still want to be a self taught software developer. So, I will definitely comment on my success in another video of yours. Thanks Mr. Traversy.
man still cant get rid of it. I'm doing NoFap now so I just can't make it go away. This week was back to school week. It was weird meeting all my new professors with a huge bulge in my pants
Absolute legend for putting this out, no need to ever apologise for going over an hour. Fitting so much information into that space of time is hard and you've done that and more. I've learnt more about CSS from this video than I did in 4 years of University where they had us do an E-Commerce website. Thank you for making this simple too, I thought CSS was going to be hard, but this has been simple and easy to understand. You rock!
i am a 12 year old kid and using my dads account on UA-cam , i am preety sure that most of the people watching this video would me much older than me but i am really into coding me and my dad were looking for a good coding video i think this one is the best thankyou sir.
Brad's videos are pretty good. And 12 isn't too young to be coding, my oldest was writing HTML at 8 years old, Perl code at 10. Brad also has courses with projects on Udemy.
@@nodros1 13 was when I took my first class in BASIC, it was the IMSAI 8080 and the Poly 88. Started that class the same month the Apple II was first introduced.
Not gonna lie, I learned more HTML5 and CSS3 by your tutorials than i have in the last 10 months by random tutorials on youtube. its very easy to understand you and you are very straight forward. Your are an amazing Programmer youtuber and you know how to cram in as much information ass possible in a limited amount of time. Thank you so much Brad!!!!
Just wanted to thank you personally for your great "HTML Crash Course for Absolute Beginners" and the "CSS Crash Course for Absolute Beginners." They're both informative and well-produced from an audio/visual perspective. Not all online classes manage to do both, so your work on these is much appreciated.
when i say you just saved me from a mental breakdown, i mean it. i just started the odin project and i've ALWAYS struggled with css to the point of being on the verge of crying because of the frustration and re-thinking my life choices but this video helped me a lot!! thank you so much. you're the best.
I am starting a three part coding bootcamp on 12/17/20 and the first part is a web fundamentals course which consists of learning html, css, and javascript. You have everything laid out here for free and I am so grateful that you are this kind to provide quality study material. Thank you from the bottom of my heart.
@@StreamersClips22 No sir, after about a year of self learning I decided to start working towards an associates in Computer science. I am currently in my last semester till I get my associates and I might go for my bachelors
I'm getting back into web design after a long break from IT contracting with the end goal of becoming a freelancer. I used your videos before and I'm back again. I believe your videos are the best on YT hands down!
Like I said in my comment on your Foundation video, these tutorials are really helpful. I'm someone who is getting back to web development after several years and they have been helping immensely. CSS isn't easy to teach but you've made it look quite easy and have covered pretty much all the basics. I also how how calmly you talk, very easy to follow. Thank you for your work!
I'm writing this comment because I truly enjoyed this video. Despite its age, we all know that everything starts from the basics, and videos like this one are comprehensive and really helped me solve most of my CSS problems. I genuinely enjoyed this video to the fullest, and even after six years, it hasn't become outdated. It thoroughly explains the basic CSS properties. This video was truly enjoyable for me.
took me 2 days to watch and practice while playing the video. my god ! I have learnt a lot. Thank you so much. you nailed it. you deserve a BIG KISS xxxxxx
59:25 For those whose "p-box" Is not starting from a new line, Use "clear:both;" Property inside .p-box in CSS Generally used when u have floating elements before your current elements..
Brad, you are a machine! You are such a consistent youtuber! You are posting video after video! I believe you are one of the best youtubers when it comes to web-development channels, and I think that your tutorials are best on YT. Greetings from Poland! Keep up the good (or rather great) work!
I am Polish by heritage and happen to be born and raised American.. I agree Brad is the "BEST" teacher/mentor I have come across on UA-cam when it comes to learning/understanding coding. There's a huge difference between being book smart and being intelligent.. I prefer learning from an intellect.
He is also trustworthy. He admits to his mistakes and doesn't come off as a "Know It All". He learned what he's sharing with us and not acting like he's "ABOVE" us.. I'm just being honest about how I feel about his tutorials and the way he presents himself to me. Thank You Brad.
For myself: 11:08 (link to CSS-file) Form: 1. Put the label UNDER the guiding text: 47:00 .my-form label {display:block; } 2. Stretch field_to_be_filled_in over entire container: 47:24 .my-form label {width:100%}
This goes a lot faster than the basic HTML5 tutorial. I've had to pause. rewind, re-listen, and look up some of the stuff. This definitely got me going in the right direction and I greatly appreciate it. Great video!
Hey Brad, I’m a teacher by occupation, but recently decided to get serious about learning web dev. Your videos have been incredibly helpful and inspiring. You have a way about you, my friend. Very clearly passionate about helping people learn, and very comfortable in your expertise - good teacher stock. If I may offer a piece of advice/request: Watching the videos, there are spots where I find myself wondering about your reasons behind certain decisions when coding, or the thinking that goes into it. As a learner who is fairly comfortable with the syntax of HTML and CSS, I could benefit a lot more from you regularly stating explicitly your strategy, or reasons for the decisions you make. More high-level commentary, in addition to the regular discussion of the low-level coding minutiae. As an example that happened to be playing when I paused the video to write this, you showed how to reset the margins and padding for all elements, but then you commented that code out. Why wouldn’t you want that zeroed-out baseline with all elements when you start in on a page? Seems to me you eliminate a lot of potential confusion by doing this. Or is it the case that you do reset when developing, and you wanted to keep elements in default styling for the purposes of this video? Stuff like that. Know what I mean? I know you already do that in the course of demonstrating, but maybe just a friendly reminder to do even more of it. Or maybe you wanna do a video from this perspective. You know, code a site, but as you’re doing it, comment more on various high-level strategic or workflow or convention or best practices considerations and related advice you can offer based on your experience. As I’m writing, I’m realizing I’m kind of asking you to teach the kind of stuff you only get with expertise, but take what you will from this. Maybe it helps your thinking in future videos. Hope I’ve made myself clear. It’s late here. Anyway, love what you do. Best wishes, and keep ‘em coming.
This is great as not only a beginner, but also a quick refresh for someone who did minimal coding years ago! Going for my BS now in IT Management and this was a great refresher of the basics for getting back into coding! I also watched the HTML crash course hah
Really good video! I watched both this and the HTML Crash Course and they have been very helpful. My only critique is this - please don't apologize for making the videos long :) It is so important to have in-depth videos that really cover stuff and not just short 5-7 minutes that don't connect the dots! Not sure if you have any Wordpress videos but that would also be helpful especially for new developers that may work with that tech as well (even though some don't love WP!)
Bro, Brad created very good WordPress courses, and also WordPress theme development course, you can check out his playlist section, and if won't find these courses in the playlist, then you can search in his channel (open his channel on pc or a laptop, and you will search option at middle top right corner, you type wordpress there, and you will his wordpress related courses In Shaa Allah)
Agreed, my biggest problem with programming tutorials are when they go over content too quickly and you have to pause constantly (looking at you Brackeys (in .75 speed)). Didn't have that problem here, the tutorial is very well paced.
11:10 18:39 line-height: 1.6em; To create more distance between the text-lines 19:35 ‘Create a class, to apply formating’ --------------------------------------------------------------------------------- 19:59 Class vs ID: ID’s are unique (fe: mainNavBar) Class: the format for fe Box 1 may be applied on other box’s To target a class: use a dot --------------------------------------------------------------------------------- 22:06 margin:0; To get rid op white spaces left and right of the body --------------------------------------------------------------------------------- 22:48 Create a NON-RESPONSIVE container in CSS: .container{width 500px} in HTML: 23:43 margin: auto; This sets an auto-margin on both sides, pushing the container to the center 24:32 in CSS: .container{width 80%} Make the container RESPONSIVE --------------------------------------------------------------------------------- 28:31 border: 5px red solid; Adds a red border 31:57 padding: 20px; Padding; create a bit more space between the border and the text 32:50 margin: 20px 0; Creates 20px extra white space top & bottom (zero on the left & right) 34:40 .box-1 h1{ Targets only the header h1 36:10 Creating a new class “categories” for an unordered list, containing links 37:41 border-radius:15px; To get rid of sharp edges of the borders (make them more roundy) 38:07 .categories h2{ text-align: center} Targets the header h2, and center it --------------------------------------------------------------------------------- Apply styles to the ul and the li (1) 38:46 list-style: square; Turning the bullits into squares (2) 38:58 list-style: none; Getting rid of the bullits/squares/… --------------------------------------------------------------------------------- Apply (global) styles to links 39:07 39:20 a{tekst-decoration:none; } Removes the underlining of the link, visited-hover-active --------------------------------------------------------------------------------- Apply (specific) styles to links 41:36 border-bottom:dotted 1px #333 Underlines (over total width of container) 42:21 list-style-img: url(‘../images/check.png’) personalize bullits: using an image --------------------------------------------------------------------------------- 44:54 Creating a form 45:46 Applying styles on form (padding) 46:27 Labels are inline; therefor they will be on the same line as the text 46:48 display:block; Puts the label under the tekst (block level elements put things on their own line) 47:09 .my-form input[type="text"], .my-form textarea{ width: 100%} Layout: make the labels as large as the width goes (within container) 48:30 .my-form input[type=”submit”] Give submit-button a background & other layout 49:18 At the moment, the format of the button is only fort his location. Lets create a ‘global’ format for the button, by creating a class called ‘button’. 49:55 Add another button on a different location 50:53 .button:hover{background: …} Adds a hover-state to the button 52:04 float: left; + width:33.3%; 3 blocks on top of each other: let’s put them next to each other 52:49: add some padding & border to each block 53:03 Problem1: the boxes aren’t aligned anymore 53:21 Solution: box-sizing: border-box; 54:18 Problem2: (i dont really get what the problem would be, i think it isn't shown/talked about) Solution:create a global class in CSS: .clr{clear:both} 54:50 and: after the floats (the 3 columns) in HTML: 54:54 add a mainblock & a sidebar
Thanks :) yeah css is a hard thing to teach man. There is so many different ways to do things. Then you have the artistic aspect. I also didn't want to get into more advanced stuff like animations. Hopefully it's clear though
I'm a graduate of software eng'g 2009. After college I never worked in IT industry. So I never get to practice what I've learned and totally forgot almost everything. and now its 2021, after going through this channel it all came back to me. his videos are totally worth watching.
Thank you so much for your tutorials. I'm trying to find my way into web development professionally. You've made it so accessible for me and have given me the confidence to pursue my ambitions further.
I can’t explain how good this tutorial is! It is by far the best tutorial I have ever seen! I am actually happy it was so long because you didn’t rush anything and cut any corners!
Just discovered your tutorials in Nov of 2020...PLEASE DO NOT APOLOGIZE! You are by far one of the best instructors I have ever watched for Web Development. You explain things clearly and I barely notice when you linger on a subject. You are so damn good and knowledgeable. Thank you! from a #quaratinestudent
@Brad, this is so good! I have taken a quite a lot of these courses, yours just puts things into perspective in a practical and fun way. I am grateful to you for taking your time to organize this lecture into a logical sequence that is easy to follow and understand. You are simply amazing sir!!!. I just purchased your bootstrap 4 course @udemy to support what you do on this channel.
We were just trying to get our friend into web development and we have been recommending him your videos in this new series for beginners, first HTML5 now this...That guy is impressed AF
This is the first time that I have found a video that helps me get my head around styling. Using Bootstrap and you have been a godsend, so much so that I purchased one of your courses! Thanks
I know this video is 6 years old but you did a great job on it. I dabbled a bit in html back in the free webpage days of Geocities, Angelfire, etc. trying to get back into it again and ran across this css video. Thanks a million for taking the time to do this.
Dude, your 10 minute website template at the end was amazing to behold! I'm gonna become a Patreon soon :) I think I'm gonna consume quite a bit of your content.
Out of all the tutorials I see on any subject, yours are my favorite. I just really wish you had a table of contents so I could find specific things or if you had this split up in multiple videos so I could find the content or answer I am looking for without watching the whole video.
I"m sure a lot of people had this problem, but I realized when i made the Box-1, box-2, and Categories I forgot to bring down the (Div-Class-Container) and my boxes were off lol, oh how happy I was when I figured it out Haha, Such a great course and I've already subscribed and followed your channels, Thank you so so much!! :)
So great! Thank you man, i watched many html/css/js tutorials, but almost nobody teachs even in 10 videos, what you taught in 1 hour:) Respect man! Keep doing this! Thank you for all:)
Thanks so much for all the help! I am currently in school for Computer Programming and this is allowing me to learn ahead of my professors. I am a visual learner and this has made the world of difference for me!
This is the greatest tutorial video to any topic I’ve ever watched. I went through the HTML5 crash course once and was able to sit down and put together an ugly but working website test with just about no real coding experience.
this guy s sooooooo legit for for absolute begineers nd trust me i was searchin alot nd dis video helped me figure out what html & css is actually about... definetely go for it!!!!
Thanks for this very intuitive course on the fundamentals of CSS. Who said you can’t teach an old dog new tricks? I am 74 years old and now retired, and been an IT professional most of my working life, dealing mostly with IBM and Microsoft systems and pertaining hardware, not dealing with web design at any stage - passing this to people in the know. I was asked by the family to combine family history stories with the mountain of photos accumulated over the years into a website. Yikes! So UA-cam here I come… after quite a few searches and differing approaches to web design came across your offerings. For this, I and my family thank you as I am now getting a basic understanding of HTML and CSS to start assembling a website. Cheers.
This CSS and the HTML crash course are extremely good. The way you type and explain makes it feel like you are right in there doing and understanding at the same time. Thanks a lot for the videos!
I knew a dude who created bots to dig in servers and bring back data in buckets and dump them into his proxy servers. I think I articulated that well. But setting that up took him about 4 hours of work. Which was fasinating to watch.
There is just too much information here; And I absolutely LOVE it. I'll never look at webpages the same way 😂 Took me just over a week to go through HTML and CSS (much less of the time spent for HTML since I had started it on FreeCodeCamp already) Learned so much. Thank you.
Thank you, I know this is pretty old now but it's still fully up to date and just as useful as before! This was how I learned CSS and HTML from your other video
Thank you so much Brad. You are an exceptional teacher and communicator. Your have a talent to demystify CSS and make it easily understandable and usable. And you even have Time stamps to make it even more structured and easier to use. Truely a master of your craft. I wish you absolute success in all of your endeavours. I am now a follower and will look for your other courses.
can't wait for the next episode for this series :-) makes me realized that spending my 4 years in college is wasted for just an hour of this tutorial :-D DOTA TIME :-)
What I like about what he does is he actually points out the more appropriate or preferable ways to do things rather than just say "do this and that", like he does in defining different ways of using CSS in the beginning
I just found you and this was my second video to go through. I've been trying to learn on my own through different websites that have lessons and challenges you go through to learn. I have found these two videos extremely helpful and I possibly learned more in the two videos I've watched so far than I can retain from all the lessons I've gone through. Now of course some of the info I've learned from the learning I've done before now has helped me understand what you are teaching but I'm more confident I can go through many more of your videos now and become a between developer/programmer than I was before now. I'm really enjoying your videos and how you explain things. Hopefully this can help me work towards changing my career to somehting more sustainable and more importantly enjoyable. Thank you for all of this content.
I really like your video because it is well-organized, precise and straight-forward, full of key points with no crap. I would search for more advanced courses on your udemy.
I'm relative new to Computer Science and I'm very thankful for your work! Thank you for your inspiration :) I hope more people are following along and also purchasing your courses because I think it helps a lot! Best wishes
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!
Hey. Something I think that’s worth mentioning is at 34:00 when having word-spacing and a unit measurement of em It’s worth explaining that it is the size of the font. So if the size of the font was 18px And we added a word spacing of 1em then the space created between the words of the heading is 18px. If I were using 2em it would have been created a space of 36px between the words of the heading.
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 :D
omg this is super educational i dont know how this kind of vid gets dislikes? dont apologize for 1 hour vid. i will watch your vid even for 10 hours or long. good teacher!!!
This is a great series! Hoping for "JavaScript Crash Course For Absolute Beginners" next. Your videos are top-quality! There are a lot of unhelpful videos on UA-cam -- glad I found your channel.
This is so helpful. I've been really having a hard time starting my programming journey but your tutorial just made it easier. Thank you so much. This means a lot 👏
I don’t care how long the video gets i just love the way you are teaching us we never gets bored about the ways you are teaching us we can watch the full video without skipping any part even if the video is longer than 10 hours we will watch it we just love it♥️
*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)
bump
who IS this boy?
You have no idea about "Inline CSS" kid. Just wait for growing up and one day u will learn about that.
You legend
@@oddlancertips2002 lmao that's what I call epic !! Actually I just realized his name is kid too 😂😂
I can't thank you enough for the sheer amount of free quality content that you have produced.
you can thank him by becoming a patreon :D
@@ahmadalghali90 Definitely he deserves it
Chris Evans I see what you did there
@@ahmadalghali90 can you explain to me what he did there im not big brain at night
my guess is because he @ u he's tellin u to do it aswell?
@@Bigblackninja5 umm no the person delete the message ... i dont remember what he said
I will be working on an "Advanced CSS3" course with things like transitions/animations/keyframes. This like the title says is for absolute beginners.
Traversy Media I request you to include the real world example to that course. there are plenty of tutorial which shows transition and animation of just one square box but nobody implement it to real world website unfortunately. As always liked your video before starting as I am 100000% sure of the quality! God bless
thx a lot, i appreciate your time and hard work
Thank You!!
Hi Brad, love your Basic CSS tutorial. Would like to know when you can publish the Advanced CSS tutorial - transitions/animations/keyframes?
I want to know Have you uploaded the tutorial on Advanced CSS3? I didn't find that one!
and only 3 hours and 269 lines of css code later I finished the tutorial part of the video.
As a kinesthetic learner I really appreciate videos like this. I came out of a bootcamp and was not confident with my css abilities. Coding along with this video helped me get a grasp on how the different properties work and gave me some good examples on how they're used. Thanks!
It feels weird when he apologies for doing an amazing job 🤣. This guy is an absolute gem
!
Some people are perfectionist. We can't thank them enough. God bless him.
@@jeanp.5929 True
no such thing as right brainx or well or conveyx well or not, think, say any no matter what and any s perfect
Small mistake guys, at 6:18 I said "Inline CSS". I meant "Internal"
Traversy Media a crash course about css grid layouts would be amazing; )) thanks for tutorials! !
Traversy Media JS crash course pleease
JS crash course please :)
Traversy Media hello my code is not turning green on 11:02 I have the exact thing you have including file name???
2kgodlegend same problem bro
Thank you, Brad. I'm a 38-year-old guy. I work as a commercial relationship manager, but as a result of this quarantine, I wanted to learn new abilities and decided that programming is a key ability to have in nowadays world. I've been learning Python and now I started with your tutorials on HTML and CSS. So I want to extend my gratitude to people like you who create content for people like me who have no previous knowledge, and wish you the best in this endeavor. Thanks to you and other people who go straight to the point it is easier to learn. (sorry about my grammar, I'm a native Spanish speaker btw)
Hw is that working out for you
as you speak I feel like you speak about me, I already finished python and straight away I start HTML and CSS in this great channel, I took Python with mosh Hamadani.
Pretty solid grammar my guy. If you didn’t tell me I would’ve had idea you weren’t a natural English speaker
need the code of this video do you have it the link isnt working
I am 32, i work as truck dispatcher, and after 7 years, i am tired of it, I have just completed the html crash course, i still do not feel comfortable, but i think i can do this, hopefully after some time, i can learn this and make a career change, how did it turn out for you? any advice?
I watched this a few years back. And this and the html video were the two videos which made me realize that I could code. I was in a very hopeless situation at the time I first watched it. Now, something other than coding worked out for me, but, I still want to be a self taught software developer. So, I will definitely comment on my success in another video of yours. Thanks Mr. Traversy.
35:05 "let's make it say Goodbye world" It suddenly got very dark.
ahahhahhahahahhhahahahahha LOL
@@Theterry383 WTF bro.
man still cant get rid of it. I'm doing NoFap now so I just can't make it go away. This week was back to school week. It was weird meeting all my new professors with a huge bulge in my pants
*ashokan farewell*
true
Like your style of : .Teaching { Voice : Clear; Pace: Medium; Explanation:Details; Enjoyed:Happily; } :) Thanks...!!
kazi MRahman
ua-cam.com/video/jp7USotAq2U/v-deo.html
watch this
pls support
@kazi MRahman couldn't have said it better !
A real coder.....the legend dude
@@showkatahmadganie1528 IKR.
hotel:trivago
Literally the best crash course I've ever watched to date. Period.
u put a period before the period, WHOA YOU HAVE A LONG NAME!
@@rraptures Big Brain time
Absolutely; .css was a bit of a mystery to me before I watched this video :D....Gonna have to look at the flexbox and grid ones now!
@@rraptures it's called double period, haha.
@@rraptures he was emphasizing!
Absolute legend for putting this out, no need to ever apologise for going over an hour. Fitting so much information into that space of time is hard and you've done that and more. I've learnt more about CSS from this video than I did in 4 years of University where they had us do an E-Commerce website.
Thank you for making this simple too, I thought CSS was going to be hard, but this has been simple and easy to understand. You rock!
Lol learning css in university? They're teaching blue collar skills now. What a joke
i am a 12 year old kid and using my dads account on UA-cam , i am preety sure that most of the people watching this video would me much older than me but i am really into coding me and my dad were looking for a good coding video i think this one is the best thankyou sir.
Brad's videos are pretty good. And 12 isn't too young to be coding, my oldest was writing HTML at 8 years old, Perl code at 10. Brad also has courses with projects on Udemy.
I started when I was 13, it's a good age to start honestly! 22 years old now and still loving it
@@nodros1 13 was when I took my first class in BASIC, it was the IMSAI 8080 and the Poly 88. Started that class the same month the Apple II was first introduced.
@@javabeanz8549 you must be a pro by now.
@Pushpraj Dwivedi bcz you are an indian and in our country thing are different😂😂😂 hope u get it right😅😅
Not gonna lie, I learned more HTML5 and CSS3 by your tutorials than i have in the last 10 months by random tutorials on youtube. its very easy to understand you and you are very straight forward. Your are an amazing Programmer youtuber and you know how to cram in as much information ass possible in a limited amount of time. Thank you so much Brad!!!!
Just wanted to thank you personally for your great "HTML Crash Course for Absolute Beginners" and the "CSS Crash Course for Absolute Beginners." They're both informative and well-produced from an audio/visual perspective. Not all online classes manage to do both, so your work on these is much appreciated.
when i say you just saved me from a mental breakdown, i mean it. i just started the odin project and i've ALWAYS struggled with css to the point of being on the verge of crying because of the frustration and re-thinking my life choices but this video helped me a lot!! thank you so much. you're the best.
Every html/css tutorial on planet "Hello world uWu"
Traversy Media: *_Goodbye World_*
Me: Oh it is a one hour video, is not that much time.
*it took me 5 hours to watch a 1 hour video.
LOL
Same here!
strongly recommend watching the video muted with x2 speed for the first time. then you can listen to clarify the parts you missed and skip others.
thats the world of learning programming through youtube
Same 😂
I am starting a three part coding bootcamp on 12/17/20 and the first part is a web fundamentals course which consists of learning html, css, and javascript. You have everything laid out here for free and I am so grateful that you are this kind to provide quality study material. Thank you from the bottom of my heart.
hey man its been 3 years did you find a job as front-end-developer?
@@StreamersClips22 No sir, after about a year of self learning I decided to start working towards an associates in Computer science. I am currently in my last semester till I get my associates and I might go for my bachelors
I'm getting back into web design after a long break from IT contracting with the end goal of becoming a freelancer. I used your videos before and I'm back again. I believe your videos are the best on YT hands down!
You are an amazing teacher. You manage to put thing so clearly. You are gifted.
Thanks man
i agree
Agreed. Him and thenewboston are simply next level. These tutorials are amazing
I agree.
i agree.
This is briliant. I'm currently doing an advanced CSS course and this just helped me to brush up on the basics. Thanks Brad. You're a legend.
do u mind telling me which course u did ? thanks ^^
Like I said in my comment on your Foundation video, these tutorials are really helpful. I'm someone who is getting back to web development after several years and they have been helping immensely. CSS isn't easy to teach but you've made it look quite easy and have covered pretty much all the basics. I also how how calmly you talk, very easy to follow. Thank you for your work!
Thanks for the kind words :)
I'm writing this comment because I truly enjoyed this video. Despite its age, we all know that everything starts from the basics, and videos like this one are comprehensive and really helped me solve most of my CSS problems.
I genuinely enjoyed this video to the fullest, and even after six years, it hasn't become outdated. It thoroughly explains the basic CSS properties.
This video was truly enjoyable for me.
This was probably the best CSS tutorial I have come across
It sure is.
took me 2 days to watch and practice while playing the video. my god ! I have learnt a lot. Thank you so much. you nailed it.
you deserve a BIG KISS
xxxxxx
give me that kiss lol :P
you can give me i will give him your kiss
Bunch of simps ^^^ lol
Will you kiss me too I am a nazi so you know 🥺 will a nazi guy get love ?
hello whatssap me pleas, need some help +254701396101
you are making the history, by teaching the mystery
Teaching the Ministery!!
Perfect Web Solutions so true. 😊
pls visit on my channel i also make video realted to css html and javascript
and if you like it so pls subbcribe
59:25
For those whose "p-box" Is not starting from a new line,
Use "clear:both;" Property inside .p-box in CSS
Generally used when u have floating elements before your current elements..
THANKYOU SO MUCH! I was pulling my hair out wondering what I did wrong!!!
@@iitzValente
✌
When I finished the HTML 5 tutorial from this guy, I learned so much. I knew I had to come back for CSS!
whoch one exactly? where do I find it
Yes indeed
@@timbordasch4118 html for complete beginners
Brad, you are a machine! You are such a consistent youtuber! You are posting video after video! I believe you are one of the best youtubers when it comes to web-development channels, and I think that your tutorials are best on YT. Greetings from Poland! Keep up the good (or rather great) work!
You are excellent. The best explanation so far. I actually learned something. Thank you!
I am Polish by heritage and happen to be born and raised American.. I agree Brad is the "BEST" teacher/mentor I have come across on UA-cam when it comes to learning/understanding coding. There's a huge difference between being book smart and being intelligent.. I prefer learning from an intellect.
He is also trustworthy. He admits to his mistakes and doesn't come off as a "Know It All". He learned what he's sharing with us and not acting like he's "ABOVE" us.. I'm just being honest about how I feel about his tutorials and the way he presents himself to me. Thank You Brad.
I love the fact it is all done "live", warts and all. It is very satisfying for the viewer to catch those mistakes just before you correct them!
For myself:
11:08 (link to CSS-file)
Form:
1. Put the label UNDER the guiding text: 47:00 .my-form label {display:block; }
2. Stretch field_to_be_filled_in over entire container: 47:24 .my-form label {width:100%}
This goes a lot faster than the basic HTML5 tutorial. I've had to pause. rewind, re-listen, and look up some of the stuff. This definitely got me going in the right direction and I greatly appreciate it. Great video!
Hey Brad,
I’m a teacher by occupation, but recently decided to get serious about learning web dev. Your videos have been incredibly helpful and inspiring. You have a way about you, my friend. Very clearly passionate about helping people learn, and very comfortable in your expertise - good teacher stock.
If I may offer a piece of advice/request:
Watching the videos, there are spots where I find myself wondering about your reasons behind certain decisions when coding, or the thinking that goes into it. As a learner who is fairly comfortable with the syntax of HTML and CSS, I could benefit a lot more from you regularly stating explicitly your strategy, or reasons for the decisions you make. More high-level commentary, in addition to the regular discussion of the low-level coding minutiae.
As an example that happened to be playing when I paused the video to write this, you showed how to reset the margins and padding for all elements, but then you commented that code out. Why wouldn’t you want that zeroed-out baseline with all elements when you start in on a page? Seems to me you eliminate a lot of potential confusion by doing this. Or is it the case that you do reset when developing, and you wanted to keep elements in default styling for the purposes of this video?
Stuff like that. Know what I mean? I know you already do that in the course of demonstrating, but maybe just a friendly reminder to do even more of it. Or maybe you wanna do a video from this perspective. You know, code a site, but as you’re doing it, comment more on various high-level strategic or workflow or convention or best practices considerations and related advice you can offer based on your experience. As I’m writing, I’m realizing I’m kind of asking you to teach the kind of stuff you only get with expertise, but take what you will from this. Maybe it helps your thinking in future videos.
Hope I’ve made myself clear. It’s late here.
Anyway, love what you do. Best wishes, and keep ‘em coming.
I don't know why i feel relaxed while watching your videos compared to others
This is great as not only a beginner, but also a quick refresh for someone who did minimal coding years ago! Going for my BS now in IT Management and this was a great refresher of the basics for getting back into coding! I also watched the HTML crash course hah
Amazed by the quality of content and the speed at which being published. Hats off!!
Really good video! I watched both this and the HTML Crash Course and they have been very helpful. My only critique is this - please don't apologize for making the videos long :) It is so important to have in-depth videos that really cover stuff and not just short 5-7 minutes that don't connect the dots! Not sure if you have any Wordpress videos but that would also be helpful especially for new developers that may work with that tech as well (even though some don't love WP!)
Exactly my thoughts. There are like 9h tutorial videos out there.
Bro, Brad created very good WordPress courses, and also WordPress theme development course, you can check out his playlist section, and if won't find these courses in the playlist, then you can search in his channel (open his channel on pc or a laptop, and you will search option at middle top right corner, you type wordpress there, and you will his wordpress related courses In Shaa Allah)
@Lukas007 Just a suggestion - you might want to specify your code that isn't working. Nobody can help if they can't see what you have done. ;)
Agreed, my biggest problem with programming tutorials are when they go over content too quickly and you have to pause constantly (looking at you Brackeys (in .75 speed)). Didn't have that problem here, the tutorial is very well paced.
Totally agree, this video is not too long at all. The 1hr 25min passed very quickly.
You just saved me a semester worth of work with this!
11:10
18:39 line-height: 1.6em;
To create more distance between the text-lines
19:35
‘Create a class, to apply formating’
---------------------------------------------------------------------------------
19:59 Class vs ID:
ID’s are unique (fe: mainNavBar)
Class: the format for fe Box 1 may be applied on other box’s
To target a class: use a dot
---------------------------------------------------------------------------------
22:06 margin:0;
To get rid op white spaces left and right of the body
---------------------------------------------------------------------------------
22:48 Create a NON-RESPONSIVE container
in CSS: .container{width 500px}
in HTML:
23:43 margin: auto;
This sets an auto-margin on both sides, pushing the container to the center
24:32 in CSS: .container{width 80%}
Make the container RESPONSIVE
---------------------------------------------------------------------------------
28:31 border: 5px red solid;
Adds a red border
31:57 padding: 20px;
Padding; create a bit more space between the border and the text
32:50 margin: 20px 0;
Creates 20px extra white space top & bottom (zero on the left & right)
34:40 .box-1 h1{
Targets only the header h1
36:10
Creating a new class “categories” for an unordered list, containing links
37:41 border-radius:15px;
To get rid of sharp edges of the borders (make them more roundy)
38:07 .categories h2{ text-align: center}
Targets the header h2, and center it
---------------------------------------------------------------------------------
Apply styles to the ul and the li
(1) 38:46 list-style: square;
Turning the bullits into squares
(2) 38:58 list-style: none;
Getting rid of the bullits/squares/…
---------------------------------------------------------------------------------
Apply (global) styles to links
39:07
39:20 a{tekst-decoration:none; }
Removes the underlining of the link, visited-hover-active
---------------------------------------------------------------------------------
Apply (specific) styles to links
41:36 border-bottom:dotted 1px #333
Underlines (over total width of container)
42:21 list-style-img: url(‘../images/check.png’)
personalize bullits: using an image
---------------------------------------------------------------------------------
44:54 Creating a form
45:46 Applying styles on form (padding)
46:27 Labels are inline; therefor they will be on the same line as the text
46:48 display:block;
Puts the label under the tekst (block level elements put things on their own line)
47:09 .my-form input[type="text"], .my-form textarea{ width: 100%}
Layout: make the labels as large as the width goes (within container)
48:30 .my-form input[type=”submit”]
Give submit-button a background & other layout
49:18 At the moment, the format of the button is only fort his location. Lets create a ‘global’ format for the button, by creating a class called ‘button’.
49:55 Add another button on a different location
50:53 .button:hover{background: …}
Adds a hover-state to the button
52:04 float: left; + width:33.3%;
3 blocks on top of each other: let’s put them next to each other
52:49: add some padding & border to each block
53:03 Problem1: the boxes aren’t aligned anymore
53:21 Solution: box-sizing: border-box;
54:18 Problem2: (i dont really get what the problem would be, i think it isn't shown/talked about)
Solution:create a global class in CSS: .clr{clear:both}
54:50 and: after the floats (the 3 columns) in HTML:
54:54 add a mainblock & a sidebar
Skimming through this video I can already tell that it would be great for anyone that wants to have css stick in their head.
Thanks :) yeah css is a hard thing to teach man. There is so many different ways to do things. Then you have the artistic aspect. I also didn't want to get into more advanced stuff like animations. Hopefully it's clear though
"Goodbye World."
*Damn bro.*
Damn bro.
Well its ending sooo he predicted it so correctly
Couldn't have aged better.
this comment has me dying lol
gave myself a like cuz no one else would :P lol
"Sorry this is taking so long...", no please. Keep going. Thoroughly enjoyed your explanations! Thank you so much for making this.
same here
felt the same way. I'll take any knowledge this guy has to give
Ditto
Yeah but I feel like I would rather watch multiple 1 hour videos than a single 10 hour video lol.
I'm a graduate of software eng'g 2009. After college I never worked in IT industry. So I never get to practice what I've learned and totally forgot almost everything. and now its 2021, after going through this channel it all came back to me. his videos are totally worth watching.
Thank you so much for your tutorials. I'm trying to find my way into web development professionally. You've made it so accessible for me and have given me the confidence to pursue my ambitions further.
What have you learn after this video so far?
Laughed along with you when you said "Botter Boddom" 😂😂😂
LMAO SAME. It could legit be a tongue twister XD
You speak better English than my professors. You're a life savor!
Still bangs after years! Thanks for this masterpiece
I can’t explain how good this tutorial is! It is by far the best tutorial I have ever seen! I am actually happy it was so long because you didn’t rush anything and cut any corners!
Just discovered your tutorials in Nov of 2020...PLEASE DO NOT APOLOGIZE! You are by far one of the best instructors I have ever watched for Web Development. You explain things clearly and I barely notice when you linger on a subject. You are so damn good and knowledgeable. Thank you! from a #quaratinestudent
You've thought me more in an hour and a half than every computer lesson I've had this whole year 😨
Did you go to a shitty school
I agree. His vids are so straight forward and more cements what I'm learning elsewhere
Me too
not everyone can teach...
not more, but at least 40% percent of what i learned this year lmao
I watched these videos before getting an exam where you are required to do a sample website. these helps a lot! thanks man!
@Brad, this is so good!
I have taken a quite a lot of these courses, yours just puts things into perspective in a practical and fun way. I am grateful to you for taking your time to organize this lecture into a logical sequence that is easy to follow and understand. You are simply amazing sir!!!.
I just purchased your bootstrap 4 course @udemy to support what you do on this channel.
Thank you very much for that :)
We were just trying to get our friend into web development and we have been recommending him your videos in this new series for beginners, first HTML5 now this...That guy is impressed AF
Awesome! thank you :)
This is the first time that I have found a video that helps me get my head around styling.
Using Bootstrap and you have been a godsend, so much so that I purchased one of your courses! Thanks
I know this video is 6 years old but you did a great job on it. I dabbled a bit in html back in the free webpage days of Geocities, Angelfire, etc. trying to get back into it again and ran across this css video. Thanks a million for taking the time to do this.
Dude, your 10 minute website template at the end was amazing to behold! I'm gonna become a Patreon soon :) I think I'm gonna consume quite a bit of your content.
Out of all the tutorials I see on any subject, yours are my favorite. I just really wish you had a table of contents so I could find specific things or if you had this split up in multiple videos so I could find the content or answer I am looking for without watching the whole video.
Yes, He is the most personality like you-
you're seriously and insanely amazing, thank you sir for all of your hardwork !
I"m sure a lot of people had this problem, but I realized when i made the Box-1, box-2, and Categories I forgot to bring down the (Div-Class-Container) and my boxes were off lol, oh how happy I was when I figured it out Haha, Such a great course and I've already subscribed and followed your channels, Thank you so so much!! :)
So great! Thank you man, i watched many html/css/js tutorials, but almost nobody teachs even in 10 videos, what you taught in 1 hour:) Respect man! Keep doing this! Thank you for all:)
Thanks so much for all the help! I am currently in school for Computer Programming and this is allowing me to learn ahead of my professors. I am a visual learner and this has made the world of difference for me!
@AndrewSmith i know about a lot of free content on the web.If you need them do let me know
This is really great for starters and career shifters. You're awesome dude!
This is the greatest tutorial video to any topic I’ve ever watched. I went through the HTML5 crash course once and was able to sit down and put together an ugly but working website test with just about no real coding experience.
Probably one of the best videos on CSS thank you
Whenever I hear those beats in your video...my mind just switches to developing and coding🤤🙌
this guy s sooooooo legit for for absolute begineers nd trust me i was searchin alot nd dis video helped me figure out what html & css is actually about... definetely go for it!!!!
Thanks for this very intuitive course on the fundamentals of CSS. Who said you can’t teach an old dog new tricks? I am 74 years old and now retired, and been an IT professional most of my working life, dealing mostly with IBM and Microsoft systems and pertaining hardware, not dealing with web design at any stage - passing this to people in the know. I was asked by the family to combine family history stories with the mountain of photos accumulated over the years into a website. Yikes! So UA-cam here I come… after quite a few searches and differing approaches to web design came across your offerings. For this, I and my family thank you as I am now getting a basic understanding of HTML and CSS to start assembling a website. Cheers.
This CSS and the HTML crash course are extremely good. The way you type and explain makes it feel like you are right in there doing and understanding at the same time. Thanks a lot for the videos!
That website he built in 15 minutes *while explaining* at the end of the video, would take me 3 hours to build. 😂😂
lol, it happens for starters
It took me 1 day to build my header...and this guy, he built a whole page within 15 minutes... Holy shit!
Right?
Practicing matters and makes different :)
I knew a dude who created bots to dig in servers and bring back data in buckets and dump them into his proxy servers. I think I articulated that well. But setting that up took him about 4 hours of work. Which was fasinating to watch.
There is just too much information here;
And I absolutely LOVE it.
I'll never look at webpages the same way 😂
Took me just over a week to go through HTML and CSS (much less of the time spent for HTML since I had started it on FreeCodeCamp already) Learned so much. Thank you.
@1:01:35 It lagged, so for those of you who are stuck, he went from:
to
Hello
And that's how he go the button labeled as "Hello"
Thank you, I know this is pretty old now but it's still fully up to date and just as useful as before! This was how I learned CSS and HTML from your other video
Thank you so much Brad. You are an exceptional teacher and communicator. Your have a talent to demystify CSS and make it easily understandable and usable. And you even have Time stamps to make it even more structured and easier to use. Truely a master of your craft. I wish you absolute success in all of your endeavours. I am now a follower and will look for your other courses.
can't wait for the next episode for this series :-) makes me realized that spending my 4 years in college is wasted for just an hour of this tutorial :-D DOTA TIME :-)
I feel the same man
What I like about what he does is he actually points out the more appropriate or preferable ways to do things rather than just say "do this and that", like he does in defining different ways of using CSS in the beginning
I just found you and this was my second video to go through. I've been trying to learn on my own through different websites that have lessons and challenges you go through to learn. I have found these two videos extremely helpful and I possibly learned more in the two videos I've watched so far than I can retain from all the lessons I've gone through. Now of course some of the info I've learned from the learning I've done before now has helped me understand what you are teaching but I'm more confident I can go through many more of your videos now and become a between developer/programmer than I was before now. I'm really enjoying your videos and how you explain things. Hopefully this can help me work towards changing my career to somehting more sustainable and more importantly enjoyable. Thank you for all of this content.
I really like your video because it is well-organized, precise and straight-forward, full of key points with no crap. I would search for more advanced courses on your udemy.
I'm relative new to Computer Science and I'm very thankful for your work! Thank you for your inspiration :) I hope more people are following along and also purchasing your courses because I think it helps a lot!
Best wishes
Thanks man, It's appreciated
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!
CSS is the sassy interior decorator who tells you that you have no flavor and that they're here to save your home's feng shui.
Thank you for making things clearly! Honestly one of the best "Lesson Movie".
Words cannot describe how grateful I am…
Hey. Something I think that’s worth mentioning is at 34:00 when having word-spacing and a unit measurement of em
It’s worth explaining that it is the size of the font. So if the size of the font was 18px
And we added a word spacing of 1em then the space created between the words of the heading is 18px.
If I were using 2em it would have been created a space of 36px between the words of the heading.
Long video? I can watch you straight 24 hours, Thank you very much.
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 :D
Made My Day.
Thank You
Add some css to it bro
h1 {
font-size: 18px;
background-color: rgba(0,0,0,0.8)
color: white;
padding: 10px;
text-align: center;
}
p {
font-size: 12px;
text-align: center;
}
@@Xemah 🤙🤙🤙🤙🤙🤙🤙
@@Ahmedinho2022 😃
#nerdPost
I am watching this 6+ years into the future. Still as valuable as ever. (I tend to forget css basics every few months).
"Alright let's save that and see what it looks like by default... okay, pretty damn ugly." 45:15
😂
Brad, you're a beast man- teaching people the beginnings of web dev! Are you going for a javascript tutorial next?
this is like a semester of coding in 1 hour
omg this is super educational i dont know how this kind of vid gets dislikes?
dont apologize for 1 hour vid. i will watch your vid even for 10 hours or long.
good teacher!!!
This is a great series! Hoping for "JavaScript Crash Course For Absolute Beginners" next.
Your videos are top-quality! There are a lot of unhelpful videos on UA-cam -- glad I found your channel.
Come to my channel
this helped me alot pls upload tutorials like these regularly
i am from INDIA
Me 2 Bhai
Hum Indians har jagah h
@@sparshgupta8078 sahi kehe raha hai bhai
Wassap patel
01:05:53 "I can not write position today"
Enough for today xD
I swear, I have never come across a better crash course.. Thanks a ton bud!!!
This is so helpful. I've been really having a hard time starting my programming journey but your tutorial just made it easier. Thank you so much. This means a lot 👏
This was amazing. I learnt so much. Thank you for such amazing content.
Who is here in 2024 🙂
Me
Me😅
Me!
Me
Me
I don’t care how long the video gets i just love the way you are teaching us we never gets bored about the ways you are teaching us we can watch the full video without skipping any part even if the video is longer than 10 hours we will watch it we just love it♥️