Frontend Quiz

Every web page you open is built from the same three languages, and a handful of CSS ideas decide where everything lands on the screen. These are the ideas behind each question in the quiz, so if one caught you out, its section is below.

HTML, CSS and JavaScript

Each of the three front-end languages has one job:

• HTML describes the content and its structure: headings, paragraphs, links, images, forms.
• CSS styles it: colours, fonts, spacing, and where each element sits on the page.
• JavaScript makes it behave: reacting to clicks, fetching data, changing the page after it has loaded.

Keeping them apart is what lets you restyle a whole site by changing one stylesheet, without touching the HTML. SQL sometimes gets mixed into this list, but it belongs to the back end: it is the language for querying a database, and the browser never runs it. The Backend Quiz covers that side.

Links and images in HTML

A link is the <a> element, short for 'anchor'. Its href attribute holds the address it points to, and the text between the tags is what the reader clicks:

<a href="/videos/backend-quiz">Try the backend quiz</a>

Two other names are easy to mix up with it. href is an attribute, not a tag of its own. And there is a real <link> element, but it does something else: it sits in the page's <head> and connects the page to a resource such as a stylesheet. It never shows up as something to click.

Images use <img>. It has no closing tag, because it has no content of its own: the src attribute says which file to load, and alt describes the image for screen readers and for when it fails to load.

<img src="cat.png" alt="A cat asleep on a keyboard">

A common mistake with images is leaving out alt. If the image is pure decoration, write alt="" so screen readers skip it, instead of leaving the attribute off.

What 'cascading' means in CSS

CSS stands for Cascading Style Sheets. The cascade is the set of rules the browser uses when more than one rule tries to style the same element. Roughly, it looks at three things, in order:

1. Importance and origin: an !important declaration beats a normal one, and the page's own styles beat the browser's defaults.
2. Specificity: a more specific selector wins. An id beats a class, and a class beats a plain tag name.
3. Source order: when everything else is equal, the rule that comes later wins.

p { color: black; }
.note { color: blue; }
p { color: green; }

A paragraph with the class note is blue, because a class beats a tag, even though the green rule comes last. A plain paragraph is green, because the later of the two p rules wins.

When a style 'won't apply', the cascade is usually why: another rule is more specific. Browser DevTools list every rule that matched an element, with the losing ones crossed out.

The color property

To change the colour of text, CSS uses color, spelt the American way. There is no font-color or text-color property, and the browser silently ignores a property it doesn't recognise, so a typo here fails without any error.

.warning { color: #b00020; }

color is inherited, so setting it on a parent colours the text of everything inside it, unless a child sets its own. The background is a different property, background-color.

React and the frameworks around it

React is a JavaScript library for building user interfaces out of components: small functions that return what a piece of the page should look like. You will often hear it called a framework. React's own site calls it a library, and frameworks such as Next.js are built on top of it, but in everyday talk the two words blur.

The other names you will meet in job adverts belong to other languages, and mostly to the back end:

React's neighbours on the front end are Vue, Angular and Svelte: JavaScript tools that run in the browser.

Positioning: where an element sits

Every element has a position, and the default is static. A static element sits where it falls in the normal flow of the page, one block after another, and properties such as top and left have no effect on it.

The other values change that:

• relative keeps the element's place in the flow, then nudges it from there with top, left and friends.
• absolute takes the element out of the flow and places it relative to its nearest positioned ancestor.
• fixed places it relative to the browser window, so it stays put when you scroll.
• sticky behaves like relative until you scroll past a point, then sticks like fixed.

The classic mistake is giving a child position: absolute without giving any parent a position. The child then places itself against the whole page instead of its container. The fix is position: relative on the container:

.card { position: relative; }
.badge { position: absolute; top: 8px; right: 8px; }

z-index and stacking

When elements overlap, z-index decides which one is drawn on top: the higher number wins. It only works on positioned elements, meaning anything whose position isn't static. Flex and grid items are the exception: z-index works on them too. On a plain static element it does nothing, which is why a z-index: 9999 sometimes seems to be ignored.

z-index also depends on the stacking context. A positioned element with a z-index starts a group of its own, and everything inside it is stacked within that group. A child with z-index: 9999 can't climb above an element outside its parent's group if the parent itself sits lower. When a dropdown hides behind a header no matter how high you set it, look at the z-index of its ancestors.

Relative units

CSS lengths come in two kinds. Absolute units, such as px, cm and pt, are fixed sizes. Relative units are worked out from something else:

• em is relative to the element's font size. With a 16px font, 2em is 32px.
• rem is relative to the root element's font size, so it means the same everywhere on the page.
• % is relative to the parent, usually its width.
• vw and vh are percentages of the browser window's width and height.

Relative units are what make a layout adapt. If a reader turns up their browser's default text size, spacing set in rem grows with it, while spacing set in px stays the same.

Because em follows the font size, it compounds. Set lists to font-size: 1.2em and nest one list inside another: the inner list is 1.2 times 1.2, or 1.44 times the base size. So rem is the safer choice for font sizes, and em suits spacing that should follow the text around it.

flex: 1 and sharing space

Inside a flex container, flex: 1 tells an item to take the remaining space. It is shorthand for three properties: flex-grow: 1 (grow into spare room), flex-shrink: 1 (shrink when there isn't enough) and flex-basis: 0% (start from zero before sharing).

A common use is a fixed sidebar next to content that fills the rest:

.layout { display: flex; }
.sidebar { width: 200px; }
.main { flex: 1; }

On a 1,000px screen the sidebar keeps its 200px and the main area takes the other 800px. Give two items flex: 1 and they split the space equally; give one flex: 2 and it gets twice the share of the other.

By default a flex item won't shrink below the width of its content, so a long URL or a wide table can push the layout off the screen. Adding min-width: 0 to the item lets it shrink.

Key takeaways

• HTML is structure, CSS is style and JavaScript is behaviour; SQL belongs to the database.
• Links are <a href> and images are <img src alt>; <link> is for stylesheets.
• The cascade settles clashing rules by importance, then specificity, then order.
• Elements are static by default, and z-index needs a positioned element (or a flex or grid item).
• em and rem scale with font size, and flex: 1 makes an item fill the space left over.