Before writing your first lines of code, you must equip your computer with the industry-standard tools that every professional web developer uses daily. This page acts as your central hub for Phase 0, listing all setup subtopics, cheatsheets, and quick navigation links.
Lesson: p0-setup
Before writing your first lines of code, you must equip your computer with the industry-standard tools that every professional web developer uses daily. This page acts as your central hub for Phase 0, listing all setup subtopics, cheatsheets, and quick navigation links.
Before you download any tools or write code, you must master the fundamental mechanics of using a computer for software development. This helps build muscle memory and breaks down technical anxieties.
Practice navigating files and directories in the interactive Windows 11 simulator below:
Always create Nextsem as your main workspace directly on your Desktop. Store weekly exercises inside separate Week-X folders to avoid visual noise and path confusion.
Do not put spaces in directory names (e.g. Week 1). The space character breaks server asset path URLs. Use hyphens like Week-1 instead.
Develop fast muscle memory for these daily shortcut commands. You will use them thousands of times:
| Shortcut | Action | Why it is Crucial for Developers |
|---|---|---|
| Ctrl + C | Copy Selected Items | Copies code, commands, or text to clipboard. |
| Ctrl + V | Paste Copied Items | Pastes code or commands instantly. |
| Ctrl + Z | Undo Last Action | The "Time Machine" key—recovers deleted code instantly! |
| Ctrl + Y | Redo Last Action | Re-applies the change you just undid. |
| Ctrl + S | Save Current File | Crucial: Unsaved work will vanish if VS Code or your computer closes! |
| Alt + Tab | Switch Windows | Quickly toggle between your browser preview and code editor. |
Developers must be organized. On your computer's Desktop, create a folder named Nextsem and set up the following folders to store your weekly labs. Do NOT keep files scattered:
Desktop/
└── Nextsem/
├── Week-1/
├── Week-2/
└── assets/
Web browsers read folder and file names as web URLs. Spaces inside file names will break your web application URLs!
my first web page.html (causes broken %20 signs in URL browser address)my-first-web-page.html (always use hyphens - instead of spaces)To understand how modern websites function, visualize them using this simple anatomical analogy:
Click any of the modules below to navigate to the detailed lesson:
Learn to navigate folders and create directories like a pro without using a mouse.
pwd), list folders (ls), change directory (cd), and make folder (mkdir).Download and configure the core developer toolchain.
Configure your code editor for maximum efficiency.
Keep track of code changes and collaborate with teams.
git init), staging files (git add), saving commits (git commit), and remote uploads.Inspect elements and troubleshoot code directly inside the browser.
A quick-reference guide for navigating directories and managing files:
| Command | Purpose | Example |
| :--- | :--- | :--- |
| pwd | Print current folder path | pwd |
| ls | List all files in the current folder | ls |
| cd <folder> | Move inside a specific folder | cd Documents |
| cd .. | Move back one folder | cd .. |
| mkdir <name> | Create a new folder | mkdir nextsem-projects |
| touch <name> | Create a new empty text or code file | touch index.html |
| rm <name> | Delete a file | rm index.html |
The standard Git commands you will use on every project:
# 1. Start a new repository inside your project folder
git init
# 2. Check which files were added or modified
git status
# 3. Stage all changed files for a snapshot
git add .
# 4. Commit and save the snapshot with a descriptive message
git commit -m "feat: complete introduction html structure"
# 5. Upload your local commits to GitHub (cloud)
git push origin main
Before moving to Phase 1 (HTML Basics), make sure you have checked off the following:
node -v and git --version in terminal prints active versions.git init, and create an HTML page inside it.