HTML & CSS Web Development: The Big Picture

HTML, CSS, and JavaScript are the main technologies that make up the web as we know it. Every web page you visit contains HTML, CSS, and JavaScript. Understanding what these technologies are, where they came from, and where they are going is vital for anyone building for the web. This document provides a big-picture overview of why you should care about how the web works, how HTML displays content, how CSS styles it, and how JavaScript makes it interactive — along with an overview of the wider web development ecosystem, tooling, and career paths.

Table of Contents

• Module 1: Why You Should Care About How the Web Works
  • A Look into the History of the Web
  • How the Web Works: Servers, URLs, and HTTP
  • Why Learn HTML, CSS, and JavaScript
  • Key Takeaways: Why the Web Works the Way It Does
• Module 2: Displaying the Web with HTML
  • Where HTML Came From
  • What HTML Is
  • Working with HTML
  • Key Takeaways: HTML
• Module 3: Styling the Web with CSS
  • Where CSS Came From
  • What CSS Is
  • Working with CSS
  • Key Takeaways: CSS
• Module 4: Interacting with the Web with JavaScript
  • Where JavaScript Came From
  • What JavaScript Is
  • Working with JavaScript
  • Key Takeaways: JavaScript
• Module 5: Where to Go from Here
  • Recap of HTML, CSS, and JavaScript
  • Resources to Learn More
• Summary

Module 1: Why You Should Care About How the Web Works

This module covers the technologies and versions used throughout this document: HTML5, CSS3 and beyond, and JavaScript as specified by ECMAScript 2022. To understand why you need to know how the web works, it helps to first look at where the web came from, then at how it works on a high level, and finally at why HTML, CSS, and JavaScript specifically matter.

A Look into the History of the Web

The history of the internet and the web is action-packed. The following are the most significant events.

• 1960s — Research into network packet switching techniques began. Packet switching is the technique of dividing information into message blocks that are each routed separately. Researchers were trying to build networks that could survive a nuclear war, and packet switching became the foundational technique that made the internet possible.
• Late 1960s — Networks implementing packet switching emerged, including the NPL network and ARPANET, which connected the University of California with the Stanford Research Institute. These were private networks; the public did not have access to them.
• 1972 — The first link between the United States and Europe was created by satellite, when ARPANET was connected to the Norwegian Seismic Array.
• 1981 — Access to ARPANET expanded. The National Science Foundation (NSF) created the Computer Science Network, which connected to ARPANET using TCP/IP. In the same year, the Internet Protocol 4 (IPv4) standard was published — an implementation of TCP/IP that still carries most of the internet’s traffic today.
• Late 1980s — Public internet service providers emerged, offering companies and consumers access to the internet. At this point, there was no World Wide Web yet — internet access was very rudimentary.
• 1989 — The idea and the term World Wide Web was proposed: an open information system populated with documents that could be reached through URLs.
• 1990 — The inventor of the World Wide Web created the first web tools, including a web browser. The documents that populated the web were HTML documents, which could be enriched with images and styles.
• 1994 — Cascading Style Sheets (CSS) was introduced to make it possible to style HTML documents.
• 1995 — JavaScript was introduced to enhance the document experience by allowing programmable actions on the web.
• 1999 — Mobile phones started to have very simple access to the internet.
• 2000 — 414,000,000 people were connected to the internet and using the World Wide Web — just ten years after the web was proposed and the first browser was developed.
• 2008 — Google Chrome was released, in the middle of the “browser wars,” where major vendors heavily competed to have users adopt their platforms.
• 2022 (at time of recording) — 5.2 billion people had access to the internet and the World Wide Web, up from 414,000,000 in 2000. 54% of all web page views came from mobile devices.

Today, the modern world is heavily dependent on the internet and the World Wide Web. It has become a utility like electricity — it runs businesses, governments, and public infrastructure such as traffic lights.

Two major things happened within this timeline:

1. The internet was created — the plumbing that connects devices and powers the World Wide Web.
2. The World Wide Web was created — a way to navigate through resources and use them in web browsers, made possible by HTML together with CSS and JavaScript.

timeline
    title History of the Internet and the Web
    1960s : Packet switching research begins
    Late 1960s : NPL network and ARPANET emerge (private)
    1972 : First US-Europe satellite link (ARPANET to Norwegian Seismic Array)
    1981 : NSF creates CSNET (TCP/IP) ; IPv4 standard published
    Late 1980s : Public ISPs emerge
    1989 : World Wide Web idea and term proposed
    1990 : First web browser and first HTML created
    1994 : CSS introduced
    1995 : JavaScript introduced
    1999 : Simple mobile internet access begins
    2000 : 414 million people online
    2008 : Google Chrome released
    2022 : 5.2 billion people online, 54% of page views from mobile

How the Web Works: Servers, URLs, and HTTP

The World Wide Web can be defined as an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and accessed via the internet. This simple idea, borrowed from the web’s own encyclopedic definition, is still true today.

The web works because of three basic ingredients:

1. Resources — HTML documents, images, or other files. This is the content you want to use: websites to browse, images to look at, files to share.
2. URLs — unique addresses that identify resources so a web browser can be pointed to them and retrieve them. Every resource on the web has a unique URL.
3. HTTP (Hypertext Transfer Protocol) — the protocol that retrieves documents and communicates them to a web browser. You don’t need to know the internals of HTTP to build for the web — just that it exists and that it is central to how the web works.

Putting these ingredients to work: documents like HTML files and other resources like images are hosted on a web server — a computer, much like your own, running special software that serves up HTML documents and other resources. The web server has a unique address on the internet (a URL), and every resource it hosts has a unique name, so it can be identified — for example, server.com/document1.html.

Client computers running a web browser (desktop computers, mobile phones, or even virtual reality headsets) use these resources. The browser asks the internet to serve up a specific document living at a given URL. HTTP handles the communication between browser and server to retrieve the document so the browser can render it on screen. While painting the HTML document on screen, the browser uses CSS to style it and JavaScript to give it functionality.

A browser doesn’t only retrieve documents — it can also send data back to the server. For example, a user can enter information into text boxes, and the browser sends that data back to the server for processing using an HTTP POST operation. HTTP supports many such operations.

This is, of course, a simplified view — there is more going on under the hood, such as Domain Name System (DNS) lookups and TCP/IP handshakes, but a high-level understanding is enough to start building for the web.

flowchart LR
    subgraph Client["Client Computer"]
        Browser["Web Browser<br/>(desktop, mobile, VR headset)"]
    end
    subgraph Server["Web Server"]
        Docs["HTML Documents,<br/>Images, Other Resources<br/>(unique URLs)"]
    end
    Browser -- "HTTP GET request<br/>for a URL" --> Docs
    Docs -- "HTTP response<br/>(HTML, CSS, JS, images)" --> Browser
    Browser -- "Render HTML,<br/>apply CSS,<br/>execute JavaScript" --> Screen["Rendered Page on Screen"]
    Browser -- "HTTP POST<br/>(form data, user input)" --> Docs

Why Learn HTML, CSS, and JavaScript

The magic that makes the web work happens through infrastructure — a browser asks for a document by URL, and a server returns it via HTTP. That infrastructure is interesting, but it is not where most developers and software architects focus their day-to-day work. The real focus is on what happens inside the web browser: the HTML document that gets rendered and painted on the screen, formatted and styled with CSS, and given functionality by JavaScript.

Reasons to learn these three technologies:

• If you are new to them, learning HTML, CSS, and JavaScript at a high level tells you why they are relevant to the web and to modern software development, and how people use them and what is involved in using them.
• If you are already experienced, revisiting them reaffirms concepts you already know and sharpens them. Looking at these technologies from a higher level — including their history — provides greater context for why they work the way they do.

mindmap
  root((The Web))
    HTML
      Structure and content
      Text, images, media
      Documents identified by URLs
    CSS
      Presentation and layout
      Colors, fonts, spacing
      Responsive design
    JavaScript
      Behavior and interactivity
      DOM manipulation
      Communication with APIs
    Infrastructure
      Web servers
      URLs
      HTTP

Key Takeaways: Why the Web Works the Way It Does

• The web is only possible because of the underlying infrastructure — the internet — and both are relatively young: the internet has existed since the 1980s, and the web since the 1990s. This is an incredibly short time for a technology to take over the world.
• For the web to work, you need a web server that hosts resources such as documents and images.
• The server plus its documents form a unique URL that identifies resources on the internet.
• Data transfer protocols such as HTTP retrieve documents and other files from the web server.
• You need a computer or other device running a web browser to use the resources and view the documents.
• These fundamentals explain why HTML, CSS, and JavaScript matter: they are what a developer actually creates and works with, discovering what they are, why they are relevant, and how they are used.

Module 2: Displaying the Web with HTML

This module covers the basic concepts of the HyperText Markup Language (HTML): what it is and what it looks like, where it came from, how it is likely to evolve, and how you can go about creating it.

Where HTML Came From

A typical web page is a simple web application with pages that display text and images, where every page is reachable through a unique URL. That URL is unique across the entire internet — it’s how a browser navigates to a specific page. All of this is HTML, which can itself contain links to other web pages. Using a browser’s “View Page Source” or developer tools (usually opened with F12), you can see the raw HTML — elements with attributes — that a page is built from.

A useful definition: HTML is the standard markup language for creating web pages and applications. It is a markup language, not a programming or scripting language — it is used to control the presentation of data, such as the text and images on a page.

Where did HTML come from?

• 1990 — HTML was originally specified alongside the first web browser and the World Wide Web itself.
• 1993 — The first official draft proposal of an HTML specification was defined by the Internet Engineering Task Force (IETF). Around the same time, a rivaling specification called HTML+ proposed standardizing already-implemented features like tables and fill-out forms.
• Early 1994 — After these drafts expired, the IETF created a working group that produced the HTML 2.0 specification, which served as the standard for web browsers.
• January 1997 — The World Wide Web Consortium (W3C) proposed HTML 3.2.
• December 1997 — The W3C published a recommendation for HTML 4.0.
• 1999 — A revision called HTML 4.01 was published by the W3C.
• 2014 — HTML5 was published by the W3C, after being developed by the Web Hypertext Application Technology Working Group (WHATWG), which later became a joint deliverable with the W3C. HTML5 introduced a large number of new elements allowing for more expressive markup and more interactive web pages.
• 2016 — HTML 5.1 was delivered by the W3C.
• 2017 — HTML 5.2 was delivered by the W3C.

Developing and evolving a specification is hard and time-consuming, and several organizations have shaped HTML along the way:

• Tim Berners-Lee (inventor of the World Wide Web and the web browser) came up with the first specification of HTML in 1990 — not yet a standard, just the first elements.
• The Internet Engineering Task Force (IETF), a US-based standards group also heavily involved in the TCP/IP standard, proposed the first official HTML specification in 1993, hoping it would become a standard.
• The World Wide Web Consortium (W3C), a US-based standards organization founded by Tim Berners-Lee in October 1994, has maintained the HTML specification since 1996, with input from commercial software vendors.
• In 2000, HTML officially became an international standard registered with the International Organization for Standardization (ISO) and the International Electrotechnical Commission (IEC).
• In 2004, a new group founded by people from Mozilla, Apple, and Opera formed the Web Hypertext Application Technology Working Group (WHATWG), in response to the slow pace of web standards development at the W3C. This group began work on HTML 5.0, which the W3C later adopted as the way forward, making HTML5 a joint deliverable of the W3C and WHATWG. HTML5 is now considered a living standard — some say there will never be an HTML 6.0, as HTML5 (the living standard) simply continues to evolve with new features.

flowchart TD
    A["1990: Tim Berners-Lee<br/>creates first HTML elements<br/>+ first browser + WWW"] --> B["1993: IETF draft proposal<br/>(rival: HTML+)"]
    B --> C["Early 1994: HTML 2.0<br/>(IETF working group)"]
    C --> D["1997 Jan: HTML 3.2 (W3C)"]
    D --> E["1997 Dec: HTML 4.0 (W3C)"]
    E --> F["1999: HTML 4.01 (W3C)"]
    F --> G["2004: WHATWG formed<br/>(Mozilla, Apple, Opera)"]
    G --> H["2014: HTML5 (W3C + WHATWG)"]
    H --> I["2016: HTML 5.1"]
    I --> J["2017: HTML 5.2"]
    J --> K["HTML5 as a<br/>'living standard'"]

What HTML Is

HTML is the standard markup language for creating websites and web applications. Everything you see in a website or web application is rendered by a web browser from HTML documents — files with an .htm or .html extension, served by web servers at unique URLs.

Every HTML document contains a small set of foundational elements understood by all web browsers:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Page Title</title>
  </head>
  <body>
    <div>
      <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
      </ul>
    </div>
  </body>
</html>

• The <!DOCTYPE html> declaration (strictly not an HTML element itself) tells the browser this is an HTML5 document.
• The <html> element wraps the entire document, telling the browser everything inside is HTML.
• The <head> element can include a title, scripts, styles, and meta information. The meta tag’s charset attribute here tells the browser the character encoding is UTF-8, and the title tag’s content appears in the browser tab.
• The <body> element contains everything meant to be displayed on screen — in this example, a div containing an unordered list (<ul>) with three list items (<li>), rendered as a bulleted list with the page title showing in the browser tab.

HTML5 introduced many more expressive, semantic elements that explain their own purpose — helping browsers render more intelligently and helping search engines understand which parts of a document are actual data versus meta information:

<header>
  <nav>
    <!-- navigation links -->
  </nav>
</header>

<main>
  <article>
    <!-- independent, self-contained content -->
  </article>
  <aside>
    <!-- content aside from the main content -->
  </aside>
</main>

<footer>
  <!-- copyright, company address, etc. -->
</footer>

HTML5 also introduced elements that allow richer interaction with the browser:

For example, a page embedding a video uses a <video> element with attributes describing its source and dimensions:

<video src="intro-video.mp4" width="640" height="360" controls></video>

Not every browser supports every HTML element. A site like caniuse.com lets you check browser support for a given feature — for example, the <video> element is supported by essentially all major browsers except Opera Mini. The overall takeaway: HTML is a markup language with many elements, tags, and attributes that web browsers understand, and not all browsers support all elements equally.

Working with HTML

To write a website using HTML, you don’t need to worry about HTTP or client computers directly — you write HTML documents and deploy them on a web server, which hosts your documents and exposes them to the internet at unique URLs.

There are several approaches to creating HTML:

1. Write it from scratch with a simple text editor, such as Notepad or Notepad++. This provides no smart features like tag validation.
2. Use an Integrated Development Environment (IDE), which provides extra features like tag suggestions and error checking. Examples include Microsoft Visual Studio, the open-source Eclipse IDE, and GitHub’s Atom IDE.
3. Use an online HTML editor that requires no local installation — you type HTML on one side and see it rendered live on the other. These are great for quick experimentation, including embedding another page via an <iframe>:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>

4. Use a server-side framework to generate HTML for you. Many websites and applications are built this way: you write code in a programming language (such as C# or Java), often mixed with bits of HTML, using a framework like PHP or ASP.NET. A framework does more than generate HTML — it also enables advanced functionality like communicating with a database. All of this code lives on the web server; when the browser requests a document at a given URL, the framework generates HTML dynamically and sends it back for rendering.

For example, in the Microsoft ASP.NET MVC framework, you create .cshtml files that combine HTML with the Razor language for working with data:

@model Order

<h2>Order Details</h2>
<div>
    <p>Order Number: @Model.OrderNumber</p>
    <p>Customer: @Model.CustomerName</p>
    <p>Total: @Model.Total</p>
</div>

A corresponding C# controller running on the server responds to the incoming URL request, looks up the order record in the database, and returns the view (the .cshtml file), which triggers HTML generation sent back to the browser:

public class OrderController : Controller
{
    public ActionResult Details(int id)
    {
        var order = _db.Orders.Find(id); // look up the order record
        return View(order);              // returns Details.cshtml
    }
}

Using a framework like this provides flexibility and features well beyond plain HTML, but it also requires learning the framework itself — in this case, how ASP.NET MVC and C# work.

There are many other frameworks and languages capable of generating HTML:

Beyond writing or generating HTML yourself, there are also ready-made products you can configure without building from scratch, such as WordPress.com and Ghost.org, which let you display content in a web browser through configuration rather than custom code.

flowchart TD
    Start["I need to create HTML"] --> Q1{"Write from scratch?"}
    Q1 -->|Yes, minimal tooling| TextEditor["Text editor<br/>(Notepad, Notepad++)"]
    Q1 -->|Yes, with tooling| IDE["IDE<br/>(Visual Studio, Eclipse, Atom)"]
    Q1 -->|No, quick experiment| Online["Online HTML editor"]
    Q1 -->|No, generate dynamically| Framework["Server-side framework<br/>(PHP, ASP.NET, Ruby, Node.js, Go, Java)"]
    Q1 -->|No, configure a product| ReadyMade["Ready-made product<br/>(WordPress.com, Ghost.org)"]

Key Takeaways: HTML

• HTML is the basic markup for the web — without it, there would be no World Wide Web as we know it today.
• HTML is a standard that defines elements and attributes that browsers understand and can display on screen. It is a standard interpreted by web browsers.
• Over the years, multiple organizations and working groups (Tim Berners-Lee, IETF, W3C, WHATWG) have shaped the evolution of the HTML standard.
• The HTML standard consists of many elements and attributes — some simple, some advanced — and continues to evolve toward more interactive elements, like <video>.
• HTML can be written from scratch using text editors or IDEs, or generated using frameworks like ASP.NET, which also enable more advanced capabilities such as connecting to a database.

Module 3: Styling the Web with CSS

Displaying text and images on the web is one thing, but content also needs to be styled so it is readable and usable. This module follows the same structure as the HTML module: where CSS came from and what it is, followed by the different ways to create and use CSS.

Where CSS Came From

CSS is code that tells the browser how to style HTML. Using browser developer tools (F12), you can inspect an HTML element and see the associated CSS — for example, a rule telling the browser to vertically align an image in the middle of its container.

A useful definition: CSS, or Cascading Style Sheets, is a style sheet language used to describe the presentation of a document. Other style sheet languages exist for styling other formats (like XML), but CSS is the most important one for the web.

History of CSS:

• 1994 — CSS was first proposed as a style sheet language, among other competing proposals. The W3C, already working on the HTML standard, added CSS to the deliverables of the HTML working group.
• 1996 — The official recommendation of CSS Level 1 was published. A “recommendation” is a specification that browsers can adopt — though in the beginning, browser support for CSS was very limited.
• 1998 — CSS Level 2 was published, addressing issues in CSS1.
• 2004 — CSS Level 2.1 became a W3C candidate recommendation, containing fixes and new features for Level 2. It went back and forth between candidate recommendation and working draft status for years.
• 2011 — CSS 2.1 was finally published as an official recommendation (the actual specification).
• Meanwhile, work had already begun on CSS Level 3, which — instead of being one all-encompassing recommendation — became an ever-evolving collection of CSS modules, each describing a category of capabilities (for example, the CSS3 Selectors module and the CSS3 Colors module).
• 2012 — The CSS3 Media Queries module reached official recommendation status.
• 2017 — The CSS3 UI module reached official recommendation status; the CSS Flexbox Level 1 module reached Candidate Recommendation status.

Future CSS development follows this module principle: some modules reach Level 4, while entirely new modules are introduced starting at Level 1. It’s important to remember that different modules and levels describe different capabilities, all determined by standards bodies like the W3C — but these standards only matter because web browsers actually implement them.

flowchart TD
    A["1994: CSS first proposed<br/>(added to W3C HTML working group)"] --> B["1996: CSS Level 1<br/>(official recommendation)"]
    B --> C["1998: CSS Level 2"]
    C --> D["2004: CSS Level 2.1<br/>(candidate recommendation)"]
    D --> E["2011: CSS 2.1<br/>(official recommendation)"]
    E --> F["CSS Level 3:<br/>ever-evolving collection of modules"]
    F --> G["2012: CSS3 Media Queries module"]
    F --> H["2017: CSS3 UI module;<br/>Flexbox Level 1 (candidate)"]

What CSS Is

Styling HTML in a web browser can still feel difficult — even basic tasks like perfectly centering something regardless of screen or object size can be tricky (a fact often joked about, e.g., on “CSS is Awesome” coffee mugs).

There are three primary ways to apply CSS to HTML:

1. Inline styles, written directly on an element using the style attribute:

<div style="color: blue;">
  <ul>
    <li style="font-style: italic;">Second item</li>
  </ul>
</div>

2. Internal styles, declared in the <head> element and applied throughout the document:

<head>
  <style>
    div { color: blue; }
    .italic-item { font-style: italic; }
  </style>
</head>
<body>
  <div>
    <ul>
      <li class="italic-item">Second item</li>
    </ul>
  </div>
</body>

This is more reusable than inline styles since the rule can be applied to any matching element anywhere in the document.

3. External style sheets, linked from the HTML document:

<head>
  <link rel="stylesheet" href="StyleSheet.css">
</head>

/* StyleSheet.css */
div {
  color: blue;
}

External style sheets provide the maximum maintainability and reusability: styles live outside the HTML document (making both easier to read and maintain), and the same style sheet can be linked from multiple HTML documents to apply consistent styling everywhere.

CSS consists of properties (like color or font-style) applied to elements selected via selectors:

div { }            /* selects all div elements */
.class1 { }         /* selects all elements with class="class1" */
#para1 { }           /* selects the element with id="para1" */
div p { }            /* selects all p elements that are descendants of a div */
h1, h2, p { }        /* selects all h1, h2, and p elements */

CSS is called cascading because properties are applied in a specific priority order. Consider the following example:

<p class="specific">First paragraph</p>
<p class="specific" id="morespecific">Second paragraph</p>

p {
  background-color: blue;
  color: white;
  padding: 10px;
}
.specific {
  background-color: gray;
  border: 1px solid black !important;
}
#morespecific {
  background-color: red;
}

Walking through the cascade for the second paragraph:

The general specificity order, from lowest to highest priority, is:

flowchart LR
    A["Element selector<br/>(e.g. p, div)"] --> B["Class selector<br/>(e.g. .specific)"]
    B --> C["ID selector<br/>(e.g. #morespecific)"]
    C --> D["!important<br/>(highest priority, overrides all)"]

You can build large, complex hierarchies with CSS — powerful, but also a common source of CSS being hard to read and maintain.

More advanced CSS capabilities include:

• Media queries, which adapt styling based on conditions like viewport width, enabling responsive design:

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Below 480px width, the background stays at its default (white); at 480px or wider, it turns light green. This is what makes a page “responsive” — it adjusts its look and feel for different screen sizes, from mobile to desktop.

• Gradients, for example a linear gradient from red to yellow:

#grad {
  background: linear-gradient(to right, red, yellow);
}

Just as with HTML, it is the web browsers that provide the actual implementation of CSS capabilities — CSS just specifies what should happen when a browser interprets a given property, and not every browser implements every property. caniuse.com can be used to check support for a specific CSS feature (for example, the gradient property is broadly supported, except by any version of Opera Mini).

Working with CSS

The web consists of HTML documents optionally styled with CSS documents. HTML and CSS documents live on a web server (the same one or different ones — it doesn’t matter, since HTML can link to any document) and are identified by unique URLs, then transported via HTTP to requesting browsers. To work with CSS, you only need to know how to link CSS to HTML and host the CSS documents on a web server — the browser does all the actual work of interpreting the HTML and applying the described styles.

Ways to create CSS:

1. Write it from scratch, using a text editor (Notepad, Notepad++) or an IDE (Visual Studio, Eclipse, Atom). IDEs like Visual Studio recognize CSS syntax, apply syntax highlighting, and offer autocomplete — for example, typing font suggests all properties containing that word, along with their possible values, reducing errors and speeding up development.

2. Use a CSS library — pre-written CSS files, usually open source and free, that you drop into your project. Some contain only styles; others bundle JavaScript, images, and more.

Example: using Bootstrap from a CDN and its responsive grid:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-4">Column 1</div>
  <div class="col-md-4">Column 2</div>
</div>

Pointing to a CDN-hosted CSS file means you don’t have to host it yourself, but you also depend on availability of a server you don’t control. Bootstrap’s grid columns are responsive — on smaller screens, columns automatically stack under each other. Using a library like this saves time, but does require learning its conventions and class names.

3. Use a CSS preprocessor — a framework/language for authoring CSS with more advanced capabilities than plain CSS, created for people unhappy with the limitations of CSS leading to large, hard-to-maintain style sheets. Popular preprocessors include Sass and LESS.

Example, using LESS with variables:

// styles.less
@color: #3498db;

.my-element {
  color: @color;
}

Compiling this LESS file produces regular CSS, with the variable resolved to its literal value:

/* compiled output */
.my-element {
  color: #3498db;
}

This compiled CSS can then be hosted and served just like any other CSS file. Preprocessors like LESS and Sass can significantly increase productivity for large projects, but require learning the preprocessor’s own language and tooling — just like CSS libraries.

flowchart TD
    Start["I need to create CSS"] --> Q1{"Approach?"}
    Q1 -->|From scratch| Tooling["Text editor or IDE<br/>(Notepad++, Visual Studio, Eclipse, Atom)"]
    Q1 -->|Reuse pre-made styles| Library["CSS library<br/>(Bootstrap, Font Awesome, Ionic, Materialize)"]
    Q1 -->|Need advanced language features| Preprocessor["CSS preprocessor<br/>(Sass, LESS) --> compiled to CSS"]

Key Takeaways: CSS

• CSS (Cascading Style Sheets) is the styling mechanism for the web — a standard describing selectors (to select HTML elements) and properties/values (to assign styles).
• The standard continues to evolve as new features are added over time.
• CSS itself does nothing by itself — it tells browser vendors (Chrome, Edge, Firefox, and others) how to interpret the language and style HTML. Each browser interprets CSS, ideally identically to the standard, though this is not always guaranteed.
• CSS is useful for separating style (in CSS documents) from content (in HTML documents).
• CSS3 brought many advanced capabilities, including media queries, animations, and gradients — and continues evolving toward richer styling for mobile devices and animation.
• CSS can be written from scratch, sourced from a library like Bootstrap (pre-made styles), or authored with a preprocessor like Sass or LESS (richer language, compiled to plain CSS).

Module 4: Interacting with the Web with JavaScript

This module covers the glue of the web: JavaScript. It’s a vital part of what makes the web work — enabling HTML, the browser, and other systems to interact and become more responsive. As with the HTML and CSS modules, we start with where JavaScript came from, then what it is, and finally how to write it.

Where JavaScript Came From

A simple JavaScript example: an HTML button with an onclick attribute that runs a small piece of JavaScript inline (just as CSS can be written inline):

<button onclick="alert('This is a JavaScript alert')">Click me</button>

This little piece of code interacts with the web browser to do more than just display an HTML page — it can pop up dialogs, change content, and much more.

A useful definition: JavaScript is a high-level, interpreted programming language.

• It is a programming language with the full features that come with that — variables, conditionals, functions, and so on.
• It is interpreted, meaning it does not need to be compiled before execution; it is interpreted at runtime.
• It is high-level, meaning it is a high abstraction away from the underlying computer, making it easy to use. By contrast, a language like C is low-level — more complicated, but offering more control over things like memory management.

Despite the name, JavaScript is not the scripting version of Java — that was a marketing decision. It shares some visual similarities with Java syntax but has an entirely different implementation.

History of JavaScript:

• Before 1995 — Netscape Communications was developing the Netscape Navigator browser. Netscape dominated the browser market in the 1990s. Netscape’s founder believed HTML needed a “glue language” that was easy for web designers to use.
• 1995 — Netscape hired Brendan Eich to integrate the Scheme programming language into Navigator. He created a prototype called LiveScript. Later that year, when it first shipped with Netscape Navigator, it was renamed JavaScript — timed to align with Netscape’s newly closed deal with Sun to incorporate Java into their products, positioning JavaScript as a lightweight complement to Java. In reality, JavaScript’s implementation more closely resembles a combination of the Scheme and Self programming languages.
• 1995 (also) — Netscape introduced a server-side implementation of JavaScript for Netscape Enterprise Server. Meanwhile, Microsoft included its own scripting languages, JScript and VBScript, in Internet Explorer, doing similar things to JavaScript.
• Around 1996 — Because Internet Explorer and Netscape had different scripting implementations, cross-browser website compatibility was difficult, leading to messages like “This website is best viewed using Netscape.”
• 1996 — Netscape submitted JavaScript to Ecma International to create a standard specification, just like the standards for HTML and CSS, to encourage all browsers to implement it consistently.
• 1997 — The first official standard, ECMAScript, was published — implemented not just by JavaScript but also by other languages such as ActionScript and JScript.
• 1998 — ECMAScript 2.
• 1999 — ECMAScript 3.
• 2000–2004 — Work began on ECMAScript 4, but these efforts did not result in a standard and were scrapped in 2004.
• 2007 — ECMAScript 3.1 was developed as a counterproposal to the abandoned version 4 effort.
• 2008 — All parties with differing implementations (including JScript) came together to advance the standard further.
• 2009 — ECMAScript 3.1 was renamed and published as ECMAScript 5.
• 2011 — ECMAScript 5.1.
• 2015 onward — The standard was renamed ECMAScript 2015, and continued evolving yearly: 2016, 2017, 2018, 2019, 2020, 2021, and 2022, each adding new features and paradigms.

Today, almost all major browsers implement the ECMAScript standard, often with additional functionality beyond the standard itself. “JavaScript” remains the common name for an implementation of ECMAScript. Being high-level and interpreted was an intentional design choice, to make the language easy to use without needing compilers or complex tooling — though this has also been a long-standing point of controversy, with some developers considering it too simple and error-prone. Regardless, JavaScript is everywhere today, and more popular than ever.

flowchart TD
    A["Pre-1995: Netscape Navigator<br/>in development"] --> B["1995: Brendan Eich creates<br/>LiveScript --> renamed JavaScript"]
    B --> C["1996: Netscape submits JavaScript<br/>to Ecma International"]
    C --> D["1997: ECMAScript 1<br/>(implemented by JS, JScript, ActionScript)"]
    D --> E["1998: ECMAScript 2"]
    E --> F["1999: ECMAScript 3"]
    F --> G["2000-2004: ECMAScript 4<br/>attempted, then scrapped"]
    G --> H["2009: ECMAScript 5"]
    H --> I["2011: ECMAScript 5.1"]
    I --> J["2015+: ECMAScript 2015-2022<br/>(yearly releases)"]

What JavaScript Is

JavaScript can be used to manipulate HTML, interact with the browser itself, and talk to services like APIs on other servers.

Inline JavaScript, similar to inline CSS, can be written directly on an element:

<button onclick="document.getElementById('demo').innerHTML = Date()">See the date</button>
<p id="demo"></p>

Clicking the button selects the element with id="demo" and sets its innerHTML to the value returned by the built-in Date() function — displaying the current date and time as text inside the paragraph, without refreshing the page.

The same behavior, reorganized with the JavaScript moved into the <head> and made reusable via a named function:

<head>
  <script>
    function showDate() {
      document.getElementById('demo').innerHTML = Date();
    }
  </script>
</head>
<body>
  <button onclick="showDate()">See the date</button>
  <p id="demo"></p>
</body>

And once more, with the JavaScript moved out into a separate external file — analogous to linking an external CSS file:

<head>
  <script src="ScriptFile.js"></script>
</head>
<body>
  <button onclick="showDate()">See the date</button>
  <p id="demo"></p>
</body>

// ScriptFile.js
function showDate() {
  document.getElementById('demo').innerHTML = Date();
}

Separating JavaScript from HTML into its own file makes it reusable across multiple pages, just like external CSS.

JavaScript can also interact with the browser environment itself, for example using window.prompt():

let name = window.prompt("What is your name?");
let text = "";
if (name) {
  text = "Hello " + name;
}
document.getElementById('nameElement').innerHTML = text;

This demonstrates typical programming-language features in JavaScript: variables, if statements, and string concatenation. Beyond simple prompts, JavaScript can also interact with browser APIs such as the Web Storage API to store data locally in the browser.

Another major capability is making AJAX calls — a technique (not a separate technology) that stands for Asynchronous JavaScript and XML. It allows the browser to call external, server-side resources — like APIs — without refreshing the page, enabling highly interactive web applications:

sequenceDiagram
    participant Browser as Web Browser<br/>(HTML + JS loaded)
    participant API as External API / Server

    Browser->>Browser: User clicks button, fires JS function
    Browser->>API: XMLHttpRequest (AJAX call to a URL)
    API-->>Browser: Response document/data
    Browser->>Browser: JS updates HTML content<br/>(no page refresh)

Example using the XMLHttpRequest object directly:

<button onclick="loadDoc()">Get Content</button>
<div id="demo"></div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "content.txt", true);
  xhttp.send();
}
</script>

When the button is clicked, loadDoc() fires, uses XMLHttpRequest to call a URL (which can be on the same server or any other server), and — once the request completes successfully — updates the demo div’s content, all without refreshing the page. This is the essence of the AJAX technique, and it provides the foundation for building complete, interactive applications almost entirely in the browser, communicating with server-side resources like C# APIs behind the scenes.

Most JavaScript features are described in the ECMAScript standard, implemented by web browsers — just as with HTML and CSS, browsers do not always fully or identically support the specification. For example, XMLHttpRequest is supported by all major browsers except Opera Mini. caniuse.com can again be used to check feature support.

Working with JavaScript

Recapping how the web works with JavaScript included: any web page or application consists of three main document types — HTML for content, CSS for styling, and JavaScript for interactivity. These are hosted on a web server, exposed via unique URLs, and delivered to client browsers over HTTP. As a developer, you focus on creating these documents and placing them on the server; once on the client machine, the browser interprets the HTML, applies CSS styling, and loads and executes JavaScript.

Ways to work with JavaScript:

1. Write it from scratch — JavaScript, like HTML and CSS, is just text, so any text editor works (Notepad, Notepad++), or an IDE for more guidance (Visual Studio, Eclipse, Atom, and many others). IDEs recognize JavaScript syntax and offer autocomplete suggestions as you type.

2. Use libraries and frameworks — just as CSS libraries provide pre-made styles, JavaScript libraries provide pre-made functionality:

These libraries can significantly speed up development, but come with tradeoffs: you don’t always know exactly what a library is doing internally, libraries are often relatively large, and this introduces risk (bugs, security flaws you’re not aware of) as well as potential performance costs (loading unnecessary kilobytes of JavaScript for a small feature). It’s up to each developer to weigh the pros and cons of adopting a library or framework, and each requires its own learning investment.

Example: two-way data binding with (an older version of) Angular:

<div ng-app="">
  <p>Enter your name: <input type="text" ng-model="name"></p>
  <p>Hello {{name}}</p>
</div>
<script src="angular.min.js"></script>

The ng-app attribute tells Angular this section is an Angular application. The ng-model attribute on the text input binds its value to Angular’s internal name model, and {{name}} binds the paragraph’s text to that same model. Typing in the text box immediately updates the paragraph — this is data binding, handled by Angular’s own JavaScript running invisibly in the browser. Writing this behavior manually in plain JavaScript would require considerably more code. Frameworks like Angular boost productivity substantially, but require learning their conventions (like these special HTML attributes), and — as with any third-party library — trusting that the framework’s JavaScript is secure, since you don’t directly control or fully see what it loads.

flowchart TD
    Start["I need to write JavaScript"] --> Q1{"Approach?"}
    Q1 -->|From scratch| Tooling["Text editor or IDE<br/>(Notepad++, Visual Studio, Eclipse, Atom)"]
    Q1 -->|Reuse existing functionality| LibFramework["Library or framework<br/>(jQuery, Angular, Knockout, React, TypeScript)"]

Key Takeaways: JavaScript

• JavaScript is the glue of the web — the language that makes web applications interactive and dynamic.
• JavaScript is not derived from Java, despite early marketing positioning it as a companion language; it looks somewhat like Java but works very differently internally.
• JavaScript is a high-level programming language designed to be easy to use for web developers and designers.
• JavaScript can interact with HTML (changing it on the fly), with the browser itself (pop-ups, and access to hardware like webcam and microphone through browser APIs), and with other systems such as APIs on other servers — all without refreshing the page, creating a seamless user experience.
• JavaScript’s functionality is described by the ECMAScript standard, which browsers implement — some closely, some with lag or divergence. Without a runtime like a web browser, ECMAScript is just a specification on paper.
• Like HTML and CSS, JavaScript is just text: write it from scratch in any editor or IDE, or lean on pre-made functionality from libraries like jQuery or frameworks like Angular.
• JavaScript is not limited to browsers — server-side implementations exist as well, such as Node.js.

Module 5: Where to Go from Here

This final module recaps the most important points about HTML, CSS, and JavaScript, and points to resources for going deeper into each technology.

Recap of HTML, CSS, and JavaScript

HTML, CSS, and JavaScript are the core technologies that make the web work as we know it today — every website you visit is built from these three. It’s important to remember that HTML, CSS, and JavaScript (as ECMAScript) are all standards that describe functionality — they don’t do anything by themselves. These standards are implemented in web browsers like Chrome, Firefox, Edge, and Safari, and it is the browser that ultimately determines how it interprets and renders what it receives.

HTML contains the content of a web page — often text with images, and sometimes richer media like audio and video. HTML provides many elements to display content, as well as elements that let users interact with it, such as <canvas> (for drawing) and <audio>/<video> (for controlling media playback). HTML also supports links — to sections within a document and to entirely separate documents — which is the fundamental mechanism of the web: every resource has a unique URL, and pages link to each other to move from one to the next. HTML is just text: write it from scratch in a text editor or more advanced tooling, or use a server-side framework (like ASP.NET) to generate it.

CSS styles HTML — changing look and feel such as color and font. Writing CSS in external files referenced from HTML makes styles reusable and keeps HTML more readable and maintainable by separating style from content. CSS has evolved advanced styling mechanisms, including animating HTML elements, applying gradient colors, and using media queries to build pages that adapt to different screen sizes — the foundation of responsive design across desktop and mobile. Like HTML, CSS is just text, written from scratch with any preferred tool, and there are many CSS libraries offering pre-made styles.

JavaScript is the glue of the web, used to interact with HTML, the browser, and services/APIs — all without refreshing the page. A common misconception is that JavaScript is a lightweight version of Java; in reality, it was only marketed as Java’s companion language and shares little beyond surface-level syntax similarities. JavaScript is also just text, written from scratch in any tool, or built on top of the vast ecosystem of libraries and frameworks so you don’t have to write everything yourself. While JavaScript is a core web technology, browsers are not the only environment that can run it — server-side implementations like Node.js also exist.

If you want to develop applications for the web, learning to program in HTML, CSS, and JavaScript is the path — true today, and likely to remain true for years to come.

flowchart LR
    HTML["HTML<br/>Content & Structure"] --> Browser["Web Browser"]
    CSS["CSS<br/>Presentation & Layout"] --> Browser
    JS["JavaScript<br/>Behavior & Interactivity"] --> Browser
    Browser --> Rendered["Rendered, Interactive Web Page"]

Resources to Learn More

To continue learning beyond this overview:

• caniuse.com — check which browsers implement which features of HTML, CSS, and JavaScript.
• General web technology reference and tutorial sites covering HTML, CSS, and JavaScript in depth, with free tutorials you can practice with directly in the browser.
• Dedicated, structured learning paths exist for each of these three technologies individually, spanning beginner, intermediate, and advanced content, often paired with self-assessment tools to gauge your current skill level in each technology.

Summary

HTML, CSS, and JavaScript are the three foundational technologies of the web, and understanding how they fit into the broader picture of the internet and the World Wide Web is essential context for any web developer.

• The internet (since the 1980s) is the infrastructure; the World Wide Web (since the 1990s) is the information space of linked, URL-addressed documents built on top of it.
• The web works through three ingredients: resources (hosted on web servers), URLs (unique addresses), and HTTP (the protocol that moves resources between server and browser).
• HTML structures and provides the content of a page — standardized over decades by the IETF, W3C, and WHATWG, and now evolving as a “living standard.”
• CSS styles that content, is developed as an ever-growing collection of modules, and follows a cascade/specificity model (element < class < ID < !important) to resolve conflicting rules.
• JavaScript (an implementation of the ECMAScript standard) provides behavior and interactivity, letting pages manipulate the DOM, communicate with the browser environment, and exchange data with servers via techniques like AJAX — all without full page reloads.
• All three technologies are just plain text, interpreted by whichever web browser loads them; browsers — not the standards themselves — determine actual behavior and feature support (verify with tools like caniuse.com).
• Each technology can be authored from scratch with a text editor or IDE, generated by a server-side framework (for HTML), sourced from a library (for CSS and JavaScript), or written in a more expressive preprocessor/superset language that compiles down to the standard (LESS/Sass for CSS, TypeScript for JavaScript).

Quick-Reference Table

Checklist: Understanding the Big Picture

• Can explain the difference between the internet (infrastructure) and the World Wide Web (information space built on top of it).
• Can describe the three basic ingredients that make the web work: resources, URLs, and HTTP.
• Can describe the client-server request/response flow between a browser and a web server.
• Understands that HTML, CSS, and JavaScript are standards that browsers implement — and that implementations can vary.
• Can write a basic HTML document with DOCTYPE, html, head, and body.
• Knows the three ways to apply CSS (inline, internal, external) and how CSS cascade/specificity resolves conflicts.
• Understands what AJAX is and why it enables interactivity without full page reloads.
• Can name at least one library/framework option for HTML generation, CSS styling, and JavaScript behavior, and knows the basic tradeoffs of using them (learning curve, size, trust).

Search Terms

html · css · web · development · fundamentals · frontend · javascript · came · works