Introduction

[00:00:00]
>> Kevin Powell: Hello my Frontend friends, and welcome to this course on building a website from scratch. My name is Kevin, and I'm really excited to bring you this course. First of all, if you don't know me, I'm an educator and online content creator. And my joy is teaching people CSS and helping them fall in love with it.

[00:00:17]
And if I can't help people fall in love with CSS, I'm hoping to at least help them be a little bit less frustrated by it. And I'm really excited for this project. First of all, cuz I've been invited here by Frontend Masters, who I was a subscriber to a long time ago.

[00:00:29]
So it's really cool to be here in the studio with them creating this course. And second of all, because this type of project of making something from scratch just using vanilla HTML, CSS, and JavaScript is my favorite thing to do, and definitely my favorite thing to teach. So I'm really looking forward to bringing you through all the steps and helping you learn a few things along the way.

[00:00:48]
We're gonna be building out a website based on a Figma design file that provides us both with the desktop and mobile view. So we'll be look making it completely responsive, talking a bit about mobile first, desktop first, the best ways to approach those things. And try to match our file as closely as possible as we go through everything.

[00:01:03]
And we're gonna be doing it, as I mentioned just with HTML, CSS, and Vanilla JavaScript. There's a place for frameworks and everything else along the way, but just getting down into the fundamentals is my favorite thing to do. So we're gonna be going through all of those as we progress through this course.

[00:01:19]
And because we are talking about the fundamentals, just for who this course is for, I am assuming that you've already written some HTML and CSS up until this point. You have an idea of how the text editor works and the basics of all of that. Don't need to have tons of experience with it, but enough on semantic elements, CSS selectors, and the different types of selectors and how they work, and a bit on specificity.

[00:01:40]
And just having covered the basics and built some smaller projects will really help you out, if you're starting out on this course. We will be using some JavaScript as well, we're not gonna be doing too much, but a little bit of a base in there will help you out definitely.

[00:01:52]
If you've never touched it, you'll still be able to follow along as well, though. So it's not essential, but a little bit of JavaScript knowledge will definitely be beneficial. And one thing I wanna be doing with this course is also ensuring that we're looking at the big picture and looking at how we can approach a project with the figment design like we're gonna have.

[00:02:08]
To be able to dive in and build it in the proper way and doing it with maintainable practices. So we're not just jumping into it, looking at the first thing on the page and coding that up. We're gonna start by analyzing the project, breaking it all down. And really setting ourselves up for success from the very beginning.

[00:02:22]
So it takes a little bit longer to really get into the nitty gritty of it. But once we get to those stages, everything just sorta falls into place as we go through everything. We're gonna be exploring different naming conventions you can use in your CSS, and I'm gonna be offering up a few different things, just so you can choose sorta the approach that you think works best.

[00:02:38]
But I'll be talking about it in the larger idea of how to best keep your CSS organized as well. And along the way, we're gonna look at also adding in some fun animations and transitions and other things that can help with the user experience. So if all of that sounds good to you, then this is the right course for you and I'm really excited to dive in, so let's go.

[00:02:55]
Now, just before we dive into the actual code and all of that, a few things that you'll need before you get started is an editor. You've already been writing some HTML and CSS, so I'm assuming that you already have one of preference, I'll be using VS code as I go through it.

[00:03:08]
So if you wanna have the same experience and be able to follow along easily, you might wanna use VS code. But if you have another one that you like better, that's completely fine, you're free and welcome to use that one, though I will be recommending two extensions, the first one is Live Server and the second one is Prettier.

[00:03:23]
Live Server just makes our life a lot easier in that it refreshes the page for us every time we save, so we don't have to do that ourselves. And Prettier takes care of a lot of the formatting for us. So if you have messy code, you hit save, and all the indentation formatting is fixed for you.

[00:03:36]
There is a little bit of configuration to get Prettier working, by default, you'll install it. It says it's there, it says it's working, and it doesn't actually do anything. So early on in the course, we'll look at how we can make sure that it's actually working properly as well, once you have it installed.

[00:03:50]
Speaking of the VS code and just things that match what I have, if you do like the setup I have, people often ask me about my theme and my font, so I've linked them in the course page. So it's one dark pro var night and Cascadia code is the font that I'm using.

[00:04:04]
So there's links to both of those in the course page. Another thing that you will need is, we will be talking a bit about version control as we go through this course. So you will need to have Git installed on your computer. If you've used Git or GitHub or anything like that before, you'll already have it.

[00:04:16]
If you don't know if you have it or not, you can just follow the link in the course page, it's going to bring you to the download area. Download it, a few clicks, it gets installed on your computer and you're ready to go. And with that, I'd also recommend having an account with GitHub, you can use one of the alternatives.

[00:04:34]
If you're already using one of them, that's completely fine, but I will be using GitHub throughout this. So if you wanna match my experience, then I would recommend GitHub. And I'm also gonna be using VS Codes built in GitHub integrations. So it just makes life a little bit easier.

[00:04:47]
So, once again, if you're following along with me, the easiest thing to do is to have them the same way. But if you're comfortable with get already know how to do it in the command line, then you'll be fine following however you wanna do it. And last but not least, there is Netlify.

[00:05:00]
We're gonna be looking at getting this site online as well, and I'm gonna be using Netlify as the hosting for this, it's really easy to get going with it. It's completely free to have an account and host your websites with it. So if you don't already have an account with them, you can set up an account now before you dive in, it's really easy to do.

[00:05:15]
Just like with GitHub, there are alternative solutions. So there's cloud for pages, there's GitHub pages, just to name a couple of them, there's also a lot of other ones. If you're more comfortable, you're already having an account with that, and you know how all of that works, that's completely fine.

[00:05:28]
But once again, I'll be using Netlify as I go through this, so if you want to follow along with the steps I'm doing, then I would suggest setting up an account with Netlify.