`.
---
class: center, middle
# Cascading Style Sheets (CSS)
*Slogan: Confused yet?*
---
# Design crashcourse
Why? Because:
Users often perceive aesthetically pleasing design as design that’s more usable.
---
# Typography - Font
**serif** for books (see header).
Line-like Serifs help the eye read.
*Arial, Times New Roman, ...*
**sans-serif** for displays (see body).
No serifs look cleaner.
*Verdana, Courier, Helvetica, ...*
**monospace** for code (`like this`).
Same width characters help notice patterns faster.
*Consolas, ...*
many more variations...
Each font may has different weights

Many free-to-use fonts exist, like [google fonts](https://fonts.google.com/).
You might want to [pair fonts](https://fontpair.co/).
---
# Typography - Size
Balance font weight, font size, line length and line height.
Line height

Increase line height when:
- font size decreases
- font boldness decreases
- line length increases

---
# Spacing
Content needs to breathe!
Separate what does not belong together.
Separate little what does.
Emphasize importance with more space around.
You may want to define a spacing scheme for consistency.
Like 4, 8, 16, 32, 64 (geometric progression).
Like 5, 8, 13, 21, 34 (Fibonacci numbers / golden cut)
---
# Spacing - Example

---
# Spacing - Example

---
# Colors
Give your site a distinctive look with your "brand" colors.
Primary color associated with your brand.
Secondary color which contrasts primary nicely (like complement).
Colors for messages (red for errors, orance for warnings, ...).
Pastel colors for a soft look, bright colors for inspiring effects

Many premade color schemes, like [colorhunt](https://colorhunt.co)
Many color scheme generators out there, like [paletton](https://paletton.com)
---
# Bootstrap
---
# Typography
explain em, rem
https://app.typeanything.io/
Body text recommendations:
- at least 16px font size
- regular boldness
- 10 - 15 words per line
Do not sacrifice readability to design!
---
class: center, middle
# JavaScript
*Slogan: Absolutely no similarities with Java AT ALL.*
---
# jQuery
---
class: center, middle
# PHP: Hypertext Preprocessor (PHP)
*Slogan: It is getting better. Or: [PHP: a fractal of bad design](https://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/)*
---
# Summary
---
# Outlook
Advanced topics coming right up!
---
class: center, middle
# Advanced topics
---
# Advanced topics
HTML:
- html semantic checker
CSS:
- other css frameworks
JavaScript:
- [package manager introduction](https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70)
PHP:
- sqlite database