I85PREP
⌘ K
Junior Web Developer study materials
Junior Web Developer study resources

Junior Web Developer practice questions

One question at a time. Build your Junior Web Developer understanding.

First 50 of 200 questions. Each one lists the choices, the correct answer, and an explanation. The checker at the top of this page saves progress in this browser when it is available.

Continue in the practice tool above to load more questions, 50 at a time.

Question 1HTML and Semantic Markup

Which HTML element is the correct choice for the single most important heading of a page's main content?

  1. <h6>
  2. <strong>
  3. <h1> Correct answer.
  4. <header>

Explanation

Heading elements h1 through h6 express document structure, and h1 marks the highest-level heading. A page's primary content heading should normally be an h1 so assistive technology and search engines can identify the main topic.

Question 2HTML and Semantic Markup

A navigation menu appears in the page footer. Which markup most accurately conveys its purpose to assistive technology?

  1. <div role="menu">
  2. <footer><menu>
  3. <nav aria-label="Footer"> Correct answer.
  4. <ul class="footer-links">

Explanation

The nav element is the semantic container for major navigation blocks, and an accessible name distinguishes multiple nav regions. Adding aria-label="Footer" lets screen reader users tell this navigation apart from the primary navigation.

Question 3HTML and Semantic Markup

Which element is designed to mark text that has been removed from a document during an edit?

  1. <del> Correct answer.
  2. <s>
  3. <mark>
  4. <strike>

Explanation

The del element represents content deleted from the document and often pairs with ins to show revisions. It can carry datetime and cite attributes to record when and why the change happened.

Question 4HTML and Semantic Markup

Which attribute provides a text alternative that screen readers announce for an image?

  1. aria-describedby
  2. alt Correct answer.
  3. title
  4. longdesc

Explanation

The alt attribute supplies the accessible name for an img element and is what screen readers read in place of the image. Decorative images use an empty alt so they are skipped.

Question 5HTML and Semantic Markup

Which input type should be used so mobile browsers show a numeric keypad for a field expecting a phone number?

  1. type="text"
  2. type="number"
  3. type="tel" Correct answer.
  4. type="range"

Explanation

The tel input type signals that the value is a telephone number, prompting mobile browsers to offer a phone-friendly keyboard. It does not enforce a format, so a pattern attribute is added when validation is needed.

Question 6HTML and Semantic Markup

Which element groups a set of related form controls with a visible caption?

  1. <label>
  2. <fieldset> Correct answer.
  3. <output>
  4. <section>

Explanation

The fieldset element groups related controls, and its child legend provides the group's caption. Screen readers announce the legend when focus enters any control inside the group.

Question 7HTML and Semantic Markup

Which element is the standard semantic container for a self-contained composition such as a blog post or forum entry?

  1. <div>
  2. <section>
  3. <aside>
  4. <article> Correct answer.

Explanation

The article element represents a self-contained composition that could be distributed or syndicated on its own. Blog posts, news stories, and forum entries fit this definition.

Question 8HTML and Semantic Markup

Which doctype declaration puts a document into standards mode in modern browsers?

  1. <!doctype strict>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  3. <!DOCTYPE html> Correct answer.
  4. <!DOCTYPE HTML5>

Explanation

The short HTML doctype, written case-insensitively as <!DOCTYPE html>, is the current standard and triggers no-quirks mode. Older long doctypes belong to previous HTML versions and are unnecessary.

Question 9HTML and Semantic Markup

A page needs a heading for a widget's title inside a card, but the card is not a document section. Which approach best preserves the document outline?

  1. Use a <p> styled to look like a heading
  2. Use <strong> inside a <div>
  3. Use a heading element whose level fits the surrounding outline Correct answer.
  4. Use <h2> because it is visually larger

Explanation

Heading levels should reflect the nesting of the document outline rather than visual size. Choosing the level that fits the surrounding structure keeps the outline meaningful for assistive technology.

Question 10HTML and Semantic Markup

Which markup correctly associates a visible text label with a checkbox so clicking the label toggles the box?

  1. <label for="news">News</label><input type="checkbox" id="news"> Correct answer.
  2. <label name="news">News</label><input type="checkbox">
  3. <label>News<input type="checkbox"></label>
  4. <span>News</span><input type="checkbox" name="news">

Explanation

A label's for attribute must match the id of the control it describes, which creates an explicit association and makes clicking the text toggle the checkbox. The implicit pattern of wrapping the control inside the label also works.

Question 11HTML and Semantic Markup

Which element should wrap a figure with its caption so the caption is programmatically tied to the image?

  1. <div> with a <p> caption
  2. <figure> with a <figcaption> Correct answer.
  3. <aside> with a <small>
  4. <section> with an <h3>

Explanation

The figure element groups self-contained media with an optional figcaption, which is the element defined for that caption. Assistive technology can then present the caption as belonging to the figure.

Question 12HTML and Semantic Markup

A table lists product prices. Which markup correctly identifies the header cells in the first row?

  1. <td scope="row">
  2. <td headers="col">
  3. <th scope="rowgroup">
  4. <th scope="col"> Correct answer.

Explanation

Header cells use the th element, and scope="col" tells assistive technology that the header applies to the column below it. Data cells in that column then use td.

Question 13HTML and Semantic Markup

Which attribute value on an html element declares the document's primary language for screen readers and translation tools?

  1. <html locale="en">
  2. <html lang="en"> Correct answer.
  3. <html language="en">
  4. <html xml:lang="en">

Explanation

The lang attribute on the root html element sets the default language of the document's content. Assistive technology uses it to select the correct pronunciation rules.

Question 14HTML and Semantic Markup

A quotation is short and appears inline within a paragraph. Which element is appropriate?

  1. <pre>
  2. <cite>
  3. <blockquote>
  4. <q> Correct answer.

Explanation

The q element marks short inline quotations and browsers typically add quotation marks automatically. Longer block-level quotations use blockquote instead.

Question 15HTML and Semantic Markup

Which element best marks the current step in a multi-step checkout process?

  1. <ol> with aria-current="step" on the active item Correct answer.
  2. <output>
  3. <meter>
  4. <progress>

Explanation

An ordered list expresses the sequence of steps, and aria-current="step" identifies the item representing the user's present position. Assistive technology announces the current item when reading the list.

Question 16HTML and Semantic Markup

Which markup gives a search form an accessible name so screen readers announce it distinctly?

  1. <form name="search">
  2. <form role="search">
  3. <form aria-label="Site search"> Correct answer.
  4. <form title="search">

Explanation

A form landmark can be named with aria-label, which screen reader users hear when navigating between landmarks. The search element or role="search" marks the landmark type, while the name distinguishes it.

Question 17HTML and Semantic Markup

Which element should be used for a list where the order of items does not matter?

  1. <ul> Correct answer.
  2. <menu>
  3. <ol>
  4. <dl>

Explanation

The ul element represents an unordered list, appropriate when sequence carries no meaning. Screen readers announce the number of items so users know what to expect.

Question 18HTML and Semantic Markup

A decorative background image is added with an img element. Which markup keeps it from being announced by screen readers?

  1. <img src="bg.png" title="decorative">
  2. <img src="bg.png">
  3. <img src="bg.png" alt=""> Correct answer.
  4. <img src="bg.png" alt="background">

Explanation

An empty alt attribute tells assistive technology the image is decorative and should be skipped. Omitting alt entirely is different, because some screen readers then announce the file name.

Question 19HTML and Semantic Markup

Which attribute makes a required form field programmatically identifiable to assistive technology?

  1. data-required="true"
  2. class="required"
  3. placeholder="required"
  4. required Correct answer.

Explanation

The required attribute exposes the constraint to the accessibility tree, so screen readers announce the field as required. Browsers also block submission when the field is empty.

Question 20HTML and Semantic Markup

Which element correctly provides a machine-readable publication date for an article?

  1. <time datetime="2024-03-01">March 1, 2024</time> Correct answer.
  2. <meta name="date" content="2024-03-01">
  3. <date value="2024-03-01">March 1</date>
  4. <span data-date="2024-03-01">March 1</span>

Explanation

The time element with a datetime attribute encodes a date in a machine-readable format while displaying human-friendly text. Search engines and scripts can parse the attribute value.

Question 21HTML and Semantic Markup

A page contains two nav elements, one for the site and one for a table of contents. What is the best way to make them distinguishable?

  1. Use nav for one and div for the other
  2. Give each nav a unique aria-label Correct answer.
  3. Add tabindex="0" to each nav
  4. Place both inside a single header

Explanation

When multiple landmarks of the same type exist, each needs a distinct accessible name so users can choose between them. aria-label or aria-labelledby supplies that name.

Question 22HTML and Semantic Markup

A data table has a header cell spanning two columns. Which markup correctly communicates that span to assistive technology?

  1. <td colspan="2" scope="col">
  2. <th rowspan="2" scope="col">
  3. <th colspan="2" scope="colgroup">
  4. <th scope="col" colspan="2"> Correct answer.

Explanation

A th with scope="col" labels the column, and colspan="2" indicates it spans two columns. The combination tells assistive technology the header applies to both columns it covers.

Question 23HTML and Semantic Markup

Which markup correctly nests a secondary heading inside a section that follows an h2 in the same parent?

  1. <h3> inside the section Correct answer.
  2. <h2> again inside the section
  3. <h6> because it is visually smaller
  4. <h4> directly after the h2

Explanation

Heading levels should increase by one when descending into a subsection, so an h3 under an h2 preserves the outline. Skipping levels or reusing the parent level obscures the hierarchy.

Question 24HTML and Semantic Markup

A form control is visually hidden but still needs an accessible name from nearby text that is not a label element. Which technique is most appropriate?

  1. Use aria-labelledby pointing to the text element's id Correct answer.
  2. Add title with the same words
  3. Set placeholder text to the same words
  4. Rely on the surrounding fieldset legend

Explanation

aria-labelledby references the id of existing visible text and uses it as the control's accessible name, preserving the visible wording. This is preferred when a native label cannot be used.

Question 25HTML and Semantic Markup

Which change best improves the semantics of a page that uses div elements for the masthead, main content, and footer?

  1. Add class names matching those regions
  2. Wrap each div in a section
  3. Replace them with header, main, and footer elements Correct answer.
  4. Add role="region" to each div

Explanation

Native landmark elements expose region semantics to assistive technology without extra ARIA. Replacing generic divs with header, main, and footer creates navigable landmarks automatically.

Question 26HTML and Semantic Markup

Which element marks text that has been inserted into a document, such as a newly added clause in a revised contract, while conveying that change to assistive technology?

  1. mark
  2. strong
  3. em
  4. ins Correct answer.

Explanation

The ins element represents content added to a document and is the semantic counterpart to del, which marks removed content. Browsers and assistive technology can expose this insertion status, which plain styling elements cannot do. Using it keeps the revision history meaningful in the markup itself.

Question 27HTML and Semantic Markup

A developer writes <time datetime="2024-03-05">March 5</time> inside a news article. What does the datetime attribute accomplish here?

  1. It marks the date as a required field for form submission
  2. It forces the browser to render the date in the visitor's local time zone
  3. It links the element to a stylesheet rule that formats the date
  4. It supplies a machine-readable value alongside the human-friendly text content Correct answer.

Explanation

The datetime attribute on time carries the date or time in a valid machine-readable format, while the element's text stays readable for humans. Parsers, scripts, and assistive tools can consume the attribute value without interpreting the display text. Without it, the element content must itself be a valid date string.

Question 28HTML and Semantic Markup

A page shows a sequence of commands a user must run in order. Which markup best conveys that the items are an ordered procedure rather than a set of options?

  1. An ol element containing one li per step Correct answer.
  2. A ul element containing one li per step
  3. A div element per step with br elements between them
  4. A dl element pairing each command with its output

Explanation

An ordered list communicates sequence, and assistive technology announces the position of each item within the list. Steps that must be followed in order therefore belong in ol rather than ul. This gives the procedure structure that CSS alone cannot provide.

Question 29HTML and Semantic Markup

A developer wants the main content region of a page to be announced as a landmark. Which element provides that landmark by default?

  1. main Correct answer.
  2. aside
  3. section
  4. article

Explanation

The main element maps to the main landmark role, giving screen reader users a direct way to jump to the primary content. Only one visible main element should exist per page. Other sectioning elements map to different or no landmark roles by default.

Question 30HTML and Semantic Markup

A developer marks up a product card using <article> and places an h2 inside it for the product name. The page already has an h1 for the store name and several h2 section headings. Which statement best evaluates this heading structure?

  1. The card heading should be removed because articles cannot contain headings
  2. The card heading is invalid because only one h2 may appear per page
  3. The card heading is acceptable because article starts a new heading context, but the outline still depends on the surrounding document Correct answer.
  4. The card heading must be an h1 because every article requires its own top-level heading

Explanation

Sectioning elements such as article create their own heading context, so a card heading does not have to continue the page's numeric sequence. In practice, though, browsers and assistive technology still expose heading levels as authored, so the surrounding document's levels matter for navigation. The structure is valid, but its usefulness depends on the whole page.

Question 31CSS Layout and Responsive Design

Which CSS property creates a grid container whose direct children become grid items?

  1. float: grid
  2. grid-template: on
  3. position: grid
  4. display: grid Correct answer.

Explanation

A grid formatting context is established only when an element's display value is grid (or inline-grid). Once that is set, the element's direct children are laid out as grid items in rows and columns defined by the grid properties.

Question 32CSS Layout and Responsive Design

In a flex container with default settings, along which axis are flex items placed?

  1. The z-axis, in stacking order
  2. The cross axis defined by align-items
  3. The block axis, top to bottom
  4. The inline axis, following flex-direction: row Correct answer.

Explanation

The initial value of flex-direction is row, so the main axis runs inline, matching text direction. Items are placed along that main axis, while the cross axis is perpendicular and controlled by align-items.

Question 33CSS Layout and Responsive Design

An element has width: 300px, padding: 20px on all sides, and border: 5px solid. With box-sizing: content-box, what is its rendered outer width (excluding margin)?

  1. 350px Correct answer.
  2. 320px
  3. 330px
  4. 300px

Explanation

With content-box, the declared width applies to the content area only, and padding and border are added on top. That gives 300 + 20 + 20 + 5 + 5 = 350px of rendered width.

Question 34CSS Layout and Responsive Design

Which value of the position property removes an element from normal flow while keeping it positioned relative to its nearest positioned ancestor?

  1. relative
  2. absolute Correct answer.
  3. static
  4. sticky

Explanation

Absolutely positioned elements are taken out of normal flow and their containing block becomes the nearest ancestor with a position other than static. Relative and sticky elements still occupy space in normal flow.

Question 35CSS Layout and Responsive Design

What does the CSS declaration margin: 10px 20px; set?

  1. 10px left and right, 20px top and bottom
  2. 10px on all sides with 20px extra on the inline axis
  3. 10px top, 20px right, 10px bottom, 20px left only on odd elements
  4. 10px top and bottom, 20px left and right Correct answer.

Explanation

A two-value margin shorthand assigns the first value to the block (top and bottom) sides and the second to the inline (left and right) sides. It is expanded to top 10px, right 20px, bottom 10px, left 20px.

Question 36CSS Layout and Responsive Design

Which media feature is used to write styles that apply only when the viewport is at least 768px wide?

  1. @media (device-width: 768px)
  2. @media (min-width: 768px) Correct answer.
  3. @media (resolution: 768px)
  4. @media (width >= 768px)

Explanation

The min-width media feature matches when the viewport width is greater than or equal to the given value, which is the basis of mobile-first breakpoints. The range syntax width >= 768px is also valid, but it is not the only correct form.

Question 37CSS Layout and Responsive Design

What is the default value of the flex-wrap property on a flex container?

  1. nowrap Correct answer.
  2. balance
  3. wrap
  4. wrap-reverse

Explanation

Unless flex-wrap is changed, flex items are forced onto a single line and may shrink to fit the container. Setting wrap allows items to flow onto additional lines along the cross axis.

Question 38CSS Layout and Responsive Design

An image inside a fixed-width container overflows horizontally. Which declaration makes the image shrink to fit while preserving its aspect ratio?

  1. width: auto; height: 100%;
  2. max-width: 100%; height: auto; Correct answer.
  3. min-width: 100%; height: auto;
  4. width: 100%; height: 100%;

Explanation

Setting max-width to 100% caps the image at its container width, and height: auto lets the browser scale the height proportionally. This is the standard fluid-image pattern and does not upscale small images.

Question 39CSS Layout and Responsive Design

A flex container has justify-content: space-between and three items. How is free space distributed?

  1. Equal space around each item, including the outer edges
  2. Free space split evenly between items and the container edges
  3. All free space placed before the first item
  4. Equal space between items only, with no space at the outer edges Correct answer.

Explanation

space-between places the first item flush to the main-start and the last flush to the main-end, distributing remaining space only between adjacent items. This differs from space-around and space-evenly, which also allocate space at the edges.

Question 40CSS Layout and Responsive Design

What does grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); produce?

  1. A fixed number of 200px columns regardless of container width
  2. As many columns of at least 200px as fit, each growing to share remaining space Correct answer.
  3. Columns that collapse to zero width when the container is narrower than 200px
  4. Exactly one column that is always 200px wide

Explanation

auto-fit creates as many tracks as can fit at the minimum size, and minmax(200px, 1fr) lets each track grow beyond 200px to fill leftover space. The result is a responsive grid without media queries.

Question 41CSS Layout and Responsive Design

Which statement about grid-template-areas is correct?

  1. Named areas must form a single rectangle per name to be valid Correct answer.
  2. A named area may consist of disconnected cells as long as the name repeats
  3. Area names must be numeric identifiers
  4. Each area name may appear only once in the template

Explanation

Each named area must form a rectangular block of cells; non-rectangular or disconnected regions make the declaration invalid. Repeated names within one contiguous rectangle are how areas span multiple cells.

Question 42CSS Layout and Responsive Design

An element uses position: sticky; top: 0. Which condition is required for it to stick while scrolling?

  1. It must have a specified threshold such as top, and an ancestor scroll container Correct answer.
  2. Its parent must have overflow: hidden
  3. It must also have position: fixed applied
  4. It must be a direct child of body

Explanation

Sticky positioning offsets the element only while a threshold like top: 0 is crossed, and it remains constrained within its containing block inside a scrolling ancestor. Without a threshold value, sticky behaves like relative.

Question 43CSS Layout and Responsive Design

A container has display: flex and flex-direction: column. Which property now aligns items along the horizontal axis?

  1. justify-content
  2. order
  3. align-items Correct answer.
  4. flex-wrap

Explanation

In a column flex container the main axis is vertical, so justify-content works vertically and align-items works on the cross axis, which is horizontal. The axis roles swap compared with the default row direction.

Question 44CSS Layout and Responsive Design

Which declaration makes a block-level element's width include its padding and border within a declared 500px?

  1. display: inline-block
  2. overflow: hidden
  3. box-sizing: border-box Correct answer.
  4. box-sizing: content-box

Explanation

border-box makes the declared width represent the border box, so padding and border are subtracted from the content area instead of added. This keeps layouts predictable when padding changes.

Question 45CSS Layout and Responsive Design

A layout uses float: left on several items, and the parent collapses to zero height. What is the most direct fix?

  1. Set the parent to display: inline
  2. Set the floated children to position: absolute
  3. Apply clearfix or display: flow-root to the parent Correct answer.
  4. Add overflow: visible to the parent

Explanation

Floated children are removed from normal flow, so the parent does not expand around them unless a clearance mechanism is used. display: flow-root establishes a block formatting context that contains floats, and clearfix pseudo-elements achieve the same result.

Question 46CSS Layout and Responsive Design

Which media query targets screens with a device pixel ratio of at least 2?

  1. @media (orientation: landscape)
  2. @media (min-resolution: 2dppx) Correct answer.
  3. @media (min-width: 2px)
  4. @media (prefers-color-scheme: dark)

Explanation

The resolution feature accepts units such as dppx and dpi, and min-resolution matches when pixel density is at least the given value. This is commonly used to serve high-density assets.

Question 47CSS Layout and Responsive Design

What is the effect of setting grid-auto-rows: minmax(100px, auto) on a grid container?

  1. It sets a minimum of 100px for implicitly created rows that can grow with content Correct answer.
  2. It fixes every explicit row to exactly 100px
  3. It applies only to rows defined with grid-template-rows
  4. It forces all grid items to be 100px tall

Explanation

grid-auto-rows sizes rows created implicitly when items are placed beyond the explicit grid. Using minmax(100px, auto) guarantees at least 100px while allowing taller content to expand the row.

Question 48CSS Layout and Responsive Design

Which value of the display property makes an element generate a block-level box that lays out its children in a flex context?

  1. flex Correct answer.
  2. inline-flex
  3. block flex-container
  4. flex-block

Explanation

display: flex makes the element itself block-level while establishing a flex formatting context for its children. inline-flex instead generates an inline-level box with the same inner flex behavior.

Question 49CSS Layout and Responsive Design

A grid item is placed with grid-column: 2 / 4. Which columns does it occupy?

  1. Column 2 only, spanning to the end of the grid
  2. Columns 2 and 3 only Correct answer.
  3. Columns 2, 3, and 4
  4. Columns 3 and 4 only

Explanation

Grid line numbers are used in the slash syntax, so 2 / 4 means starting at line 2 and ending at line 4. That covers the track between lines 2 and 3 and the track between lines 3 and 4, which are columns 2 and 3.

Question 50CSS Layout and Responsive Design

Which approach correctly makes a page use a single-column layout below 600px and a two-column layout at 600px and above, following mobile-first practice?

  1. Base styles define one column and a max-width: 600px query also defines one column
  2. Base styles define one column, then a min-width: 600px query switches to two columns Correct answer.
  3. Base styles define two columns and a min-width: 600px query also defines two columns
  4. Base styles define two columns, then a max-width: 600px query switches to one column

Explanation

Mobile-first means the base stylesheet targets the smallest screens and min-width queries add complexity as space grows. This keeps the default simple and avoids overriding desktop rules on small devices.