Skip to content
Kent Schaeffer Docs

Prepare the Project Environment

Introduction

Section titled “Introduction”

Create the project directory and the three source files your site requires. By the end, you will have a working scaffold — empty, yes, but structurally ready for content. Blank files have a certain optimistic quality to them.

What You Are Building

Section titled “What You Are Building”

Throughout this tutorial you will build a single-page personal profile site. The finished page will include:

  • A sticky top navigation bar with internal anchor links
  • A hero section with a name, title, tagline, and scroll indicator
  • An “About” section with a short bio
  • A skills grid displaying technology tags
  • A contact form with name, email, and message fields
  • A footer with copyright text

The entire site lives in one HTML file, one CSS file, and one JavaScript file. No build tools, no package manager, no framework, no opinions about which framework you should have used instead. Open the HTML file in a browser and it works.

Prerequisites

Section titled “Prerequisites”
  • A text editor installed — see Website Basics for recommendations
  • A terminal or CLI environment
  • A web browser
  • Approximately fifteen minutes and a reasonable tolerance for angle brackets

Step-by-Step Setup

Section titled “Step-by-Step Setup”

  1. Create the Project Directory

    Section titled “Create the Project Directory”

    Choose a parent directory where you keep development projects, then create a new folder. Keep the name lowercase with hyphens and no spaces — spaces in directory names are technically allowed and practically regrettable.

    CLI (macOS / Linux):

    Terminal window
    mkdir -p ~/projects/my-profile-site
    cd ~/projects/my-profile-site

    CLI (Windows PowerShell):

    Terminal window
    New-Item -ItemType Directory -Path "$HOME\projects\my-profile-site"
    Set-Location "$HOME\projects\my-profile-site"

    GUI equivalent: Open Finder or File Explorer, navigate to your projects folder, and create a new folder named my-profile-site.

  2. Create the Source Files

    Section titled “Create the Source Files”

    Three empty files are all you need. One command handles all of them:

    CLI (macOS / Linux):

    Terminal window
    touch index.html style.css script.js

    CLI (Windows PowerShell):

    Terminal window
    New-Item index.html, style.css, script.js -ItemType File

    GUI equivalent: In VS Code, use File > New File three times, saving each with the appropriate name and extension into the project folder.

  3. Verify the Structure

    Section titled “Verify the Structure”

    Confirm all three files exist before moving on — catching a typo in a filename now is much less frustrating than debugging a missing stylesheet reference later:

    CLI:

    Terminal window
    ls -1

    Expected output:

    index.html
    script.js
    style.css

    Your project tree should look like this:

    • Directorymy-profile-site/
      • index.html
      • style.css
      • script.js

  4. (Optional) Initialize a Git Repository

    Section titled “(Optional) Initialize a Git Repository”

    Version control is not required to finish this tutorial, but initializing a repo now costs thirty seconds and gives you a full rollback history as you build. When you inevitably want to undo something, you will be glad it is there.1

    Terminal window
    git init
    git add .
    git commit -m "Initial project scaffold"

  5. (Optional) Start a Local HTTP Server

    Section titled “(Optional) Start a Local HTTP Server”

    Opening index.html directly via the browser works fine for everything in this tutorial. If you later add fetch() calls or ES module imports, browser CORS policy will block them over the file:// protocol. The fix is straightforward — serve the files over HTTP instead:

    Python 3 (built-in, no install needed):

    Terminal window
    python3 -m http.server 8080

    Open http://localhost:8080 in your browser.

    Node.js (npx, also no install needed):

    Terminal window
    npx serve .

    Open http://localhost:3000 in your browser.

    Both do the same job — serve your project folder as a local website. Pick whichever runtime you already have installed. Running a web server on your own machine sounds more impressive at parties than it probably should.

Summary

Section titled “Summary”

You now have a project directory at ~/projects/my-profile-site/ containing three empty, correctly named, UTF-8 plain-text files. The scaffold is ready. Next up: filling index.html with a valid HTML5 document structure — which is where things start to actually look like a website.

Footnotes

Section titled “Footnotes”

  1. Pro Git — Getting Started — the official, free, complete Git reference book. Chapter 1 covers everything you need to get started without overwhelming you with the advanced stuff. ↩