Unit 1 - Practice Quiz
1 Which HTML5 element serves as the top-level container for all other elements in an HTML document (excluding the DOCTYPE)?
<head>
<body>
<html>
<main>
2 Which of the following lines correctly defines the document type for an HTML5 website?
<!DOCTYPE html>
<DOCTYPE html5>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html type="html5">
3
What is the primary purpose of semantic HTML elements like <article>, <section>, and <aside>?
<div> tag entirely in all scenarios.
4 Which tag is used to define a set of navigation links?
<navigation>
<links>
<nav>
<ul>
5
In the context of the HTML document structure, where should the <meta charset="UTF-8"> tag be placed?
<body> tag.
<html> tag, before <head>.
<head> tag.
6
Which attribute is used to associate a <label> with a specific <input> element for accessibility?
id
for
name
type
7 Which HTML5 input type automatically validates that the user entered a properly formatted email address?
<input type="text">
<input type="mail">
<input type="email">
<input type="submit">
8 To create a dropdown list in a form, which elements are used?
<input type="dropdown">
<select> and <option>
<list> and <item>
<form> and <drop>
9
What is the function of the placeholder attribute in an input field?
10
Which attribute is mandatory for the <img> tag to ensure web accessibility and compliance?
title
caption
alt
src (although required for display, this is not the specific accessibility answer)
11 Which HTML5 element is used to embed video content natively without third-party plugins?
<media>
<movie>
<video>
<embed>
12 Which file format is a Scalable Vector Graphic, often used for logos and icons because it does not lose quality when resized?
13
In the <audio> element, what does the controls attribute do?
14 Which CSS syntax is correct for selecting all paragraph elements?
p { }
<p> { }
#p { }
.p { }
15
What is the correct way to link an external CSS file named style.css?
<style src="style.css">
<link rel="stylesheet" href="style.css">
<css file="style.css">
<script src="style.css">
16 Which of the following creates a comment in CSS?
// This is a comment
<!-- This is a comment -->
/* This is a comment */
# This is a comment
17
In the rule h1 { color: blue; }, what is color referred to as?
18
Which selector targets an element with a specific ID attribute, like <div id="header">?
.header
#header
header
*header
19 Which selector has the highest specificity?
div p
.container
#main
p
20
What does the selector div > p select?
<p> elements inside <div> elements.
<p> elements that are direct children of a <div>.
<div> elements immediately followed by a <p>.
<div> and <p> elements.
21 Which pseudo-class allows you to style an element when a user places their mouse over it?
:active
:focus
:hover
:visited
22
Using the Universal Selector *, what happens to the page?
23 In the CSS Box Model, what wraps immediately around the content area?
24
If an element has width: 100px, padding: 10px, and border: 5px solid black, what is the total rendered width of the element if box-sizing: content-box (default) is used?
25 Which CSS property allows you to include the padding and border in an element's total width and height?
box-model: border-box;
box-sizing: border-box;
display: block-box;
width-sizing: include-all;
26 Which component of the Box Model is always transparent and creates space outside the border?
27 Which shorthand property sets the margin to: Top 10px, Right 5px, Bottom 10px, Left 5px?
margin: 10px 5px;
margin: 10px 5px 10px;
margin: 5px 10px;
margin: 10px 10px 5px 5px;
28
What is the default position value for all HTML elements?
relative
fixed
static
absolute
29
An element with position: absolute; is positioned relative to:
30
Which display property value allows an element to sit next to other elements (like text) but still accepts width, height, margin, and padding?
block
inline
inline-block
flex
31 Which CSS property controls the stacking order of positioned elements (which element appears on top of another)?
stack-order
z-index
position-index
layer
32
What is the difference between display: none and visibility: hidden?
display: none reserves space, while visibility: hidden removes it.
display: none removes the element from the document flow, while visibility: hidden hides it but keeps its space.
visibility: hidden deletes the element from the DOM.
33 To enable Flexbox on a container, which property is used?
display: block;
display: flex;
position: flex;
flex-wrap: wrap;
34 In a Flexbox container, which property aligns items along the Main Axis (horizontally by default)?
align-items
justify-content
align-content
flex-direction
35 Which Flexbox property allows items to wrap onto multiple lines if they run out of space?
flex-wrap: wrap;
flex-line: multiple;
flex-flow: column;
wrap-content: true;
36
In Flexbox, align-items: center; will center items along which axis?
37
Which flex property is a shorthand for flex-grow, flex-shrink, and flex-basis?
flex-flow
flex-group
flex
flex-all
38 In CSS Grid, which unit represents a fraction of the available free space?
%
px
fr
vh
39 Which property is used to define the number and width of columns in a CSS Grid?
grid-columns
grid-template-columns
grid-column-gap
display-columns
40
What is the function of the gap property (formerly grid-gap) in CSS Grid?
41 Which of the following is an example of a Media Query used for responsive design?
@media (min-width: 768px) { ... }
@responsive (width: 768px) { ... }
<media query="768">
@screen size(768) { ... }
42 What is the "Mobile-First" design approach?
min-width media queries for larger screens.
m.website.com.
43 Which meta tag is essential for responsive web design to ensure the page renders correctly on mobile devices?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="responsive" content="true">
<meta name="mobile" content="yes">
<meta name="scale" content="fit">
44
What is the difference between rem and em units?
em is relative to the root element, rem is relative to the parent.
rem is relative to the root element (<html>), em is relative to the current element's font size.
rem stands for 'Real Em', em stands for 'Element Em'.
45 How do you make an image responsive so it scales with its container but never exceeds its original size?
width: 100%; height: auto;
max-width: 100%; height: auto;
width: auto; height: 100%;
object-fit: cover;
46 Which creates a valid CSS Variable (Custom Property)?
$main-color: blue;
var-main-color: blue;
--main-color: blue;
%main-color: blue;
47
How do you access the value of a CSS variable named --primary?
color: --primary;
color: $primary;
color: var(--primary);
color: get(--primary);
48 Which Git command initializes a new, empty repository in the current directory?
git start
git create
git new
git init
49 In Git, after adding files to the staging area, which command saves the changes to the local repository with a message?
git save "message"
git push "message"
git commit -m "message"
git add "message"
50
What is the purpose of .gitignore?