To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

Commit 62c7c418 authored by Florian Moser's avatar Florian Moser
Browse files

Add slides

parent f16a9bfe
File added
......@@ -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);
}
......@@ -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>
...
```
---
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment