Back to Basics
(HTML + CSS)
(HTML + CSS)
These are three tags used in creating lists.
<ol>, </ol>, <ul>, </ul>, <li>, </li>, <dl>, </dl> <dt>, </dt>, <dd>, </dd>
This CSS pseudoclass is required when using the CSS 'transition'.
Hover
The very first thing you write to start any media query.
@media
The CSS needed to create a flexbox on a container.
display:flex;
The color of a polar bear's skin.
Black
These are the names of the three types of CSS.
Inline, Internal (Style Sheet), External (Style Sheet)
One of the properties that allows you to change or move a shape using the CSS 'transform'.
Scale, rotate, translate, skew
What screens will this media query be active for?
@media (max-width: 768px) {}
This CSS flexbox property sets the main axis for your flexbox.
Flex-direction
The number of bones in the human body
206 (unless you're a baby)
These are the four components of the Box Model.
Margin, Padding, Border, Content
@keyframes ScaleUp {}
These are three types of media features that can be found in Media Queries.
@media ("media feature") {}
max-width, min-width, width, max-height, orientation
This flexbox property controls the alignment of your content along the main axis.
justify-content
The name of the tiny plastic piece at the end of your shoelace.
An aglet
The complete setup for every HTML file you start in this class.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The complete CSS for a div that changes background color over 2 seconds when the user puts their mouse on top of it.
div {
background-color: blue;
transition:background-color 2s;
}
div:hover {
background-color: red;
transition: background-color 2s;
}
Create the opening line of code for a media query that will for sure be visible on a cell phone.
@media (max-width:768px) {}
Create a flexbox that aligns the content vertically with 20px of white space between each item.
.container {
display:flex;
flex-direction: column;
gap: 20px;
}
This word was named the 2024 Oxford Word of the Year, most often used by Gen Z and Gen Alpha. (It's two words)
Brain rot
The CSS for a div with the class of "container" that has a blue background, white text, rounded corners, and a border.
.container {
background-color:#0000FF;
color:#FFFFFF;
border-radius: 20px;
border: 2px solid black;
}
The CSS code for a keyframe animation titled 'Spin' that rotates in a complete circle.
@keyframes Spin {
0% {transform:rotate(0deg);}
100% {transform: rotate(180deg);}
}
Create a media query that will only be visible on tablets. Not cell phones or desktop computers.
@media (min-width: 768px) and (min-width: 1024px) {}
This is an example of the CSS for a container with a flexbox that displays its content horizontally, and forces the content into a second (or third or fourth) line to prevent horizontal scrolling.
.container {
display:flex;
flex-wrap: wrap;
}
These are the names of all of the Infinity Stones.
The Soul Stone, The Time Stone, The Space Stone, The Reality Stone, The Power Stone, and The Mind Stone