Each exercise folder contains a README
with additional documentation.
Create an index.html
file and a style.css
file that reproduces the following:
Create an index.html
file and a style.css
file that reproduces the following:
Create an index.html
file and a style.css
file that reproduces the following:
This is a full screen background image with text in the center
Create an index.html
file and a style.css
file that reproduces the following:
Create an index.html
file and a style.css
file that reproduces the following:
Update the index.html
file and style.css
file to reproduces the following:
Update only the style.css file to reproduces the following:
๐ก - Minimally complete workshop (75%) - ๐ก
Update only the CSS file to reproduce the following:
Update only the style.css
file to reproduces the following:
Create an index.html
file and a style.css
file that reproduces the following:
๐ข - Complete workshop (100%) - ๐ข
The exercises in the following links will help you get more practice with CSS selectors, CSS Flexbox, and optionally Grid.
Go back to exercise 10 and make the button do a 360deg rotation when it bounces
- Use the syntax
transform:scale() rotate()
in your keyframe
The very first exercise had us build this:
For fun, try and build this without using flexbox. No display: flex
allowed.
You will need to use calc()
and vh
units for this.
Example use: min-height: calc(10vh + 200px);
Create an HTML file and a CSS file that outputs the following
<div class="alert alert-primary">
<p>A simple primary alert.</p>
</div>
<div class="alert alert-secondary">
<p>A simple secondary alert.</p>
</div>
...
Create an HTML file and a CSS file that outputs the following
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
...
Note: The type="button"
attribute isn't important for this exercise
Create an HTML file and a CSS file that outputs the following
Build upon what you did in exercise 14.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
...
Note: The type="button"
attribute isn't important for this exercise
Create an HTML file and a CSS file that outputs the following
Build upon what you did in previous exercise 14 and 15.
- You do not need to re-create the code snippets. Your goal is to create the buttons. The code snippets are shown in the screenshots as an example of what the HTML properties should be.
- The
type="button"
attribute isn't important for this exercise
Create an HTML file and a CSS file that outputs the following
Create an HTML file and a CSS file that outputs the following
Build upon what you did in exercise 17.