Front-End Web Development
0Loading crowd target
0Loading crowd target
7correct to beat the crowd
50 free Front-End Web Development trivia questions with answers — science & nature quiz, new questions added Oct 2026.
The front end is the part of the web people actually see and touch: the markup that structures a page, the stylesheets that dress it and the scripts that make it respond. It is also a field with a surprisingly colourful history, full of browser rivalries, late-night hacks and names borrowed from fairy tales and hardware shops. This front-end quiz mixes practical knowledge with that history. Expect questions on HTML elements and attributes, CSS layout, units and selectors, JavaScript's stranger behaviours, popular frameworks and build tools, browser engines, performance and accessibility. It suits working developers checking their fundamentals, students preparing for a frontend dev interview, and anyone curious about how web pages are put together. Every answer comes with a short explanation, so a miss still teaches something.
30 of 50 questions with answers and explanations. Play the quiz
Q 01Which 1996 film's promotional website stayed online unchanged for 25 years, becoming a time capsule of early web design?
Space Jam
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.
Q 02Which navigation aid shows a page's place in a site's hierarchy as a trail of links back to the home page?
Breadcrumbs
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.
Q 03Which HTML tag began as an idea Netscape's Lou Montulli raised in a bar, coded overnight by a colleague?
blink
The blink tag made text flash on and off. Browsers later abandoned it, and Firefox removed support in version 23.
Q 04Which phrase, borrowed from newspaper front pages, describes the part of a web page visible without scrolling?
Above the fold
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.
Q 05Which browser reached over 90 percent of web usage in 2001 after winning the first browser war of the 1990s?
Internet Explorer
Internet Explorer came bundled with every copy of Windows, so customers already had it installed as the default before they could choose a rival.
Q 06In JavaScript's Date constructor, where days of the month start at 1, which month does the number 0 represent?
January
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.
Q 07The HTML div tag, a block-level container that developers use to group other elements, is short for which word?
Division
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.
Q 08JAWS, NVDA and Apple's VoiceOver are all examples of which assistive technology used to check a website's accessibility?
Screen reader
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.
Q 09Which CSS framework did Mark Otto and Jacob Thornton build at Twitter to keep the company's internal tools consistent?
Bootstrap
Bootstrap was first called Twitter Blueprint. It was renamed and released as an open-source project on August 19, 2011.
Q 10On Windows, which single function key opens the developer tools in browsers such as Chrome, Edge and Firefox?
F12
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.
Q 11Which HTML element marks the highest-level heading on a page, with five smaller levels ranked beneath it?
h1
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.
Q 12In an HTML link, the href attribute that holds the destination address is an abbreviation of which phrase?
Hypertext reference
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.
Q 13Which HTML element did 1990s web designers fill with invisible spacer GIFs to control page layout before CSS?
table
Q 21Which CSS pseudo-class matches an element while a mouse pointer rests on it, yet behaves unreliably on touchscreens?
:hover
: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.
Q 22Which CSS flag, written with a ! delimiter after a value, lets a declaration override the normal order of the cascade?
!important
!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.
Q 23Which CSS declaration hides an element so completely that the page is laid out as though it did not exist?
display: none
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.
Q 14In HTML, what does the entity insert, a character that browsers refuse to collapse when repeated?
Non-breaking space
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.
Q 15Which HTML attribute shows a brief hint inside an empty form field, such as an example name, until the user types?
placeholder
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.
Q 16Which HTML meta tag name stops phones rendering a page on a wide virtual window and shrinking it to fit?
viewport
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.
Q 17Which XML-based image format, developed by the W3C since 1999, can be scaled to any size without losing quality?
SVG
SVG describes a picture in text, so its files can be searched, indexed, scripted and compressed as well as resized.
Q 18Which attribute on an HTML script tag makes the browser wait until the document is parsed before running the file?
defer
With defer, a script runs only after the document has been parsed, and the DOMContentLoaded event holds off until that script has finished.
Q 19Which text encoding, declared in the charset meta tag of most web pages, was first sketched on a diner placemat?
UTF-8
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.
Q 20Which technique, switched on by one attribute on an HTML img tag, fetches a picture only when it scrolls into view?
Lazy loading
Lazy loading is built into browsers through the loading attribute. Its opposite setting, eager, is the default and loads the resource immediately.
Setting display: none also removes the element from the accessibility tree, so assistive software never announces it.
Q 24Which CSS layout system, switched on with a single property value, organises content into rows and columns at once?
Grid
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.
Q 25Which CSS property, made for wrapping text around images, became a common tool for building multi-column page layouts?
float
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.
Q 26Which value of the CSS box-sizing property makes an element's declared width include its padding and outer edge?
border-box
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.
Q 27Which CSS length unit is relative to the font size of the page's html element, however deeply the text is nested?
rem
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.
Q 28In a CSS rule, what does a leading hash sign target, the category that carries the most weight in specificity?
An ID
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.
Q 29Which CSS feature applies styles only under a stated condition, such as a narrow window, printing or reduced motion?
Media queries
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.
Q 30Which CSS preprocessor, designed by Hampton Catlin and first released in 2006, offers variables, nesting and mixins?
Sass
Sass is short for syntactically awesome style sheets. Its code is compiled into ordinary CSS before a browser ever sees it.