Headshot of Chris White

A Cup of Web Development - Essential Tools and Concepts In Action

Estimated read time: 4 min

This article is second in a series of blog I'm writing to help beginners learn web development. Let's get started.

An Introduction to Developing on Your Localhost

Step 1: Install Homebrew & Git

Homebrew is the missing package manager for Mac. It simplifies the installation and maintenance of most of your development toolkit. Homebrew is cross platform and works on Linux as well.

  1. Use Spotlight Search to open your terminal

  2. Install Homebrew using cURL by running the following command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. Add Homebrew to PATH once the installation is complete:
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
The default shell on Mac is Zsh. Replace~/.zshrcwith~/.bashrcif you're running Bash.
  1. Install Git:
brew install git
Git is a version control system that helps developers track changes to source code.

Step 2: Install Visual Studio Code, add to PATH, and install Live Server extension

  1. Download and install Visual Studio Code, aka, VS Code
  2. Open VS Code
  3. Inside VS Code, press Cmd + Shift + P
  4. Type shell command in the dropdown input
  5. Select Install 'code' command in PATH
  6. Click the Extensions icon in the Activity Bar on the far left
The icon looks like a Tetris block. Alternatively, you can press Cmd + Shift + X to open Extensions in the Explorer.
  1. Search for Live Server by Ritwick Dey
The icon is purple and looks like a broadcasted radio signal.
  1. Click Install

Step 3: Create your first project using HTML & CSS

  1. Open your terminal and make a directory at ~ called Develop:
mkdir ~/Develop
  1. Change into Develop and make a directory called myFirstHtml:
cd Develop
mkdir myFirstHtml
  1. Change into myFirstHtml and create two files, index.html & styles.css:
cd myFirstHtml
touch index.html
touch styles.css
  1. Open index.html in VS Code and add the following HTML boilerplate:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First HTML</title>
  </head>
  <body>
    <h1>Hello World, My First HTML!</h1>
  </body>
</html>
  1. Open styles.css in VS Code and add the following CSS:
h1 {
  background-color: black;
  color: white;
}
  1. Import styles.css by adding a <link> tag in the <head> of index.html:
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
  1. Serve the project in the browser using Live Server
  • Click the Go Live button in the bottom right corner of your IDE (VS Code)
  • Wait for the for the message Starting... to disappear and Port: 5500 appears
  • Live Server should open a new browser at http://127.0.0.1:5500/
  • You can also manually navigate to http://localhost:5500/ in your browser
  • Upon celebrating your success you may click the Port: 5500 button to dispose of the Live Server and move on to your next task

Step 4: Create a GitHub account and configure SSH keys

  1. If you don't already have one, create a GitHub account.

  2. I would write the rest of this tutorial, but GitHub has done a great job with documentation. Follow each of these tutorials carefully and in order:

Step 5: Create a repository and push your first commit to GitHub

  1. Follow GitHub's documentation on creating a new repository

  2. Follow GitHub's documentation on adding locally hosted code to GitHub

GitHub's tutorial on adding locally hosted code can be somewhat confusing. Feel free to run the following commands from the root directory of your project for the same effect:

> Change directory to root
cd ~/Develop/myFirstHtml

> Initialize Git
git init

> Stage all changes
git add .

> Create commit
git commit -m "Initial commit"

> Change branch name
git branch -M main

> Add your remote origin
git remote add origin [email protected]:your_username/myFirstHtml.git

> Push to GitHub
git push -u origin main

Congratulations! You've set up your first HTML/CSS project, served it with Live Server, and pushed it to GitHub. Don't fret if you weren't able to understand all of this or get the project running. In the next article we're going to learn how to learn web development. Come back later and give this another shot.

As additional material, please read this primer on Git and GitHub. You might also want to save this Git Cheat Sheet from GitHub.

What's next?: A Pound of Web Development

Check out my other posts from this blog series:
Tablespoon of Web DevelopmentCup of Web DevelopmentPound of Web Development