HTML, CSS & JavaScript

Every page on the web — including this one — is built from three languages that each do one job. HTML (HyperText Markup Language) describes the content and structure: headings, paragraphs, images, links, forms. CSS (Cascading Style Sheets) describes how that content looks: colors, fonts, spacing, layout. JavaScript makes the page interactive: responding to clicks, validating forms, fetching data, updating the page without reloading it.

They are not competing options you choose between — they are layers. The browser reads the HTML first, applies the CSS to style it, and runs the JavaScript to bring it to life. Everything else in frontend development (React, Vue, and every other framework) is built on top of these three.

Always — there is no website without them. The real question is whether you need anything more. For portfolios, landing pages, blogs, and content sites, plain HTML, CSS, and a little JavaScript is often the best choice: it loads fast, has nothing to install or configure, and runs on any host. Frameworks earn their keep when an app has lots of changing state — dashboards, editors, social feeds — but they all assume you know these fundamentals first.

• Elements and tags — HTML is made of nested elements like <h1>, <p>, and <a>. Nesting creates a tree the browser calls the DOM (Document Object Model).
• Selectors and the cascade — CSS rules target elements with selectors (p, .class, #id). When rules conflict, the more specific one wins — that's the "cascading" part.
• The box model — every element is a rectangle with content, padding, border, and margin. Most layout confusion ends once this clicks.
• Variables, functions, and events — JavaScript stores data in variables, groups logic into functions, and reacts to user actions through events like click and submit.
• DOM manipulation — JavaScript can find any element on the page and change it: document.querySelector() to find, .textContent or .classList to change.

<!-- HTML: the structure -->
<button id="greet">Say hello</button>
<p id="output"></p>

<style>
  /* CSS: the look */
  #greet { padding: 8px 16px; border-radius: 6px; }
</style>

<script>
  // JavaScript: the behavior
  document.getElementById("greet").addEventListener("click", () => {
    document.getElementById("output").textContent = "Hello, web!";
  });
</script>

That's a complete interactive web page. Save it as index.html, double-click it, and it runs — no install, no build step, no server.

1. Create a folder, add an index.html file, and open it in your browser. Edit, save, refresh — that's the whole loop.
2. Learn ~20 common HTML tags by building a personal "about me" page: headings, paragraphs, lists, links, and images.
3. Move your styles into a separate styles.css file and experiment with colors, fonts, and flexbox layout.
4. Add a script.js file and make something respond to a click — a dark-mode toggle is a classic first project.
5. Rebuild a simple site you like from scratch. Copying real designs teaches more than any tutorial.