HTML/CSS Review Questions with
Complete Solutions
What HTML element creates a "canvas" for artists to draw and paint dynamically on a webpage?
✔✔The `<canvas>` tag provides a space where you can use JavaScript to draw graphics,
animations, and more.
How do you create a “treasure map” effect for your webpage where users can click to reveal
hidden treasures?
✔✔Wrap hidden content in a `<div>` with `display: none;` and use JavaScript to show it when a
treasure icon is clicked.
Which CSS property allows you to create a “breeze” effect that gently fades elements in and out?
✔✔The `opacity` property lets you control how transparent an element appears, creating a soft
fade effect when combined with transitions.
What is the secret to making text appear like it’s being typed out on a typewriter?
✔✔Combine the `<span>` tag with CSS animations to simulate typing by revealing letters one at
a time.
1
, How can you set up an “invisible wall” that prevents users from scrolling past a certain point?
✔✔Use a combination of `overflow: hidden;` and positioning to create a scrollable area without
allowing access to the rest of the page.
What HTML structure is best for building an “adventure journal” that organizes entries by date?
✔✔Utilize `<article>` tags for each entry, combining them with `<header>` and `<footer>` tags
to manage titles and dates.
How do you create a “dance party” effect with background colors that change in rhythm with
user interactions?
✔✔Use JavaScript to change the `background-color` of the body at timed intervals based on
events like mouse movements or clicks.
What element is your “magic wand” for styling lists to look like a stylish bullet journal?
✔✔Use the `<ul>` or `<ol>` tags combined with custom `list-style-type` in CSS to create unique
bullet points or numbered styles.
How can you make a “hidden garden” of images that bloom into view when clicked?
2
Complete Solutions
What HTML element creates a "canvas" for artists to draw and paint dynamically on a webpage?
✔✔The `<canvas>` tag provides a space where you can use JavaScript to draw graphics,
animations, and more.
How do you create a “treasure map” effect for your webpage where users can click to reveal
hidden treasures?
✔✔Wrap hidden content in a `<div>` with `display: none;` and use JavaScript to show it when a
treasure icon is clicked.
Which CSS property allows you to create a “breeze” effect that gently fades elements in and out?
✔✔The `opacity` property lets you control how transparent an element appears, creating a soft
fade effect when combined with transitions.
What is the secret to making text appear like it’s being typed out on a typewriter?
✔✔Combine the `<span>` tag with CSS animations to simulate typing by revealing letters one at
a time.
1
, How can you set up an “invisible wall” that prevents users from scrolling past a certain point?
✔✔Use a combination of `overflow: hidden;` and positioning to create a scrollable area without
allowing access to the rest of the page.
What HTML structure is best for building an “adventure journal” that organizes entries by date?
✔✔Utilize `<article>` tags for each entry, combining them with `<header>` and `<footer>` tags
to manage titles and dates.
How do you create a “dance party” effect with background colors that change in rhythm with
user interactions?
✔✔Use JavaScript to change the `background-color` of the body at timed intervals based on
events like mouse movements or clicks.
What element is your “magic wand” for styling lists to look like a stylish bullet journal?
✔✔Use the `<ul>` or `<ol>` tags combined with custom `list-style-type` in CSS to create unique
bullet points or numbered styles.
How can you make a “hidden garden” of images that bloom into view when clicked?
2
