50 Fun Facts About Front-End Web Development

Which 1996 film's promotional website stayed online unchanged for 25 years, becoming a time capsule of early web design?

Space Jam's site, heavy with animated GIFs, sat untouched until a sequel's trailer arrived in 2021. The 1996 pages still survive as a separate landing page.

Which navigation aid shows a page's place in a site's hierarchy as a trail of links back to the home page?

Breadcrumbs take their name from the trail the fairy-tale siblings dropped to find their way home. On a site they show where the current page sits in the hierarchy.

Which HTML tag began as an idea Netscape's Lou Montulli raised in a bar, coded overnight by a colleague?

The blink tag made text flash on and off. Browsers later abandoned it, and Firefox removed support in version 23.

Which phrase, borrowed from newspaper front pages, describes the part of a web page visible without scrolling?

Above the fold first meant the upper half of a folded newspaper's front page, the prime spot because it stays visible while the paper sits on a news stand.

Which browser reached over 90 percent of web usage in 2001 after winning the first browser war of the 1990s?

Internet Explorer came bundled with every copy of Windows, so customers already had it installed as the default before they could choose a rival.

In JavaScript's Date constructor, where days of the month start at 1, which month does the number 0 represent?

January is month 0 and December is month 11, so asking the constructor for month 12 quietly rolls the date over into the following year.

The HTML div tag, a block-level container that developers use to group other elements, is short for which word?

Division is the full word: a div marks off a block of the document, while its inline partner, span, wraps a run of text within a line.

JAWS, NVDA and Apple's VoiceOver are all examples of which assistive technology used to check a website's accessibility?

A screen reader turns text and image content into speech or braille. The whole class takes its name from one product, IBM Screen Reader, released in 1984.

Which CSS framework did Mark Otto and Jacob Thornton build at Twitter to keep the company's internal tools consistent?

Bootstrap was first called Twitter Blueprint. It was renamed and released as an open-source project on August 19, 2011.

On Windows, which single function key opens the developer tools in browsers such as Chrome, Edge and Firefox?

F12 opens the developer tools, as does Ctrl + Shift + I. From there a developer can inspect a page's HTML and edit its CSS live.

Which HTML element marks the highest-level heading on a page, with five smaller levels ranked beneath it?

The h1 element is the highest heading level and h6 the lowest. The advice is to use only one per page and never skip a level on the way down.

In an HTML link, the href attribute that holds the destination address is an abbreviation of which phrase?

Hypertext reference is the phrase behind href, the attribute that points the a element at a URL. Optional attributes such as title and target can sit beside it.

Which HTML element did 1990s web designers fill with invisible spacer GIFs to control page layout before CSS?

A table cell resizes itself to fit whatever image it holds, so a transparent GIF stretched to a chosen size let designers set a cell's dimensions by stealth.

In HTML, what does the entity   insert, a character that browsers refuse to collapse when repeated?

Non-breaking space is what nbsp abbreviates: a space that forbids an automatic line break at its position, keeping a pair like 100 km together on one line.

Which HTML attribute shows a brief hint inside an empty form field, such as an example name, until the user types?

A placeholder hints at what belongs in the field, such as an example first name. It is a weaker way to explain a form than a proper label.

Which HTML meta tag name stops phones rendering a page on a wide virtual window and shrinking it to fit?

The viewport meta tag tells a phone to lay the page out at its real screen width, so styles written for narrow screens actually apply.

Which XML-based image format, developed by the W3C since 1999, can be scaled to any size without losing quality?

SVG describes a picture in text, so its files can be searched, indexed, scripted and compressed as well as resized.

Which attribute on an HTML script tag makes the browser wait until the document is parsed before running the file?

With defer, a script runs only after the document has been parsed, and the DOMContentLoaded event holds off until that script has finished.

Which text encoding, declared in the charset meta tag of most web pages, was first sketched on a diner placemat?

UTF-8 was outlined by Ken Thompson over a meal with Rob Pike in New Jersey on September 2, 1992. The pair built it into their operating system within days.

Which technique, switched on by one attribute on an HTML img tag, fetches a picture only when it scrolls into view?

Lazy loading is built into browsers through the loading attribute. Its opposite setting, eager, is the default and loads the resource immediately.

Which CSS pseudo-class matches an element while a mouse pointer rests on it, yet behaves unreliably on touchscreens?

:hover has no true equivalent for a finger. Depending on the browser it may never match, match for a moment after a tap, or stay matched until the next touch.

Which CSS flag, written with a ! delimiter after a value, lets a declaration override the normal order of the cascade?

!important lets a declaration jump the queue, but a user's own important styles still beat an author's, so people who need larger fonts can insist on them.

Which CSS declaration hides an element so completely that the page is laid out as though it did not exist?

Setting display: none also removes the element from the accessibility tree, so assistive software never announces it.

Which CSS layout system, switched on with a single property value, organises content into rows and columns at once?

Grid is a two-dimensional layout system. Its fr unit hands each row or column a fraction of whatever room is left in the container.

Which CSS property, made for wrapping text around images, became a common tool for building multi-column page layouts?

The float property places an element at the left or right of its container. For years whole sites were built by floating columns to sit side by side.

Which value of the CSS box-sizing property makes an element's declared width include its padding and outer edge?

With border-box, a width of 100 pixels covers padding and border too, and the content area shrinks to absorb them. The default, content-box, adds them on top.

Which CSS length unit is relative to the font size of the page's html element, however deeply the text is nested?

A rem always follows the font size set on the root element, so changing that one value rescales every rem-sized part of the page.

In a CSS rule, what does a leading hash sign target, the category that carries the most weight in specificity?

An ID fills the first of specificity's three columns, and the selector with more in that column wins no matter what the other two columns hold.

Which CSS feature applies styles only under a stated condition, such as a narrow window, printing or reduced motion?

Media queries can test a device's type, its width or orientation, and even a user's preferences, so one stylesheet can restyle a page for a printer.

Which CSS preprocessor, designed by Hampton Catlin and first released in 2006, offers variables, nesting and mixins?

Sass is short for syntactically awesome style sheets. Its code is compiled into ordinary CSS before a browser ever sees it.

The CSS cubic-bezier() timing function is named after Pierre Bézier, an engineer at which French carmaker?

Renault employed Bézier, who popularised the curves for designing car bodies but did not invent them: Paul de Casteljau had developed them first, in 1959.

Which Norwegian web pioneer proposed CSS in 1994 while working with Tim Berners-Lee and Robert Cailliau at CERN?

Håkon Wium Lie later became chief technology officer of Opera Software, staying until the browser was sold to new owners in 2016.

Which nickname did web designers give the long-sought layout with several equal-height columns set by style sheets?

The holy grail got its name because, for years, the limits of CSS and the flaws of browsers left no way to build the layout that counted as fully correct.

Which JavaScript call do developers use to print a message in the browser's developer tools while debugging?

console.log() outputs a message to the console, the same panel that reports the errors a browser meets as it tries to run a page's code.

Which JavaScript operator compares two values without converting their types, so 1 never equals the string "1"?

=== is the strict equality operator, which always treats operands of different types as different. It also reports that NaN is not equal to anything.

Which value does a JavaScript variable hold when it has been declared with let but never assigned anything?

undefined is one of JavaScript's primitive types, and any variable that has not yet been given a value automatically has that type.

Which original JavaScript keyword declares names that stay visible outside the if or for block they were made in?

A var declaration belongs to its whole function, or to the global scope, so it can still be read after the block that declared it has ended.

Which JavaScript feature lets an inner function keep access to its outer function's scope after the outer one returns?

A closure bundles a function together with its surrounding state, and JavaScript creates one every time a function is created.

Which JavaScript behaviour lets code call a function on a line before the one where that function is declared?

Hoisting makes the interpreter appear to move declarations to the top of their scope before the code runs, although nothing in the file is actually moved.

Which JavaScript object, with states named pending, fulfilled and rejected, stands for an asynchronous task's result?

A Promise that has left the pending state is called settled, and its then(), catch() and finally() methods decide what happens next.

Which term did Jesse James Garrett put in the title of a 2005 article about pages that swap data in the background?

Ajax was Garrett's label for techniques he had seen on Google pages. Similar background requests had already appeared in Outlook Web Access in 2000.

Which XML-like syntax extension, created by Facebook for use with React, lets developers write markup inside JavaScript?

JSX has since been adopted by several other frameworks. A build step converts its tags into ordinary function calls before any browser runs them.

Which JavaScript framework did Evan You announce in 2014, having begun the project under the working name Seed?

Vue is pronounced like the word view. Its creator wanted to keep only the part he liked of a framework he had used at Google and build something far lighter.

Which Google-developed framework is a ground-up rewrite, in TypeScript, of an earlier project whose name ended in JS?

Angular was rebuilt by the same team that made the original, and it is sometimes written as Angular 2+ to tell the two apart.

Which JavaScript package manager, created by Isaac Z. Schlueter in 2010, was bought by Microsoft-owned GitHub in 2020?

npm was originally short for Node Package Manager, and it is the default package manager for the Node.js runtime.

Which JavaScript engine did Google create for the 2008 debut of Chrome, later powering the Node.js runtime as well?

V8 is named after the V8 car engine, and its lead developer was Lars Bak. For several years it made Chrome faster than other browsers at running JavaScript.

Which browser engine did Apple start in 2001 as a fork of the KDE project's KHTML code, using it to power Safari?

WebKit also sits under almost every browser on iOS and iPadOS. Inside Apple the project was started by Lisa Melton on June 25, 2001.

Which JavaScript compiler, first written by Sebastian McKenzie, turns modern syntax into code older engines can run?

Babel is a free, open-source transcompiler. Its plugins rewrite syntax that is not yet widely supported into a backward-compatible version.

Which term for code that gives an older browser a missing feature did Remy Sharp name after a brand of wall paste?

Polyfill comes from Polyfilla, a paste for covering cracks and holes in walls. Sharp coined it in 2009 while co-writing the book Introducing HTML5.

In a six-digit CSS hex colour code such as #3399CC, the first pair of digits sets the intensity of which colour?

Red comes first, then green, then blue. With each pair running from 00 to FF, the system can describe 16,777,216 different colours.