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.
The following outlines the 6 steps needed to build your first website:
Download and install VSCode
Download and install NodeJS
Download and install Express application generator
Generate a new Express "app"
Run our new Express "app"
Modify the HTML and CSS styling
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.
After downloading it , open it up and you should see something like this.
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.
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:
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.
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):
If you get this message, then we're all set to install Express. Again don't worry about matching versions.
Now let's actually install
express-generator by running the following command:
npm install -g express-generator
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.
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:
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
--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:
Perfect! Let's actually run our new Potato Express app.
Get ready for some magic. The fruits of all your hard work will now be worth it! The next steps are simple:
Let's first go inside our new
potato project folder and install all the dependencies:
cd potato 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:
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:
If you see this screen, congrats you created your first website!
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.
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:
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:
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.
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:
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.
Hopefully that we useful for you all. For more information about the technologies we used today:
Hi! My name is Kevin Nam and I am a Full-stack developer at Expedia for over 3+ years.