Introduction

[00:00:00]
>> Kevin Powell: Hello my frontend friends, or should I say Frontend Masters friends, and welcome to modern CSS fundamentals. This workshop will teach you the systematic principles behind modern CSS. I'm going to be exploring not just CSS in general, but I'm really going to be breaking down how CSS works and why it works the way it does. By the end of this workshop, you'll have a solid foundation in CSS to be able to create responsive websites without a struggle, whether you're writing vanilla CSS or using frameworks or utility class approaches like Tailwind.

[00:00:29]
So let's jump right in, right here for a quick introduction. I just want to let you know we're not going to be covering all of CSS with what we're doing in here. There is a lot to CSS. The big focus of this is really understanding why CSS works the way it does to give you a rock solid foundation in how it works. So when you come across new features that aren't covered here or you come back across a feature that we learned that you forgot about how it used, you have the mental models and debugging strategies to quickly and efficiently get them working within your projects.

[00:01:00]
If you're wondering if this course is for you, it's really for anybody who wants to understand CSS better instead of just throwing properties and values at it. If you feel like you're guessing a lot of the time, this course is definitely for you, or if you feel there's a lot of inconsistencies with the way CSS works, this course is also for you. It's primarily been put together for people who have just started dabbling with CSS so maybe you've done a tutorial or a few things you're following along.

[00:01:26]
You sort of understand how it's working, but if you go to do something on your own, you don't know where to start or you start doing things that's not quite working the way you're expecting it to. So we're going to be moving past that beyond the trial and error copy pasting stage to the point where you can start writing CSS with confidence. And because a big part of this course really does focus on understanding why CSS works the way it does, rather than just learning a bunch of property-value pairs and trying to memorize things.

[00:01:53]
We're definitely not going to be doing that. There's going to be a lot of takeaways in here potentially for seasoned developers as well. So if you're just refreshing, trying to catch up on what's happening with CSS these days, there'll definitely be a few things that you can take away from it. But because we are starting from the very basics, there aren't a lot of prerequisites for this. Again, as long as you have a little bit of a foundation in HTML, you understand opening tags, closing tags.

[00:02:17]
You might have followed a few tutorials, you've seen CSS, that's all you really need to be able to get a lot from this course. And if you're wondering, you know, why I'm here, the one giving this course or why Frontend Masters brought me out to do this, my name is Kevin Powell, and I'm primarily known for my YouTube channel, where I like to tell people I help them fall in love with CSS and if I can't get them to fall in love with it, then I'm hopefully going to at least help them be a little bit less frustrated by it.

[00:02:42]
I've had my channel for about 9 years now. I think it just passed its 9 year anniversary, so there's a lot of content there. I've passed 1000 videos that are basically all devoted to CSS, and I used to teach in the classroom. The last 5 years I've been focused only on teaching basically CSS in an online context, and so I've been doing this for a long time. It's going to be a lot of fun. I think we're going to really enjoy ourselves here and there's a lot to learn.

[00:03:07]
Now, I know we all want to dive in and start writing some CSS right away, but a few quick things before we actually get into the content itself. The first one is this course website that I'm on right now. We can see that here on the screen. We're going to be following this very closely. The lessons are all down in the sidebar that you can go through and follow along with me. Not only are the lessons there though, within the lessons there's lots of demos that I'm going to be using, interactive examples, and some snippets of code that we're going to have to bring into the project that we'll be working on along the way.

[00:03:38]
So, coming through and following along with the website is going to be pretty important. One thing that is important though is not every single thing I'm going to be teaching is in here. We're going to be focused on this, opening up the demos. Most of the demos that are embedded are in the starting version of it, and we'll be going through the demo to get to the finished version. But it is a very comprehensive companion of everything that we're going to be covering.

[00:04:01]
And I wanted it to be something that you could reference back to later on. So if ever you're, you know, stuck, you don't remember something, you did this course and you're like, I know Kevin talked about that, you can just come here, jump to the search, go maybe media queries. And you'll find all the lessons where I mentioned media queries, you go, oh, that's the responsive type one, that's the one I'm looking for, whatever it is.

[00:04:21]
So a nice quick reference for certain things if you're just trying to find them as a reminder later on after you have finished the course. At the end of some lessons, there'll also be additional resources. There's some topics that I'd love to have dived deeper into, but it just sometimes you get into the weeds a little bit, gets a lot more advanced than what we want to do in this course. So I'll be including resources, some of them will be to my own videos, some of them will be to external videos, some of them will be for other courses that are here on Frontend Masters.

[00:04:48]
And another thing to keep out for is these purple blocks that will be along the way in the lessons. These are the times where we're going to be going from sort of demoy worlds to getting our hands dirty, and you'll be writing some code along the way as well. Most of the time, these mean it's time to go back to the project that we've been working on. Occasionally it might be a more of a one-off little example that we're working on, but not just like a silly demo, something that's a little bit more real world most of the time.

[00:05:12]
As far as what we're going to be building as we go through this, again, lots of smaller examples, but we will be working on one page or one project that will be a little bit larger in scale. I'm just going to refresh, we'll have a little loading animation as it comes in. It will be a multi-page site with a little bit. We have some different effects going on and other things, and it will also be fully responsive.

[00:05:36]
So if we get to smaller screen sizes, the layout will adapt and everything like that. So, this is sort of the end result of what we'll be doing by the end of it. I chose a chess website just because it's sort of my current random hobby that I've really dove deep into, and so it seemed appropriate to make a quick website on one. I'm not very good though, so don't challenge me if you play. Also, as I mentioned, there'll be a lot of smaller demos.

[00:05:58]
They're going to be with embedded code pens that look like this. If you've never used code pen before, well, let's just see what it is, it looks like this. If you open it, it might look like this. I find it much easier to work, especially with CSS when the sidebar's on the side, so you can just click here, switch over to this view. And it's nice and handy because with quick demos you can just come in, make a change.

[00:06:22]
And it updates after a second or two, you'll see the update come in in the editor. One really important thing is I have a nice big save button here. You will probably not have a save button there. If I open this in an incognito window, the save button is gone because this isn't on my account anymore. I'm not logged in, and I can only save my own work. So if you follow along with the demo and you want to save it, there will be a fork option down in the corner.

[00:06:46]
It's really small, but there's a fork down in the bottom right. If you click that, it will allow you to save it as long as you have an account with code pen, completely free to have one. So if you don't already have one, I would encourage you to set one up now. It's good to have, but definitely completely optional. Fun fact, yes, Chris Coyer of CSS tricks fame writes on our blog. That's right, you go to the Frontend Masters.com/blog.

[00:07:19]
You'll see him there, and he made code pen. Yeah, we have it. The blog, yeah. He does most of the writing there, I think these days, right? Yep. Now, we'll be using the code pen, as I said, we're also going to be working on a larger project too, and I'm going to be using VS Code as my editor. If you, I'm assuming you probably have something that you're already familiar with, you can use whatever it is you like, there's, doesn't matter, we can write CSS in any of them.

[00:07:43]
So you can choose. I am going to be using Live Server and Prettier as my extensions. Live Server just lets us preview the work we're doing without having to refresh the page manually. And Prettier just helps if you have indentation issues or other formatting things. It fixes it for us. So you can find the link to both of those if you want to check them out. And if you like my setup, I have one Dark Pro variant Knight, a very long name, that is the theme I'm using, and Cascadia code is the font that I'm using, which is a free font that you can always download if you like the look of it.

[00:08:12]
All right, so we will be working on a project, as I said. So before we actually dive in and start writing some code, just really quickly, I want to get the project set up with everybody. So the first design we're going to have is going to look a little bit different from what we initially started with because we're starting with the basics and working our way up. So we're just going to have something that looks like this and have two pages, so quickly the second page is right there, nothing too fancy, but we saw we're going to improve upon it as we go.

[00:08:43]
So the first thing I'm going to do is on my desktop, create a folder for my project. So I'm in FEM chess, you can call it whatever you want, doesn't matter. We're going to need two files in here as well as our images folder. So I'm going to open it just directly here with an open with code, doesn't matter how you want to do it, we go, definitely trust the authors, we're not going to be using AI so I can close that down, and I'm going to come in here and quickly make.

[00:09:17]
An index, oops, index.html file, and our second page, which will be our instructor.html and we're going to have a couple of images, so I'm going to make an images folder. That I'll just call images right there. Now, as for the content for these pages, I am providing some starting HTML. If you're the type of person who prefers writing everything by yourself, I am also providing the content, so on the page you can just get the raw content for the pages if you'd prefer.

[00:09:42]
If you're familiar with GitHub and you'd rather work from there, it might be a little bit faster and easier. I have provided a GitHub repo that has the starting code for a bunch of the lessons, sort of checkpoints as we're going through. This starting code will also be provided in the course platform as well. So if you're not familiar with GitHub, you're like, oh, what is this? You don't have to worry about it, you'll have another way to get the code, but if you do want, you can just download the zip, or if you know how GitHub works, then you're completely fine.

[00:10:08]
But you can just download Zip, get all the files that way, or as I said, we have another way that we'll be able to get most of what we're going to be doing. Those are checkpoints throughout, so there won't be every single lesson where I write some code that will have that, but most of the way along, we will have a checkpoint. So if ever I'm moving a bit too fast, you fall behind, you decide not to follow a demo because you're familiar with it, but you want to have that starting point, we'll have the starting point along the way as we're going through in all the lessons.

[00:10:40]
As far as the two images, they are also here in the course platform, easiest thing to do, save image as. FEM chess images folder, I can save that one, and I'm just going to save this one as well. Keep things nice and simple. If you're using the GitHub repo, the images are in the GitHub repo already, so you don't have to download them. And then there's the content again, you can get that directly from the repo.

[00:11:10]
I'm just going to come here in the starting HTML first page. There's a nice big copy button in the top. Jump on over to VS Code. Paste that in. 2nd page, copy that. We can come over here, paste that in, and there's not a lot happening here, there's nothing complicated. So sometimes when you don't write the HTML yourself, especially if you're newer to HTML and CSS, it can seem a little bit awkward when you don't write the code yourself, but basically I have a main tag.

[00:11:37]
H1 image paragraph, we just have a bunch of content in here, H2's paragraphs, a footer. The second page is basically the same with the addition of an unordered list in there. So we do not have very much going. Save both of those files, and I mentioned that I'm going to be using Live Server, so if I click this go live, that's down here in the bottom, because of that extension that I have, it will open up or it starts a server and it will open it up for me right here.

[00:12:07]
And that opened it up in Firefox Nightly. I'm just going to open it in Chrome. Right there so we can see my page. If I make a change, I'll just move this off to the side for one second. If I decide to make a change, this is my homepage, let's just say. Save as soon as I save it updates there. So that's the advantage of having the Live Server. We can fix that and then jump back into our project.