Building Your First Site

Futuristic studio scene with a glowing 3D house model and floating code pieces, symbolizing modern web development

Start with the Basics: HTML, CSS, and JavaScript

Meet HTML: The Foundation

HTML is the web’s structure. It works like a house frame, defining headings, paragraphs, and sections so browsers know what each part is.

Using tags such as <h1>, <p>, and <nav> helps both people and search engines read your page. Choose clear, semantic tags whenever possible.

Overhead laptop displaying HTML code beside nostalgic desk items—underscoring hands-on practice

To show an image, write:

<img src="cat.jpg" alt="A gray cat sleeping peacefully">

The alt text assists screen readers and appears if the picture fails to load. Videos use <video> with one or more <source> files.

Forms collect user data. Wrap inputs in <form> and label them for clarity:

<form>
  <label for="email">Email:</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Send</button>
</form>

Keep a reliable reference handy—MDN’s documentation answers most tag questions.

Cozy bedroom desk with a laptop showing basic HTML document structure—demonstrating real-world context

A typical page starts like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>This is a Title</title>
  </head>
  <body>
    <header>
      <h1>My First Website</h1>
    </header>
    <main>
      <p>Welcome! Here’s my first-ever page.</p>
    </main>
  </body>
</html>

<head> stores meta information, while <body> holds everything visitors see.

Try It

Open a text editor, paste that template, save it as index.html, then double-click the file—your first web page appears.

Monitor with colorful CSS rules and labeled padding, border, margin layers—visualizing style control

CSS: Making It Look Good

CSS is your site’s style guide. Select an element, then assign properties like color, size, or spacing.

h1 {
  color: blue;
  font-size: 36px;
}

Each element follows the box model—content at the core, padding inside, border next, and margin outside.

Transparent screen highlighting Flexbox nav and Grid layout—showing modern layout tools

Selectors range from simple to specific. Flexbox lines items side by side, while Grid arranges full page layouts.

Link styles by adding this inside <head>:

<link rel="stylesheet" href="styles.css">

Experiment with dev tools—change a color and watch the page update instantly.

Neon-lit market scene with developer on phone and holographic alerts—illustrating live JavaScript

JavaScript: Bringing Pages to Life

JavaScript adds interactivity. Attach a click listener to a button and show a greeting:

<button id="helloBtn">Say Hello</button>
<script>
  const button = document.getElementById('helloBtn');
  button.addEventListener('click', () => {
    alert('Hello, world!');
  });
</script>

Arrow functions keep code concise and readable.

Cartoon speech bubble fading after click—demonstrating DOM manipulation

Make content disappear with another quick script:

<p id="secret">Click me to vanish!</p>
<script>
  const secret = document.getElementById('secret');
  secret.addEventListener('click', () => {
    secret.style.display = 'none';
  });
</script>

Follow respected guides—Airbnb’s style guide stresses const and clear naming.

Want to Go Further?

Read Eloquent JavaScript online for free. Practice often: tweak examples, break them, and learn from the results.

Open doorway with floating HTML, CSS, JS icons leading to a bright digital world—representing opportunity

Pulling It All Together

Combine HTML, CSS, and JavaScript to craft anything from a photo gallery to a to-do list. Start small: build a page, style a heading, then add a script. When issues arise, search for answers—someone has solved the same problem before.

Understanding each layer’s purpose lets you create engaging, accessible sites. With these three skills, you hold the keys to the modern web.