Before your first session

Set up your computer for code. Once, properly.

Nothing kills the first week of learning like three days lost to an installer that failed silently. Work through this in order, run the check command at the end of each step, and you'll start session one writing code instead of troubleshooting.

40 minstart to finish

~3 GBtotal download

Freeevery tool here

Stuck at any point? Send us the exact error text — a screenshot of the red message beats a description of it every time.

Commands shown for

Step 00

What you need before installing anything

None of this needs a powerful machine. It needs a machine you're allowed to install software on, which is the part people forget when they borrow an office laptop.

A laptop

4 GB RAM will work for web. 8 GB makes Flutter and Android emulators bearable. 20 GB free disk. Windows 10+, macOS 12+, or any current Linux.

Administrator rights

You need to be able to install programs and, on Windows, run a terminal as administrator. A locked-down work laptop will fight you the whole way.

Internet for the downloads

Roughly 3 GB in total. Do it on wifi rather than mobile data. After setup you can code offline for most of what we cover.

A folder for your work

One place everything lives, with no spaces in the path. Spaces in folder names break a surprising number of command-line tools.

Command Prompt

# Make one folder for everything you build
mkdir C:\code
cd C:\code

# Make one folder for everything you build
mkdir ~/code
cd ~/code

# Make one folder for everything you build
mkdir ~/code
cd ~/code

Step 01

Visual Studio Code — the editor

This is where you'll spend most of your time. Download it from code.visualstudio.com and accept the default options, except one: on Windows, tick "Add to PATH" during install. It saves you an argument with the terminal later.

Extensions to install

Open the Extensions panel with Ctrl+Shift+X (Cmd+Shift+X on Mac) and search for each of these.

Live Server Opens your HTML in a browser that refreshes as you type. The single most useful one when you're starting.
Prettier Formats your code on save so you stop arguing with yourself about indentation.
Auto Rename Tag Change an opening tag and the closing one follows.
ESLint Points at your JavaScript mistakes before the browser does.
PHP Intelephense Autocomplete and error checking for PHP.
Error Lens Puts the error message on the line itself instead of hiding it in a panel.

Settings worth changing on day one

Press Ctrl+Shift+P, type Preferences: Open User Settings (JSON), and paste this in.

settings.json

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "boundary",
  "files.autoSave": "afterDelay",
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "emmet.triggerExpansionOnTab": true
}

Why files.eol matters. Windows and everyone else disagree about how a line ends. Setting it now stops Git later telling you that you changed all 400 lines of a file when you only touched one.

Step 02

A browser you can debug in

Install Google Chrome or Firefox Developer Edition. Whichever you pick, learn to open DevTools with F12 — you'll use it constantly.

Elements The live HTML and CSS. Edit it here to test an idea before changing your file.
Console Where JavaScript errors appear. Read the first one; the rest are usually caused by it.
Network What loaded, how big it was and how long it took.
Device toolbar Ctrl+Shift+M to see your page at phone size. Use it from the first day, not the last.

Step 03

Git — so you never lose work again

Install from git-scm.com. On Windows, accept the defaults but choose "Git from the command line and also from 3rd-party software" when asked.

Tell Git who you are

git config --global user.name "Your Name"
git config --global user.email "you@example.com"
git config --global init.defaultBranch main

# Check it worked
git --version

Use the same email as your GitHub account, or your commits won't be linked to your profile. Then create a free account at github.com — your course project will live there, and it's the first thing an employer looks at.

Every project needs a .gitignore

This tells Git what not to save. Getting it wrong is how passwords end up public.

.gitignore

# Dependencies — these get reinstalled, never committed
node_modules/
vendor/
__pycache__/

# Secrets — the single most important line here
.env
config.local.php

# Build output
dist/
build/

# Operating system noise
.DS_Store
Thumbs.db

Once a secret is committed, deleting it later is not enough. It stays in the history and it stays readable. If it ever reaches GitHub, change the password or key itself — don't just remove the line.

Step 04

PHP and MySQL

Only needed for the PHP and MySQL courses. This gives you a web server, PHP and a database on your own machine, so you can build the same stack most Nigerian businesses actually run on.

Install Laragon from laragon.org. It's lighter than XAMPP, it doesn't fight with Windows over port 80, and the "Start All" button genuinely starts everything. Put your projects in C:\laragon\www.

Install and verify

# Laragon bundles PHP and MySQL. After installing, open its
# terminal from the Laragon window and check both:
php -v
mysql --version

brew install php mysql
brew services start mysql

# Check both
php -v
mysql --version

sudo apt update
sudo apt install php php-mysqli mysql-server

# Check both
php -v
mysql --version

PHP has a server built in, which is often all you need while learning. From inside a project folder:

Run a PHP project

php -S localhost:8000

# Now open http://localhost:8000 in your browser

Step 05

Node.js and npm

Needed for the React and Tailwind courses. Download the LTS version from nodejs.org — not the "Current" one, which is for people who enjoy breakage.

Verify, then make something

node -v     # expect v20 or newer
npm -v      # expect v10 or newer

# A React project, running in about a minute
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

If npm install is painfully slow on a Nigerian connection, run npm config set registry https://registry.npmmirror.com to use a faster mirror. Switch back with npm config delete registry if you hit a missing package.

Step 06

Python

Download from python.org. On Windows there is one checkbox that matters, on the very first installer screen: "Add python.exe to PATH". Miss it and nothing below will work.

Verify and create a virtual environment

python --version
pip --version

# A virtual environment keeps each project's packages separate
python -m venv venv
venv\Scripts\activate
pip install requests pandas

python3 --version
pip3 --version

# A virtual environment keeps each project's packages separate
python3 -m venv venv
source venv/bin/activate
pip install requests pandas

python3 --version
sudo apt install python3-venv python3-pip

# A virtual environment keeps each project's packages separate
python3 -m venv venv
source venv/bin/activate
pip install requests pandas

When the environment is active your prompt starts with (venv). That's how you know packages are going into the project rather than all over your machine.

Step 07

Flutter and Dart

The heaviest install here — budget an hour and about 10 GB. Follow the official guide at docs.flutter.dev, then install Android Studio for the Android toolchain and emulator.

Let Flutter check its own setup

flutter doctor

# It prints a checklist. Work down the ✗ marks one at a time —
# it tells you the exact command to fix each one.

flutter doctor --android-licenses
flutter create hello_app
cd hello_app
flutter run

A real phone beats an emulator on a machine with 8 GB of RAM. Turn on Developer Options and USB debugging on your Android phone, plug it in, and flutter run will find it.

Your first files

Two files, one page. Type them, don't paste them.

Typing it is how it sticks. Make a folder called first-site, create these two files inside it, then right-click index.html in VS Code and choose Open with Live Server.

first-site/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ada Okoro — Developer</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!-- Header: who this page is about -->
  <header class="hero">
    <p class="tag">Front-end developer in training</p>
    <h1>Ada Okoro</h1>
    <p>Three weeks in. This is the first page I built by hand.</p>
  </header>

  <main>
    <section class="card">
      <h2>What I can do so far</h2>
      <ul>
        <li>Structure a page with semantic HTML</li>
        <li>Lay things out with Flexbox</li>
        <li>Make it work on a phone</li>
      </ul>
      <a class="btn" href="mailto:ada@example.com">Hire me</a>
    </section>
  </main>

</body>

</html>

first-site/style.css

/* Custom properties: name your colours once, use them everywhere */
:root {
  --ink: #0E2A47;
  --amber: #FF8A3D;
  --paper: #F5F7FA;
  --muted: #5B7086;
}

/* Border-box makes width mean what you think it means */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

.hero {
  background: var(--ink);
  color: #fff;
  padding: 64px 24px;
}

.hero h1 {
  margin: 8px 0;
  /* clamp: never smaller than 32px, never bigger than 56px */
  font-size: clamp(32px, 6vw, 56px);
  letter-spacing: -0.02em;
}

.tag {
  margin: 0;
  color: var(--amber);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.card {
  max-width: 640px;
  margin: -32px auto 48px;
  padding: 32px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 40px -24px rgba(14, 42, 71, 0.35);
}

.card ul { padding-left: 20px; color: var(--muted); }

.btn {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }

/* Mobile first: this only applies on wider screens */
@media (min-width: 640px) {
  .hero { padding: 96px 48px; }
}

What those two files produce

A live rendering of the exact code above, so you can check yours against it.

Live result

Front-end developer in training

Ada Okoro

Three weeks in. This is the first page I built by hand.

What I can do so far

Structure a page with semantic HTML
Lay things out with Flexbox
Make it work on a phone

Hire me

Break it on purpose. Change --amber to #00A878 and watch every orange thing on the page turn green at once. That's the whole point of custom properties, and it's a lesson that lands faster by doing than by reading.

Convention

How to lay a project out

Use this shape from the start. It's what nearly every real codebase looks like, so it will feel familiar the first time you open someone else's.

Project folder

my-project/
├── index.html          # the page people land on
├── about.html
├── css/
│   └── style.css       # all your styles
├── js/
│   └── main.js         # all your scripts
├── images/
│   └── logo.png
├── .gitignore          # what Git should skip
└── README.md           # what this is and how to run it

Lower case, hyphens, no spaces. about-us.html, never About Us.html. Linux servers are case-sensitive even when your laptop isn't, and that is the classic "it worked on my machine" bug.
One stylesheet to begin with. Split it up when it genuinely hurts, not before.
Always write the README. Two lines is enough: what this project is, and how to run it. Future you will be grateful.

When it goes wrong

The five problems everybody hits

"'python' is not recognised as a command"

The PATH checkbox was missed during install. Re-run the installer, choose Modify, and tick Add to PATH. Then close every terminal window and open a new one — an open terminal never notices a PATH change.

"Port 80 is already in use"

Something else has the port, usually Skype or IIS on Windows. Change your server's port to 8080 in its settings rather than hunting the culprit. Then visit localhost:8080.

"My CSS changes aren't showing"

Nine times in ten it's the browser cache. Hard refresh with Ctrl+Shift+R. If that doesn't do it, check the path in your <link> tag and the spelling of the filename, including its capitals.

"npm install fails with a permissions error"

Don't reach for sudo — that causes worse problems later. Make sure you're inside your own project folder and that you own it. On Windows, run the terminal as administrator once and try again.

"Git says 'fatal: not a git repository'"

You're in the wrong folder, or you haven't run git init yet. Run pwd (or cd alone on Windows) to see where you actually are.

How to ask for help so you get an answer. Paste the exact error text, say what you typed just before it, and name your operating system. Those three things solve most problems in one reply. "It's not working" cannot be answered by anyone.

Set up and ready to learn?

Every course starts with a free setup session, so if any of this defeated you, that's genuinely fine — bring the laptop and we'll get it working together.

See the courses → Ask a question