What Are the Basics of Web Development You Must Know?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Website</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my first web page.</p>

    <a href="https://example.com">Visit example.com</a>

    <img src="photo.jpg" alt="A sample image" />

    <ul>
      <li>HTML for structure</li>
      <li>CSS for style</li>
      <li>JS for behavior</li>
    </ul>
  </body>
</html>

What each line does:

<!DOCTYPE html>
  → Tells the browser: this is HTML5

<html lang="en">
  → The root element, in English

<head>...
  → Metadata — title, character set, CSS links
  → Nothing here shows on the page

<body>...
  → Everything the user actually sees

<h1>Welcome!</h1>
  → A top-level heading

<p>...
  → A paragraph of text

<a href="...">...
  → A link to another URL

<img src="..." alt="..." />
  → An image with alt text (accessibility)

<ul><li>...</li></ul>
  → An unordered (bulleted) list

That's HTML. It's descriptive, not logical.

/* CSS — styling the HTML above */
body {
  font-family: Arial, sans-serif;
  max-width: 700px;
  margin: 40px auto;
  padding: 20px;
  color: #333;
  background: #f9f9f9;
}

h1 {
  color: #0b6e75;
  font-size: 32px;
}

a {
  color: #078be4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  border-radius: 8px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;
}

What CSS actually controls:

Typography
  • Fonts, sizes, weights, spacing

Colors
  • Text color, background, borders

Layout
  • How elements are arranged (flexbox, grid)

Spacing
  • Padding (inside), margin (outside)

Responsiveness
  • How the page adapts to mobile/tablet/desktop

Interactivity hints
  • Hover states, focus rings, transitions

CSS is surprisingly deep. Basics take
2–3 weeks. Real fluency takes 3–4 months
because layout and responsiveness are hard.

// JavaScript — making the page interactive
const button = document.querySelector("#add-btn");
const counter = document.querySelector("#count");

let count = 0;

button.addEventListener("click", () => {
  count++;
  counter.textContent = count;

  if (count >= 10) {
    counter.style.color = "green";
  }
});

// Fetching data from an API
async function loadUsers() {
  const response = await fetch("https://reqres.in/api/users");
  const data = await response.json();

  return data.data;
}

// Modern JS also gives you:
// - arrow functions (() => {})
// - template strings `${variable}`
// - destructuring
// - modules (import/export)
// - promises and async/await

What JavaScript actually does:

Interactivity
  • Handle clicks, keypresses, form submits

DOM manipulation
  • Change HTML dynamically (without reloading)

Data fetching
  • Call APIs, get JSON, update the page

Storage
  • localStorage, sessionStorage, cookies

Logic
  • Conditionals, loops, functions

Why JS is harder than HTML/CSS:
  • It's a real programming language
  • You have to learn logic, functions,
    async flow, error handling

But it's also the most valuable skill —
it unlocks frontend frameworks, backend
(Node.js), and full-stack careers.