Creating our project

The name of this course is creating a project from scratch, so the very first step is to create a new folder on your desktop (or wherever you like to work from).

You can name it whatever you like, but I am going to go with fem-from-scratch.

This is our root folder

As we progress through the course, I'll occasionally reference the root folder.

This just means this folder that we've create, which is the root of our project.

Adding our assets

Next, we can bring in our assets that we downloaded in the previous lesson and dropping it inside of that folder.

Creating our HTML & CSS files

We'll start very simple here, creating an index.html file and a styles.css file inside our project.

First, you'll want to open the folder in VS Code, which you can do by going to File -> Open Folder and choosing your project folder.

HTML boilerplate

VS Code comes preinstalled with Emmet, which allows us to write HTML much faster.

In our HTML file, we can type !, and then press either tab or return, and it will create a starting HTML template for us.

With that starting template in place, you'll want to:

  • update the title
  • add a <link> to the CSS file

And with that done, we're ready to go!

I like to start my LiveServer now, and do a quick background-color change on my body to make sure I didn't make a typo in the link to my CSS file.