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 1Fundamental Web Development Concepts
Which HTTP status code indicates that a requested resource was successfully created as a result of the request?
- 204
- 301
- 201 Correct answer.
- 200
Explanation
A 201 Created response signals that the request succeeded and a new resource was created, typically returned after a POST. A 200 means generic success without implying creation, and 204 means success with no body.
Question 2Fundamental Web Development Concepts
In HTTP, which method is defined as safe and idempotent and is used to retrieve a representation of a resource?
- POST
- PUT
- GET Correct answer.
- PATCH
Explanation
GET is defined as both safe (no intended state change) and idempotent, and it retrieves a representation of the target resource. POST is neither safe nor idempotent, while PUT and PATCH change state.
Question 3Fundamental Web Development Concepts
Which CSS selector has the highest specificity among the following?
- header
- div.header
- div > p
- #header Correct answer.
Explanation
Specificity is calculated by counting ID selectors, then class/attribute/pseudo-class selectors, then type selectors. An ID selector outranks any combination of classes and element types shown here.
Question 4Fundamental Web Development Concepts
Which HTML element is the correct semantic choice for the primary navigation links of a page?
- <aside>
- <nav> Correct answer.
- <section>
- <div>
Explanation
The <nav> element represents a section of a page intended for major navigation links. It conveys meaning to assistive technology, unlike a generic <div>.
Question 5Fundamental Web Development Concepts
What does the box model's 'box-sizing: border-box' declaration change about an element's sizing?
- It applies margins inside the element's border.
- It removes padding from the element entirely.
- It makes width and height include padding and border. Correct answer.
- It forces the element to be display: inline-block.
Explanation
With border-box, the declared width and height include content, padding, and border, so the element's rendered size matches the declared dimensions. The default content-box adds padding and border on top of the declared size.
Question 6Fundamental Web Development Concepts
Which JavaScript keyword declares a block-scoped variable that can be reassigned but cannot be redeclared in the same scope?
- let Correct answer.
- var
- const
- function
Explanation
let creates a block-scoped binding that may be reassigned but not redeclared in the same scope. const also is block-scoped but forbids reassignment.
Question 7Fundamental Web Development Concepts
In a Git workflow, which command records staged changes into the local repository's history?
- git push
- git add
- git fetch
- git commit Correct answer.
Explanation
git commit creates a new commit from the changes currently in the staging area, adding it to local history. git add only stages changes, and git push sends commits to a remote.
Question 8Fundamental Web Development Concepts
Which HTTP header is used by a client to indicate the media types it is willing to accept in a response?
- Content-Type
- User-Agent
- Authorization
- Accept Correct answer.
Explanation
The Accept request header lists the media types the client can handle, enabling content negotiation. Content-Type instead describes the media type of a body being sent.
Question 9Fundamental Web Development Concepts
An element has class 'box' and the stylesheet contains '.box { color: blue; }' followed later by '.box { color: green; }'. Which color is applied?
- Blue
- Neither rule applies
- Green Correct answer.
- The browser default
Explanation
When two rules have equal specificity, the one that appears later in the source order wins. Both selectors are identical, so the later green declaration overrides the earlier blue one.
Question 10Fundamental Web Development Concepts
A developer wants a flex container's items to wrap onto multiple lines when they overflow. Which property and value achieves this?
- flex-wrap: wrap Correct answer.
- align-items: stretch
- justify-content: space-between
- flex-direction: column
Explanation
flex-wrap controls whether flex items stay on one line or wrap onto multiple lines. Setting it to wrap allows items to flow onto new lines when they exceed the container.
Question 11Fundamental Web Development Concepts
What is the result of the expression 'typeof null' in JavaScript?
- "boolean"
- "null"
- "object" Correct answer.
- "undefined"
Explanation
typeof null returns the string "object" due to a longstanding quirk in the language's original implementation. This is a well-known edge case that differs from the value's actual type.
Question 12Fundamental Web Development Concepts
Which HTTP status code should a server return when a client requests a resource it is not authorized to access because valid credentials are missing?
- 403
- 500
- 404
- 401 Correct answer.
Explanation
401 Unauthorized indicates the request lacks valid authentication credentials. 403 Forbidden means the client is authenticated but lacks permission.
Question 13Fundamental Web Development Concepts
An HTML form uses method="post". Where are the submitted field values placed in the HTTP request?
- In the URL query string
- In a custom request header
- In the request body Correct answer.
- In a cookie
Explanation
With the POST method, form data is sent in the request body rather than appended to the URL. GET, by contrast, places form data in the query string.
Question 14Fundamental Web Development Concepts
Which CSS unit is relative to the root element's font size?
- vh
- rem Correct answer.
- em
- px
Explanation
The rem unit is relative to the font size of the root element, making it useful for consistent scaling. The em unit is relative to the current element's font size instead.
Question 15Fundamental Web Development Concepts
Which JavaScript array method returns a new array containing only the elements that pass a provided test function?
- reduce
- map
- forEach
- filter Correct answer.
Explanation
filter creates a new array with the elements for which the callback returns a truthy value, leaving the original array unchanged. map transforms every element, and forEach returns undefined.
Question 16Fundamental Web Development Concepts
What is the primary purpose of an HTTP cookie in web development?
- To compress response bodies
- To encrypt the TLS handshake
- To cache DNS lookups
- To store small pieces of state on the client across requests Correct answer.
Explanation
Cookies let servers store small amounts of state on the client that the browser sends back on subsequent requests, enabling sessions and preferences. They are not used for compression, handshakes, or DNS.
Question 17Fundamental Web Development Concepts
A developer wants an image to scale down on small screens but never exceed its container's width. Which declaration best accomplishes this?
- max-width: 100%; Correct answer.
- width: 100vw;
- height: auto;
- min-width: 100%;
Explanation
max-width: 100% caps the image at its container's width while allowing it to shrink, and pairing it with height: auto preserves aspect ratio. width: 100vw ignores the container and can overflow.
Question 18Fundamental Web Development Concepts
Which statement about the HTTP cache-control directive 'no-store' is accurate?
- It permits caching only by shared proxies.
- It caches the response for exactly one hour.
- It forbids storing the response in any cache. Correct answer.
- It allows caching but requires revalidation on every use.
Explanation
no-store instructs caches not to store the response at all, which is appropriate for sensitive data. no-cache, by contrast, permits storage but requires revalidation before reuse.
Question 19Fundamental Web Development Concepts
What does the 'defer' attribute on a <script> tag cause the browser to do?
- Download the script and execute it immediately, blocking parsing
- Skip downloading the script until the user interacts
- Execute the script only inside a web worker
- Download the script in parallel and execute it after HTML parsing completes Correct answer.
Explanation
defer lets the browser fetch the script in parallel with HTML parsing and run it after the document has been parsed, preserving order among deferred scripts. The async attribute executes as soon as it is ready.
Question 20Fundamental Web Development Concepts
Which HTML attribute provides alternative text for an image, benefiting screen reader users when the image cannot be perceived?
- title
- aria-hidden
- role
- alt Correct answer.
Explanation
The alt attribute supplies a textual alternative that assistive technology reads in place of the image. It is required for meaningful images to be accessible.
Question 21Fundamental Web Development Concepts
Given the CSS '.card .title { color: red; } .card > .title { color: blue; }', which color applies to a .title that is a direct child of .card?
- Red, because the descendant selector is listed first
- Blue, because the child combinator has higher specificity Correct answer.
- Red, because the descendant selector matches more elements
- The two rules conflict and neither applies
Explanation
Both selectors contain two class selectors, but the child combinator rule has an extra combinator that does not add specificity; here specificity is equal, so source order would decide. However, the child combinator selector wins only when it is more specific or later; in this pair the second rule is later, so blue applies. The distinguishing factor is source order combined with equal specificity.
Question 22Fundamental Web Development Concepts
A JavaScript function is defined with 'function outer(){ let x = 1; return function inner(){ return x; }; }'. What does the returned inner function retain access to?
- A global reference to outer's scope
- Only a copy of x captured at return time
- Nothing; x is destroyed when outer returns
- The variable x through a closure Correct answer.
Explanation
The inner function closes over the lexical environment of outer, retaining access to x even after outer has finished executing. Closures preserve the binding, not just a snapshot value.
Question 23Fundamental Web Development Concepts
A page sends a cross-origin AJAX request and the server responds without an Access-Control-Allow-Origin header. What happens in a standards-compliant browser?
- The request is automatically retried with credentials
- The request is blocked before it is sent
- The response is cached and returned to the script
- The response is blocked from being read by the script Correct answer.
Explanation
Under the same-origin policy, cross-origin responses lacking proper CORS headers are not exposed to the requesting script, even if the server processed the request. Simple requests may still reach the server; it is the response access that is denied.
Question 24Fundamental Web Development Concepts
Which statement correctly distinguishes the HTTP methods PUT and PATCH?
- PATCH must always include a request body, while PUT never does
- PUT is safe, while PATCH is not
- PUT replaces the entire resource, while PATCH applies a partial modification Correct answer.
- PUT is non-idempotent, while PATCH is idempotent
Explanation
PUT typically replaces the target resource with the enclosed representation, whereas PATCH carries instructions for a partial update. Both are generally idempotent, and PUT commonly includes a body.
Question 25Fundamental Web Development Concepts
A CSS rule uses the 'clamp(1rem, 2.5vw, 2rem)' function for font-size. What behavior does this produce?
- A size that alternates between the minimum and maximum
- A size that scales with viewport width but stays between 1rem and 2rem Correct answer.
- A size that is always the maximum of the three values
- A fixed size of 1rem regardless of viewport
Explanation
clamp() returns the preferred value (2.5vw) constrained between a minimum and maximum. As the viewport changes, the computed size scales but never drops below 1rem or exceeds 2rem.
Question 26Fundamental Web Development Concepts
Which HTML element is used to define an unordered list?
- <ul> Correct answer.
- <list>
- <dl>
- <ol>
Explanation
The <ul> element represents an unordered list, typically rendered with bullet points. <ol> is for ordered lists, <dl> for description lists, and <list> is not a valid HTML element.
Question 27Fundamental Web Development Concepts
In CSS, which property is used to change the text color of an element?
- text-color
- color Correct answer.
- font-color
- background-color
Explanation
The 'color' property sets the foreground color of an element's text content. 'background-color' sets the background, while 'font-color' and 'text-color' are not valid CSS properties.
Question 28Fundamental Web Development Concepts
Which JavaScript method is used to parse a JSON string into a JavaScript object?
- JSON.stringify()
- JSON.decode()
- JSON.parse() Correct answer.
- JSON.toObject()
Explanation
JSON.parse() takes a JSON string and returns the corresponding JavaScript value. JSON.stringify() does the reverse, converting a JavaScript value to a JSON string. The other methods do not exist in the JSON API.
Question 29Fundamental Web Development Concepts
Which HTTP status code indicates that a requested resource has been permanently moved to a new URL?
- 500
- 404
- 302
- 301 Correct answer.
Explanation
A 301 status code means the resource has been permanently moved and clients should use the new URL. 302 indicates a temporary redirect, 404 means not found, and 500 is a server error.
Question 30Fundamental Web Development Concepts
Which CSS property is used to create space between the content of an element and its border?
- padding Correct answer.
- border-spacing
- gap
- margin
Explanation
Padding is the space inside an element, between the content and the border. Margin is the space outside the border, border-spacing applies to table borders, and gap is used in flexbox or grid layouts.
Question 31Fundamental Web Development Concepts
What is the result of the expression '2 + '2'' in JavaScript?
- undefined
- '22' Correct answer.
- 4
- NaN
Explanation
When one operand is a string, the + operator performs string concatenation, converting the number to a string. So 2 + '2' yields the string '22'. Numeric addition would require both operands to be numbers.
Question 32Fundamental Web Development Concepts
In a Git repository, which command is used to create a new branch and switch to it immediately?
- git branch new-branch
- git merge new-branch
- git checkout -b new-branch Correct answer.
- git switch new-branch
Explanation
The command 'git checkout -b new-branch' creates a new branch and switches to it in one step. 'git branch new-branch' only creates the branch without switching, 'git switch new-branch' switches to an existing branch, and 'git merge' integrates changes.
Question 33Fundamental Web Development Concepts
Which HTTP method is considered safe and idempotent, meaning it should not modify server state and repeated identical requests have the same effect?
- DELETE
- POST
- PUT
- GET Correct answer.
Explanation
GET is defined as safe (no side effects) and idempotent (multiple identical requests have the same effect as one). POST is neither safe nor idempotent, PUT is idempotent but not safe, and DELETE is idempotent but not safe.
Question 34Fundamental Web Development Concepts
In JavaScript, what is the primary purpose of the 'addEventListener' method?
- To attach an event handler to an element without overwriting existing handlers Correct answer.
- To prevent the default action of an event
- To remove all event handlers from an element
- To trigger an event programmatically
Explanation
addEventListener attaches a handler to an element and allows multiple handlers for the same event, unlike the onclick property which overwrites. It does not remove handlers, trigger events, or prevent default actions by itself.
Question 35Fundamental Web Development Concepts
Which CSS selector has the highest specificity?
- header
- #header Correct answer.
- .header
- *
Explanation
ID selectors have higher specificity than class selectors, which are higher than element selectors, which are higher than the universal selector. Specificity values: ID (1,0,0), class (0,1,0), element (0,0,1), universal (0,0,0).
Question 36Fundamental Web Development Concepts
A developer wants to center a block-level element horizontally within its parent using CSS. Which approach is most reliable?
- Set 'text-align: center' on the element
- Set 'float: center' on the element
- Set 'display: inline' on the element
- Set 'margin-left: auto' and 'margin-right: auto' on the element with a defined width Correct answer.
Explanation
For a block-level element with a specified width, setting both left and right margins to 'auto' centers it horizontally. 'text-align: center' only centers inline content, 'float: center' is invalid, and 'display: inline' changes the element's display behavior without centering.
Question 37Fundamental Web Development Concepts
Which statement accurately describes the difference between 'let' and 'var' in JavaScript?
- 'let' is block-scoped, while 'var' is function-scoped Correct answer.
- 'let' allows redeclaration, while 'var' does not
- 'let' hoists the variable initialization, while 'var' does not
- 'let' is function-scoped, while 'var' is block-scoped
Explanation
'let' declarations are scoped to the nearest enclosing block, whereas 'var' declarations are scoped to the nearest function or global scope. 'let' does not allow redeclaration in the same scope, and both are hoisted but 'let' remains in the temporal dead zone until initialized.
Question 38Fundamental Web Development Concepts
In a flex container, which property controls the alignment of flex items along the main axis?
- align-content
- flex-direction
- align-items
- justify-content Correct answer.
Explanation
The 'justify-content' property aligns flex items along the main axis, which is horizontal by default. 'align-items' aligns items along the cross axis, 'align-content' aligns lines of items when there is extra space, and 'flex-direction' sets the main axis direction.
Question 39Fundamental Web Development Concepts
Which HTML5 element is used to define a section of a document that contains navigation links?
- <section>
- <aside>
- <header>
- <nav> Correct answer.
Explanation
The <nav> element represents a section of a page that contains navigation links. <header> represents introductory content, <section> represents a generic section, and <aside> represents tangential content.
Question 40Fundamental Web Development Concepts
A web page includes a script that adds an event listener to a button. The listener function references a variable declared with 'let' inside a loop that iterates five times. What value does the variable have when the listener is invoked after the loop completes?
- The value is undefined because 'let' is block-scoped
- The value from the corresponding iteration when the listener was created Correct answer.
- An error occurs because 'let' cannot be used in loops
- The final value from the last iteration
Explanation
Because 'let' is block-scoped, each iteration of the loop creates a new binding for the variable, so the listener captures the value from its own iteration. This differs from 'var', which would capture the final value. 'let' is valid in loops and does not cause undefined values.
Question 41Drupal Theming Fundamentals
In a Drupal theme's .info.yml file, which key specifies the human-readable name shown on the Appearance page?
- title
- human_name
- label
- name Correct answer.
Explanation
The .info.yml file uses the 'name' key to declare the theme's display name. Drupal reads this key when listing themes on the Appearance page. Other keys such as 'description' and 'core_version_requirement' provide metadata but not the display name.
Question 42Drupal Theming Fundamentals
Which Twig function outputs a rendered Drupal region in a theme template?
- attach_library('region')
- render(region)
- {{ sidebar }}
- region('sidebar') Correct answer.
Explanation
The region() Twig function renders a named region and returns markup. Page templates commonly call it for regions such as 'sidebar' or 'content'. Plain variable printing only works if that variable was passed into the template.
Question 43Drupal Theming Fundamentals
Which file naming pattern creates a Twig template override for a node of type 'article' when viewed in the full content mode?
- node-article-full.twig
- node.article.full.html.twig
- node--article--full.html.twig Correct answer.
- article--node--full.html.twig
Explanation
Drupal builds template suggestions by joining parts with double hyphens, so a node template for the article type in full view mode is node--article--full.html.twig. The double-hyphen separator is the standard convention across Drupal template suggestions.
Question 44Drupal Theming Fundamentals
What is the primary role of a base theme declared via the 'base theme' key in a theme's .info.yml?
- It locks the sub-theme to a specific Drupal core version.
- It provides parent templates and assets that the sub-theme inherits. Correct answer.
- It replaces the sub-theme's own template files at runtime.
- It compiles Sass for the sub-theme.
Explanation
A base theme supplies templates, libraries, and other assets that a sub-theme inherits and can override. The sub-theme's own files take precedence over the base theme's. Declaring a base theme does not compile assets or enforce version locking.
Question 45Drupal Theming Fundamentals
Which Twig tag is used to check whether a variable exists and is not empty before printing it?
- {% include variable %}
- {% if variable %} Correct answer.
- {% for variable %}
- {% set variable %}
Explanation
The {% if %} tag evaluates a condition, and a bare variable is truthy when it exists and has a non-empty value. This is the standard way to guard output in Twig. The other tags handle iteration, assignment, and inclusion rather than conditional checks.
Question 46Drupal Theming Fundamentals
Where should a theme's CSS and JavaScript assets be declared so Drupal can attach them to pages?
- In the theme's .libraries.yml file Correct answer.
- In the theme's template.php file
- In settings.php
- In the theme's .info.yml file under 'scripts'
Explanation
Asset libraries are defined in a .libraries.yml file, which maps library names to CSS and JS files and dependencies. Templates then attach libraries by name. The .info.yml file can reference libraries but does not declare the file lists themselves.
Question 47Drupal Theming Fundamentals
Which Twig filter should be used to output a string with HTML tags escaped for safe display?
- raw
- escape Correct answer.
- striptags
- safe_join
Explanation
The escape filter converts special characters to HTML entities so the value displays as text rather than markup. Drupal autoescapes by default, so escape is used explicitly when needed. The raw filter does the opposite by marking output as safe.
Question 48Drupal Theming Fundamentals
What does the {{ attributes }} variable in a Twig template typically render?
- The HTML attributes for the element wrapping a template's output Correct answer.
- The current user's permissions
- The list of CSS libraries attached to the page
- The cached render metadata
Explanation
Drupal passes an attributes object into many templates so themes can print standard HTML attributes such as class and id on the wrapping element. Printing it preserves attributes added by modules and preprocess functions. It does not carry libraries, cache metadata, or permissions.
Question 49Drupal Theming Fundamentals
A developer wants a preprocess function to run only for nodes of type 'page'. Which function name achieves this in a theme's .theme file?
- mymodule_node_page_preprocess()
- mymodule_preprocess_node__page()
- mymodule_preprocess_page_node()
- mymodule_preprocess_node_page() Correct answer.
Explanation
Preprocess functions follow the pattern THEME_preprocess_HOOK, and a suggestion suffix is appended with an underscore, giving THEME_preprocess_node_page for nodes of type page. The hook name comes before the suggestion. Underscores, not double hyphens, are used in function names.
Question 50Drupal Theming Fundamentals
What is the purpose of a theme's breakpoints YAML file?
- It registers JavaScript media query listeners
- It sets the maximum page width for the theme
- It defines responsive breakpoints that other configuration such as responsive image styles can reference Correct answer.
- It controls browser caching headers
Explanation
A theme's breakpoints file declares named media query breakpoints that other components, notably responsive image styles, can reuse by name. It does not set layout widths or caching behavior. It also does not register JS listeners.