CSS Masterclass - Tutorial & Course for Beginners

Подписаться 162 тыс.

Просмотров 104 тыс.

50% 1

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

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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?

@John-mj1kk 2 года назад

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

@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

@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!

@fustigate8933 2 года назад

this video is so clean. Love it.

@andrewvillalon226 Год назад

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

@brok3334 2 года назад

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

@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!!

@asaniri Год назад

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

@user-fe4dc3ts2j 9 месяцев назад

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

@user-hq5jn6qn4d Год назад

this was amazing well done man.

@barnabaskalydy6260 Год назад

Great video, learned a lot from it, thanks!

@jokeen8764 Год назад

You gained a new subscriber. I love it this way

@masteriq9787 2 года назад

Best CSS tutorial ever!

@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

@doctorjcw5857 Год назад

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

@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!!!

@khwaishali7535 Год назад

Good editing bro and BTW very good Tutorial ❤

@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.

@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

@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.

@stefanovinicios4623 7 месяцев назад

Thank you, man!!

@alijaafari1514 2 года назад

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

@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😀😀😀😀😀😀

@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?

@mahmudulhasan1020 2 года назад

Awesome extraordinary ❤️👌

@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?

@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 !

@tejass817 2 года назад

Great Content

@alekseytrump1586 2 года назад

What is the font and theme in the code editor?

@abhaytiwari6411 2 года назад

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

@ab-zg8pt 2 года назад

Thanks for this papi

@user-vx3ms1rn6p 2 года назад

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

@markmendozamusic 10 месяцев назад

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

@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 😊

@arpitsatyal8900 2 года назад

hi chris, where can I purchase the premium version?

@prashlovessamosa Год назад

Legendary

@vishwa_tennyson Год назад

Great !!!

@shivamtaparia9948 Год назад

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

@codingispower1816 2 года назад

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

@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

@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.

@vinothvino8549 2 года назад

Please upload javascript full course tutorial .....

@MohannadAZ Год назад

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

@bryangarzae3146 2 года назад

great

@marthastewartr2987 2 года назад

nice

@bogarren96 2 года назад

Could you make the hamburger button pop up part too?

@django8603 2 года назад

58:09 Book Mark

@Poizn0 6 месяцев назад

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 6 месяцев назад

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

@user-fe4dc3ts2j 9 месяцев назад

day 1 1:23:50

@ther701 Год назад

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

@wdqwqefsfeew6190 Год назад

he smart like Columbus

@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.

@phattrienbanthan360do 2 года назад

1.16

@chadjr3137 2 года назад

13:12

@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 RU-vid. 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, RU-vid 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.