Project Setup

[00:00:00]
>> It was a lot, but all of these things will make sense in practice. And the goal with that was just to give you a really deep primer on some of these concepts so when we're seeing them in our project you're not completely overwhelmed. But feel free to stop me and ask questions along the way.

[00:00:16]
Let's talk about what we're building today. So we're gonna build a two-page website for a conference. So we'll have the homepage, it's kind of like a big header that tells you the date, it's gonna have two buttons and navigation at the top. And then the second page for speakers that have a speaker image, their name, company, and bio.

[00:00:38]
There are some design files that are linked. The easiest way to get here is to go to the repository, which is that repo here, the https//github.com/emmabostian/fem-css-foundations. So if you go to this repository there will be a link to the design files, and I will walk you through those in just a second.

[00:00:59]
So hopefully you're able to get onto this repo that I've made here. All of the information that you're gonna need, whether it's links to the slides here, or the course information on the website is here. We'll take a look at the design in just a second. The instructions for forking and cloning are also in here, we'll do that together live.

[00:01:21]
But just as a note, there are six branches that you'll see here. So if you ever get lost, after the end of each chapter you can check out the next chapter's named branch. And you'll have the code at the starting point of that chapter. I've also included a couple of editor settings if you're using Visual Studio Code.

[00:01:42]
These are the ones that I have, it's my theme, my font, etc. So feel free to go ahead and check that out as well. Let's first talk about what we're building today. So there is a link to the Figma file here, right here you can view the design files for our project.

[00:01:57]
So again, this is a two-page website. Where we've got a landing page has a heading, a subheading with the date, we've got two buttons, we've got a navigation. Page two is a speaker's page with a photo for each speaker, name, company, and bio. There's also a mobile responsive version for these two pages, you'll see.

[00:02:22]
You can see also the navigation is now gonna be a full page navigation on mobile, we'll get to that towards the end of this course. And I've also included a design palette, so it has our two colors, the font families, and the type scale pixel values for each of the two view port sizes.

[00:02:42]
I've also included a little bit of red line design, or yellow line design on some of these so you can see, they might not match exactly the final design. Of course if you're working with a design team I'd recommend actually making sure it's pixel perfect, but these are just to kind of guide us today.

[00:03:00]
So feel free to refer back to that as needed. But let's go ahead and actually fork and clone this. So forking is gonna allow us to create a copy of this under our own user. So we're gonna go ahead and click that button, if you haven't already create a new fork.

[00:03:15]
I'm gonna fork off of my podcast repository, don't tell my other co-hosts. One note about this, uncheck copy the main branch only. This will give you access to those five other branches that I had mentioned with the code for each chapter. So then you can go ahead and click Create Fork.

[00:03:34]
Once that is done, we can go ahead and clone this to our local machine, right? So there's this code dropdown here, you can grab the HTTPS URL here. If you feel lost, if you don't have experience with Git, that is okay. The README on the repository has screenshots and examples, or explanations on how you can proceed.

[00:03:56]
So I'm gonna copy this and use the CLI, the terminal, to clone, but you can also use the GitHub desktop app. So I'm gonna open my terminal on my Mac. I'm gonna change directories to my desktop just for ease of use. Did I spell that right, yes. And then I'm gonna write git clone, and paste in that URL.

[00:04:18]
So now that that is done I should be able to see it here on the desktop, and I'm gonna drag that into my Visual Studio Code editor. So here we are, I'm gonna collapse the source control panel, and now we've got our folder here. So let me put this in full screen mode, let's take a quick look at what's in here.

[00:04:37]
So we've got the README of course, with all the links. And we've got our two HTML pages. So we've got our index file, which is our home page. We've got our speakers file for our speakers page. And I should have all of the information here that we're gonna need.

[00:04:53]
We've also got an icons folder with some SVG code we'll use later. And these are just the images for the README file, so we don't need to worry about those. Everything else we're gonna be creating together in real time, so don't worry about missing certain things. So there were a couple of things.

[00:05:12]
So back in the README, there are a couple of plugins that you're gonna wanna have installed. So here if you're using Visual Studio Code, there's an extension marketplace. Live server is gonna be one that we're going to use, so you can search for it here. This is gonna allow us to essentially hot reload our HTML page when we save a file, so it's gonna be much easier than manually refreshing every single time we save our CSS.

[00:05:38]
The other thing that you're gonna wanna have installed is Prettier. So it looks like this, Prettier, it's a code formatter. So we don't have to worry about making sure we tab the correct amount to make sure our code looks all pretty and nice, you just can install this plugin.

[00:05:57]
And to get it to work properly I had to edit my settings in that JSON file, so to do that, I have given you a code block here. So it's gonna format on save, it's gonna format our code whenever we save a file. It's gonna format on a copy and paste.

[00:06:16]
And it's gonna set the default formatter to HTML, this is what I needed to get it to work in our HTML file. So I'm gonna copy this, I'm gonna open my settings JSON file, on Mac that is CMD+P. I type in this greater than symbol and it's gonna be open defaults, or, I'm sorry, open workplace settings JSON.

[00:06:34]
And I'm just gonna paste in the code from the README here. And so now to make sure that that is working, let's say I go to my index file, let's say I tab In this really indented, right? When I save, now you can see it jumps back to its proper place, so that's what Prettier is gonna do for us.