Technology Technology · Programming ● Easy

Web Development Fundamentals quiz

This 10-question web development fundamentals quiz checks your understanding of HTML, CSS, JavaScript, HTTP status codes, the DOM, responsive design, APIs, accessibility, and front-end versus back-end development. It is designed for beginners and returning learners who want a compact knowledge check with an explanation after every answer. The quiz focuses on durable concepts rather than a specific framework, so missed questions point to clear topics for further study in standards and platform documentation.

Start the quiz
Questions
10
Time
12 min
Difficulty
● Easy
◎
Technology · Easy
Quick info

Before you start

Best for

Beginners learning how the browser, front end, and server fit together

Format

10 explanation-backed questions in about 12 minutes.

What you'll cover

A small map of the test

  1. 1HTML structure and CSS presentation
  2. 2JavaScript behavior and the DOM
  3. 3HTTP status codes and APIs
  4. 4Responsive design, accessibility, and front-end versus back-end roles
Audience

Who this quiz is for

  • Beginners learning how the browser, front end, and server fit together
  • Developers refreshing durable web-platform fundamentals
Key concepts

Ideas this quiz checks

DOM

A programming interface that represents a document as nodes and objects.

HTTP

The application-layer protocol used for requests and responses on the web.

Responsive design

Designing layouts and media to adapt across screen sizes and device capabilities.

Accessibility

Building content and interactions that people with varied abilities can perceive and use.

Score guide

How to read your score

  1. 80–100% Strong command

    You understand most of the core ideas and can use the explanations to polish smaller gaps.

  2. 50–79% Solid base

    You know part of the topic, but the missed explanations are the highest-value review material.

  3. 0–49% Review first

    Treat this as a starting map: revisit the key concepts, then retake the quiz for a cleaner signal.

After the quiz

Recommended next steps

  • Review the explanation for every missed question and reproduce the concept in a small HTML page
  • Read the linked web-platform documentation for HTML, HTTP, and accessibility
  • Continue with the JavaScript Fundamentals Quiz after reviewing the DOM
References

Sources and further reading

How to play

Instructions

  1. You have 12 minutes total to answer 10 multiple-choice questions.
  2. Choose an answer to lock it in. The runner immediately shows the correct answer and explanation.
  3. Use Hint when you want a nudge, or Skip to move forward without answering.
  4. Keyboard shortcuts: A-D answer, H hints, S skips, Enter/→ next, and ← previous.
  5. No signup required. Your progress is local to this quiz session.
Every question, explained

Answer key and explanations

All 10 questions from this quiz, with the correct answer and the reasoning behind it. Take the quiz first if you want an honest score — or read straight through and use this as revision material.

  1. What does HTML stand for?

    • Hyper Transfer Markup Language
    • HyperText Markup LanguageCorrect
    • High-level Text Management Language
    • HyperText Management Logic

    Why: HTML stands for HyperText Markup Language. It is the standard language for creating web pages, providing the structure and meaning of web content through a system of elements represented by tags. 'HyperText' refers to text that contains links to other texts, while 'Markup' refers to the tags used to annotate content.

  2. What is the primary purpose of CSS in web development?

    • To define the structure and content of web pages
    • To handle server-side logic and database queries
    • To control the visual presentation and layout of HTML elementsCorrect
    • To manage user authentication and sessions

    Why: CSS (Cascading Style Sheets) controls the visual presentation of HTML elements — including colors, fonts, spacing, layout, and responsive behavior. The separation of structure (HTML) from presentation (CSS) is a fundamental principle of web development that makes code more maintainable and allows the same content to be styled differently for different devices.

  3. What does HTTP status code 404 indicate?

    • The server encountered an internal error
    • The request was successful
    • The requested resource was not foundCorrect
    • The user is not authorized to access the resource

    Why: HTTP 404 means 'Not Found' — the server could not locate the requested resource. This is one of the most common HTTP status codes. Other important codes include 200 (OK), 301 (Moved Permanently), 400 (Bad Request), 401 (Unauthorized), 403 (Forbidden), and 500 (Internal Server Error).

  4. What is the Document Object Model (DOM)?

    • A database for storing web page content
    • A programming interface that represents an HTML document as a tree of objectsCorrect
    • A CSS framework for building responsive layouts
    • A protocol for transferring data between servers

    Why: The DOM is a programming interface for HTML and XML documents. It represents the document as a tree of nodes and objects, allowing JavaScript to dynamically access and update the content, structure, and style of a web page. When you use JavaScript to change what appears on a page without reloading it, you are manipulating the DOM.

  5. What is 'responsive design' in web development?

    • A design that responds quickly to user clicks
    • A design approach that adapts layouts across a range of viewport sizes and device capabilitiesCorrect
    • A design that responds to user preferences stored in cookies
    • A design that automatically updates content in real time

    Why: Responsive design uses flexible layouts, media queries, and adaptable media to respond to characteristics of the viewing environment. It aims to support a useful range of viewport sizes and capabilities, but the label does not guarantee that every page works perfectly on every device; representative layouts and interactions still need testing.

  6. In web development, what is an API?

    • A type of database used to store web pages
    • A set of rules that lets one piece of software request data or services from anotherCorrect
    • A tool for designing the visual layout of a site
    • A programming language used only for mobile apps

    Why: An API (Application Programming Interface) is a defined set of rules that lets different software systems communicate. On the web, front-end code commonly calls a web API — often returning JSON — to fetch or send data, such as loading posts, submitting a form, or getting weather information. APIs let developers build on existing services without needing to know their internal details.

  7. What is the main purpose of the 'alt' attribute on an HTML image element?

    • To make the image load faster
    • To provide an appropriate text alternative that conveys the image's purpose or meaning in contextCorrect
    • To set the image's width and height
    • To turn the image into a clickable link

    Why: The `alt` attribute supplies a text alternative for an image. The right value depends on context: an informative image needs a concise equivalent of its relevant meaning, a functional image should communicate the action or destination, and a purely decorative or redundant image normally uses an empty value (`alt=""`) so assistive technology can skip it.

  8. What best describes the difference between front-end and back-end web development?

    • Front-end is for mobile and back-end is for desktop
    • Front-end is what runs in the user's browser; back-end is the server-side logic and data the user does not seeCorrect
    • Front-end uses databases while back-end uses only HTML and CSS
    • There is no real difference; the terms are interchangeable

    Why: Front-end development covers what runs in the browser — the HTML, CSS, and JavaScript that create the user interface. Back-end development covers the server side: application logic, databases, authentication, and APIs that the user does not directly see. 'Full-stack' developers work across both, and the two layers typically communicate over HTTP, usually through APIs.

  9. What does an HTTP 301 status code indicate?

    • The page is temporarily unavailable
    • The requested resource has moved permanently to a new URLCorrect
    • The user must log in to continue
    • The server is overloaded

    Why: A 301 response means the target resource has been assigned a new permanent URI, and the server should send that URI in the `Location` header. User agents may automatically redirect future requests. A 302 is also a redirect response, but it indicates that the resource resides temporarily under a different URI.

  10. What is the primary role of JavaScript on a web page?

    • To define the page's structure and content
    • To style colors, fonts, and layout
    • To add interactivity and dynamic behavior, such as responding to clicks and updating contentCorrect
    • To store data permanently on the server

    Why: If HTML provides structure and CSS provides presentation, JavaScript provides behavior. It runs in the browser to make pages interactive — handling events like clicks, validating forms, fetching data without a full reload, animating elements, and updating the DOM dynamically. Together, HTML, CSS, and JavaScript are the three core technologies of the front-end web.

Related quizzes
More Technology quizzes
Technology ● Easy

Cybersecurity Basics Quiz

10 q 12 min
Technology ● Easy

Your Account May Be Hacked — What Do You Do First?

8 q 6 min
Technology ● Easy

Git Commands Quiz

10 q 11 min
Learn more
All articles
Guide · 4 min read

AWS without the panic: the 8 services that matter

A beginner's map of Amazon Web Services: eight services to learn first, what each one actually does, and the traps to avoid on your way in.
Technology · 5 min read

JavaScript Concepts Every Developer Should Know

From closures to the event loop, these are the JavaScript concepts that separate developers who write code from developers who understand it. Master these fundamentals and everything else becomes clearer.