Add slides

web/css/remark.css

@@ -26,4 +26,9 @@ h1, h2, h3 {
 	flex-basis: 0;
 	flex-grow: 1;
 	max-width: 100%;
-}
\ No newline at end of file
+}
+
+
+.screenshot {
+	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+}

web/web.html

@@ -21,37 +21,25 @@ class: center, middle
 
 **HTML** for (structured) content.  
 Add text, images, files and meta data.
+*Goal: Know the most important HTML tags.*  
 
 **CSS** for the design.  
 Define spacing, font and colors.
+*Goal: Know design basics and using a css framework.*
 
 **JavaScript** to add functionality.  
 Animations! Filters! Sorting!
+*Goal: Apply jQuery & friends.*
 
 **PHP** to generate content.  
 Update the webpage more conveniently.
+*Goal: Generate your webpage based on data on the server.*
 
 *Each of these areas is its own profession!  
 We only briefly touch JavaScript and PHP.*
 
 ---
 
-# Structure of the course
-
-**HTML**: Hypertext Markup Language to semantically structure content.  
-*Goal: Know the most important HTML tags.*  
-
-**CSS**: Cascading Style Sheets to style HTML.  
-*Goal: Know design basics and using a css framework.*
-
-**JavaScript**: Functionality directly in the browser.  
-*Goal: Apply jQuery & friends.*
-
-**PHP**: Widely supported functionality on the server.  
-*Goal: Generate your webpage based on data on the server.*
-
----
-
 
 class: center, middle
 
@@ -81,6 +69,8 @@ class: center, middle
 </html>
 ```
 
+*Details on the following Slides*.
+
 ---
 
 # The core constructs
@@ -145,11 +135,11 @@ Primarily useful for mobile devices.
 
 Used by search engines to classify the document and show a preview.
 
-<img src="images/html_meta.png" width="40%">
+<img class="screenshot" src="images/html_meta.png" width="40%">
 
 Used by browsers in the browser tab.
 
-<img src="images/html_meta_browser.png" width="40%">
+<img class="screenshot" src="images/html_meta_browser.png" width="40%">
 
 ---
 
@@ -191,26 +181,25 @@ H3 for subheaders.
 # Text
 
 ```html
-<p>Write a paragraph inside p tags.</p>
-
-<p>Use <br/>
-if you must start a new line manually</p>
+<p>Write a paragraph inside p tags.
+Use <br/> to start a new line explicitly</p>
 ```
 
+Write a paragraph inside p tags. Use <br/> to start a new line explicitly
+
 ```html
 <i>italic</i> <br/>
 <b>bold</b> <br/>
 <u>underline</u>
 ```
+*italic*, **bold**, _underline_
 
 
 ```html
 <a href="https://developer.mozilla.org/">mozilla documentation</a>
-```
-
-```html
 <a ... target="_blank">open in new tab</a>
 ```
+
 <a href="https://developer.mozilla.org/">mozilla documentation</a>
 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank">open in new tab</a> <br/>
 
@@ -426,6 +415,21 @@ Many color scheme generators, like [paletton](https://paletton.com)
 
 ---
 
+# Cheap Design
+
+"Cheap Design" looks good on the drawning board, but does not work in practice.
+
+No contrast:
+<img class="screenshot" src="images/design_no_contrast.png" width="100%">
+
+Font too light: 
+<img class="screenshot" src="images/design_too_light.png" width="100%">
+
+Accessiblity checker for contrast from <a href="https://webaim.org/resources/contrastchecker/" target="_blank">WebAIM</a>.  
+*Font weight is more <a href="https://github.com/w3c/wcag/issues/665#issuecomment-503739179" target)"_blank">difficult</a>.*
+
+---
+
 class: center, middle
 
 ```html
@@ -520,8 +524,8 @@ You can try out different combinations on [app.typeanything.io](https://app.type
   width: 60px;
   height: 20px;
   padding: 50px;
-  margin: 20px;
   border: 10px solid yellow;
+  margin: 20px;
 }
 ```
 ```html
@@ -632,11 +636,24 @@ Use a CSS framework:
 - [Foundation](https://get.foundation/)
 - [Bulma](https://bulma.io/)
 
+Getting it right is *extremely* hard!  
 
-<br/>
+---
 
-Getting it right is *extremely* hard!  
-Advice: Learn a framework properly. Avoid writing CSS.
+# Opiniated advice what to do now
+
+You know how to create a webpage now (without functionality)!  
+To tame the complexity, just start :)
+
+Setup steps:
+- Pick a CSS framework (like [Bootstrap](https://getbootstrap.com/))
+- Look for the "starter template" (in HTML) or something similar
+- Create a `.html` (like `index.html`) and paste the template
+- Look at it in the browser (double-click)
+
+Create your webpage:
+- Add your own HTML to this `.html` file
+- Add styling using the framework provided CSS classes 
 
 ---
 
@@ -849,8 +866,8 @@ General steps to use a library:
 
 Resources:
 - [jQuery libraries](https://github.com/petk/awesome-jquery)
-- [JavaScript Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap)
 - [Package manager introduction](https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70)
+- [JavaScript Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap)
 
 ---
 
@@ -950,12 +967,12 @@ For this example, we place `events.json` in the same directory as our script:
 ```json
 [
   {
-    "title": "Web course",
+    "title": "Web",
     "date:" "30.08.2020"
   },
   {
-    "title": "Web course",
-    "date:" "30.08.2020"
+    "title": "Project Management",
+    "date:" "10.09.2020"
   },
   ...
 ]
@@ -984,6 +1001,28 @@ $events = json_decode($eventsJson);
 </table>
 ...
 ```
+---
+
+# Upcoming events in table result
+
+HTML that is delivered to the browser 
+
+```html
+...
+<table>
+  <tbody>
+      <tr>
+        <td>Web<td>
+        <td>30.08.2020</td>
+      </tr>
+      <tr>
+        <td>Project Management<td>
+        <td>10.09.2020</td>
+      </tr>
+  </tbody>
+</table>
+...
+```
 
 ---