HTML, CSS and JavaScript Basics: Where to Start
Every web page has three layers: HTML for structure and meaning, CSS for looks and layout, JavaScript for behavior. Learn what each does and how to start, with small examples.
Every web page you visit is built from three layers: HTML defines structure and meaning, CSS controls appearance and layout, and JavaScript adds behavior and interaction. If you want to learn web development, HTML, CSS and JavaScript are the place to start, in that order. This article explains what each layer does with one small working example, then covers the learning order and the mistakes that slow beginners down.
How the three layers work together
When you open a page, the browser downloads the HTML file, reads it from top to bottom and builds a tree of elements called the Document Object Model (DOM). It then downloads the linked CSS files and applies their styles to those elements, and runs the JavaScript files, which can read and change the tree in response to what the visitor does.
Take a contact form: HTML defines the fields, their labels and the submit button; CSS arranges and colors them and makes them comfortable on a phone screen; JavaScript can show a thank-you message without reloading the page. An important principle here is progressive enhancement: the content and core functions should work with HTML and CSS alone, and JavaScript should improve the experience rather than be a requirement for it. Pages built this way are faster and sturdier, and they don't collapse when a script fails to load on a weak connection.
The examples below build a small page for a fictional bakery, so you can see all three layers working on the same page.
HTML: structure and meaning
HTML is a markup language, not a programming language. It has no logic or conditions; it describes pieces of content: this is a heading, this is a paragraph, this is a navigation menu, this is a button. A page is made of elements marked up with tags, and an element can carry attributes that add information, such as href, which sets a link's destination, and alt, which describes an image for people who can't see it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corner Bakery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<button class="menu-toggle" aria-expanded="false" aria-controls="main-menu" hidden>Menu</button>
<nav id="main-menu">
<a href="products.html">Our products</a>
<a href="contact.html">Contact us</a>
</nav>
</header>
<main>
<h1>Fresh bread every morning</h1>
<p>We bake daily from 6 a.m. and deliver across the city.</p>
<img src="bread.webp" alt="Fresh flatbread loaves on a wooden shelf" width="800" height="533">
</main>
<script src="app.js" defer></script>
</body>
</html>What's worth noticing in this example:
- The lang attribute tells browsers, screen readers and translation tools which language the page is in. Arabic pages also set dir to rtl so text runs right to left; if your site has two languages, each version gets its own values, as covered in building a bilingual Arabic-English website.
- The viewport meta tag is essential so phones display the page at their real width instead of a shrunken desktop layout.
- Semantic elements such as header, nav and main describe the role of each part, so screen readers and search engines understand them and the code is easier to maintain.
- One clear h1 sums up the page, with h2 and h3 headings below it in a logical order. Choose heading levels by their place in the structure, not by the size you want; size is CSS's job.
- Buttons and links are different things: a link takes you somewhere, a button performs an action. Using a generic clickable element instead of a real button breaks keyboard navigation.
- Width and height on the image reserve its space before it loads so the page doesn't jump, and the alt text serves blind users and shows if the image fails to load.
- The defer attribute lets the script download without blocking the page, and runs it once the page has been parsed.
Common HTML mistakes: building everything from meaningless generic elements, form fields without associated labels, and images without descriptions. All of them directly affect web accessibility.
CSS: appearance and layout
CSS is made of rules. Each rule has a selector that picks the target elements and a set of declarations, each a property and a value. Here are the bakery page's styles:
:root { --brand: #0b6e4f; --text: #1f2933; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.7; color: var(--text); }
main { max-width: 42rem; margin-inline: auto; padding: 1rem; }
img { max-width: 100%; height: auto; }
.menu-toggle { background: var(--brand); color: #fff; padding: 0.75rem 1.25rem; border: 0; border-radius: 8px; }The concepts you need to understand well:
- Selectors: by element name such as main, by class (written with a dot) or by ID (written with a hash). Rely mostly on classes; they're flexible and reusable.
- The cascade and specificity: when several rules target the same element, the browser decides which wins based on how specific each selector is and the order of the rules. Most beginner confusion in CSS comes from here, so understanding it early saves hours.
- The box model: every element is a box with content, then padding, then a border, then margin.
- Layout with Flexbox and Grid: Flexbox arranges items in one direction, a row or a column; Grid handles rows and columns together. Both follow the page direction automatically, so layouts flip on Arabic pages with no extra work.
- Logical properties: notice margin-inline in the example instead of separate left and right margins. These properties mean "start and end of the line", so they behave correctly in both Arabic and English, which makes them the right choice for bilingual sites.
- Custom properties: such as --brand. Define a color once and use it everywhere, so a rebrand becomes a one-line change.
- Units: rem is relative to the root font size, so it respects visitors who enlarge their text, unlike fixed pixels in many cases.
- Media queries: change the layout based on screen width, the foundation of responsive web design.
JavaScript: behavior and interaction
JavaScript is a full programming language with variables, conditions, loops and functions. In the browser it listens for events such as clicks, form submissions and scrolling, reads and changes page elements, and fetches data from the server without a page reload. This script turns the bakery's navigation into a menu that opens and closes with a button:
const toggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('#main-menu');
toggle.hidden = false;
menu.hidden = true;
toggle.addEventListener('click', () => {
const isOpen = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', String(!isOpen));
menu.hidden = isOpen;
});The first two lines select the button and the menu; the script then reveals the button and hides the menu. Notice that in the HTML the button is hidden and the menu is visible, so if the script fails for any reason the links are still there. That's progressive enhancement in practice. Each click flips the menu's state and updates aria-expanded, which tells screen reader users whether the menu is open or closed. On a real site you'd add a media query that keeps the full menu visible on large screens.
Three rules that save you from expensive mistakes:
- Use what HTML gives you first. Required fields and email format checks are available through HTML attributes such as required, and the details and summary elements create a collapsible section with no script at all.
- JavaScript is one of the most expensive resources on a phone, because it has to be downloaded, parsed and executed on the device's processor. Don't add a whole library for a ten-line task, and read website speed.
- Browser-side validation improves the experience; it doesn't protect you. Anyone can bypass it, so real validation happens on the server, as explained in website security essentials.
The learning order: where to actually start
Learn the three languages in order, and tie each stage to a small project you finish:
- HTML: build a profile page for a restaurant or for yourself with headings, paragraphs, a list, images, an opening-hours table and a contact form, with no styling.
- CSS: style that same page, then turn a ready-made landing page design into code and make it work on both phone and desktop.
- JavaScript: learn the language basics, then apply them to the page: a navigation menu, a collapsible FAQ, a simple calculator such as a shipping cost estimator, then displaying data from a JSON file.
- A capstone project: a three- or four-page site in Arabic and English, published on real hosting and tested on your phone and your friends' phones.
You need few tools: a code editor such as VS Code, a modern browser whose developer tools you use to inspect elements, read errors in the console and try different screen sizes, and Git to save versions of your work. For learning material, pick one open documentation reference of the kind maintained by the browser developer community, which explains every element and property with examples and browser support details. Add a free interactive course where you write code in the browser, and an HTML validator that flags mistakes. One reference plus steady practice beats collecting ten courses. For the bigger plan beyond this stage, see how to learn programming from scratch.
Common mistakes that slow beginners down
- Watching without writing: tutorials give you a feeling of understanding; only writing code makes it stick. Spend more time typing than watching.
- Jumping to frameworks too early: learning a UI library before JavaScript itself turns every bug into a mystery.
- Copying code you don't understand, whether from a forum or an AI assistant. Ask why each line exists; delete what you don't understand and rewrite it.
- Working only on a laptop: open your work on your phone from day one.
- Ignoring error messages: the browser console usually tells you which line has the problem, so read it before searching for a fix.
- Neglecting semantics: code that looks right on screen can still be unusable with a keyboard or screen reader.
When to move on to frameworks and CMSs
Once you can build a multi-page responsive site with interactions in plain JavaScript, and you understand why your code works, you're ready for the next step. UI frameworks such as React, Vue and Svelte help with complex interfaces like dashboards and web apps, while content management systems suit content and company sites, as the guide to content management systems explains. Even on a ready-made platform, your HTML and CSS knowledge is what lets you adjust templates and fix problems instead of waiting for someone else. To see where these skills fit in a full website project, go back to building your business website.
Practical checklist
- HTML for structure and meaning, CSS for appearance and layout, JavaScript for behavior; learn them in that order.
- Write semantic HTML: elements that describe each part's role, ordered headings, real buttons and a description for every image.
- In CSS, understand the cascade, the box model, Flexbox and Grid before anything else, and use logical properties from the start.
- Treat JavaScript as an enhancement layer, not a requirement, and use built-in HTML features first.
- Always validate data on the server, however good the browser-side checks are.
- Finish a small project at every stage and test it on a real phone.
