CSS Masterclass - Tutorial & Course for Beginners

Рет қаралды 105,139

Күн бұрын

Get the rest of the course along with interactive exercises at: chriscourses.com/courses/css/...
🔗 Links
Figma: www.figma.com/file/LJ8KC40jSP...
Chris Courses (follow with detailed descriptions, code snippets, links, and code challenges): chriscourses.com/courses/css/...
When I first started developing websites, I struggled with the most basic of tasks... Centering a div? It honestly seemed impossible at the time. Back when flexbox wasn't even a thing, I came up with a solution of using a position absolute element with a top of 50%, translated back upwards by another 50% value. Although I came up with something that worked, getting to that point took me literal days. How much easier my life would've been if I just had the answers presented to me (like anything in life, lol!).
I know firsthand how freaking frustrating CSS can be to get working, it was only after working as a frontend developer full-time for the past 10 years when I realized: I know CSS (I know kung fu). That's where this course comes in.
This course contains nearly every little bit of CSS information I have stored in my head (at least everything that I can fit into a five hour video). From the bare basics, answering questions like: "What is CSS?" To installing a CSS framework like TailwindCSS and putting it to use, I'll show you everything I do to develop professional grade client websites that go for upwards of $20,000.
There is without a doubt more to be learned, even after these five hours, but everything you learn here will be more than enough to get you started. If you'd like to continue your learning journey with me, be sure to sign up for extended course updates over here on my CSS course landing page: chriscourses.com/css-course.
Otherwise, enjoy the vid ya'll, put a ton of effort into this one!
0:00 Intro to CSS
2:23 Project Overview
4:07 Project Setup and Initial Markup
12:54 Background Color
21:33 Removing Browser Defaults
24:46 Display Block, Inline-Block, Inline, and None
32:46 Flexbox in Action
56:15 Margin and Padding in Action
1:23:45 Typography and Font Styling
1:53:55 Position Relative, Z-Index, and Object-Fit
2:14:25 Max-Width Containers
2:36:38 Position Absolute
2:48:37 Containers for Desktop Screens
2:57:41 Media Queries
3:14:02 Intro to TailwindCSS
3:24:53 Tailwind Breakpoints
3:41:18 Em and Rem Units Animated
3:44:09 Tailwind Spacing in Action
3:58:21 CSS Overlays with Opacity
4:11:05 Tailwind Background Gradients
4:23:02 The Stats Section

Пікірлер: 84

@leonh2140 2 жыл бұрын

It's interesting. I'm new to web developement and have watched some tutorials. The way you "structure" your html/css is completely different to other tutorials. In the other tutorials, they rarely use multiple classes for one html tag. But they put in more lines inside the classes in the css file. So as I'm new I don't know what's the better practice (also not after googling a bit). But I can imagine on bigger and more complex websites it could become a problem of readibilty of the code when you use let's say 10 classes for one html tag. Can you explain, why do you use the classes like you do? And why do the other people (that I watched the tutorials from) do it differently?

@ChrisCourses 2 жыл бұрын

Yep, I was taught the same way as others are teaching it (most of your CSS goes inside a separate file), but in actual practice, I've found writing the classes directly in the HTML is much more efficient and easier to edit. My issue with putting the CSS in a separate file is it forces you to look elsewhere to see exactly what your classes do. This can get especially annoying if you have a CSS file thats hundreds of lines long. By inlining your classes, you only have to look in one place: the element in which you're applying the classes to in order to understand exactly what it should look like. My second issue with traditional CSS teaching is that you have to come up with your own class names to describe multiple styles. Using the Tailwind CSS method, each style gets one class, so it's consistent, you never have to come up with a class name on your own, and eventually you can remember all the classes that come with the library in the first place. Coming up with a completely new set of classes also forces team members to understand and learn those new classes which can overall just be a mess for your front-end architecture. Indeed, inlining classes will make your HTML look messier, but it's going to free you from having to ever create even more lines of code in a separate CSS file. In the end, some people hate the Tailwind methodology, but based on my personal experience, I can't do a project without it because of the annoyance traditional CSS creates. Very good question.

@leonh2140 2 жыл бұрын

@@ChrisCourses Thank you for the explanation it makes sence for me! Probably also later on when you start using Tailwind, the transition will be very easy I guess. Thank you so much for the video!

@leonh2140 2 жыл бұрын

@@ChrisCourses But one other thing: the -77px to get the image to the top of the browser. Is that gonna be the same -77px on any resolution?🤔 Isn't there another way to do it?

@nazarijpalagnij 10 ай бұрын

How are you ? How many did you learn for 1 year?

@Techno1402 2 жыл бұрын

Really well made and easy to follow, helped me finally understand how flexbox / positioning in general and mobile compatibility works. Thanks for making this!

@yeboahmartin4112 2 жыл бұрын

You're a powerful teacher. I watched this tutorial without feeling tired. Thank you for your good work

@John-mj1kk 2 жыл бұрын

I love how you started right out with classes just like Tailwind CSS. Made it so much better overall. Great tutorial!

@abhishekdhiman2522 2 жыл бұрын

Great course brother . I hope you will continue making amazing courses like this. Honestly learned a lot from this . Thank you for making such an amazing course.

@yoy937 2 жыл бұрын

I am new to web development, watched some tutorials and yours is the easiest to understand for me. your tutorials deserved a lot more views

@branchyapple 2 жыл бұрын

I didn't even watch this, but I already liked the video because i appreciate this video. And that you added timestamps. Thanks a lot man, going to check this video when needed :)

@guilhermefigueiredo766 2 жыл бұрын

That's what I was looking for! You're amazing, bro!

@brok3334 2 жыл бұрын

thats even a better html tutorial, then everything i watched until now according to web development Great Job!!! 🔥

@fustigate8933 2 жыл бұрын

this video is so clean. Love it.

@asaniri Жыл бұрын

TYSM for sitting for 5 hours and teaching me the perfect things i need to learn

@andrewvillalon226 Жыл бұрын

The way you present and explain your video is significantly unique compare to other tutorials

@andresdavid 2 жыл бұрын

This video is amazing. You've definitely gained a customer.

@ChrisCourses 2 жыл бұрын

Thanks man! Too many old school CSS methodologies being taught. Even with the massive amount of CSS courses out there, felt like there were none that actually showed people how to correctly utilize the language in a modern manner for real-world sites.

@user-fe4dc3ts2j 9 ай бұрын

This an amazing course,a wonderful explanation, I finally understand how to make a navbar ...thx soo much.

@mateusgraciano3724 Жыл бұрын

man i was having a bad time trying to learn css, positioning/flexbox, this way of writing inline css code in html is far more readable and easier to visualize things thxx!!

@testpurpose5845 Жыл бұрын

I have seen other css tutorials from pros . But you are at next level in explaining .

@ChrisCourses Жыл бұрын

Appreciate it! I still think this is the go-to tutorial for learning CSS-old school methodologies need to die out already lol

@user-hq5jn6qn4d Жыл бұрын

this was amazing well done man.

@masteriq9787 2 жыл бұрын

Best CSS tutorial ever!

@doctorjcw5857 Жыл бұрын

Thanks, been tryn to find a good break down for what css is

@barnabaskalydy6260 Жыл бұрын

Great video, learned a lot from it, thanks!

@jokeen8764 Жыл бұрын

You gained a new subscriber. I love it this way

@Mahardika_B_Weasley 2 жыл бұрын

Great video. Thanks.

@michelsaliba-eb9vt Жыл бұрын

Great and excellent teaching from Chris. I enjoyed it and would be more happier if something like this is available for Java scripts. thanks again for this awesome tutorial and i have subscribed already. God bless you and provide you with more wisdom to continue teaching!!!

@mradchemseddine9965 2 жыл бұрын

Thanks for making this public Chris ❤️. Your courses are millions times better than the paid crap on Udemy.

@neoanderson5880 Жыл бұрын

Unique your way of explaining sir

@genosthegreat7870 2 жыл бұрын

You're amazing sensei🔥

@WritingQueen_ 2 жыл бұрын

I’m confused why u added a tag for style instead of making a file for style. So it doesn’t get confusing.

@khwaishali7535 Жыл бұрын

Good editing bro and BTW very good Tutorial ❤

@stefanovinicios4623 7 ай бұрын

Thank you, man!!

@xcixneptune99 2 жыл бұрын

good tutorial but the too much classes in the style tag(I was expecting another separate file for the css codes) was making it hard for me to catch up and you kept on writing some classes and later deleted them...

@user-dg1cc3wb2l 2 жыл бұрын

Finally thanks for this😀😀😀😀😀😀

@alijaafari1514 2 жыл бұрын

Great intro to css , Also nice haircut in the middle of the process

@mahmudulhasan1020 2 жыл бұрын

Awesome extraordinary ❤️👌

@spalk125 2 жыл бұрын

Hello and thank you for the excellent tutorial. I have a question. When I try to use z-index from the css class "z-10" as you have shown in the tutorial at 2:03:54 It' doesn't work and it doesn't appear at chrome's inspector (It seems like it doesn't get recognised or it is gets overwritten) . But when I use it from the inline css it works fine. All the other css classes are working fine without a problem. Do you have any solution?

@juliosalgado956 2 жыл бұрын

Hello, around 1:40:00 you were teaching about rounding it but if the viewer zooms on it, it will became a circle and I don't want it to became another shape. How I avoid the rectangle to became a circle if the user zooms in?

@tejass817 2 жыл бұрын

Great Content

@saikommuru871 2 жыл бұрын

I've got a quick question about the z-index property that you used; when you increased the z-index of your header so that it would be in front of the background image/video (at 2:03:16) why did it become transparent? Before, it had a colour value of #121826 which is different to the background image. Many thanks

@ChrisCourses 2 жыл бұрын

I may have forgotten to include that in the edit, sorry mate, definitely hard to catch everything when working on a four hour video 😅 Easy fix is to just take off the background property altogether, and you should be good to go 👍

@ShreyaskarART 2 жыл бұрын

@@ChrisCourses thank you, I got my solution !

@abhaytiwari6411 2 жыл бұрын

Thanks bro 🔥🔥🔥🔥👏👏👏👏👏👏

@markmendozamusic 10 ай бұрын

Hey Chris, what theme are you using for Sublime Text?

@prashlovessamosa Жыл бұрын

Legendary

@vishwa_tennyson 2 жыл бұрын

Great !!!

@user-vx3ms1rn6p 2 жыл бұрын

Can you put a link for the image ?? Nice goob 👍

@codingispower1816 2 жыл бұрын

I wish the css standard included a padding-x: and padding-y properties for the issue @1 hour and 19 minutes

@alekseytrump1586 2 жыл бұрын

What is the font and theme in the code editor?

@ab-zg8pt 2 жыл бұрын

Thanks for this papi

@GraceCodes-xi2kx Ай бұрын

Hey, I am coding with you, but am having trouble adding the fonts,I copied the code from google font, and placed it under the tag, but when I go and inspect it I still get the default font, kindly help, am literally pulling my hair.

@arpitsatyal8900 2 жыл бұрын

hi chris, where can I purchase the premium version?

@shivamtaparia9948 Жыл бұрын

can someone provide the tailwind package link here. i am not able to find it in the website

@user-dg1cc3wb2l 2 жыл бұрын

Hello brother,just one request can u please make a react course,it will be ok if it's paid.i love your courses. Thanks 😊

@ShreyaskarART 2 жыл бұрын

@2:04:00 when I set my z-index to 10 it makes the texts to pop up but the background color of header is still not blended with the image's colour. please help.

@AdeelKhan-ox1bs 2 жыл бұрын

take out the background-color property from the header. It should work

@bryangarzae3146 2 жыл бұрын

great

@MohannadAZ 2 жыл бұрын

object-cover doesn't work with my video..

@marthastewartr2987 2 жыл бұрын

nice

@vinothvino8549 2 жыл бұрын

Please upload javascript full course tutorial .....

@bogarren96 2 жыл бұрын

Could you make the hamburger button pop up part too?

@django8603 2 жыл бұрын

58:09 Book Mark

@user-fe4dc3ts2j 9 ай бұрын

day 1 1:23:50

@Poizn0 7 ай бұрын

the flex thing isn't working daddy, do help, much appreciated, when i use the flex between property, my links just bunch up with no space between them

@Poizn0 7 ай бұрын

man i just realised i wrote justify as justidy it works now, thanks a lot daddy

@wdqwqefsfeew6190 Жыл бұрын

he smart like Columbus

@ther701 Жыл бұрын

Don't mind me. Timestamp: 1:14:34

@phattrienbanthan360do 2 жыл бұрын

1.16

@chadjr3137 2 жыл бұрын

13:12

@mayonaiseking Жыл бұрын

Thanks for the video. Some things though: 1. If you are telling people to save a video to be part of their website to avoid external dependencies (you called it 'changes'), tell them to download and include fonts, css etc. too. Privacy etc. included in that tip. 2. You are enforcing a lot of tailwind on people, because it is what you believe in right now. I kinda get that. I would disclaimer about this fact though. Your inline style approach is mighty dangerous for newbies, because they *will* use it everywhere and uncontrolably. Especially if you are creating very usebased classes all the time, which just contain one property anyway and the list of classes on the element is roughly the same length as a filled "style" attribute Concern seperation is, at least in my opinion, better for the beginning. If that is understood, one can decide to act differently. Anyway, this is probably a teacher decision and I am excited to see how the Tailwind approach affects future generations of frontend developers and designers.

@chubbyBunny94 2 жыл бұрын

S c s s

@himadri_121 2 жыл бұрын

Sir, what is your education? You have what degrees? What are the programming languages you can write? Why don't you make yourself a video Intro for your channel?

@danielchettiar5670 2 жыл бұрын

Lmao he doesn't live in India, that his education should matter too much. Are you not aware of how chill the software industry is with degrees outside India?

@ChrisCourses 2 жыл бұрын

Know it's late, but I have a Bachelor's degree in an online production major (web design and development) from the University of Tampa. Not really a computer science major, but it got me introduced to web dev and motivated me to do a lot of self learning on the web via Treehouse and KZfaq. I mainly code in JavaScript, but I can also write programs in PHP and Swift. My internships and full-time web dev positions taught me the most out of anything. I think landing that first position is the most important thing any aspiring web dev can do to better their skillset.

@sujanlimbu4540 2 жыл бұрын

👎: 0 Just let it be...

@ChrisCourses 2 жыл бұрын

Still 0 dislikes! Just kidding, as nice as that would be, KZfaq removing them was a terrible mistake lol

@mahmoodsagharjooghi 2 жыл бұрын

hey man. I really liked your canvas videos. I just wanted to let you know that for me personally you channel was all about those unique content that you provided. Although basic stuff might bring in more subscribers, I think making some tutorials about other content that other channels don't pay enough attention to is the way to go. I just wanted to ask you to make more in depth videos about three.js /glsl / 3d physics, making a portfolio using gsap, or how to build the "three js journey" website as a series of tutorials.