public/web-development/presentation.git

			@@ -2903,6 +2903,14 @@
			</ul>
			</section>
			<section>
			<p>none</p>
			<img data-src="/assets/images/css-display-none.svg">
			<ul>
			<li>unsichtbar</li>
			<li>Platz wird nicht länger beansprucht, so als wenn das Element nicht im DOM wäre</li>
			</ul>
			</section>
			<section>
			<h3>Das <code>position</code>-Attribut</h3>
			</section>
			<section>
			@@ -2991,6 +2999,7 @@
			</html>
			</code>
			</pre>
			<p>Ein Muss für alle responsiven Seiten</p>
			</section>
			<section>
			<pre>
			@@ -3001,6 +3010,220 @@
			</code>
			</pre>
			</section>
			<section>
			<h3>Einheiten</h3>
			<pre>
			<code class="css" data-trim data-line-numbers="">
			div {
			width: 1px; /* Pixel */
			width: 1pt; /* Points */
			width: 1em; /* Breite des "M" in der Schriftgröße des Elements */
			width: 1rem; /* Breite des "M" in der Schriftgröße des HTML-Elements */
			width: 1vw; /* Prozent der View Width */
			width: 1%; /* Prozent des Elternelements */

			width: 5fr; /* Fraction (nur im CSS Grid verfügbar) */
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Größeneinheiten in einer HTML-Datei ausprobieren</p>
			</section>
			<section>
			<h3>CSS Flexbox</h3>
			<pre>
			<code class="css" data-trim data-line-numbers="">
			.container {
			display: flex; /* soll ein flexibler Container sein */
			display: inline-flex;

			flex-direction: column; /* Kinder spaltenweise anordnen */
			flex-direction: row; /* Kinder zeilenweise anordnen */

			align-items: center;
			justify-content: center;

			gap: 20px; /* Abstände zwischen den Achsen */
			}

			.child {
			flex-grow: 1; /* Anteiliger Platz, wenn mehr als nötig da ist */
			flex-shrink: 1; /* Anteiliger Platz, wenn weniger als nötig da ist */
			flex-basis: 20px; /* Grundlage zur Berechnung der finalen Größe */
			order: 1; /* Erlaubt die Darstellung in anderer Reihenfolge als durch das HTML vorgegeben */
			}
			</code>
			</pre>
			</section>
			<section>
			<img data-src="/assets/images/css-flexbox-axes.drawio.svg">
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Mit CSS Flexbox rumspielen</p>
			</section>
			<section>
			<h3>CSS Grid</h3>
			</section>
			<section>
			<h3>Terminologie</h3>
			<img data-src="/assets/images/css-grid-terminology.drawio.svg">
			</section>
			<section>
			<pre>
			<code class="css" data-trim data-line-numbers="">
			.grid {
			display: grid; /* inline-grid; */

			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;

			gap: 5px 10px;
			}
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="html" data-trim data-line-numbers="">
			<div class="grid">
			<span>A</span>
			<span>B</span>
			<span>C</span>
			<span>D</span>
			<span>E</span>
			<span>F</span>
			</div>
			</code>
			</pre>
			</section>
			<section>
			<iframe data-src="/assets/html/css-grid-example-1.html"></iframe>
			</section>
			<section>
			<pre>
			<code class="css" data-trim data-line-numbers="">
			.grid {
			grid-template-columns: [left] 1fr [column1] 1fr [column2] 1fr [right];
			grid-template-rows: [top] 1fr [row1] 1fr [bottom];
			}

			.a {
			grid-column: 2 / span 2;
			grid-row: 1;
			}

			.b {
			grid-column: left / column2;
			grid-row: 2;
			}
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="html" data-trim data-line-numbers="">
			<div class="grid">
			<span class="a">A</span>
			<span class="b">B</span>
			</div>
			</code>
			</pre>
			</section>
			<section>
			<iframe data-src="/assets/html/css-grid-example-2.html"></iframe>
			</section>
			<section>
			<pre>
			<code class="css" data-trim data-line-numbers="">
			.grid {
			grid-template-areas:
			"header header header"
			"content content content";
			}

			.a {
			grid-area: header;
			}

			.b {
			grid-area: 2 / 1 / 2 / 3; /* start-row / start-column / end-row / end-column */
			/* alternativ auch Namen der Lines möglich */
			}
			</code>
			</pre>
			</section>
			<section>
			<iframe data-src="/assets/html/css-grid-example-3.html"></iframe>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Implementiere folgendes Design:</p>
			<iframe data-src="/assets/html/css-grid-excercise.html"></iframe>
			</section>
			<section>
			<h3>Lösung</h3>
			<pre>
			<code class="css" data-trim data-line-numbers="">
			.grid {
			display: grid;

			grid-template-rows: 1fr 5fr 1fr;

			gap: 2px;

			grid-template-areas:
			"navigation header header header"
			"navigation content content content"
			"footer footer footer footer"
			}

			.navigation {
			grid-area: navigation;
			}

			.header {
			grid-area: header;
			}

			.content {
			grid-area: content;
			}

			.footer {
			grid-area: footer;
			}
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="html" data-trim data-line-numbers="">
			<div class="grid">
			<div class="area navigation">Navigation</div>
			<div class="area header">Header</div>
			<div class="area content">Content</div>
			<div class="area footer">Footer</div>
			</div>
			</code>
			</pre>
			</section>
			<section>
			<h4>Platzierug des Inhalts</h4>
			<pre>
			<code class="css" data-trim data-line-numbers="">
			.grid {
			align-items: center;
			justify-items: center;
			}
			</code>
			</pre>
			</section>
			<section>
			<iframe data-src="/assets/html/css-grid-example-4.html"></iframe>
			</section>
			</section>
			</div>
			</div>