You’ve created your first web page: you added content, changed colors, and saw your code come to life in the browser. Congratulations! 🎉

So, what’s next? You don’t have to learn everything at once. Pick a topic, practice it, and build something small.

1. Understand how the web works 🌐

When you type an address into your browser, a few things happen:

  • The domain is the website’s name, such as example.com.

  • DNS helps find the address associated with that name.

  • Your browser requests resources from a server using HTTP and interprets them to display the page.

📚 Getting started with web development — MDN

2. HTML: build the structure 🧱

HTML organizes your page’s content: headings, paragraphs, images, links, and forms.

TypeScript · Illustrative snippet
<h1>Hello! I'm Dhanibel</h1>
<p>This is my first web page.</p>

Challenge: add a list of your interests to your workshop card.

📚 Your first website — MDN

3. CSS: add style 🎨

CSS controls how your page looks: colors, typography, spacing, and layout.

TypeScript · Illustrative snippet
h1 {
  color: purple;
}

Once you’re comfortable with the basics, explore the box model, Flexbox, Grid, and responsive design.

Challenge: change your card’s colors and see how it looks on a phone.

📚 Learn Flexbox through a game — Flexbox Froggy

4. JavaScript: add behavior ✨

JavaScript makes your page respond to actions. For example, it can display a message when someone clicks a button.

Start with variables, functions, conditions, arrays, events, and the DOM, which lets you work with elements on a page.

Challenge: add a button that displays a greeting.

📚 The Modern JavaScript Tutorial

5. Git and GitHub: save and share 💻

Git helps you save versions of your project. GitHub lets you host and share it.

Start with git status, git add, git commit, git push, and git pull.

Challenge: upload your card to a GitHub repository.

📚 GitHub Skills

6. Build small projects 🚀

Practice what you learn with projects that gradually become more challenging:

  1. Customize your workshop card.

  2. Create a personal website.

  3. Build a calculator.

  4. Make a to-do list.

  5. Create a weather app that requests information from an API.

📚 More project ideas — roadmap.sh

7. When should you learn React? ⚛️

First, get comfortable with HTML, CSS, and JavaScript, especially functions, arrays, events, and the DOM. With that foundation, React will make more sense.

Resources in English 📚

Don’t wait until you know everything to start creating. Make imperfect pages, break things, and try again.

Your first web page is just the beginning.

Inspired by my “My First Web Page” workshop.