kevntech Logo

How to create your first website in less than 7 minutes

By: Kevin Nam
Updated on: Saturday, March 28, 2020

Quick Introduction

This is a quick step-by-step guide on how to create your first HTML & CSS website powered by Node JS and Express in less than seven minutes. The focus is less on the what, but rather more on the practical, hands-on, learn by examples kind-of-way. Especially as a beginner, I believe it is most rewarding and beneficial to get something working and building your foundation on top of that.

In this guide, I am assuming that you are a beginner (or not!) with basic programming skills and have no development environment currently set up. I use a Macbook Pro so most of the content will be focused on Mac users, but it should work nevertheless for Windows users as well.

What you will learn by the end of this:

  • How to create a HTML website and show it to your friends
  • How to add CSS styling to your website
  • How to run a Node JS & Express server
  • How to use NPM to globally and locally install "packages" and "dependencies"

What you will be able to show by the end of this:

  • A basic static HTML website with CSS styling
  • A running Node JS & Express server

Express Generator Page with Simple HTML and CSS changes

Steps

The following outlines the 6 steps needed to build your first website:

  1. Download and install VSCode

  2. Download and install NodeJS

  3. Download and install Express application generator

  4. Generate a new Express "app"

  5. Run our new Express "app"

  6. Modify the HTML and CSS styling

1. Download VSCode

VSCode is an IDE. In other words, it is the "code" editor we will be using in order to do the necessary changes. Don't worry, we won't be doing too much in this guide. And when you will be doing changes, it will be super understandable and be useful for your future project and work.

Click here to go to the Visual Studio Website and download it

After downloading it , open it up and you should see something like this.

Visual Code Studio

There is a ton of goodness that we can do in this IDE as well as adding a ton of useful plugins but let's not worry about that right now. Close it and let's move on.

2. Download NodeJS

Next up, we need NodeJS. I wouldn't worry too much about what it is or how it works other than the fact that it is an extremely popular Javascript engine that powers a ton of modern sites today.

Click here to got to the NodeJS Website and download the LTS version

LTS just stands for Long-term support which mean it is the version that is the most stable. You could optionally download the current version for more cutting-edge features but it is pretty much unnecessary for the purposes of this guide.

After downloading and installing it, let's verify that it is working properly. Although powerful, there is no fancy UI associated after installing this (and get used to it). The way to verify if it was installed correctly is by opening up the Terminal. If you do not know how, then I suggest you Google it. If you are in Windows, then you will need to download and install Git Bash which is the equivalent.

Once in the Terminal, type in the following command:

node -v

If you get something like this, then we are good to go! Don't worry about matching versions or anything. It should not matter for the purposes of this guide.

node -v

3. Download and install Express application generator using NPM

Let's focus on only one thing: Node Package Manager (NPM)

We will be using NPM to download and install Express (more specifically express-generator; more info later). Think of NPM as your iPhone's App Store except for Node-based apps/dependencies/packages that be used for your own projects. So now back in Terminal, type the following command to verify that it is correctly installed (it should come with Node):

npm -v

If you get this message, then we're all set to install Express. Again don't worry about matching versions.

npm -v

Now let's actually install express-generator by running the following command:

npm install -g express-generator

Quick notes: npm install is the command. -g means to install globally on your computer. express-generator is the package we want.

Great! Now we are ready to generate our new Express app.

4. Generate a new Express "app"

I didn't talk at all about Express yet. All you need to know right now is that Express is a Node web framework. We will be using it to achieve the following things:

  • Running a web server
  • Showing an HTML page

We will be using its express-generator package as a tool to quickly generate a project for us. Let's optionally create a dev folder and generate our new potato project by running the following commands:

mkdir dev
cd dev
express --hbs potato

Quick notes: --hbs means we will be using Handlebars view engine (We don't need to care about this for now). potato is the name of our project.

If all goes well, it should look like this:

After running express --hbs potato

Perfect! Let's actually run our new Potato Express app.

5. Run our new Express "app"

Get ready for some magic. The fruits of all your hard work will now be worth it! The next steps are simple:

  • Go inside the potato folder
  • Install all the local dependencies
  • Run the app

Let's first go inside our new potato project folder and install all the dependencies:

cd potato
npm install

After running npm install

Let's ignore the warning messages.

You will notice a ton of messages popping up in your Terminal and you may be a little confused at what npm install is doing. Remember when we installed express-generator globally? Notice how there is no -g flag here. In this case, npm install is locally installing all the necessary dependencies inside your potato project. These dependencies can be found in the /node_modules in your project folder, but let's not worry too much about it for the purposes of this guide.

Now let's actually run it! While in your potato project folder, type this in your Terminal:

npm start

Running Express

No, it did not "freeze" or get "stuck". We are actually running a server on your computer now. Go on your favourite browser and go to: http://localhost:3000/

If you see this screen, congrats you created your first website!

Express Example

Pat yourself on the back. It may not be exactly what you are looking for, but just like any beautiful architectural masterpieces, it all starts with the foundation.

6. Modify the HTML and CSS styling

So we haven't really coded anything yet. So let's actually do something now! Remember when we downloaded VSCode? Let's open that up and open up the project by clicking on File -> Add Folder to Workspace and adding your potato folder. If all goes well, you should see this on the left-side of VSCode:

Potato Project Directory

Quick notes: package.json contains a "checklist" of all the dependencies you need and it will exist in every Node-based project. node_modules is where all your installed dependencies will live.

Let's focus on the views/index.hbs file. Don't be scared of the .hbs extension. It just means it supports Handlebars as we mentioned before. Write whatever HTML you want. This is what I did:

Hello Potato!

Don't forget to save and restart the server (by closing the running server with hotkeys CTRL + C and running npm start again). Go back tohttp://localhost:3000` and embrace change.

Simple HTML change in Express

Incredible isn't it?

Let's move on an make some important styling changes by now focusing on the public/stylesheets/style.css file. I think our page needs a bit more color. I'm going to change the background color to blue like this:

Express style.css

Once again, don't forget to save and restart the server (by closing the running server with hotkeys CTRL + C and running npm start again). Go back to http://localhost:3000 and embrace change.

Express Generator Page with Simple HTML and CSS changes

A true masterpiece. There you go! And we're done!

Hopefully that we useful for you all. For more information about the technologies we used today:

  • VSCode:
  • NodeJS:
  • ExpressJS:
  • HTML:
  • CSS

Hi! My name is Kevin Nam and I am a Full-stack developer at Expedia for over 3+ years.