LearnToDev

frontend

Phase 0: The Handshake

Setting up your environment and understanding how the web works.

Phase 0: The Handshake 🤝

Before we write a single line of code, we need to prepare your machine. This phase is inspired by the "Foundations" approach of The Odin Project—focusing on local development rather than browser sandboxes.

Think of this as laying the foundation before building a house. Skip these steps, and you'll constantly struggle with basic tasks. Invest the time now, and everything else becomes easier.

What you'll accomplish:

  • Understand how websites actually work under the hood
  • Set up a professional development environment
  • Master the command line basics
  • Learn version control with Git and GitHub
  • Create your first public repository

1. Mental Model: How the Web Works

Before you build for the web, you must understand it. When you type google.com into your browser and press Enter, a complex chain of events occurs in milliseconds:

The Journey of a Web Request

Step 1: DNS Lookup (The Phonebook) Your browser doesn't understand "google.com"—it needs an IP address like 142.250.185.46. The Domain Name System (DNS) translates human-readable names into machine addresses.

Think of DNS like your phone's contact list: you tap "Mom," but your phone actually dials +1-555-0123.

Step 2: The HTTP Request Your browser sends a request to Google's server asking for the website files:

GET / HTTP/1.1
Host: google.com
User-Agent: Mozilla/5.0...
Accept: text/html,application/xhtml+xml...

Step 3: Server Processing Google's server receives your request, processes it, and prepares a response containing HTML, CSS, JavaScript, and other assets.

Step 4: The Response The server sends back the files your browser needs:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 12345

<!DOCTYPE html>
<html>...

Step 5: Rendering Your browser's rendering engine (Blink in Chrome, Gecko in Firefox, WebKit in Safari) parses the HTML, applies CSS styles, executes JavaScript, and paints pixels on your screen.

This entire process—from typing to seeing the page—happens in under a second.

Client-Server Architecture

The web follows a client-server model:

  • Client (Frontend): Your browser, running on your device
  • Server (Backend): A computer somewhere that stores website files and processes requests
  • Communication Protocol: HTTP/HTTPS defines how they talk to each other
┌─────────────┐         Request          ┌─────────────┐
│   Browser   │ ───────────────────────> │   Server    │
│  (Client)   │                           │             │
│             │ <─────────────────────── │             │
└─────────────┘         Response         └─────────────┘

Key Web Technologies

HTML - The structure (skeleton)
CSS - The presentation (skin, clothes)
JavaScript - The behavior (muscles, brain)

You'll learn each of these in depth, but understanding this trinity is fundamental.

Deepen Your Understanding

Watch: How the Internet Works in 5 Minutes - Quick visual overview
Read: MDN - How the Web Works - Comprehensive explanation
Interactive: DNS Explained - How Your Browser Finds Websites - Visual, interactive guide

Challenge Question: What happens if a DNS server goes down? How would that affect your ability to browse the web?

2. The Professional Environment

Real developers don't code in browser sandboxes like CodePen or Replit. While those tools are great for quick experiments, professional work requires a local development environment.

The Code Editor: VS Code

Visual Studio Code (VS Code) is the industry standard editor, used by over 70% of developers according to the Stack Overflow Developer Survey. It's free, powerful, and extensible.

Installation:

  1. Download: Visit code.visualstudio.com
  2. Install: Follow the installer for your operating system
  3. Launch: Open VS Code and get familiar with the interface

Interface Overview:

  • Activity Bar (left side): Access Explorer, Search, Source Control, Extensions
  • Side Bar: Shows different views depending on Activity Bar selection
  • Editor: Where you write code (supports multiple tabs and split views)
  • Panel: Houses terminal, problems, output, debug console
  • Status Bar (bottom): Shows file info, Git branch, errors/warnings

Essential VS Code Extensions

Extensions add superpowers to VS Code. Install these immediately:

Prettier - Code Formatter

  • Automatically formats your code to industry standards
  • Press Shift + Alt + F (Windows/Linux) or Shift + Option + F (Mac) to format
  • Install: Search "Prettier" in Extensions panel

ESLint

  • Identifies and fixes JavaScript code problems
  • Highlights errors and style issues in real-time
  • Install: Search "ESLint" in Extensions

Auto Close Tag

  • Automatically closes HTML/XML tags
  • Saves countless keystrokes
  • Install: Search "Auto Close Tag"

Live Server

  • Launches a local development server with live reload
  • Changes appear instantly in the browser
  • Install: Search "Live Server"

Bonus Extensions:

  • Path Intellisense - Autocompletes file paths
  • Bracket Pair Colorizer 2 - Makes nested code easier to read
  • GitLens - Supercharges Git capabilities
  • Material Icon Theme - Better file icons

Keyboard Shortcuts to Memorize:

  • Ctrl/Cmd + P - Quick file open
  • Ctrl/Cmd + Shift + P - Command palette (access any VS Code command)
  • Ctrl/Cmd + B - Toggle sidebar
  • Ctrl/Cmd + J - Toggle terminal panel
  • Ctrl/Cmd + / - Toggle line comment
  • Alt + Up/Down - Move line up/down
VS Code Settings Sync

Enable Settings Sync to back up your extensions, settings, and keyboard shortcuts to the cloud. Click the gear icon → "Turn on Settings Sync." This saves your setup if you switch computers or need to reinstall.

The Terminal: Your New Home

The Command Line Interface (CLI) might seem intimidating at first, but it's faster and more powerful than clicking through folders. You'll use it constantly for Git, running development servers, installing packages, and more.

Windows Users: You have several options:

  1. WSL2 (Recommended): Windows Subsystem for Linux gives you a real Linux environment
  2. Git Bash: Comes with Git installation, provides Unix-like commands
  3. PowerShell: Windows native, but syntax differs from Unix

Mac/Linux Users: The built-in Terminal works perfectly. Find it in Applications → Utilities → Terminal (Mac) or your system's app menu (Linux).

Open Terminal in VS Code: Press Ctrl/Cmd + ` or go to View → Terminal. This integrated terminal is where you'll spend much of your time.

Essential Terminal Commands

Navigation:

pwd                    # Print working directory (where am I?)
ls                     # List files and folders (Mac/Linux/Git Bash)
dir                    # List files and folders (Windows CMD/PowerShell)
cd Documents           # Change directory to Documents
cd ..                  # Go up one level
cd ~                   # Go to home directory
cd /                   # Go to root directory

File & Folder Operations:

mkdir my-project       # Create a new folder
touch index.html       # Create a new file (Mac/Linux/Git Bash)
echo. > index.html     # Create a new file (Windows CMD)
New-Item index.html    # Create a new file (PowerShell)
rm filename.txt        # Delete a file
rm -r foldername       # Delete a folder and its contents
mv old.txt new.txt     # Rename/move a file
cp file.txt copy.txt   # Copy a file

Useful Commands:

clear                  # Clear the terminal screen
code .                 # Open current folder in VS Code
code filename.txt      # Open specific file in VS Code
cat filename.txt       # Display file contents
history                # Show command history

Pro Tips:

  • Press Tab to autocomplete file/folder names
  • Press Up Arrow to cycle through previous commands
  • Press Ctrl/Cmd + C to cancel current command
  • Type cd then drag a folder into the terminal to get its path
Be Careful with rm

The rm command permanently deletes files—there's no recycle bin. Always double-check what you're deleting. Consider creating an alias for safer deletion that moves files to trash instead.

Terminal Practice Exercise

Open your terminal and practice:

# Create a practice folder on your desktop
cd ~/Desktop
mkdir terminal-practice
cd terminal-practice

# Create some files
touch index.html
touch styles.css
touch script.js

# Create a subfolder
mkdir images

# List everything
ls -la

# Navigate and create more
cd images
touch logo.png
cd ..

# Open in VS Code
code .

3. Version Control (Git & GitHub)

Git is your "time machine" for code. It tracks every change, lets you revert mistakes, enables collaboration, and serves as backup. GitHub is where you host these repositories publicly.

Why Git Matters:

  • Track changes: See what changed, when, and why
  • Undo mistakes: Revert to any previous state
  • Collaborate: Work on projects with others without conflicts
  • Backup: Your code lives in the cloud
  • Portfolio: GitHub is your professional showcase

Installing Git

Windows:

  1. Download from git-scm.com
  2. Run installer (accept defaults, but choose VS Code as default editor)
  3. Verify: Open terminal and type git --version

Mac: Git might already be installed. Check with git --version in terminal.

  • If not installed: Download from git-scm.com
  • Or install via Homebrew: brew install git

Linux:

sudo apt-get install git     # Debian/Ubuntu
sudo yum install git         # Fedora

Configuring Git

Tell Git who you are. This information appears in your commit history:

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

Optional but recommended configurations:

# Set VS Code as default editor
git config --global core.editor "code --wait"

# Use better diff colors
git config --global color.ui auto

# Set default branch name to 'main'
git config --global init.defaultBranch main

# View all settings
git config --list

Creating a GitHub Account

GitHub is the world's largest code hosting platform, with over 100 million developers.

  1. Sign up: Visit github.com
  2. Choose username carefully: This becomes part of your professional identity (github.com/yourusername)
  3. Enable Two-Factor Authentication: Settings → Password and authentication → Enable 2FA
  4. Complete your profile: Add a bio, location, and profile picture

GitHub Profile Tips:

  • Use a professional username (avoid "coolcoder420")
  • Add a clear profile photo (or professional avatar)
  • Write a bio explaining what you're learning/building
  • Pin your best repositories to your profile
  • Enable "Available for hire" once you're ready

Git Basics: Essential Commands

Initialize a repository:

git init

Creates a new Git repository in the current folder. You'll see a hidden .git folder appear.

Check status:

git status

Shows which files are modified, staged, or untracked. Use this constantly.

Stage files:

git add filename.txt        # Stage specific file
git add .                   # Stage all changes
git add *.html              # Stage all HTML files

Staging prepares files for commit. Think of it as choosing which changes to include in your next "save point."

Commit changes:

git commit -m "Add homepage structure"

Creates a snapshot of staged changes. The message should describe what changed and why.

Good commit messages:

  • ✅ "Add user authentication form"
  • ✅ "Fix navigation menu alignment on mobile"
  • ✅ "Update README with installation instructions"
  • ❌ "changes"
  • ❌ "stuff"
  • ❌ "asdfasdf"

View commit history:

git log                     # Full history
git log --oneline          # Compact view
git log --graph --oneline  # Visual branch graph

Connect to GitHub:

git remote add origin https://github.com/yourusername/repo-name.git

Links your local repository to GitHub. You only do this once per project.

Push to GitHub:

git push -u origin main

Uploads your commits to GitHub. The -u flag sets the upstream, so future pushes just need git push.

Pull from GitHub:

git pull

Downloads and merges changes from GitHub. Important when collaborating or working from multiple computers.

The Git Workflow

This is the cycle you'll repeat hundreds of times:

# 1. Make changes to your files in VS Code

# 2. Check what changed
git status

# 3. Stage the changes
git add .

# 4. Commit with a descriptive message
git commit -m "Add contact form validation"

# 5. Push to GitHub
git push
Git Branching (Preview)

Branches let you work on features without affecting the main codebase. While you don't need this for Phase 0, you'll use it constantly later:

git branch feature-name      # Create a branch
git checkout feature-name    # Switch to it
git checkout -b feature-name # Create and switch in one command
git merge feature-name       # Merge branch into current branch

Learn more: Learn Git Branching - Interactive visual tutorial

4. Phase 0 Project: The Handshake Repo

To complete this phase, you must prove you can use your tools. This project ties everything together.

Project Requirements

Step 1: Create Local Folder Structure

# Navigate to where you want your projects
cd ~/Documents  # or wherever you prefer

# Create your journey folder
mkdir learntodev-journey

# Enter the folder
cd learntodev-journey

Step 2: Create README File

# Create the file
touch README.md  # Mac/Linux/Git Bash
echo. > README.md  # Windows CMD

Step 3: Write Your Story

Open README.md in VS Code and write a paragraph about:

  • Why you want to become a developer
  • What you hope to build
  • What excites you about coding
  • Your learning goals

Example README:

# My Developer Journey 🚀

## About Me
I'm learning web development to transition from marketing into tech. 
I've always been fascinated by how websites work, and I'm ready to 
move from consumer to creator.

## Goals
- Build responsive, accessible websites
- Contribute to open source projects
- Land my first developer role within 12 months

## Current Focus
Working through LearnToDev's structured curriculum, starting with 
HTML/CSS fundamentals and progressing toward full-stack development.

---

*Started: January 2026*

Step 4: Initialize Git Repository

# Make sure you're in learntodev-journey folder
pwd

# Initialize Git
git init

# Check status
git status

You should see README.md as an untracked file.

Step 5: Make Your First Commit

# Stage the README
git add README.md

# Commit with a meaningful message
git commit -m "Initial commit: Add README with learning goals"

# Verify it worked
git log

Step 6: Create GitHub Repository

  1. Go to github.com (sign in if needed)
  2. Click the + icon in top right → "New repository"
  3. Repository name: learntodev-journey
  4. Description: "My web development learning journey"
  5. Public (so others can see your progress)
  6. DO NOT initialize with README (you already have one locally)
  7. Click "Create repository"

Step 7: Connect and Push

GitHub will show you commands. Copy the "push an existing repository" section:

git remote add origin https://github.com/YOUR-USERNAME/learntodev-journey.git
git branch -M main
git push -u origin main

Replace YOUR-USERNAME with your actual GitHub username.

Step 8: Verify Success

Visit https://github.com/YOUR-USERNAME/learntodev-journey in your browser. You should see your README displayed!

Congratulations! 🎉

Once you see your README file on GitHub.com, you have successfully completed Phase 0. You now have:

✅ A professional code editor (VS Code)
✅ Command line proficiency
✅ Git version control skills
✅ A public GitHub repository
✅ The foundation for everything that follows

Next Step: Take a screenshot of your GitHub repository page and celebrate this milestone. You've just joined millions of developers using the same professional tools.

5. Troubleshooting Common Issues

"git: command not found"

  • Solution: Git isn't installed or not in your PATH. Reinstall Git and restart your terminal.

"Permission denied (publickey)"

  • Solution: You need to set up SSH keys or use HTTPS instead. For beginners, HTTPS is easier. When pushing, use the HTTPS URL.

"fatal: not a git repository"

  • Solution: You're not in a folder with Git initialized. Run git init first, or cd into the correct folder.

"Please tell me who you are"

  • Solution: Run the git config --global commands to set your name and email.

Can't push to GitHub

  • Solution: Check if the repository exists on GitHub and the remote URL is correct: git remote -v

Files not staging

  • Solution: Make sure you're in the correct directory. Run pwd to check, and git status to see what Git sees.

6. Resources for This Phase

Core Learning Paths:

Understanding the Web:

Command Line:

Git & GitHub:

VS Code:

Optional Enhancements:

Communities:

Bonus Challenges

Level Up Your Setup:

  1. Customize VS Code: Change your theme (try "One Dark Pro" or "Dracula"), adjust font size, enable auto-save
  2. Create a .gitignore: Learn what files to exclude from Git (node_modules, .env, .DS_Store)
  3. Set up SSH keys: More secure than HTTPS - GitHub SSH Guide
  4. Practice Git branching: Create a branch, make changes, merge it back
  5. Explore GitHub: Star repositories you find interesting, follow developers, explore trending projects

Document Your Journey: Add entries to your README as you progress. Future employers love seeing continuous learning documented publicly.

The Path Forward

You've laid the foundation. Every professional developer uses these exact tools—VS Code, Git, GitHub, and the terminal. You're now equipped with the same arsenal.

What's next:

  • Phase 1 will dive into HTML fundamentals
  • You'll create actual web pages that live on the internet
  • Every project will be committed to Git and pushed to GitHub
  • Your GitHub profile will grow into a portfolio

The learning curve might feel steep right now, but stick with it. In a few weeks, these tools will feel natural. In a few months, you'll wonder how you ever worked without them.

Remember: Every senior developer you admire started exactly where you are now—confused by Git, intimidated by the terminal, unsure if they could do this. They succeeded not because they were special, but because they kept showing up and practicing.

Your journey has begun. Keep going. 🚀