# Web technologies employed by front-end developers
![](https://box.kancloud.cn/2015-10-19_5624560aa5063.jpg "http://www.2n2media.com/compare-front-end-development-and-back-end-development")
image source: [http://www.2n2media.com/compare-front-end-development-and-back-end-development](http://www.2n2media.com/compare-front-end-development-and-back-end-development)
The following web technologies are employed by front-end developers:
- Hyper Text Markup Language (aka HTML)
- Cascading Style Sheets (aka CSS)
- Document Object Model (aka DOM)
- JavaScript Programming Language (aka: ECMAScript 6, ES6, JavaScript 2015)
- Web API's (aka HTML5 and friends or Browser API's)
- Hypertext Transfer Protocol (aka HTTP)
- Uniform Resource Locator's (aka URL)
- JavaScript Object Notation (aka JSON)
- Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)
These technologies are defined below with the relevant documentation and specifications. For a comprehensive list of all web related specifications have a look at [platform.html5.org](https://platform.html5.org/).
##### Hyper Text Markup Language (aka HTML)
> HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language. - wikipedia.org
Most relevant specifications / documentation:
- [HTML5 from W3C](http://www.w3.org/TR/html5/) : 5th major revision of the core language of the World Wide Web
- [The elements of HTML from the Living Standard](https://html.spec.whatwg.org/multipage/semantics.html#semantics)
- [The HTML Syntax](https://html.spec.whatwg.org/multipage/syntax.html#syntax) from the Living Standard
- [All W3C HTML Spec](http://www.w3.org/standards/techs/html#w3c_all)
- [HTML element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
- [HTML attribute reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
- [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)
##### Cascading Style Sheets (aka CSS)
> Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. - wikipedia.org
Most relevant specifications / documentation:
- [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification](https://drafts.csswg.org/css2/)
- [Selectors Level 3](http://www.w3.org/TR/css3-selectors/)
- [All W3C CSS Specifications](http://www.w3.org/Style/CSS/current-work#roadmap)
- [CSS reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
##### Document Object Model (aka DOM)
> The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API). - wikipedia.org
Most relevant specifications / documentation:
- [W3C DOM4](http://www.w3.org/TR/2014/WD-dom-20140204/)
- [DOM Living Standard](https://dom.spec.whatwg.org/)
- [Document Object Model (DOM) Level 3 Events Specification](http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/)
##### JavaScript Programming Language (aka: ECMAScript 6, ES6, JavaScript 2015)
> JavaScript is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage or graphics facilities, relying for these upon the host environment in which it is embedded. - wikipedia.org
Most relevant specifications / documentation:
- [ECMAScript® 2015 Language Specification](http://www.ecma-international.org/ecma-262/6.0/)
##### Web API's (aka HTML5 and friends)
> When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site. - Mozilla
Most relevant documentation:
- [Web API Interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
##### Hypertext Transfer Protocol (aka HTTP)
> The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. - wikipedia.org
Most relevant specifications:
- [Hypertext Transfer Protocol -- HTTP/1.1](https://tools.ietf.org/html/rfc2616)
- [Hypertext Transfer Protocol version 2 draft-ietf-httpbis-http2-16](https://tools.ietf.org/html/draft-ietf-httpbis-http2-16)
##### Uniform Resource Locator's (aka URL)
> A uniform resource locator (URL) (also called a web address)[1][2] is a reference to a resource that specifies the location of the resource on a computer network and a mechanism for retrieving it. A URL is a specific type of uniform resource identifier (URI),[3] although many people use the two terms interchangeably.[4] A URL implies the means to access an indicated resource, which is not true of every URI.[4][5] URLs occur most commonly to reference web pages (http), but are also used for file transfer (ftp), email (mailto), database access (JDBC), and many other applications. - wikipedia.org
Most relevant specifications:
- [Uniform Resource Locators (URL)](http://www.w3.org/Addressing/URL/url-spec.txt)
- [URL Living Standard](https://url.spec.whatwg.org/)
##### JavaScript Object Notation (aka JSON)
> JSON, sometimes JavaScript Object Notation, is an open standard format that uses human-readable text to transmit data objects consisting of attribute–value pairs. It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX). Although originally derived from the JavaScript scripting language, JSON is a language-independent data format. Code for parsing and generating JSON data is readily available in many programming languages. The JSON format was originally specified by Douglas Crockford. It is currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA standard is minimal, describing only the allowed grammar syntax, whereas the RFC also provides some semantic and security considerations. The official Internet media type for JSON is application/json. The JSON filename extension is .json. - wikipedia.org
Most relevant specifications:
- [Introducing JSON](http://json.org/)
- [The JSON Data Interchange Format](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf)
- [JSON API](http://jsonapi.org/)
##### Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)
> Accessibility refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and "indirect access" meaning compatibility with a person's assistive technology (for example, computer screen readers). - wikipedia.org
- [Web Accessibility Initiative (WAI)](http://www.w3.org/WAI/)
- [Web Content Accessibility Guidelines (WCAG) Current Status](http://www.w3.org/standards/techs/wcag#w3c_all)
- [Accessible Rich Internet Applications (WAI-ARIA) Current Status](http://www.w3.org/standards/techs/aria#w3c_all)
- Introduction
- What is a front-end developer?
- Part I: The front-end practice
- Front-end jobs titles
- Common web tech employed
- Front-end dev skills
- Front-end devs develop for...
- Front-end on a team
- Generalist myth
- Front-end interview questions
- Front-end job boards
- Front-end salaries
- How FD's are made
- Part II: Learning front-end dev
- Self directed learning
- Learn internet/web
- Learn web browsers
- Learn DNS
- Learn HTTP/networks
- Learn web hosting
- Learn general front-end dev
- Learn UI/interaction design
- Learn HTML & CSS
- Learn SEO
- Learn JavaScript
- Learn DOM, BOM & jQuery
- Learn web fonts
- Learn accessibility
- Learn web/browser API's
- Learn JSON
- Learn front-end app architecture
- Learn Interface/API design
- Learn web dev tools
- Learn command line
- Learn node.js
- Learn module loader
- Learn package managers
- Learn version control
- Learn build & task automation
- Learn site performance optimization
- Learn JS testing
- Learn headless browsers
- Learn offline dev
- Learn security
- Learn multi-thing dev (e.g. RWD)
- Directed learning
- front-end schools, courses, & bootcamps
- Front-end devs to learn from
- Newsletters, news, & podcasts
- Part III: Front-end dev tools
- General front-end dev tools
- SEO tools
- Prototyping & wireframing tools
- Diagramming tools
- HTTP/network tools
- Code editing tools
- Browser tools
- HTML tools
- CSS tools
- DOM tools
- JavaScript tools
- App (desktop, mobile, tablet etc..) tools
- Templating tools
- UI/widget tools
- JSON tools
- Testing framework tools
- Data storage tools
- Module/package loading tools
- Module/package repo. tools
- Web/cloud/static hosting tools
- Project management & code hosting
- Collaboration & communication tools
- CMS hosted/API tools
- BAAS (for front-end devs) tools
- Offline tools
- Security tools
- Tasking (aka build) tools
- Deployment tools
- Site/app monitoring tools
- JS error monitoring tools
- Performance tools