NMD 345 Web Applications

The Internet is for sharing

Berners Lee Tim Bw “The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.

"The web is more a social creation than a technical one....it ought to be like clay, rather than a sculpture that you observe from a distance."

--Tim Berners-Lee, creator of the Web

Returning to the metaphor today

The three horsemen of the modern web

HTML

The First Web Page

Tim Berners-Lee, 1991

HTML

Also called "tags," "elements," "DOM" (Document Object Model)

Consists of branches and nodes

<window>
    ∟ <document>
         ∟ <head>
  	     ∟ <script>
         ∟ <body>
  	     ∟ <div>
  	         ∟ <form>
	         ∟ <image>

Can be nested as "parents" and "children"
Elements are always the same, just used in different combinations
You can view the tag tree with browser tools
You can modify the tag tree using JavaScript

HTML

🎗 Close tags twice

1. Close every tag with an angle bracket ("End angle")


	<div>

2. Close start tags with a bookend tag with a slash ("End tag")


	<div>Welcome to my page!</div>

CSS

World Wide Web (W3) Consortium, 1996

CSS

Controls the style of HTML tags


	/* A "tag" style applies to every block of text. */
	div {
		font-family: verdana ;
	}
	/* a "class" style applies to all "cat" divs. */
	.cat {
		width: 100px ;
	}
	/* An "id" style applies to a unique "cat" div. */
	#grumpy {
		color: red ;
	}

Size

Position

Color

Font

HTML + CSS = Web design

JavaScript

Brendan Eich, 1995

JavaScript

Builds on what you know

JavaScript

Some pre-built methods and properties, but mostly custom-built by you
Exists only in RAM (don't appear in browser tools)
JavaScript "objects" can serve as cookie cutters for producing new HTML tags


	visitor = prompt( "What's your name?" ) ;
	alert( "Welcome " + visitor ) ;

HTML + CSS + JavaScript = Web development

JavaScript beyond the web page

Web

Bookmarklets
GreaseMonkey
Extensions
Server scripts (Node.js)

Design and publication

Photoshop, Illustrator, InDesign actions
Scriptable PDFs
e-books (iBook, EPUB)

Productivity

Apps (via Electron or React Native, eg Slack, Spotify, ChatGPT)
Google Drive (Docs and Sheets)
OS X Scripts, TextExpander

Mobile apps

iPhone/iPad/Android apps (via React Native)

Gaming

3D game engines (ThreeJS, Minecraft, DX Studio, Unity)
2D games (HTML5, Phaser, RPG Maker, Flash)
Vintage computers (via JSMESS)

Art and music

After Effects
Logic Pro
Animation (via p5.js or Claude Design)

JavaScript in space

Full-stack development

JavaScript on the server too

web_dev_job_stats_2025_4

web_dev_job_stats_2025_3

web_dev_job_stats_2025_2

web_dev_job_stats_2025_1

ai_job_impact_youth_chart_2025_1

ai_job_impact_youth_chart_2025_2

ai_job_impact_youth_chart_2025_3

wix_revenue_loss_chart_2026

“Vibe coding, or using AI to generate code, is replacing some of the functions that made Wix popular: quickly building colorful, polished websites without deep technical knowledge”—Ynet