Work on css part of course

web/css/remark.css

@@ -3,4 +3,17 @@ h1, h2, h3 {
   font-family: serif;
   font-weight: normal;
 }
-.remark-code, .remark-inline-code { font-family: monospace; }
\ No newline at end of file
+.remark-code, .remark-inline-code { font-family: monospace; }
+
+.inverted { color: white; background: black; }
+
+.rectangle {
+  display: inline-block;
+
+  background: #9FCFF8;
+  width: 60px;
+  height: 20px;
+  padding: 50px;
+  margin: 20px;
+  border: 10px solid #FFE599;
+}
\ No newline at end of file

web/web.html

@@ -47,7 +47,7 @@ Update the webpage more conveniently.
 **CSS**: Cascading Style Sheets to style HTML.  
 *Target: Know design basics and using a css framework.*
 
-**JavaScript**: Functionality directly in the browser .  
+**JavaScript**: Functionality directly in the browser.  
 *Target: Apply jQuery & friends.*
 
 **PHP**: Widely supported functionality on the server.  
@@ -302,7 +302,11 @@ class: center, middle
 
 ---
 
-# Design crashcourse
+class: center, middle
+
+```html
+<design-crashcourse>
+```
 
 Why? Because:
 <blockquote>
@@ -310,15 +314,6 @@ Users often perceive aesthetically pleasing design as design that’s more usabl
 <a href="https://www.nngroup.com/articles/aesthetic-usability-effect/" target="_blank">https://www.nngroup.com/articles/aesthetic-usability-effect/</a>
 </blockquote>
 
-Limits? Yes:
-<blockquote>
-form follows function. - Horatio Greenough
-</blockquote>
-
-Do not overdue it!  
-Each design element should have a purpose.
-
-
 ---
 
 # Typography - Typeface
@@ -363,7 +358,7 @@ There are other factors that affect readability, which we will see on the next s
 
 ---
 
-# Typography is about Balance!
+# Typography - Balance
 
 Balance font weight, font size, line length and line height.
 
@@ -380,8 +375,6 @@ Improve readability:
 
 # Spacing
 
-Content needs to breathe!
-
 Separate what does not belong together.  
 Separate little what does.  
 
@@ -429,25 +422,175 @@ Many color scheme generators out there, like [paletton](https://paletton.com)
 
 ---
 
-# Bootstrap
+class: center, middle
+
+```html
+</design-crashcourse>
+```
+
+---
+
+class: inverted
+
+# CSS basics
+
+```css
+body {
+  color: white;
+  background: black;
+}
+```
+
+choose a **selector** (like `body`)  
+for **properties** (like `color`)  
+override the default **value** (like `white`)
+
+---
+
+# CSS selector
+
+by element, class or id 
+```html
+<section class="content" id="introduction"></section>
+```
+```css
+section {
+  background: red
+}
+
+.content {
+  background: blue;
+}
+
+#introduction {
+  background: green;
+}
+```
+
+choose the most appropriate selector according to your structure (usually it ends up being the `class`).  
+
+---
+
+# Typography - Font Family
+
+```css
+body {
+  font-family: 'Times New Roman', Times, serif;
+  font-weight: bold;
+  font-style: italic;
+}
+```
+
+including your own font family with 
+```css
+@font-face {
+  font-family: 'Vegur';
+  src: url('Vegur-Bold.ttf') format('ttf');
+  font-weight: bold;
+  font-style: normal;
+}
+```
+
+Generate optimized font family files [transfonter.org](https://transfonter.org/).
 
+---
+
+# Typography - Size
+
+```css
+body {
+  font-size: 16px;
+  line-height: 1.2em;
+}
+```
+
+`em` is a relative unit to the current font size.  
+`rem` is a relative unit the `html` font size. 
+
+You can try out different combinations on [app.typeanything.io](https://app.typeanything.io/).
+
+---
+
+# Spacing
+
+```css
+.rectangle {
+  background: blue;
+  width: 60px;
+  height: 20px;
+  padding: 50px;
+  margin: 20px;
+  border: 10px solid yellow;
+}
+```
+```html
+<div class="rectangle"></div>
+```
+
+<div class="rectangle"></div>
+<img src="images/css_spacing.png" width="35%">
+
+---
+
+class: inverted
+
+# Color
+
+```css
+body {
+  color: #FFFFFF; 
+  background: rgb(0,0,0);
+}
+```
+
+use predefined [colors](https://developer.mozilla.org/de/docs/Web/CSS/Farben).  
+
+or specify own color (using additive light mixing).  
+use hex (like `#rrggbb`).  
+or rgb (like `rgb(red, green , blue)`).  
+or rgba (like `rgba(red, green , blue, opacity)`) representations.
 
 ---
 
-# Typography
+# Display
+
+
+```css
+body {
+  display: block;
+}
+```
+
+defines how element is placed (and elements around).
+
+TODO FACTCHECK
+`display: block` is the default and renders a full-width container.  
+`display: inline-block` renders as wide as the content.  
 
-explain em, rem
+for arranging items along a grid, use `display:`&nbsp[`grid`](https://css-tricks.com/snippets/css/complete-guide-grid/).  
+for distributing items use `display:`&nbsp[`flex`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
+
+---
+
+# Position
+
+```css
+body {
+  position: absolute;
+  position: relative;
+  top: 0;
+}
+```
+
+---
+
+# Bootstrap
 
-https://app.typeanything.io/
+Good design is hard.
 
 
 
-Body text recommendations:
-- at least 16px font size
-- regular boldness
-- 10 - 15 words per line 
 
-Do not sacrifice readability to design!
 
 ---