C
HTML/CSS list
Previous1 / 11Next
HTML/CSS//Lesson 01

Who Created HTML?

30 min·theory

Who Created HTML?

🎯 By the end of this lesson

After completing this lesson, you will be able to confidently do the following 3 things.

  • ▸✅ Core patterns of HTML (markup that forms the skeleton of a web page) · CSS (the language for applying styles)
  • ▸✅ Mapping to Tailwind (a tool that applies CSS quickly via class names)
  • ▸✅ Key points for applying accessibility (a11y · making things usable by everyone) · responsive design (automatic adjustment to screen size)

Use the learning objectives as a checklist and close the lesson once you can answer all of them.

👨‍💻 The People Behind HTML/CSS — 6 Portraits

01
Tim Berners-LeeTim Berners-Lee
Inventor of the WebCERN → MIT → W3C1955~Present

The person who single-handedly invented HTML, HTTP, and URLs — 1989, the year humanity's infrastructure was born

  • 1989 Wrote the 'Information Management: A Proposal' at CERN
  • 1990 Launched the world's first web browser, WorldWideWeb, and the first web server
  • 1994 Founded W3C (World Wide Web Consortium) and served as its first Director
  • 2004 Appointed Knight Commander of the Order of the British Empire
  • 2017 Received the Turing Award — the highest honour in computer science
HTML · HTTP · URL — the person who created the 'Web' itself, not just the internetINVENTOR OF WEB
02
Marc AndreessenMarc Andreessen
Creator of Mosaic & NetscapeUIUC → Netscape → a16z1971~Present

The first browser to show the Web to the public — pulling the trigger on the internet boom

  • 1993 Developed NCSA Mosaic as a student at the University of Illinois (UIUC) — the first browser to display inline images
  • 1994 Co-founded Netscape and launched Navigator — capturing over 90% market share
  • 1995 Netscape IPO — widely regarded as the starting point of the dot-com bubble
  • 2009 Co-founded Andreessen Horowitz (a16z) VC firm — backed Facebook, GitHub, and Coinbase
Mosaic · Netscape — a living witness to 'Software is eating the world'BROWSER PIONEER · Start of popular browsers
03
Håkon Wium LieHåkon Wium Lie
Inventor of CSSCERN → Opera Software1965~Present

'Let's separate documents from design' — a single proposal that shaped 30 years of web design

  • 1994 Presented the 'Cascading HTML Style Sheets' proposal at CERN
  • 1996 CSS Level 1 became a W3C official recommendation — co-standardised with Bert Bos
  • 1999 Appointed CTO of Opera Software — championed the web standards movement
  • 2006 Earned a PhD from the University of Oslo — CSS entered academic territory
CSS — the person who built web design on the philosophy of 'separating content from presentation'CSS FATHER · Founder of CSS
04
Bert BosBert Bos
Co-creator of CSSW3C (Netherlands)1963~Present

The other half of CSS — the person who preserved the details as chair of the standards group for 20 years

  • 1995 Joined Lie's CSS proposal as co-designer
  • 1996 Co-author of the CSS 1 official recommendation
  • 1998 Published CSS 2 — adding positioning and media types
  • 2011 Chair of the CSS Working Group (serving for over 20 years)
CSS WG — the invisible hand that maintained consistency in a sprawling standardCSS STANDARDS · Chair of Standards Group
05
Ian HicksonIan Hickson
HTML5 Specification EditorNetscape → Opera → Google1974~Present

The person who killed XHTML 2.0 and saved HTML5 — sole WHATWG editor for 15 years

  • 2004 Co-founded WHATWG — in opposition to the W3C's XHTML 2 direction
  • 2008 Published the first HTML5 working draft (canvas, video, audio)
  • 2011 'HTML is the new HTML5' — version numbers abolished, transitioned to a Living Standard
  • 2014 HTML5 W3C official recommendation GA — the culmination of a decade of work
HTML5 Living Standard — every semantic tag we use todayHTML5 EDITOR · Sole Specification Author
06
Jen SimmonsJen Simmons
CSS Layout AdvocateMozilla → Apple (Safari/WebKit)Currently Employed

The person who taught CSS Grid to the masses — the face of modern CSS layout

  • 2016 Mozilla Designer Advocate — began producing educational content on CSS Grid
  • 2017 CSS Grid shipped simultaneously across all major browsers — ran the Layout Land YouTube channel
  • 2020 Joined Apple's Safari/WebKit team
  • 2023 Led standardisation of Container Queries and subgrid — first-class Safari support
CSS Grid · Container Queries — the standard tools of modern responsive designMODERN CSS · Evangelist of Modern Layouts
👥
In one line
Berners-Lee (1989 Web) → Andreessen (1993 browser) → Lie · Bos (1996 CSS) → Hickson (2014 HTML5) → Simmons (2017+ modern CSS). Six people who built 30 years.

HTML/CSS — *The Alphabet of Every UI*

Core Idea

HTML (HyperText Markup Language · the language for marking up the structure and skeleton of a web page) and CSS (Cascading Style Sheets · the language for applying styles like color, size, and layout) are the alphabet of the web. Every framework — React, Vue, Svelte — ultimately compiles down to HTML/CSS before anything is rendered on screen. Without knowing these two, all UI development becomes guesswork.

30 Years of Evolution

  • ▸1990 — Tim Berners-Lee, first HTML
  • ▸1996 — CSS1 standard
  • ▸2014 — HTML5 + CSS3 standardized (semantic markup (tags carry meaning) · Flexbox (single-axis layout tool) · media queries (apply different styles per screen size))
  • ▸2017 — CSS Grid (divides the screen into a grid)
  • ▸2023 — Container Queries (change styles based on parent container size), :has() (selector that targets a parent containing a specific child element)

The web has evolved while maintaining backward compatibility. Code from 1995 still mostly works today.

Why It Still Matters

> 'Can't I just learn React?'

React ultimately produces HTML/CSS. Any one of these three gaps will block you:

1. Without semantic HTML (tags with meaning, like <article> and <nav> instead of <div>) — SEO (search engine visibility) and accessibility will suffer
2. Without the CSS box model · Flexbox · Grid — layout becomes guesswork
3. Without responsive design (automatic adjustment per screen size) — you lose 60% of mobile users

> 💡 Truly knowing HTML/CSS fundamentals is the starting point for all front-end development.

What You Learn in This Category

  • ▸HTML semantic structure (head · body · semantic tags)
  • ▸Form input standards
  • ▸CSS selectors · specificity
  • ▸Box model (the most commonly confusing part)
  • ▸Flexbox · Grid (modern layout)
  • ▸Responsive design (media queries)

Knowing all of this makes React and Vue feel natural too.

Why HTML/CSS Is the Foundation of Every UI

In one line: Web apps, mobile apps, emails, documents — everything runs on top of HTML/CSS. The standard UI language, evolved over 30 years.

Tool Mapping — The English in each cell is just a tool name; focus on the description next to it

DomainStandard
Markup structureHTML5 (Semantic) (express page structure with meaningful tags)
StylingCSS3 + Custom Properties (reuse colors and sizes like variables)
LayoutFlexbox · Grid (auto-arrange in a single axis or a grid)
ResponsiveMedia Queries · Container Queries (change styles based on screen or container size)
Design systemTailwind · CSS Modules (apply styles quickly via class names)
AccessibilityARIA · WCAG (standards for compatibility with assistive technologies like screen readers)

5 Core Reasons

ReasonWhat it means
Semantic HTML (meaningful tags)<article> · <nav> — improves screen reader, SEO, and AI recognition
Flexbox/Grid (auto layout tools)No manual pixel math. Responsive layouts by declaration alone
Custom Property (CSS variable)--brand-color enables theme switching in one line
Responsive designOne codebase for mobile, tablet, and desktop
Accessibility (a11y · usable by everyone)Works for users with visual, auditory, and motor disabilities
Core Web Vitals (Google's metrics for perceived page performance)LCP · CLS · INP — directly tied to search rankings and UX

Bottom line: Without HTML/CSS, React and Vue just produce a pile of meaningless divs. It's the alphabet of UI development.

🤖 Try Asking AI Like This

Knowing the concepts from this lesson lets you give AI specific instructions. Not a vague 'fix this' but a request with vocabulary — that's how you start saving tokens (the unit of text an AI processes at once).

  • ▸'Refactor this HTML/CSS applying the concept of semantic markup (using meaningful tags) so it has the same behavior but a cleaner structure.'
  • ▸'Check this page for accessibility (a11y) and SEO (search engine visibility) issues.'
  • ▸'Produce the same result using Tailwind (quickly applying CSS via class names) classes.'

Why This Reduces Tokens

Without knowing the concepts, you receive an AI answer and still have to ask 'What is that?' again. That follow-up question is what burns tokens. Learn the concepts once, and the conversation ends in a single round.

Read this first: DB Advanced — Replication, Sharding, Cache, Connection Pool, Partitioning
Up next: What is HTML?
PreviousListNext
HTML/CSS Basics - HTML/CSS