The open nature of the World Wide Web presents incredible opportunities to create websites or online applications. To take full advantage of the web's capabilities, we need to know how to use them.
- Glossary
- Learning Web Development
- Web Developer Reference
- How the Web Works
- Tools and Setup Questions
- Design and accessibility Questions
- Publishing Your Web Site
The actual Hypertext Markup Language Standard - HTML is the core language of nearly all web content. HyperText Markup Language is used to define and describe semantically the content (markup) of a web page in a well-structured format. HTML provides a means to create structured documents made up of blocks called HTML elements that are delineated by tags, written using angle brackets. Some introduce content into the page directly, others provide information about document text and may include other tags as sub-elements. Obviously, browsers do not display them, since they are used to interpret the content of the page.
Link to the Web Technology Living Standards maintained at the Web Hypertext Application Technology Working Group (WHATWG)
- HTML Basics
- HTML - Features Specification - Developer's Edition
- HTML - Full Specification
- HTML Introduction, Tutorials and Reference (MDN Web Docs)
- URL Living Standard
- DOM Living Standard
- Encoding Living Standard
- XMLHttpRequest Living Standard
- Console Living Standard
- Compatibility Living Standard
- Fetch Living Standard
- Fullscreen API Living Standard
- MIME Sniffing Living Standard
- Infra Living Standard
- Notifications API Living Standard
- Streams Living Standard
- Quirks Mode Living Standard
- Storage Living Standard
- Localizations and character encodings
- HTML Living Standard Specification - Full Table of Contents
- HTML reference
- HTML element reference
- HTML attribute reference
- Global attributes
- Inline elements and block-level elements
- Link types
- Media formats supported by the HTML audio and video elements
- Kinds of HTML content
- Quirks mode and standards mode
- Applying color to HTML elements using CSS
- HTML Living Standard Specification - References
- Events Developer Guide (MDN)
- Guide: Html Learning Area (MDN)
- Guide: User input and controls
- Guide: Using FormData objects
- Guide: Unicode Bidirectional Text Algorithm (BiDi)
- Guide: Getting started with HTML
- Guide: What’s in the head? Metadata in HTML
- Guide: HTML text fundamentals
- Guide: Creating hyperlinks
- Guide: Advanced text formatting
- Guide: Document and website structure
- Guide: Debugging HTML
- Guide: Marking up a letter
- Guide: Structuring a page of content
- Guide: Web literacy basics 1
- Guide: HTML Tables
- Guide: HTML table basics
- Guide: HTML table advanced features and accessibility
- Guide: HTML forms Overview
- Guide: Your first HTML form
- Guide: How to structure an HTML form
- Guide: The native form widgets
- Guide: Sending form data
- Guide: Form data validation
- Guide: How to build custom form widgets
- Guide: Sending forms through JavaScript
- Guide: HTML forms in legacy browsers
- Guide: Styling HTML forms
- Guide: Advanced styling for HTML forms
- Guide: Property compatibility table for form widgets
- Guide: HTML forms element reference
- Guide: HTML types reference
- Guide: HTML Questions
Contains links to all updated and actual living specifications of HTML Web Technology
- The History of HTML
- HTML Standard FAQ
- What is the WHATWG?
- HTML Conformance Checkers
- HTML History Timeline
- All normative references that appears in the HTML5 Specification
- Guide: Images in HTML
- Guide: Video and audio content
- Guide: From object to iframe — other embedding technologies
- Guide: Adding vector graphics to the web
- Guide: Responsive images
- Guide: Add a hitmap on top of an image
- Guide: Web literacy basics 2
Collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them.
The latest evolution of the Cascading Style Sheets language. Cascading Style Sheets are used to describe the appearance of web content.
- CSS Basics
- Introduction to CSS
- Getting started with CSS
- CSS3
- CSS Developer guide
- Common CSS questions
- CSS Reference
- CSS learning Area
- CSS Object Model (CSSOM)
- Guide: Determining the dimensions of elements
- Guide: Managing screen orientation
- Guide: Using dynamic styling information
- Guide: CSS Interfaces
- Guide: CSS Events
- Guide: Learn to style HTML using CSS
- Guide: Introduction to CSS
- Guide: Styling text
- Guide: Styling boxes
- Guide: CSS layout
- Guide: CSS on MDN
- Guide: CSS Questions
Link to the Cascading Style Sheet Web Technology Living Standards - CSS is a stylesheet language used to define the presentation of a document written in HTML.
- Cascading Style Sheets Homepage W3C
- CSS Animations Specification
- CSS Transitions Specification
- CSS Fonts Module Level 3 Specification
- Screen Orientation API Specification
- CSS Object Model (CSSOM) Specification
- SS Object Model (CSSOM) View Module Specification
- CSS Painting API Level 1 Specification
- CSS Typed OM Level 1 Specification
- CSS Custom Properties for Cascading Variables Module Level 1 Specification
- CSS Conditional Rules Module Level 3 Specification
- CSS Device Adaptation Specification
- CSS Counter Styles Level 3 Specification
- [Document Object Model (DOM) Level 2 Style Specification - Initial Definition (OBSOLETE)]https://www.w3.org/TR/DOM-Level-2-Style/()
- All CSS Specifications W3C
- Understanding the CSS Specifications
- CSS3 - Introduction, Tutorials and Reference (MDN Web Docs
- HTML & CSS
- Guide: CSS Learning Area (MDN)
- CSS Books Living Idea Specification
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
- Concepts and usage
- Guide: Using custom elements
- Guide: Using shadow DOM
- Guide: Using HTML templates and slots
- Shadow DOM Specification - Inital Defitinion (OBSOLETE)
- HTML Imports Specification
- DOM - The definition of 'shadow trees' in that Specification
- HTML Living Standard The definition of 'custom elements' in that specification
- HTML Living Standard The definition of template element in that specification
- Polymer — Google's Web Components Framework
- Snuggsi.es (Easy Web Components in ~1kB Including polyfill — All you need is a browser and basic understanding of HTML, CSS, and JavaScript classes to be productive.)
- Hybrids — Open source web components library, which favors plain objects and pure functions over class and this syntax. It provides a simple and functional API for creating custom elements
- Webcomponents.org — Site featuring web components examples, tutorials, and other information
- Smart.js — Web Components library with simple API for creating cross-browser custom elements
The web includes a wide array of APIs that can be used from JavaScript to build increasingly more powerful and
- Document Object Model (DOM)
- Events and the DOM
- Examples of web and XML development using the DOM
- How to create a DOM tree
- Introduction to the DOM
- Locating DOM elements using selectors
- Traversing an HTML table with JavaScript and DOM Interfaces
- Using the W3C DOM Level 1 Core
- Whitespace in the DOM
- DOM interfaces
- HTML DOM
- DOM Living Standard
- DOM Level 4 - OBSOLETE
- DOM Level 3 Core - OBSOLETE
- DOM Level 2 Core - OBSOLETE
- DOM Level 1 Specification- OBSOLETE
- DOM Examples
- CSS Object Model (CSSOM)
The web includes a wide array of APIs that can be used from JavaScript to build increasingly more powerful and capable applications, running either on the web, locally, or through technology such as Node.js, on a server.
- Web API interface reference
- Web API event reference
- Guide to web APIs
- CSS Object Model (CSSOM)
- [DOM (Document Object Model] Living Standard*](https://dom.spec.whatwg.org/)
- Web API Specifications (MDN Web Docs
2D and 3D Graphics Specifications
Link to the Web Technologies specifications for 2D and 3D Graphics
- Graphics 2D and 3D (MDN Web Docs)
- Canvas - APIs to draw 2D graphics using JavaScript
- SVG - Scalable Vector Graphics
- WebGL (3D Graphics) - standard OpenGL ES in web content
- Using HTML5 audio and video
- WebRTC - Real-Time Communications
- Audio and Video Manipulation (MDN)
- Audio and Video Delivery (MDN)
- Graphics on the web (MDN)
The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing. The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the element, draws hardware-accelerated 2D and 3D graphics.
- HTML Living Standard - The definition of 'the 2D rendering context' in that specification
- Canvas Tutorial
- Guide: HTML5 Canvas Deep Dive
- Canvas Handbook
- Demo: A basic ray-caster
- Manipulating video using canvas
The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the element, draws hardware-accelerated 2D and 3D graphics.
- EaselJS - An open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy
- Fabric.js - An open-source canvas library with SVG parsing capabilities
- heatmap.js - An open-source library for creating canvas-based data heat maps
- JavaScript InfoVis Toolkit - Creates interactive data visualizations
- Konva.js - A 2D canvas library for desktop and mobile applications
- p5.js - A full set of canvas drawing functionality for artists, designers, educators, and beginners
- Paper.js - An open-source vector graphics scripting framework that runs on top of the HTML5 Canvas
- Phaser - A fast, free and fun open source framework for Canvas and WebGL powered browser games
- Processing.js - A port of the Processing visualization language
- Pts.js - A library for creative coding and visualization in canvas and SVG
- Rekapi - An animation key-framing API for Canvas
- Scrawl-canvas - An open-source JavaScript library for creating and manipulating 2D canvas elements
- ZIM framework - Provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials
Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based vector graphics. SVG is essentially to graphics what HTML is to text. SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as CSS, DOM, and SMIL. SVG images and their related behaviors are defined in XML text files which means they can be searched, indexed, scripted and compressed. Additionally this means they can be created and edited with any text editor and with drawing software. SVG is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
- SVG Element Reference
- SVG Attribute Reference
- SVG DOM interface reference
- Applying SVG effects to HTML content
- Tools: SVG Test Suite
- Tools: Markup Validator
- Examples: Google Maps (route overlay) & Docs (spreadsheet charting)
- Examples: SVG bubble menus
- Examples: SVG authoring guidelines
- Examples: An overview of the Mozilla SVG Project
- Examples: Frequently asked questions regarding SVG and Mozilla
- Examples: SVG as an image
- Examples: SVG animation with SMIL
- Examples: SVG art gallery
- Animation and Interaction - Some real eye-candy SVG at svg-wow.org
- Animation and Interaction - Firefox extension (Grafox) to add a subset of SMIL animation support
- Animation and Interaction - nteractive photos manipulation
- Animation and Interaction - HTML transformations using SVG's foreignObject
- Mapping, charting, games & 3D experiments - Connect 4
- Mapping, charting, games & 3D experiments - jVectorMap (interactive maps for data visualization)
- Mapping, charting, games & 3D experiments - ointJS (JavaScript diagramming library)
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 elements. Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, and Microsoft Edge build 10240+; however, the user's device must also have hardware that supports these features. The element is also used by the Canvas API to do 2D graphics on web pages.
- WebGL 1.0 Specification
- WebGL 2.0 Specification
- OpenGL ES 2.0 Specification
- OpenGL ES 3.0 Specification
- WebGl Reference
- **
Guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.
- Getting started with WebGL
- An introduction to WebGL
- WebGL Fundamentals
- An intro to modern OpenGL
- WebGL tutorial
- A basic 2D WebGL animation example
- WebGL by example
- WebGL model view projection
- Matrix math for the web
- WebGL Examples GitHub Repository
- Tutorial: Adding 2D content to a WebGL context
- Tutorial: Using shaders to apply color in WebGL
- Tutorial: Animating objects with WebGL
- Tutorial: Creating 3D objects using WebGL
- Tutorial: Using textures in WebGL
- Tutorial: Lighting in WebGL
- Tutorial: Animating textures in WebGL
- Raw WebGL: An introduction to WebGL
- Khronos WebGL site
- WebGL Fundamental
- WebGL playground
- WebGL Academy
- WebGL Stats
- glMatrix - A JavaScript matrix and vector library for high-performance WebGL apps
- PhiloGL - A WebGL framework for data visualization, creative coding, and game development
- Pixi.js - A fast, open-source 2D WebGL renderer
- PlayCanvas - An open-source game engine.
- Sylvester - An open-source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.
- three.js - An open-source, fully featured 3D WebGL library.
- Phaser - A fast, free and fun open source framework for Canvas and WebGL powered browser games
- Web Fonts Overview
- CSS Text and Font Fundamentals
- Google Fonts
- Google Fonts - Guide
- Google Fonts - Developer API
- Google Fonts - Technical Considerations
- Google Fonts - Web Font Loader
- Design Google - Choosing Web Fonts: A Beginner’s Guide
- Type & Typography - Explore typographic culture and discover fonts for your next project with this collection of case studies, technical updates, and articles curated by the Google Fonts team
- 20 Best Google Web Fonts
- Choose a font - Google Web Designer Help
- How to use Google Fonts in your next web design project
- WebFont Generator (Font Squirrel)
- Web Safe Fonts
- The Web Open Font Format (WOFF)
Related to web media technologies, media capture and streams API, HTML audio and Video, WebRTC and other issues
Link to tutorials, specifications about these web techonologies
- Guide: Audio and video on the web
- Guide: Displaying video text tracks
- Guide: Adding Captions and Subtitles to HTML5 video
- Guide: Audio and Video Delivery
- Guide: Audio and Video manipulation
- Guide: Automated Options to Translate Multimedia
- Guide: Web Media Technologies
- Guide: Media Capture and Streams API
- Guide: Using HTML Audio and Video
- WebRTC
Extended Markup Language Technology
Link to the Web Technology specification of Extended Markup Language Technology
- XML Essentials W3C
- XSLT (Extensible Stylesheet Language Transformations)
- EXSLT (Extra functions which provide additional features to XSLT)
- Xpath
- MathML (Mathematical Markup Language)
- Parsing and Serializing XML (MDN)
Tutorials, references and tools for the Application-Layer Protocol for transmitting hypermedia documents, such as HTML.
Links for Tutorials, References and Tools realted to the HTTP
- HTTP Resources and Specifications
- Overview of HTTP
- Basics of HTTP
- Resources and URIs
- Identifying resources on the Web
- Data URIs
- MIME types
- HTTP Cache
- HTTP Cookies
- Cross-Origin Resource Sharing (CORS)
- Evolution of HTTP
- HTTP Messages
- A Typical HTTP Session
- Connection management in HTTP/1.x
- Connection management in HTTP/2
- Frame and message structure in HTTP/2
- Content Negotiation
- HTTP Headers
- HTTP Request Methods
- HTTP Status Response Codes
- CSP directives
- How Browsers Work
- HTTP range requests
- Redirections in HTTP
- HTTP Content Negotiation
- HTTP Authentication
- HTTP Conditional Requests
Helpful tools and resources for understanding and debugging HTTP
WebAssembly, Accessibility, Web Performance, Security, Progressive Web Apps, Web APIs, Web Storage.
Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps.
- Progressive web apps
- PWA Advantages
- Introduction to Progressive Web Applications
- Progressive Web App Structure
- Making PWAs work offline with Service workers
- How to make PWAs installable
- How to make PWAs re-engageable using Notifications and Push
- Progressive loading
- Using Service Workers
- ServiceWorkerWare (Express-like microframework for easy Service Worker development)
- The Service Worker Cookbook
- Instant Loading Web Apps with An Application Shell Architecture
- Using the Push API
- Using the Notifications API
- The Building Blocks of Responsive Design
- Mobile First
- Add to Home Screen Guide (How can take advantage of Add to home screen (A2HS)
- Workbox (piritual successor to sw-precache with more advanced caching strategies and easy precaching)
- UpUp (script that makes sure your site is always there for your users)
- sw-precache ( a node module to generate service worker code that will precache specific resources)
- oghliner (tool for deploying Offline Web Apps to GitHub Pages)
With so many different types of devices able to browse the web these days, responsive web design (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD; explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution; and explore the technologies available for serving different videos and images depending on such features.
- Client-side storage (how and when to use web storage, IndexedDB, and service workers)
- Using IndexedDB
- Using the Web Storage API
- localForage (JavaScript library for making client-side data storage really simple)
- Progressive Web Apps on Google Developers
- Progressive Web Apps Check List
- React PWA Guide Kit
- Tools for building progressive web apps with Angular
- Hacker News readers as Progressive Web Apps
- Progressive Web Apps: Escaping Tabs Without Losing Our Soul
- The Lighthouse Tool by Google
WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web.
- WebAssembly Specifications
- WebAssembly Introduction
- WebAssembly concepts
- Compiling a New C/C++ Module to WebAssembly
- Compiling an Existing C Module to WebAssembly
- Loading and running WebAssembly code
- Exported WebAssembly functions
- Understanding WebAssembly text format
- Converting WebAssembly text format to wasm
- Using the WebAssembly JavaScript API
- WebAssembly API Reference
- WebAssembly Examples
- Browser Compatibility
The Dynamic Websites – Server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.
Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using HTML, CSS, and JavaScript), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.
- Server-side website programming first steps
- Django Web Framework (Python)
- Express Web Framework (Node.js/JavaScript)
- Node server without framework
Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from ready-rolled CSS and JavaScript, to testing and automation apps, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, and working out reliable testing plans for your code. This part of the learning area aims to give you what you need get started and make informed choices.
The web industry is an exciting place to work, but it is not without its complications. The core technologies we use to build web sites are fairly stable now, but new features are being added all the time, and new tools — that facilitate working with, and are built on top of these technologies — are constantly appearing. On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.
Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer, but your knowledge needs to go further than just using the technologies — you need to use them responsibly so that you maximize the audience for your websites and don't lock anyone out of using them. To achieve this, you need to adhere to general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), do cross browser testing, and consider accessibility from the start.