HTML, CSS & JavaScript

What is it?

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.

When to use it

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.

Core concepts

• 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.

A taste of the code

<!-- 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.

Your first steps

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.

Common beginner mistakes

• Using <div> for everything. Buttons, links, headings, lists and landmarks like <nav> and <main> give you keyboard support, screen-reader meaning and better SEO for free.
• Fighting layout with floats and magic numbers. Flexbox handles rows and columns of items; Grid handles two-dimensional page layouts. Add box-sizing: border-box globally so widths include padding.
• Running scripts before the page exists. A script in the <head> that looks for elements will find nothing. Add defer to the script tag, or load it at the end of the body.
• == instead of ===, and var instead of let/const. Loose equality and function-scoped variables cause surprising bugs; modern JavaScript avoids both.
• Learning from jQuery-era tutorials. document.querySelector, fetch and classList now do natively what jQuery was once needed for.

Getting it online

A site made of HTML, CSS and JavaScript files can be hosted almost anywhere, usually for free. GitHub Pages, Netlify and Cloudflare Pages publish straight from a Git repository with HTTPS included; on shared hosting you simply upload the files to public_html.

Use relative links (about.html, css/styles.css) rather than paths tied to your computer, and test the live site on a real phone before sharing it.

Go deeper