The Front-End Developer Roadmap from
Frontend Masters.
Advancing your skills with in-depth, modern front-end engineering courses.
Overview:
Briefly introduce and define the infrastructure and technologies used to do front-end development.
Contribute content, suggestions, and fixes on github:
https://github.com/FrontendMasters/guides
The World Wide Web (WWW), commonly known as the Web, is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs, such as https://www.example.com/), which may be interlinked by hypertext, and are accessible over the Internet. The resources of the WWW may be accessed by users by a software application called a web browser.
English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser in 1990 while employed at CERN near Geneva, Switzerland. The browser was released outside CERN in 1991, first to other research institutions starting in January 1991 and then to the general public in August 1991. The World Wide Web has been central to the development of the Information Age and is the primary tool billions of people use to interact on the Internet.
Web resources may be any type of downloaded media, but web pages are hypertext media that have been formatted in Hypertext Markup Language (HTML). Such formatting allows for embedded hyperlinks that contain URLs and permit users to navigate to other web resources. In addition to text, web pages may contain images, video, audio, and software components that are rendered in the user's web browser as coherent pages of multimedia content.
Multiple web resources with a common theme, a common domain name, or both, make up a website. Websites are stored in computers that are running a program called a web server that responds to requests made over the Internet from web browsers running on a user's computer. Website content can be largely provided by a publisher, or interactively where users contribute content or the content depends upon the users or their actions. Websites may be provided for a myriad of informative, entertainment, commercial, governmental, or non-governmental reasons.
The Internet (contraction of interconnected network) is the global system of interconnected computer networks that use the Internet protocol suite (TCP/IP) to link devices worldwide. It is a network of networks that consists of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies. The Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents and applications of the World Wide Web (WWW), electronic mail, telephony, and file sharing.
In-depth Internet overviews:
The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as The Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web (where rapid, automatic software updates, vendor co-operation, standardization, and competition take place) has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.
The Web platform includes technologies—computer languages and APIs—that were originally created in relation to the publication of Web pages. This includes HTML, CSS 2.1, CSS, SVG, MathML, WAI-ARIA, ECMAScript, WebGL, Web Storage, Indexed Database API, Web Components, WebAssembly, Web Workers, WebSocket, Geolocation API, Server-Sent Events, DOM Events, Media Fragments, XMLHttpRequest, Cross-Origin Resource Sharing, File API, RDFa, WOFF, HTTP, TLS 1.2, and IRI.
The Web platform: Browser technologies:
In-depth Web Platform overview:
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.
Most relevant specifications:
A uniform resource locator (URL) (also called a web address) 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), although many people use the two terms interchangeably. A URL implies the means to access an indicated resource, which is not true of every URI. 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.
Most relevant specifications:
HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. 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.
Below is an example of a basic HTML file, with a <h1></h1> heading that a web browser will read.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Name of Web Page</title>
</head>
<body>
<h1>I am a web page</h1>
</body>
</html>
Most relevant specifications / documentation:
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.
Below is an example of a basic HTML file, with an internal CSS style sheet that styles the <h1></h1> red using
a CSS declaration.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Name of Web Page</title>
<!-- internal style sheet -->
<style type="text/css">
/* css declaration */
h1 {
color: red;
}
</style>
</head>
<body>
<h1>I am a web page</h1>
</body>
</html>
Most relevant specifications / documentation:
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).
Most relevant specifications / documentation:
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 plugins. 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.
Below is an example of a basic HTML file containing inline JavaScript which uses the DOM APIs to add a click event to the
<h1></h1> so that when the <h1></h1> is clicked by the mouse pointer a browser alert
appears with a custom message.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Name of Web Page</title>
<!-- internal style sheet -->
<style type="text/css">
/* css declaration */
h1 {
color: red;
}
</style>
</head>
<body>
<h1>I am a web page</h1>
<!-- internal javascript -->
<script type="text/javascript">
// document.querySelector.onclick this is a DOM API
document.querySelector("h1").onclick = function() {
alert("You click an h1!");
};
</script>
</body>
</html>
Most relevant specifications / documentation:
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:
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.
Most relevant specifications:
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).