Create a website from a template

Style: guided

We will learn how to set up a developer environment and create a website using:

We will go through the steps one by one and be on hand to answer any questions. You are required, however, to be familiar with web development and web development practices.

Run a project in VS Code

To work with HTML and CSS you need a development environment - a place to write code - and a way to run that code in the browser.

We're going to do that by cloning (copying) a website generator using written instructions. When we run the generator, it will ask us a few questions. Based on our answers, it will create a website we can edit and deploy using VS Code.

We use HTML to structure our content, and CSS to style it.

Let's begin:

  1. Install Node.js
  2. Install VS Code
  3. Open the Terminal app and clone the web template generator using Git.
  4. Run create-web-project to create a website from a template
  5. Open the new site in VS Code and edit it
  6. Run npm link in the Terminal
  7. Type and enter npm run start in the Terminal to run it in the browser
  8. Open the Terminal and then click on Server running at http://localhost:1234 while hold the command button

The website is now running in the browser. If you change either the HTML or CSS, and save, the website will automatically update.

You now have the development environment required for Workshop One.

The Terminal

When developers talk about the Terminal, the command-line, BASH, shell, or the CLI they are referring to one thing: the application used to give instructions to the operating system.

The terminal is the place where you enter commands/instructions. The shell (program) is the set of instructions you can give to the operating system. The two are used synonymously.

For more on the history of the CLI and the terminal, MDN has a Command line crash course.

On a mac - whose operating system is macOS - this application is Terminal. Terminal opens in the home directory (or folder, it's the same thing). You can confirm this by writing ls which instructs the computer to list the directories (or folders) and files in the current directory.

Command-line instructions

ls
List the files in the current directory
cd ..
Go to the directory above
cd { name of a listed directory }
Go into the named directory
cd ~
Return to the home directory

Related content

Appendix

Terms

Git
Software that keeps track of changes to folders, files and their content.
GitHub
A site that stores projects and tools for editing them according to Git source control practices (i.e. remembering changes).

How to install Git

In Terminal, type git --version. If you don't have Git installed, follow the instructions.

MDN has an introduction to Git and GitHub.

CLI
The Command line interface is the generic term for the application where you write operating system instructions.

On a mac, the command line is accessed using the Terminal application.

GUI
Applications like VS Code that have interactive graphics are graphical user interfaces.
BASH
(Bourne-Again SHell) is a scripting language for writing shell commands (li is one such command). For many years, it was the default shell script for macs.
zsh
z-shell is another scripting language. It has replaced BASH as the default shell on macOS.

How to open VS Code from the command line

After creating a new website using the project generator, you're invited to open it using the command line instruction code .

In order to open a project from the command line in VS Code on a mac:

  1. Open VS Code
  2. Type Command + Shift + P
  3. Type shell command
  4. Select Install 'code' command in PATH
  5. Restart Terminal

Once you have cd'd into a project, you can open it in VS Code by typing code ..

The . means the current location.