The Professional Developer Workflow

Git is the time machine for your code. It tracks every change you make so you can always go back, collaborate without overwriting each other, and understand the history of a project.

The Daily Git Workflow

# 1. Start a new project
git init

# 2. Check what has changed
git status

# 3. Stage all changes for commit
git add .

# 4. Save a snapshot of your staged changes
git commit -m "feat: add dark mode toggle"

# 5. Push your changes to GitHub
git push origin main

Branching — The Professional Way to Work

Never work directly on main. Create a feature branch, do your work, then merge it in.

# Create and switch to a new branch
git checkout -b feature/login-page

# Do your work, then commit...

# Switch back to main and merge
git checkout main
git merge feature/login-page

# Push to GitHub
git push origin main

Conventional Commits

Use a consistent commit message format. Senior developers and team leads care a lot about a clean Git history.

The .gitignore File

This file tells Git which files/folders to ignore. You must have one in every project.

# Dependencies
node_modules/

# Build output
dist/
build/

# Environment variables (NEVER commit secrets)
.env
.env.local
.env.production

# OS files
.DS_Store
Thumbs.db

# IDE files
.vscode/
.idea/

# Log files
*.log
npm-debug.log*

GitHub Pull Requests

In a team, you don't merge directly. You open a Pull Request (PR) and another developer reviews your code before it's merged.

# 1. Create a feature branch
git checkout -b feature/search-bar

# 2. Make changes, commit them
git add .
git commit -m "feat: add search bar with debounce"

# 3. Push the branch to GitHub
git push origin feature/search-bar

# 4. On GitHub: click "Compare & Pull Request"
# 5. Write a description of your changes
# 6. Request a review from a teammate
# 7. After approval: merge the PR
# 8. Delete the branch (keep repos clean)

Undoing Mistakes in Git

NPM (Node Package Manager) is the world's largest library of open-source code. It lets you use tools and packages that others have built, so you don't reinvent the wheel.

# Initialize a new project (creates package.json)
npm init -y

# Install a package (saved as a dependency)
npm install date-fns

# Install a dev tool (only needed during development)
npm install --save-dev vite

# Run a script defined in package.json
npm run dev
npm run build

The package.json File

{
    "name": "my-portfolio",
    "version": "1.0.0",
    "scripts": {
        "dev":   "vite",
        "build": "vite build"
    },
    "dependencies": {
        "date-fns": "^3.0.0"
    },
    "devDependencies": {
        "vite": "^5.0.0"
    }
}

A project only exists when it's live on the internet. Deploying your project is non-negotiable for a developer portfolio.

Free Hosting Platforms

Core Web Vitals (Google's Speed Score)

Google uses these three metrics to rank pages. A slow site ranks lower in search results.

Your 90-Day Action Plan

What to Learn Next

After completing this course, here is the recommended path to increase your job-readiness:

1. React — The #1 requested front-end skill on job boards. Build on your JS foundation.
2. TypeScript — Adds type safety to JavaScript. Required at most mid-size and large companies.
3. Node.js + Express — Build your own APIs and backend logic.
4. Databases — Learn SQL basics and a service like Supabase or Firebase.
5. Next.js — Full-stack React framework. The current industry standard.

Chrome DevTools is the single most important tool for debugging. Open it with F12 or Ctrl + Shift + I.

Console Power Commands

// Basic logging
console.log('Value:', myVar);

// Table format (perfect for arrays of objects)
console.table(products);

// Grouped logs
console.group('User Data');
console.log('Name:', user.name);
console.log('Role:', user.role);
console.groupEnd();

// Timing code execution
console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch'); // "fetch: 142ms"

// Warning and error styling
console.warn('Deprecated function used');
console.error('Failed to load user data');

Here are the most commonly asked questions in junior web developer interviews. Study these — they come up constantly.

HTML Interview Questions

CSS Interview Questions

JavaScript Interview Questions