diff --git a/web/Web.pdf b/web/Web.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..40a86acce1b27e1031c34def3eb81e4b68507ded
--- /dev/null
+++ b/web/Web.pdf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5a9169736131fd81ce567e85af8fc5cd3873c4fe043dda3f5782779cf4050cea
+size 751788
diff --git a/web/css/remark.css b/web/css/remark.css
index dd1a53f6b39862def7d7326f28f7bb1062c2bf6f..bafc19020568e3d799664334ce8f5a39eb95c745 100644
--- a/web/css/remark.css
+++ b/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);
+}
diff --git a/web/images/design_no_contrast.png b/web/images/design_no_contrast.png
new file mode 100644
index 0000000000000000000000000000000000000000..41ef1288ceea78093dc9ba3e65b3fbf3957a7a6e
--- /dev/null
+++ b/web/images/design_no_contrast.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aa027400b0ad417f36ef4e43ed76569598875ddff096ecb82db9f0f9794dc37f
+size 16031
diff --git a/web/images/design_too_light.png b/web/images/design_too_light.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5ca2d7feb2cdaf7bf0d2c240b94e28176622eca
--- /dev/null
+++ b/web/images/design_too_light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9022b739c9c965e70cf90618ad8d6a03c1fe1e430aff323cf257706dfa439e2e
+size 49002
diff --git a/web/web.html b/web/web.html
index 9758bb5d387abe77eac79294aec041970824323c..23359b4c31e38b1283cf1bebc27254b6a5472e88 100644
--- a/web/web.html
+++ b/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>
+...
+```
---