NEW
Font size
WorksheetsFinal Examination in Responsive Web Design
Total questions: 70
Worksheet time: 35mins
Which HTML5 element represents a standalone block of content?
a. <div>
b. <section>
c. <article>
d. <span>
Which element defines the introductory content of a page?
a. <header>
b. <nav>
c. <aside>
d. <head>
Which semantic tag is used for content that is indirectly related to the main content?
a. <main>
b. <footer>
c. <aside>
d. <section>
Flexbox is best suited for:
1D layout
2D layout
Text formatting
Image scaling
Which property aligns items along the main axis in Flexbox?
align-items
justify-content
align-content
display-flex
CSS Grid is ideal for layouts involving:
Only columns
Only rows
Both rows and columns
Text-only pages
Which CSS property defines the number and size of grid columns?
grid-columns
grid-template-columns
columns-grid
grid-size
What does this media query target? @media (min-width: 1024px)
Small screens
Medium screens
Large screens
Print media
Mobile-first design prioritizes:
Desktop screens
Laptop screens
Small screens
Television screens
Bootstrap uses how many columns in its grid system?
8
10
12
16
The Bootstrap class that makes an image responsive is:
img-responsive
img-auto
img-fluid
image-resize
A hamburger menu is typically shown in:
Desktop navigation
Tablet navigation
Mobile navigation
Footer navigation
Which of the following is a semantic HTML element?
a. <b>
b. <i>
c. <footer>
d. <font>
What does display: flex; do?
Creates a table
Activates the Flexbox layout
Activates the Grid layout
Changes element to inline-block
Which property controls direction in Flexbox?
flex-flow
flex-direction
layout-direction
flex-path
In CSS Grid, the property to define rows is:
grid-template-rows
grid-rows
rows-template
row-grid
Which media query syntax is correct?
@query screen-width max(900px)
@media (max-width: 900px)
@media max(900px)
@media-width (900px)
Bootstrap class .col-md-6 means:
6 columns on all screens
6 columns only on mobile
6 columns on medium screens and up
6 columns on large screens only
The element used for the main navigation is:
a. <menu>
b. <section>
c. <nav>
d. <header>
Which flex property controls spacing between items?
gap
space-between
item-gap
flex-space
What does mobile-first CSS usually use first?
@media (max-width…)
@media (min-width…)
Browser-default queries
None of the above
Which class hides an element in Bootstrap?
.d-none
.hidden
.display-none
.no-show
CSS Grid areas are defined using:
grid-box
template-area
grid-template-areas
grid-area-name
In Flexbox, this aligns items along the cross-axis:
justify-content
align-items
flex-align
align-content
The Bootstrap class for navigation bars is:
.navbar
.navmenu
.navbar-default
.navbar-container
Responsive design means:
Website changes layout based on screen
Website automatically writes content
Website loads faster
Website scales fonts only
Which is NOT a semantic tag?
a. <main>
b. <section>
c. <div>
d. <footer>
The purpose of media queries is to:
Change colors
Apply styles based on device conditions
Resize images only
Animate layouts
Grid "fr" unit means:
free size
flexible ratio
fraction
frame unit
A navigation bar that switches to a hamburger menu is called:
adaptive navigation
responsive navigation
fixed navigation
static navigation
Flexbox is designed for one-dimensional layouts.
True
False
CSS Grid supports both rows and columns.
True
False
"<div>" is a semantic element.
True
False
Media queries can check orientation.
True
False
Mobile-first starts with min-width.
True
False
Bootstrap automatically makes grids responsive.
True
False
justify-content aligns items on the cross-axis.
True
False
A hamburger menu is ideal for small screens.
True
False
"<header>" is always placed at the bottom of the page.
True
False
10. .col-sm-6 applies to small screens and up.
True
False
Media queries can apply styles only to print.
True
False
"<nav>" is used for navigation menus.
True
False
.container in Bootstrap centers the content.
True
False
Flexbox can reverse the layout direction.
True
False
Grid layout can overlap elements.
True
False
Semantic HTML improves accessibility.
True
False
Bootstrap uses CSS Grid internally.
True
False
Mobile-first improves loading performance.
True
False
"<footer>" must appear only once in a page.
True
False
Grid gap can control spacing between tracks.
True
False
The HTML element for navigation.
a. <nav>
b. <header>
c. <section>
d. <aside>
The layout system for one-dimensional alignment.
Flexbox
Grid
Block
Inline
The layout system for two-dimensional alignment.
CSS Grid
Flexbox
Bootstrap
Float
Code that changes page layout based on screen size.
Media query
Selector
Class
Attribute
A design principle that prioritizes small screens.
Mobile-first
Responsive design
Desktop-first
Progressive enhancement
A popular CSS framework for responsive design.
Bootstrap
Foundation
Bulma
Tailwind CSS
The unit used for flexible grid sizing.
fr (fraction)
px (pixel)
em (em unit)
% (percentage)
The Bootstrap class for images that scale.
img-fluid
img-responsive
img-scale
img-adaptive
The tag for grouping related content in a page.
a. <div>
b. <section>
c. <article>
d. <span>
The tag used for the main content of a page.
a. <main>
b. <header>
c. <footer>
d. <section>
The Bootstrap navbar toggle button symbol.
hamburger icon
plus icon
arrow icon
search icon
The CSS property that sets direction in Flexbox.
flex-direction
justify-content
align-items
flex-wrap
The CSS property that defines columns in a grid.
grid-template-columns
grid-row-gap
justify-content
align-items
The rule used to start a media query.
@media
@import
@font-face
@keyframes
The HTML element usually found at the bottom of a page.
a. <footer>
b. <header>
c. <aside>
d. <section>
Bootstrap's base container class.
container
box
wrapper
frame
The layout activated by display: flex.
Flexbox
Grid
Block
Inline
The markup that gives structure and meaning to content.
Semantic HTML
CSS
JavaScript
Non-semantic HTML
The part of the navigation shown only on mobile devices.
hamburger menu
footer
sidebar
search bar
A Bootstrap class that hides an element.
d-none
d-block
d-flex
d-inline
