Unit 1 - Practice Quiz
1
What is the purpose of the <!DOCTYPE html> declaration at the beginning of an HTML file?
2 Which HTML element contains all the visible content of a web page, such as headings, paragraphs, and images?
<head>
<body>
<title>
<html>
3 Which semantic HTML element should be used to wrap the primary, unique content of a webpage?
<div>
<main>
<body>
<section>
4 Which HTML element is used to define a footer for a document or section, typically containing authorship, copyright, or contact information?
<end>
<footer>
<header>
<bottom>
5
Which <input> type attribute creates a button that, when clicked, submits the form data?
type="button"
type="click"
type="submit"
type="send"
6
What is the primary purpose of the <label> element in an HTML form?
7 Which HTML tag is used to embed an image in a web page?
<src>
<img>
<picture>
<image>
8
In the <video> tag, which attribute is used to specify the path or URL of the video file?
href
src
source
link
9
What is the correct HTML for referring to an external style sheet called styles.css?
<link type="text/css" src="styles.css">
<link rel="stylesheet" href="styles.css">
<style src="styles.css">
<stylesheet>styles.css</stylesheet>
10 Which of the following represents the correct basic syntax for a CSS rule?
selector ( property: value; )
<selector> { property: value; } </selector>
selector { property: value; }
property: value { selector; }
11
Which CSS selector would you use to select an HTML element with the attribute id="main-title"?
main-title
.main-title
#main-title
*main-title
12
Which selector is used to select all <p> elements on a page?
p)
#p)
*p)
.p)
13 In the CSS box model, what is the term for the transparent area around an element that separates it from other elements?
14 What are the four components of the standard CSS box model, listed from the innermost to the outermost?
15
Which display property value makes an element not appear on the page at all?
block
hidden
inline
none
16
What is the default value for the position property in CSS for all elements?
fixed
absolute
static
relative
17 Which CSS property and value must be applied to a parent element to make its direct children become flex items?
layout: flex;
flexbox: true;
position: flex;
display: flex;
18
In responsive web design, what is the primary purpose of CSS @media rules?
19 In the CSS preprocessor Sass (SCSS syntax), which character is used to denote a variable?
@ (At sign)
$ (Dollar sign)
# (Hash sign)
& (Ampersand)
20 Which Git command is used to record snapshots of the staged changes to the project's history?
git status
git push
git add
git commit
21
A developer wants to link a stylesheet and an external JavaScript file to their HTML document. For optimal performance, where should the <link> tag for the CSS and the <script> tag for the JavaScript be placed?
<script> in the <head> and <link> just before the closing </body> tag.
<link> and <script> just before the closing </body> tag.
<link> and <script> in the <head>.
<link> in the <head> and <script> just before the closing </body> tag.
22
Which of the following best describes the appropriate use case for the <article> element versus the <section> element in HTML5?
<article> must always be placed inside a <section>, and it represents a comment or a forum post.
<section> is for a standalone piece of content, and <article> is used to break up that content into thematic parts.
<article> is for self-contained, distributable content like a blog post, while <section> is for grouping related content within a document.
23 You are building a webpage layout that includes a main title, a set of primary navigation links, the main content, and a footer with copyright information. Which combination of semantic elements is most appropriate for structuring this page?
<h1>, <menu>, <content>, <p>.
<header>, <nav>, <main>, <footer>.
<header>, <ul>, <section>, <footer>.
<div> for the header, <ul> for navigation, <div> for content, <div> for the footer.
24 A developer wants to create a password input field that requires the password to be at least 8 characters long, contain at least one number, one uppercase letter, and one lowercase letter. Which HTML5 attribute is best suited for enforcing this complex rule on the client-side without using JavaScript?
pattern="(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
required
minlength="8"
pattern="[a-zA-Z0-9]{8,}"
25 What is the correct way to semantically group a set of related form controls (e.g., several radio buttons for a single question) and provide a caption for that group?
<section> and use an <h3> for the caption.
<div> and use a <span> for the caption.
<ul> and use an <li> for each control, with the caption in a separate <p> tag above the list.
<fieldset> and use a <legend> as the first child for the caption.
26
You are embedding a video using the <video> tag and want to ensure maximum compatibility. You have the video in MP4 and WebM formats. How should you structure the HTML to allow the browser to choose the best format it supports, and also provide a fallback for older browsers?
<video src="video.mp4" src="video.webm">Your browser does not support the video tag.</video>
<video src="video.mp4" alt="video.webm">Your browser does not support the video tag.</video>
<video><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm">Your browser does not support the video tag.</video>
<video><source="video.mp4"><source="video.webm">Your browser does not support the video tag.</video>
27
Consider the following CSS rules applied to the same <h1> element. Which color will the <h1> element be, and why?
css
/ style.css /
h1 { color: blue !important; }
h1 { color: green; }
html
<!-- index.html -->
<h1 style="color: red;">Title</h1>
!important rule overrides all other origins and specificities.
28
Given the selector body #content .main p:first-child, what is its specificity value calculated in the format (IDs, Classes/Attributes, Elements)?
29
Which style will be applied to the paragraph element in the following HTML snippet?
html
<div id="container">
<p class="text highlight">This is a paragraph.</p>
</div>
css
#container p.text { color: blue; }
div p.highlight { color: red; }
p.text.highlight { color: green; }
green
blue
red
30
An element has the following CSS properties. What will be its total rendered width in the browser?
css
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box;
}
31
Consider two adjacent block-level elements, .box1 and .box2. .box1 has margin-bottom: 30px; and .box2 has margin-top: 20px;. Assuming no other styles interfere, what will be the vertical space between these two elements?
32
An element with position: absolute; is placed inside a container. How is the positioning of this absolute element determined?
<body> element.
position value other than static.
position property.
33
What is the primary difference between an element with display: inline-block; and an element with display: inline;?
inline elements respect margin-top and margin-bottom, while inline-block elements do not.
inline-block elements can have a width and height, while inline elements cannot.
inline-block is just a newer syntax.
inline-block elements start on a new line, while inline elements do not.
34
You have a flex container with three items. You want the items to be spaced out evenly, with the first item at the start edge and the last item at the end edge. Which justify-content value should you use?
html
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
justify-content: center;
justify-content: space-between;
justify-content: space-evenly;
justify-content: space-around;
35
In CSS Grid Layout, what is the primary advantage of using the fr unit for defining track sizes compared to using percentages?
fr unit can only be used for columns, while percentages can be used for both rows and columns.
fr unit does not.
fr unit distributes the remaining available space, after accounting for fixed-size tracks and grid gaps, making it more flexible.
fr unit is an absolute unit, making layouts more predictable.
36 Which CSS media query will apply styles ONLY when the browser viewport's width is between 600 pixels and 900 pixels, inclusive?
@media screen and (min-width: 600px) and (max-width: 900px)
@media (min-width: 601px) and (max-width: 899px)
@media (width >= 600px) and (width <= 900px)
@media screen (600px < width < 900px)
37 When developing a responsive website, what is the core principle of the "mobile-first" approach?
min-width media queries to add or adapt styles for larger screens.
@media (max-width: 480px) rule to prioritize mobile styles.
38 What is a key benefit of using a CSS preprocessor like Sass/SCSS?
<style> tag.
39
A developer runs git fetch origin in their local repository. What is the result of this command?
origin remote and immediately merges them into the current working branch.
origin remote.
origin remote but does not merge them into any local branches.
origin remote but does not download them.
40
What is the primary purpose of a .gitignore file in a Git repository?
git status.
41
Given the following CSS, which rule will apply to the span element?
html
<div id="container" class="box">
<p class="content text">
<span>Hello World</span>
</p>
</div>
css
#container :where(p.content) span { color: red; } / Rule A /
div.box p.text span { color: blue; } / Rule B /
div p span { color: green; } / Rule C /
:is(div#container) p > span { color: orange; } / Rule D /
42
Consider the following HTML and CSS. Why does the z-index on the .red-box have no effect, causing it to appear behind the .green-box?
html
<div class="blue-box"></div>
<div class="red-box"></div>
<div class="green-box"></div>
css
.blue-box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: blue; z-index: 1; }
.red-box { top: 20px; left: 20px; width: 100px; height: 100px; background: red; z-index: 999; }
.green-box { position: absolute; top: 40px; left: 40px; width: 100px; height: 100px; background: green; z-index: 2; }
z-index of 999 is an invalid value and is ignored by the browser.
.red-box lacks a position property other than static, a new stacking context is not created for it.
z-index only works on flex or grid items, not on block-level elements.
.red-box appears before the .green-box in the document flow, it is naturally rendered behind it.
43
In CSS Grid, what is the key difference in behavior between repeat(auto-fill, minmax(100px, 1fr)) and repeat(auto-fit, minmax(100px, 1fr)) when the container has more space than the sum of the minimum widths of its items?
auto-fill will expand the grid items to fill the remaining space, while auto-fit will leave the space empty.
auto-fit collapses empty tracks to zero size, causing filled tracks to grow, whereas auto-fill preserves the space for empty tracks.
auto-fit will expand the grid items to fill the remaining space, while auto-fill will leave the space empty, potentially creating empty tracks.
auto-fit is an alias for auto-fill for backward compatibility.
44
You are on a feature branch feat/new-login that diverged from the main branch several commits ago. The main branch has also received new commits. You want to incorporate the latest changes from main into your feature branch, creating a clean, linear history without a merge commit. Which command sequence should you use?
git checkout feat/new-login followed by git merge main
git checkout feat/new-login followed by git rebase main
git checkout main followed by git rebase feat/new-login
git checkout feat/new-login followed by git pull origin main
45
An <input type="submit"> button is located outside of its associated <form> element in the DOM. How can you make this button submit the form correctly without using JavaScript?
html
<form id="user-profile" action="/update">
<label>Name: <input type="text" name="username"></label>
</form>
<!-- ... other html ... -->
<input type="submit" value="Update Profile"> <!-- This button -->
formaction="/update" attribute on the submit input.
<form> and the <input> in a parent <fieldset> element.
form="user-profile" attribute to the submit input.
46
Consider two adjacent sibling block elements. The first has a margin-bottom of 20px and the second has a margin-top of 30px. A third element with clear: both and height: 0 is placed between them. What will be the resulting vertical space between the first and second elements?
clear: both removes all vertical margins.
47 You are building a blog post page. The page contains the main article, a sidebar with related links, and a comments section. According to modern HTML5 semantics and accessibility best practices, what is the most appropriate nesting structure?
<main> containing three <section> elements: one for the article, one for the sidebar, and one for comments.
<section> containing an <article>, another <section> for the sidebar, and a final <section> for comments.
<article> containing a <main>, a <nav> for the sidebar, and a <div> for the comments.
<main> containing an <article>, an <aside> for the sidebar, and a <section> for the comments.
48 In the CSS cascade, what is the correct order of precedence for rule origins, from highest to lowest, assuming all rules have the same specificity and are targeting the same element?
!important > Author !important > User Agent !important > CSS Animations > Transition declarations > Author normal > User normal > User Agent normal
!important > Author !important > User !important > CSS Animations > Author normal > User normal > User Agent normal
!important > User !important > User Agent !important > Author normal > User normal > User Agent normal > Transitions/Animations
!important > User !important > User Agent !important > CSS Animations > Author normal > User normal > User Agent normal
49
You have two external JavaScript files. library.js is a large dependency, and app.js depends on library.js. You want to load them without blocking the initial page render, but ensure library.js executes before app.js. Which of the following is the most reliable and performant approach?
<script src="app.js" defer></script> followed by <script src="library.js" defer></script>
async. Use an onload event in app.js to wait for library.js.
<script src="library.js" async></script> followed by <script src="app.js" async></script>
<script src="library.js" defer></script> followed by <script src="app.js" defer></script>
50
What is the calculated font-size of the <span> element given the following CSS, assuming the root font-size is 16px and the viewport width is 1000px?
html
<div>
<p>
<span>Text</span>
</p>
</div>
css
:root { font-size: 16px; }
div { font-size: 1.25rem; } / 1.25 16px = 20px */
p { font-size: clamp(0.8em, 2vw, 2em); }
span { font-size: 1.5em; }
51
A flex container has three items, each with flex: 1 2 200px;. The container's width is 500px. What will be the final width of each item?
200px.
100px.
166.67px.
150px.
52
You are using the <picture> element to serve responsive images. The browser has a viewport width of 400px and supports the WebP format. Which image will be rendered based on the following code?
html
<picture>
<source srcset="img-large.webp" media="(min-width: 800px)" type="image/webp">
<source srcset="img-small.webp" media="(min-width: 400px)" type="image/webp">
<source srcset="img-small.jpg" media="(min-width: 400px)">
<img src="fallback.jpg" alt="description">
</picture>
img-small.jpg
fallback.jpg
img-small.webp
img-large.webp
53
In a modern CSS workflow using Sass (SCSS), what is the fundamental difference in the generated CSS between using @extend and a @mixin?
@extend can only be used with class selectors, whereas @mixin can be used with any selector.
@mixin compiles faster than @extend because it avoids complex selector grouping.
@mixin is used for static blocks of code, while @extend can accept arguments to generate dynamic styles.
@extend groups selectors that share the same rules, leading to less CSS repetition, while @mixin duplicates the rules for each selector where it's included.
54
A commit A containing a bug was accidentally merged into the develop branch. Several other commits (B, C, D) have been added on top of it. You cannot simply revert the merge commit because other valid changes were included. What is the most appropriate Git command to undo the specific changes from commit A while keeping the changes from B, C, and D?
git rebase -i A~1 and drop commit A
git reset --hard A~1
git revert A
git cherry-pick A..D onto a new branch
55
An element is styled with box-sizing: border-box;, width: 100px;, padding: 10px;, border: 5px solid black; and margin: 20px;. What is the total width occupied by this element in the layout, from the outer edge of its left margin to the outer edge of its right margin?
56
An element is styled with position: sticky; top: 20px;. This element is inside a container which has overflow: hidden;. What will be the behavior of the sticky element as the user scrolls the page?
position: static.
57
When would it be appropriate to use role="application" on a part of your webpage, and what is a major accessibility risk associated with it?
58
What is the specificity of the selector nav[data-version="3.0"] > ul.main-nav > li:nth-child(2n+1)::before?
59
A form uses a custom validation message with the JavaScript setCustomValidity() method. After an invalid submission attempt, the user corrects the input. On the next submission attempt, the form still fails to submit. What is the most likely cause of this issue?
novalidate attribute must be added to the form to allow custom validation messages.
setCustomValidity('') on a subsequent input or change event to clear the custom error.
event.preventDefault().
60
What is the primary purpose of the rel="preconnect" link relation type in the <head> of an HTML document, and how does it differ from rel="dns-prefetch"?
preconnect downloads and caches a resource before it's needed, whereas dns-prefetch only performs a DNS lookup.
dns-prefetch is a newer, more efficient version of preconnect that has replaced it in modern browsers.
preconnect initiates a full connection (DNS, TCP, TLS) to an origin without sending an HTTP request, whereas dns-prefetch only resolves the domain name.
preconnect is used for fetching API data, while dns-prefetch is specifically for image assets.