# Web Development 🌐

> Building the websites and web apps that people open in a browser — from a school
> homepage to Instagram, M-Pesa portals, and online shops.

[← Back to all career paths](README.md)

---

## What is it?

Web developers build the things you use on the internet every day. There are three flavours:

- **Frontend** — the part you *see and click*: buttons, colours, layouts, animations.
- **Backend** — the part you *don't see*: storing data, logins, payments, sending messages.
- **Full-stack** — a developer who does both.

If you have ever thought *"I could make that website look better"* or *"I wish this app had a
button that did X"* — this field is for you.

---

## What would I actually do?

A typical day might include:

- Turning a designer's idea into a working web page
- Writing code so a button actually *does* something when clicked
- Fixing a bug where the login page won't load
- Making a site work well on phones, not just laptops
- Working in a team, sharing code using tools like **GitHub**

---

## Is this me? ✅

You might love web development if you:

- Enjoy seeing results *quickly* (you write code, refresh, and see it change)
- Like a mix of creativity **and** logic
- Are patient enough to hunt down why something isn't working
- Like building things other people can actually use

---

## Skills to build (in order)

1. **HTML** — the structure of a page (headings, images, buttons)
2. **CSS** — the style (colours, spacing, layout)
3. **JavaScript** — the behaviour (making things interactive)
4. **Git & GitHub** — saving and sharing your code
5. **A framework** (later) — like **React** — for building bigger apps
6. **Backend basics** (optional) — a language like **Python** or **Node.js**, and databases

> 🐢 Go in order. Don't jump to React before you're comfortable with HTML, CSS, and JavaScript.

---

## Free resources

- **[freeCodeCamp](https://www.freecodecamp.org/)** — free, hands-on, from zero to job-ready
- **[The Odin Project](https://www.theodinproject.com/)** — a full free web-dev roadmap
- **[MDN Web Docs](https://developer.mozilla.org/)** — the official reference for HTML/CSS/JS
- **[CodePen](https://codepen.io/)** — write code in your browser, no setup needed
- **[W3Schools](https://www.w3schools.com/)** — simple beginner tutorials
- **[Scrimba](https://scrimba.com/)** — interactive coding lessons

---

## Starter projects 🚀

Start small. Each of these can be built in **CodePen** with no installation.

1. **A personal "About Me" page** — your name, a photo, your dream job.
2. **A colour-changing button** — click it, the background changes.
3. **A to-do list** — add tasks, tick them off.
4. **A simple quiz** — 5 questions about your school or favourite subject.
5. **A tribute page** — celebrate a woman in tech or science you admire.

---

## Your first steps (do these this week)

- [ ] Open [CodePen](https://codepen.io/pen) and write your first `<h1>Hello!</h1>`
- [ ] Complete the first HTML lesson on freeCodeCamp
- [ ] Change the colour of some text using CSS
- [ ] Make a button show a message when clicked (JavaScript)
- [ ] Create a free [GitHub](https://github.com/) account
- [ ] Show a friend or facilitator what you built — sharing keeps you going!

---

## Roles this can grow into

Frontend Developer • Backend Developer • Full-Stack Developer • Web Designer •
Product Engineer • Freelance Web Developer

> 💡 Web development is one of the **easiest fields to freelance in** — many developers earn
> money building websites for small businesses while still studying.