Web design worksheet

class: center, middle, title-slide

# Web design worksheet
### Claus O. Wilke
### last updated: 2022-04-27

---

## Exercise instructions

For each of the following exercises, try to reproduce the output shown in the box using the indicated HTML tags and CSS properties.

After each exercise slide the solutions are shown on the next slide, so don't jump ahead.

Do the exercises on JSFiddle: https://jsfiddle.net/

---

## Exercise 1

.small-font[
.html-example[
The quick <span class = "ex1 brown">brown</span> fox jumps over
the <span class = "ex1 italics">lazy dog<span>.
]

.pull-left[
HTML tags used: `<span>`
]

.pull-right[
CSS properties used:
```css
color: brown;
font-style: italic;
```
]
]

---

## Solution to Exercise 1

.small-font.pull-left.width-55[
HTML input:

.tiny-font[
```html
The quick <span class = "brown">brown</span> fox
jumps over the <span class = "italics">lazy
dog<span>.
```
]]

.small-font.pull-right.width-40[
CSS input:

.tiny-font[
```css
.brown {
  color: brown;
}

.italics {
  font-style: italic;
}
```
]]

---

## Exercise 2

.small-font[
.html-example[
<div class = "ex2">The quick brown fox</div>
<div class = "ex2">jumps over the lazy dog.</div>
]

.pull-left[
HTML tags used: `<div>`
]

.pull-right[
CSS properties used:
```css
background-color: AliceBlue;
margin: 1em 0;
```
]]

---

## Solution to Exercise 2

.small-font.pull-left.width-55[
HTML input:

.tiny-font[
```html
<div>The quick brown fox</div>
<div>jumps over the lazy dog.</div>
```
]]

.small-font.pull-right.width-40[
CSS input:

.tiny-font[
```css
div {
  background-color: AliceBlue;
  margin: 1em 0;
}
```
]]

---

## Exercise 3

.small-font[
.html-example[
<span class = "ex3">The quick brown fox</span>
<span class = "ex3">jumps over the lazy dog.</span>
]

.pull-left[
HTML tags used: `<span>`
]

.pull-right[
CSS properties used:
```css
background-color: AliceBlue;
padding: 0.5em;
margin: 1em 0;
```
]]

---

## Solution to Exercise 3

.small-font.pull-left.width-55[
HTML input:

.tiny-font[
```html
<span>The quick brown fox</span>
<span>jumps over the lazy dog.</span>
```
]]

.small-font.pull-right.width-40[
CSS input:

.tiny-font[
```css
span {
  background-color: AliceBlue;
  padding: 0.5em;
  margin: 0 0.5em;
}
```
]]

---

.ex4.body {
  font-family: cursive;
}
</style>

## Exercise 4

.small-font[
.html-example[
<div class = "ex4 heading">Chapter 1</div>

<div class = "ex4 body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
]

.pull-left[
HTML tags used: `<div>`
]

.pull-right[
CSS properties used:

```css
font-family: fantasy;
font-family: cursive;
font-size: 24px;
font-weight: bold;
```
]]

---

## Solution to Exercise 4

.small-font.pull-left.width-55[
HTML input:

.tiny-font[
```html
<div class = "heading">Chapter 1</div>

<div class = "body">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</div>
```
]]

.small-font.pull-right.width-40[
CSS input:

.tiny-font[
```css
.heading {
  font-family: fantasy;
  font-size: 24px;
  font-weight: bold;
}

.body {
  font-family: cursive;
}

```
]]

---

.ex5.heading {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background-color: AliceBlue;
  padding: 0.5em;
}

.ex5.body {
  margin-top: 1em;
}
</style>

## Exercise 5

.small-font[
.html-example[
<div class = "ex5 heading">Chapter 1</div>

<div class = "ex5 body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
]

.pull-left[
HTML tags used: `<div>`
]

.pull-right[
CSS properties used:

```css
font-size: 24px;
font-weight: bold;
text-align: center;
color: MidnightBlue;
background-color: AliceBlue;
padding: 0.5em;
margin-top: 1em;
```
]]

---

## Solution to Exercise 5

.small-font.pull-left.width-55[
HTML input:

.tiny-font[
```html
<div class = "heading">Chapter 1</div>

.small-font.pull-right.width-40[
CSS input:

.tiny-font[
```css
div {
  color: MidnightBlue;
}

.heading {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background-color: AliceBlue;
  padding: 0.5em;
}

.body {
  margin-top: 1em;
}
```
]]