Frontend Cheat Sheet Appendix
Right click to download this web resolution copy:
Purchase a high-quality print or downloadable PDF here.
Table of Contents
HTML
HTML (HyperText Markup Language), originally released in 1993, is a plain text language that determines the underlying structure and content of all websites. It is generally found in files ending in .html, and can be edited with a common plain text editor such as Notepad, Notepad++, and TextEdit, or more complex editors like VSCode, Vim, or CodePen.io.
HTML is supported by two other languages, CSS and JavaScript, which allow developers to manipulate the structure and appearance of HTML documents with sophisticated rules and procedures.
Anatomy of an HTML Element
HTML documents are comprised of HTML elements, which are represented in plain text by tags, attributes, and content delimited by angle brackets.
The first pair of angle brackets surround the opening tag, which contains any attributes to further specify the element's behavior.
After the opening tag comes the element's body. Any elements that appear in another element's body are considered to be children of that element.
In this example, the element has two attributes and a plain text body. The first attribute's name, or "key", is id with a value of "greeting", and the second attribute sets the element's class to "example". These attributes are used by CSS and JavaScript to define style rules and dynamic behavior.
Finally, the closing tag, which always begins with a forward slash, denotes the end of the element.
Anatomy of an HTML Document
HTML documents are structured hierarchically, or to put it more simply: Like a tree, with one element at the root, defined by an <html> tag, which always has two branches: a <head> and a <body>, two more tags defined within the root element's body as its children.
The <head> element contains metadata such as the document's title, author, language, and encoding, as well as scripts and stylesheets (or links to other files containing the scripts and styles).
The <body> element contains the actual document content intended for viewing by a human in a web browser, "marked up" with HTML tags that determine how the text, images, and other media will shift and change in different situations.
In this example, there is an additional paragraph (<p>) element added by dynamic JavaScript to the right.
HTML and CSS
There are three primary ways to style an HTML document with CSS. Two are documented at the top.
Inline (Document)
<style>body { background: cyan; }</style><style>body { background: cyan; }</style>The inline document method allows the author to embed page-wide CSS rules into the HTML document itself. The <style> tag is generally included inside the document's <head>.
External
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />The external <link> tag can be used to include rules from a separate stylesheet file, in this case one named style.css. This tag is not to be confused with the anchor <a> tag, which is used to create hyperlinks within other text elements.
Inline (Element)
Styles can be defined within an individual tag. This is where rules go when JavaScript is used to define them in an element's style property, as on the right side of the sheet. These rules will take precedence over rules defined in <style> tags and external stylesheets.
HTML and JS
Like CSS, there are three primary ways to "connect" your document to some JavaScript code:
Inline (Document)
<script>alert("Inline script");</script><script>alert("Inline script");</script>This example, placed anywhere in an HTML document's <head> or <body>, will result in a popup box that says "Inline script". It is the most straightforward way of getting JavaScript into an HTML document, with a <script> tag with no attributes and the script itself in the element's body.
External
While CSS uses the <style> tag for inline stylesheets and the <link> tag for external stylesheets, JavaScript uses the <script> tag for both inline and external scripts. However, for an external script, the filename is defined with the src attribute, and the tag is closed immediately with no body.
Inline (Element)
Individual elements can have JavaScript behavior attached to them. This is not depicted on the sheet. An example would be:
<div id="clickme" onclick="alert('Element script!')">Click Me</div><div id="clickme" onclick="alert('Element script!')">Click Me</div>This would result in a div that shows a popup when clicked. Functions previously defined in script tags and external scripts can be referenced by these inline event handler attributes.
The onclick attribute used in this example is roughly equivalent to the following:
$div = document.querySelector("#clickme");
$div.addEventListener("click", (event) => {
alert("Element script!");
});$div = document.querySelector("#clickme");
$div.addEventListener("click", (event) => {
alert("Element script!");
});HTML Entities and Escapes
HTML tags are delimited by angle brackets, more commonly known as the "less than" and "greater than" signs.
So what happens when you need to put such a sign inside an HTML document?
This, along with many other reasons, is why escapes exist. By using an ampersand (&) in HTML or percent sign (%) in a URL, the computer is instructed to temporarily "escape" from the current context and interpret the next few characters in a special way. This process is extremely important when encoding, decoding, and sanitizing data, but it can also be convenient to know certain entity names for quickly mocking up special text in an HTML document.
Further reading:
CSS
CSS (Cascading StyleSheets) is one of the core technologies of the modern web. It was introduced in 1996, and is a powerful language for dynamically styling websites. "Stylesheets" are plain text files, usually ending in .css, which contain rules for rendering HTML elements. When more than one rule applies to the same element, the browser uses a "cascading" pattern to decide which rules ultimately apply.
Anatomy of a CSS Rule
CSS rules consist of a selector, and one or more pairs of property names and values. The selector determines which HTML elements are affected by the properties in the curly braces. CSS rules can be condensed to one line as shown for brevity, or written out over multiple lines, for example:
body {
background: cyan;
color: black;
}body {
background: cyan;
color: black;
}Anatomy of a CSS Selector
CSS selectors are named for their usage in selecting which elements are affected by the following rules.
CSS selectors have many parts, but the most common are:
- tag, which filters rules to specific HTML tags
- id, prefixed with the hashtag (
#) character, used to uniquely target a single element, as ID attributes must be unique in the document - class, prefixed with the period (
.) character, which is the easiest way to assign rules to elements in different parts of the document - pseudo-class, prefixed with the colon (
:) character, which are used to apply styles at specific interaction points like mouse hover or mouse click, or to use more advanced filter functions likenot()andnth-child(). - attribute, which is not depicted on the sheet. Any HTML attribute can have styles targeted to it like so:
[data-name=Example], which would target an HTML element that looks like<div data-name="Example"></div>.
More Specific Rules Take Precedence!
This is where "cascading" comes into play: When the same element matches the selector for more than one CSS rule, the browser must decide which rule "wins". There are many nuances to this process, but basically, the more specific a rule is, the higher in the priority list it goes. Styles that are inline to an element (that is, defined with the element's style attribute inside its opening tag) take top priority.
Hierarchy Selectors
Elements can be styled based on their relationship to each other. If we take an example document:
<section>
<p>First paragraph.</p>
<div>
<p>Second paragraph.</p>
</div>
</section>
<p>Third paragraph.</p><section>
<p>First paragraph.</p>
<div>
<p>Second paragraph.</p>
</div>
</section>
<p>Third paragraph.</p>Then we might apply a style rule such as:
section p { color: red }section p { color: red }This would color the first and second paragraph red, because they're both inside the section element. However:
section > p { color: red }section > p { color: red }Would only apply to the first paragraph, because only immediate children, not all descendants, are affected by the > selector.
Box Property Shorthand Values
See Shorthand properties at MDN.
Setting the border, margin, and padding of elements can be cumbersome. These shorthand values allow you to define all four sides of the property in just one expression, for example:
div {
margin: 10px 20px 30px;
}div {
margin: 10px 20px 30px;
}Would give all <div> elements a top margin of 10px, left and right margins of 20px, and a bottom margin of 30px.
Hexadecimal Color Codes
In CSS, colors can be represented in many ways. One of the most convenient is by using the hexadecimal shorthand. Two digits each are assigned for red, green, blue, and alpha (also known as opacity or transparency). With two digits, the maximum value you can represent is 255, or FF (sixteen fifteens plus fifteen). 00000000 would be fully invisible black, and FFFFFFFF would be fully opaque white.
Hexadecimal is a number system with 16 digits, as opposed to our day-to-day number system, which uses only ten digits, 0 - 9. In addition to 0 - 9, hexadecimal uses six additional digits, which are represented with the letters A - F. "Hex" means six and "dec" means ten.
So, to count to twenty in hexadecimal, you would count:
1, 2, 3, 4, 5, 6, 7, 8, 9, A.
It was the same as decimal up until 10, which is A in hexadecimal. We don't need any more digits until we get past 15, which is F. So we keep counting:
B, C, D, E, F, 10, 11, 12, 13.
That's right. In hexadecimal, 10 is 16 and 13 is 20. This unusual number system is convenient in computing because 16 is a power of two, and computers do everything in twos (after all, binary is just a regular old number system that happens to only have two digits, 0 and 1).
See MDN:
JavaScript
JavaScript has become one of the most dominant languages in the world for web development. It was first introduced in 1995, but only as an integrated language for web browsers. Now, web servers can also be programmed with JavaScript, making it a powerful tool for any web developer. Its syntax is reminiscent of C, but has evolved many modern features over the years.
Developer Console Shortcuts
To experiment with JavaScript right in your desktop browser, press the console shortcut. You can start testing out different JavaScript expressions right away, as well as see any debug information for the page you're on.
Most browsers also support pressing Ctrl + Shift + C, or Cmd + Shift + C and then clicking on an element in the page to open it in the HTMl inspector, as well as pressing F12 to toggle the entire developer tools panel.
When you have selected an element in the HTML inspector, most browsers allow you to interrogate that element by switching to the JavaScript console. For example, in FireFox, whatever element you have selected in the inspector is assigned to the variable $0. You can go to the console and type, for example, $0 to see its dynamic tag representation, and mouse over it to cause it to be highlighted in the main view and verify that you're looking at the right element. Then you can manipulate it just like any DOM element, like setting $0.innerHTML = "Hello, world!" to overwrite its contents with a new string.
Anatomy of a JavaScript Function Call
JavaScript function calls generally begin with an object provided by the browser or server, such as console , document and window for the browser. These are special JavaScript objects full of useful functions for manipulating the browser. In this example, the log function is called on the console object, and two arguments are passed: name, a variable that we assume has been defined earlier with some statement such as let name = "Hypertext Markupman", and "String literal", an arbitrary string defined in-place, or "literal"ly.
Semicolons are not exactly required after every single JavaScript expression, but it's not a bad idea to put one after most function calls just so the interpreter knows exactly when you're finished.
The DOM (Document Object Model)
The DOM is how you use JavaScript to "talk" to an HTML document, turning it into a living, breathing process. DOM functions are encapsulated mostly within the document object. This code snippet is an example of some <script> you could put in the <head> of your HTML file to dynamically add some content after the static content has finished loading.
This snippet is also an example of another CSS shorthand, using only one character for each color in F0F to define the color as FF00FF, which browsers also accept as being named fuchsia.
The event handler itself is an example of JavaScript's modern anonymous function syntax, using only a pair of parentheses and curly braces joined by the => symbol, which is meant to represent a rudimentary arrow showing the flow of arguments into the subsequent function body.
The JSON Encode / Decode Cycle
JSON is the lingua franca of web applications, having surpassed XML and binary formats in support and notoriety.
JSON is significant because it is a way of simplifying complex living JavaScript objects into inert plain text (JSON). Once you have your JSON, it can be safely transmitted to another program and reconstituted into objects on the other side, regardless of what language or technology is being used there.
To encode a JavaScript object into plain text, pass that object as the sole argument to the JSON.stringify() function.
To decode a JSON string back into JavaScript objects, pass the string as the sole argument to the JSON.parse() function.
Mike D is a dear friend who is unfortunately no longer with us. The D stands for "Cool".
HTTP
Underneath the trifecta of HTML, CSS, and JavaScript, lies the fundamental protocol HTTP.
HTTP defines a common language for communication between web servers (where websites live) and web clients (browsers, phones, desktops, laptops, tablets). It organizes the process of utilizing its own underlying protocols, such as DNS, TCP/IP, and TLS.
Further reading: An overview of HTTP at MDN.
Anatomy of an URL (Uniform Resource Locator)
URLs are complex strings that allow browsers to find the right server, and servers to return the right information. They begin with a protocol such as http or https followed by a colon and two forward slashes ://.
Then comes the host information: The subdomain (if any), the primary domain such as archive, and the top-level domain such as org or com, separated by periods.
The default port for all HTTP traffic is 80, and the default port for all HTTPS traffic is 443. During development, web programmers may run their web applications locally in non-standard ports such as 5000, 8080 or 9292, and the browser can be directed to access these other ports on the server by adding it to the host information prefixed by a colon :.
After the host information comes the request path, which lets the server know where on the website it should look for the requested webpage.
There are optional parts for a URL:
- Starting with a question mark
?, query string parameters can be supplied to the server to carry additional information like what kind of traffic the request is, or information for pre-populating a form. Each parameter is defined by a key and a value separated by an equals sign=, similar to HTTP attributes. Multiple parameters can be separated by an ampersand&. - Starting with a number sign
#, the anchor or fragment determines which part of the page is requested.
Common HTTP Request Headers
When you go to a website, your browser (the web client) sends an HTTP request to the corresponding host computer (the web server).
An HTTP request looks like this, starting with the request method (GET for most browsing requests, POST for form submissions), the path, and the protocol version, followed by the headers, with each key-value pair joined by a colon and separated by a newline:
GET /blog HTTP/1.1 Host: thingsfittogether.com Accept: text/html,text/* Accept-Language: en-US,en;q=0.5 Referer: maxcantor.net
GET /blog HTTP/1.1
Host: thingsfittogether.com
Accept: text/html,text/*
Accept-Language: en-US,en;q=0.5
Referer: maxcantor.netWhen there is form submission data that constitutes a requests's body, also called a payload, it is attached after the headers, prefixed by two newlines.
Common HTTP Response Status Codes
Web servers reply to HTTP requests with HTTP responses. They are also transmitted in plain text from the server (the web host) and the client (your phone, computer, or tablet):
HTTP/1.1 200 OK Content-Type: text/plain This is a plain text response!
HTTP/1.1 200 OK
Content-Type: text/plain
This is a plain text response!