Skip to content

Commit

Permalink
Added CSS Workshop Info (#137)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cnoss
cnoss authored Jul 8, 2024
1 parent ac0a805 commit 34fd490
Show file tree
Hide file tree
Showing 6 changed files with 166 additions and 10 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
120 changes: 110 additions & 10 deletions _site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,106 @@ <h2 class="subtitle is-3">
<h2 class="is-underlined">Die letzten Workshops und Tutorials</h2>
<div class="columns is-multiline">

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2024/css-in-2024/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2024/css-in-2024/index/../thumbnail.jpg">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>State of CSS in 2024</h3>
<dl>
<dd>Christian Noss</dd>
<dd>Dienstag, 16. Juli 2024, 13:00 Uhr</dd>
<dd>~120 Minuten</dd>
<dd class="clipped-text">Raum 3.217</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2024/css-in-2024/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2024/PWAs/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2024/PWAs/index/../thumbnail.png">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>Progressive Web Apps</h3>
<dl>
<dd>Oliver Wichmann</dd>
<dd>Dienstag, 9. Juli 2024, 13:00 Uhr</dd>
<dd>~120 Minuten</dd>
<dd class="clipped-text">Raum 3.217</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2024/PWAs/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2024/Server-Side-Rendering/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2024/Server-Side-Rendering/index/../thumbnail.jpg">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>Server Side Rendering</h3>
<dl>
<dd>Dennis Wäckerle</dd>
<dd>Dienstag, 02. Juli 2024, 13:00 Uhr</dd>
<dd>~120 Minuten</dd>
<dd class="clipped-text">Raum 3.216</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2024/Server-Side-Rendering/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2024/RealtimeTechnologies/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2024/RealtimeTechnologies/index/../thumbnail.png">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>Echtzeit Kommunikation</h3>
<dl>
<dd>Joshua Gawenda</dd>
<dd>Dienstag, 25. Juni 2024, 13:00 Uhr</dd>
<dd>~120 Minuten</dd>
<dd class="clipped-text">Raum 3.217</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2024/RealtimeTechnologies/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2024/Microfrontends/index/">
<div class="card bm--card-equal-height">
Expand Down Expand Up @@ -1017,51 +1117,51 @@ <h3>Docker 101</h3>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2018/offline-im-web/index/">
<a href="/mi-master-wtw/workshops/2018/workshop-authentifizierungs-und-autorisierungsmethoden-im-web/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2018/offline-im-web/index/../teaser.jpg">
<img src="/mi-master-wtw/workshops/2018/workshop-authentifizierungs-und-autorisierungsmethoden-im-web/index/../teaser.jpg">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>Offline im Web</h3>
<h3>Web Authentifizierungs- und Autorisierungsmethoden</h3>
<dl>
<dd>Sascha Lemke</dd>
<dd>Anatol Walger</dd>
<dd>Dienstag, 17. Juli 2018, 13:30 Uhr</dd>
<dd>120 Minuten</dd>
<dd class="clipped-text">Raum Online, siehe Ilias</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2018/offline-im-web/index/">Inhalte anschauen</a>
<a class="card-footer-item" href="/workshops/2018/workshop-authentifizierungs-und-autorisierungsmethoden-im-web/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2018/workshop-authentifizierungs-und-autorisierungsmethoden-im-web/index/">
<a href="/mi-master-wtw/workshops/2018/offline-im-web/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2018/workshop-authentifizierungs-und-autorisierungsmethoden-im-web/index/../teaser.jpg">
<img src="/mi-master-wtw/workshops/2018/offline-im-web/index/../teaser.jpg">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>Web Authentifizierungs- und Autorisierungsmethoden</h3>
<h3>Offline im Web</h3>
<dl>
<dd>Anatol Walger</dd>
<dd>Sascha Lemke</dd>
<dd>Dienstag, 17. Juli 2018, 13:30 Uhr</dd>
<dd>120 Minuten</dd>
<dd class="clipped-text">Raum Online, siehe Ilias</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2018/workshop-authentifizierungs-und-autorisierungsmethoden-im-web/index/">Inhalte anschauen</a>
<a class="card-footer-item" href="/workshops/2018/offline-im-web/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>
Expand Down
Binary file modified _workshops/.DS_Store
View file
Binary file not shown.
Binary file modified _workshops/2024/.DS_Store
View file
Binary file not shown.
56 changes: 56 additions & 0 deletions _workshops/2024/css-in-2024/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
layout: workshop
titel: State of CSS in 2024
social-media-untertitel: Workshop am 16. Juli 2024
datum: 2024-07-16
modul: wt
published: true
autor: Christian Noss
bild: ../thumbnail.jpg
bildcredits: DALL·E 3 (OpenAI)
art: workshop
termin: Dienstag, 16. Juli 2024, 13:00 Uhr
dauer: ~120 Minuten
raum: 3.217
---

## Ziel des Workshops

Dieser Workshop gibt den Teilnehmer:innen einen Überblick über einige interessante und teils sehr coole neue CSS Features. Dazu nutzen wir ein zusammenhängendes Beispiel um ein mögliches Einsatzszenario für verschiedene Features zu erkunden.

Wir gehen u.A. auf folgende Themen ein:
- [Web Standards & Lean Web Development](https://leanweb.dev)
- [Feature Support/ Browserunterstützung](https://web.dev/baseline?hl=de)
- [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
- [Scroll Driven Animations](https://scroll-driven-animations.style)
- [View Transitions](https://developer.chrome.com/blog/whats-new-css-ui-2023#view_transitions)
- [Scoped Styles](https://developer.chrome.com/blog/whats-new-css-ui-2023#scoped_css)
- [CSS Nesting](https://developer.chrome.com/docs/css-ui/css-nesting)
- [Popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover)
- [Broken Grid via CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)


## Zielgruppe

Dieser Workshop richtet sich an **alle Gestalter:innen und Entwickler:innen**, die wissen wollen, was derzeit und in Kürze mit Web-Standards möglich ist und wo etwaige schwergewichtige Javascript Lösungen durch leichgewichtigere CSS Lösungen ersetzt werden können.

## Vorkenntnisse

Die Teilnehmenden sollten Kenntnisse in folgenden Bereichen mitbringen:
- CSS
- HTML
- [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
- [CSS Grid Basics](https://kulturbanause.de/blog/css-grid-layout-module/)
- [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

## Technische Voraussetzungen
- Entwicklungsumgebung, z.B. Visual Studio Code
- aktuellste Version des [Chrome Browsers](https://www.google.com/chrome/)

## Material
- Workshop Repository (kommt am 15.07.2024)

## Further Readings
- [What's new in CSS and UI: I/O 2023 Edition](https://developer.chrome.com/blog/whats-new-css-ui-2023)
- [The latest in CSS and web UI: I/O 2024 recap](https://developer.chrome.com/blog/new-in-web-ui-io-2024)

Binary file added _workshops/2024/css-in-2024/thumbnail.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 34fd490

Please sign in to comment.