CSS Masterclass - Tutorial & Course for Beginners
Vložit
- čas přidán 7. 06. 2024
- 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
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?
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.
@@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!
@@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?
How are you ? How many did you learn for 1 year?
I love how you started right out with classes just like Tailwind CSS. Made it so much better overall. Great tutorial!
You're a powerful teacher. I watched this tutorial without feeling tired. Thank you for your good work
Really well made and easy to follow, helped me finally understand how flexbox / positioning in general and mobile compatibility works. Thanks for making this!
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
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 :)
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.
That's what I was looking for! You're amazing, bro!
thats even a better html tutorial, then everything i watched until now according to web development
Great Job!!! 🔥
The way you present and explain your video is significantly unique compare to other tutorials
TYSM for sitting for 5 hours and teaching me the perfect things i need to learn
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!!
this video is so clean. Love it.
This video is amazing. You've definitely gained a customer.
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.
This an amazing course,a wonderful explanation, I finally understand how to make a navbar ...thx soo much.
Thanks, been tryn to find a good break down for what css is
Thanks for making this public Chris ❤️. Your courses are millions times better than the paid crap on Udemy.
I have seen other css tutorials from pros . But you are at next level in explaining .
Appreciate it! I still think this is the go-to tutorial for learning CSS-old school methodologies need to die out already lol
Best CSS tutorial ever!
this was amazing
well done man.
You gained a new subscriber. I love it this way
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!!!
You're amazing sensei🔥
Great video, learned a lot from it, thanks!
Good editing bro and
BTW very good Tutorial ❤
Unique your way of explaining sir
Great video. Thanks.
Great intro to css , Also nice haircut in the middle of the process
Thank you, man!!
Finally thanks for this😀😀😀😀😀😀
I’m confused why u added a tag for style instead of making a file for style. So it doesn’t get confusing.
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?
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?
Awesome extraordinary ❤️👌
What is the font and theme in the code editor?
Hey Chris, what theme are you using for Sublime Text?
Can you put a link for the image ??
Nice goob 👍
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...
hi chris, where can I purchase the premium version?
Great Content
can someone provide the tailwind package link here. i am not able to find it in the website
Thanks for this papi
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
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 👍
@@ChrisCourses thank you, I got my solution !
Thanks bro 🔥🔥🔥🔥👏👏👏👏👏👏
I wish the css standard included a padding-x: and padding-y properties for the issue @1 hour and 19 minutes
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.
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 😊
Legendary
@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.
take out the background-color property from the header. It should work
Great !!!
Please upload javascript full course tutorial .....
object-cover doesn't work with my video..
Could you make the hamburger button pop up part too?
great
nice
58:09 Book Mark
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
man i just realised i wrote justify as justidy it works now, thanks a lot daddy
day 1 1:23:50
he smart like Columbus
Don't mind me. Timestamp: 1:14:34
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.
1.16
13:12
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?
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?
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 CZcams.
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.
S c s s
👎: 0
Just let it be...
Still 0 dislikes! Just kidding, as nice as that would be, CZcams removing them was a terrible mistake lol
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.
nice
nice
nice
nice