1.3 - CSS: Page Layout - Workshop

Each exercise folder contains a README with additional documentation.

Exercise 1 - Use Flexbox

Create an index.html file and a style.css file that reproduces the following:

Exercise 2

Create an index.html file and a style.css file that reproduces the following:

Exercise 3

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

Exercise 4

Create an index.html file and a style.css file that reproduces the following:

Exercise 5

Create an index.html file and a style.css file that reproduces the following:

Exercise 6

Update the index.html file and style.css file to reproduces the following:

Exercise 7

Update only the style.css file to reproduces the following:

---

🟡 - Minimally complete workshop (75%) - 🟡

---

Exercise 8

Update only the CSS file to reproduce the following:

Exercise 9

Update only the style.css file to reproduces the following:

Exercise 10

Create an index.html file and a style.css file that reproduces the following:

---

🟢 - Complete workshop (100%) - 🟢

---

Stretch Goals

The exercises in the following links will help you get more practice with CSS selectors, CSS Flexbox, and optionally Grid.

Exercise 11

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

Exercise 12 - NO flexbox!

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);

Exercise 13

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>

...

Exercise 14

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

Exercise 15

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

Exercise 16

Create an HTML file and a CSS file that outputs the following

Build upon what you did in previous exercise 14 and 15.

Part 1

Part 2

Part 3

Notes

• 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

Exercise 17

Create an HTML file and a CSS file that outputs the following

Exercise 18

Create an HTML file and a CSS file that outputs the following

Build upon what you did in exercise 17.