A map of the field — structure, style, interaction, browsers, accessibility, responsive design, and how to study web development well
Open a browser. Type an address. A page appears. That page did not arrive by magic. Someone wrote it. Someone organized its words, images, and links into a structure the browser could read. Someone chose its colors, fonts, and layout. Someone decided which buttons would respond when clicked and what would happen when a form was submitted.
This chapter opens the door to that work. Before you write a single tag, before you learn what a selector is or how a browser renders a page, you need a map of the territory. You need to understand what web development actually is, what the three core browser languages do, how websites differ from web apps, why accessibility and responsiveness matter, and how to approach this subject as a serious student. That is exactly what this chapter provides.
A recipe site wants every dish to be readable on a phone, a tablet, and a desktop without building three separate websites. A school wants its contact form to work for a student who cannot use a mouse. A small business wants a navigation menu that collapses into a single tappable icon on a narrow screen and expands into a full menu on a wide one. What do these three problems have in common? Each one is solved with the same three browser languages: HTML for structure, CSS for style, and JavaScript for behavior. By the end of this chapter, you will have the vocabulary and the mental map to understand what that means.
By the end of this chapter, you should be able to:
Web development is the practice of building those pages and sites. It is the work of creating the documents, interfaces, visual designs, interactive systems, and project structures that make up the web.
Web developers write code. But they also make decisions. They decide how content is organized, how a page should look on a phone compared to a laptop, whether a button is reachable by keyboard, whether an image communicates meaning to someone who cannot see it, and whether a form clearly tells a user what went wrong when they fill it out incorrectly.
Web development sits at the intersection of writing, design, logic, and communication. You do not have to be an artist to be a web developer. You do not have to be a mathematician. You do need patience, careful attention to detail, the ability to read carefully and follow structure, and the willingness to experiment, break things, and fix them.
This textbook teaches the core of browser-native web development: HTML for structure, CSS for style and layout, and JavaScript for behavior and interaction. These three languages run in every web browser without any additional software. They are the foundation of all web work, from the simplest personal page to the most complex web application.
A student who finishes this course will be able to:
That is the destination. This chapter is the first step. Everything here is conceptual groundwork — you will not write a full website yet. You will build the mental model that makes everything else in this textbook make sense.
These three terms are often used loosely in conversation, but it is worth being precise about them.
A web page is a single document. It has a URL. It can be opened in a browser. It is written in HTML and may include CSS and JavaScript. A web page has content: text, images, links, headings, paragraphs. Your school's contact page is a web page. A recipe on a cooking site is a web page.
A website is a collection of related web pages organized together under a shared domain name or project. The cooking site that contains thousands of recipes is a website. Your school's full online presence is a website. Websites have navigation: links that connect pages together into a coherent structure.
A web application, often called a web app, is a website that does things. It is not just information displayed for reading. A web app accepts user input, stores and retrieves data, processes requests, and produces personalized results. A student grade portal is a web app. An online store with a shopping cart is a web app. A weather service that shows your local forecast is a web app.
The line between a complex website and a simple web app is not always clear. In practice, the distinction matters less than understanding that web pages are made of HTML, CSS, and JavaScript, and that this textbook teaches the foundation needed for all of them.
This textbook focuses on static and lightly interactive websites: pages with real structure, real style, real responsiveness, real accessibility, and real JavaScript interaction, but without server-side processing, databases, or user account systems. Those topics belong to later courses. The foundation you build here carries directly into all of them.
Every page in a web browser is built from three languages working together. Understanding what each one does — and only what each one does — is one of the most important concepts in this textbook.
HTML stands for HyperText Markup Language. HTML is the language used to write the structure and content of a web page.
When you write HTML, you describe what things are. You say: this is a heading. This is a paragraph. This is a navigation menu. This is an image, and here is its alternative description. This is a list. This is a form with a label and an input.
HTML does not decide what things look like. HTML does not make things move or respond. HTML says what things are.
<h1>Welcome to the Learning Center</h1>
<p>Browse our library of resources below.</p>This HTML says: there is a level-one heading with the text "Welcome to the Learning Center," followed by a paragraph. That is all it says. It says nothing about color, font size, placement on the page, or what happens when a user clicks anything. That is CSS and JavaScript's job.
CSS stands for Cascading Style Sheets. CSS is the language used to control the visual presentation of a web page.
When you write CSS, you describe how things look. You say: headings should be dark blue and 32 pixels tall. Paragraphs should have generous line spacing. Navigation links should be arranged in a horizontal row with space between them. On small screens, cards should stack into a single column.
CSS does not describe content. It does not say "there is a heading here." It says "whatever headings exist should look like this."
h1 {
color: #1a2e4a;
font-size: 2rem;
}
p {
line-height: 1.7;
color: #333333;
}This CSS says: level-one headings should be rendered in a dark navy color at a large size, and paragraphs should have comfortable line spacing in a dark gray color. This style applies to any h1 or p element on the page — not just one specific element.
JavaScript is the programming language of the browser. JavaScript adds behavior and interaction to web pages.
When you write JavaScript, you describe what should happen when events occur. You say: when the user clicks this button, show a hidden menu. When the form is submitted, check whether the email field is filled in. When the page loads, fetch a list of resources and display them as cards.
JavaScript can read and change HTML. It can apply and remove CSS styles. It can respond to user input, validate forms, load data, and update content without refreshing the page.
const button = document.querySelector("#toggle-menu");
button.addEventListener("click", function () {
const menu = document.querySelector("#main-nav");
menu.classList.toggle("open");
});This JavaScript says: find the element with the id toggle-menu, and when the user clicks it, find the element with the id main-nav and toggle a class called open on it. That CSS class might change the menu from hidden to visible.
You do not need to understand this code fully yet. The point is that JavaScript responds to things happening and changes the page in response.
HTML, CSS, and JavaScript are designed to work together. Each one has a specific role:
| Language | Role | Handles |
|---|---|---|
| HTML | Structure and meaning | Content, headings, paragraphs, links, images, forms, lists, tables |
| CSS | Style and layout | Colors, fonts, spacing, layout, responsive behavior, visual design |
| JavaScript | Behavior and interaction | Events, DOM changes, form validation, dynamic content, data fetching |
One of the most important habits you will build in this course is keeping these three roles separate. When a new student wants to change how text looks, they sometimes reach for HTML. When they want to respond to a click, they sometimes reach for CSS. These instincts are wrong and lead to messy, hard-to-maintain code. HTML structures, CSS styles, JavaScript behaves. Keep them separate and your code will be readable, maintainable, and professional.
To build intuition for the three-language system, consider a physical analogy. Imagine a classroom.
Remove the structure and nothing else makes sense. Remove the style and everything is present but harsh and unusable. Remove the interaction and the room is static and unresponsive.
Websites work the same way. HTML is the architecture. CSS is the visual design. JavaScript is the behavior. Together they create a usable, meaningful, responsive, accessible digital space.
You might wonder: why keep these three things separate? Why not just put everything in one place?
Separation exists because it makes maintenance possible. Consider a website with one hundred pages. If the colors of all the headings are controlled by a single CSS file, changing the color everywhere takes one edit in one file. If the colors were written directly into every HTML element on every page, changing the color would require opening one hundred files and making hundreds of changes. Separation makes large projects manageable.
Separation also makes teamwork possible. A content writer can focus on HTML. A visual designer can focus on CSS. A programmer can focus on JavaScript. Each person can work on their layer without breaking the others.
Separation makes accessibility possible. Screen readers, search engines, and other tools read the HTML structure to understand what a page contains. If structure and style are mixed together, those tools receive confusing information.
You will practice this separation throughout the entire course.
When a user opens a web page, a piece of software called a browser reads the HTML, CSS, and JavaScript files and renders them into the visual page the user sees.
Browsers are translators. They read code and produce a visual, interactive experience. They handle fonts, layout, colors, and interactivity. They also handle errors: when a web developer writes broken HTML, most browsers will try to make sense of it anyway rather than showing nothing.
The major web browsers include Chrome, Firefox, Safari, Edge, and others. Each browser has its own rendering engine — the software component that interprets HTML and CSS — and while they largely agree on how to render code, they sometimes differ in small ways.
Users are the people who use websites. Users have different devices, different screen sizes, different input methods, different connection speeds, different abilities, and different goals. A user might be using a laptop with a mouse, a phone with a touchscreen, a tablet with a keyboard attached, or a desktop computer with a specialized assistive device.
Good web development means building for real users with real diversity, not just for the device sitting on your own desk.
When a user visits a URL, the browser requests the HTML file from a server. The browser reads the HTML, finds references to CSS files and JavaScript files, requests those too, and begins rendering the page.
The browser constructs something called the Document Object Model, or DOM — an internal representation of the page's structure. CSS is applied to the DOM to produce the visual layout. JavaScript can read and modify the DOM to change the page.
You will learn more about this process in Chapter 2 (How the Web Works) and Chapter 22 (The DOM). For now, the key mental model is: the browser receives your code and turns it into what the user sees and interacts with.
One of the most important facts about browsers is that they come with built-in developer tools. In almost any browser, pressing F12 or right-clicking on a page and choosing "Inspect" opens a panel that shows you the HTML structure of the page, the CSS rules applied to each element, a JavaScript console, network activity, and tools for simulating different screen sizes. You will use these tools constantly throughout this course. Chapter 4 covers developer tools in depth.
When a web page is accessible, it can be understood and used by the widest possible range of people, including people who use assistive technologies.
Some users navigate the web entirely by keyboard, without a mouse. Some users use screen readers, which are software programs that read the text and structure of a page aloud. Some users have low vision and rely on the ability to zoom in significantly or to use high-contrast display modes. Some users have cognitive differences that make dense, poorly organized pages difficult to process.
Accessibility is not a special feature added to a finished website. Accessibility is woven into the decisions you make from the very beginning: how you write HTML, how you label forms, how you structure headings, how you describe images, how you write link text, how you choose colors, and how you build interactive components.
An accessible website is not just a website that works for disabled users. It is a website that works better for everyone. Clear heading structure helps screen reader users navigate, but it also helps all users scan. Descriptive link text helps visually impaired users understand where a link leads, but it also helps all users who are skimming a page. High color contrast helps users with low vision, but it also helps users reading on a bright, sunny day.
In this textbook, accessibility appears in every part of the book, not just in the final quality chapter. You will write accessible HTML from Chapter 5 onward. You will learn accessible form design in Chapter 9 and Chapter 24. You will learn accessible interactive components in Chapter 27. You will learn accessibility auditing in Chapter 29.
The most important accessibility concept to absorb right now is this: the HTML structure of a page is how assistive technologies understand what a page contains. If your HTML says a heading is a heading, a screen reader can navigate from heading to heading. If your HTML puts heading-like text in a generic element with big font styling, a screen reader sees no headings at all. Structure and meaning — the job of HTML — are the foundation of accessibility.
Websites are not viewed on one type of screen. A website might be visited on a phone with a 375-pixel-wide screen, a tablet, a laptop, a large desktop monitor, or a television. It might be viewed in portrait orientation or landscape orientation. The text size might be set larger by a user who needs it.
Responsive design is the practice of building websites that adapt to different screen sizes and contexts. A responsive website does not create separate designs for every possible device. Instead, it creates a flexible layout that rearranges itself based on the available width.
Responsive design is not optional on the modern web. More than half of all web traffic comes from mobile devices. A website that only works well on a large desktop is a broken website for more than half of its users.
CSS is the primary tool for responsive design. CSS includes a feature called media queries that allows you to write different styles for different screen sizes. You will learn this in depth in Chapter 17.
Consider a simple example. On a wide desktop screen, a set of product cards might be arranged in four columns side by side. On a narrow phone screen, the same cards might stack into a single column so each one is readable without horizontal scrolling. The content is the same. The HTML is the same. Only the layout changes — and CSS handles that change automatically based on the screen width.
/* Default: single column for small screens */
.card-grid {
display: flex;
flex-direction: column;
}
/* On screens 700px wide or wider: four columns */
@media (min-width: 700px) {
.card-grid {
flex-direction: row;
flex-wrap: wrap;
}
}This CSS says: by default, cards stack vertically. But on screens 700 pixels wide or wider, they arrange into a row. You do not need to understand every word of this yet. The concept is what matters now: CSS responds to the screen.
Responsive design, like accessibility, appears throughout this textbook, not only in the chapters explicitly devoted to it.
Web development is one of the most immediately visible disciplines in computer science. The things you build in this course are things you can open in a browser and show to anyone.
Consider what web development touches in ordinary life:
| Everyday Example | What Is Happening |
|---|---|
| A recipe on your phone | An HTML page with CSS styling and probably some JavaScript for interactivity |
| A hamburger menu icon | A JavaScript interaction that shows or hides a navigation menu on a mobile site |
| A class registration form | An HTML form with CSS styling and JavaScript validation |
| A grid of products on a shopping site | An HTML structure laid out with CSS Grid or Flexbox |
| A calendar widget for picking a date | Built with HTML, CSS, and JavaScript working together |
| A "skip to main content" link | A piece of HTML that helps keyboard users bypass repeated navigation |
Learning web development gives you the ability to read and understand the pages you use every day. When something breaks on a website you use, you will start to recognize what kind of problem it might be. When you see a well-designed page, you will start to see the structure underneath it.
More practically, web development skills open direct pathways to careers in front-end development, full-stack development, UI/UX design, web accessibility, content management, digital marketing, database-backed web applications, and more. The skills in this course are foundational to all of them.
Web development is a skill subject, not a knowledge subject. Knowing the names of every HTML element is much less useful than being able to write valid, semantic HTML. Knowing what Flexbox is matters much less than being able to build a responsive card layout with it. This distinction matters for how you study.
Answer these questions in your own words before continuing. They check basic understanding, not deep analysis.
For this exercise, choose three different types of websites and observe them carefully. Do not write any code yet — just look and think. Choose from: a news site, a school or university site, an online store, a personal portfolio site, a government information site, or a nonprofit organization site.
alt attribute.)Write a short paragraph for each site describing what you observed. You do not need to explain how any of it was built yet. Just practice looking.
For each feature below, identify whether it is primarily a question of structure (HTML), style (CSS), or interaction (JavaScript). Some features may involve more than one language — if so, identify the primary one and explain why.
<h1> element could be styled to appear small and pink. It would still be a heading in meaning and structure. Never use HTML to try to control visual appearance. That is CSS's job.Chapter 1 gave you a map of the field. Chapter 2 examines the web as a system. When you type a URL into a browser, a chain of events begins: a request travels to a server, the server sends back files, the browser receives them and renders the page. You will learn the difference between the internet and the web, what clients and servers are, what happens during an HTTP request, what domain names and hosting are, and how local files differ from published websites. Understanding how the web works as a system will help you make better decisions about file organization, linking, paths, and eventually publishing.