add css grid

Sascha Schulz

2023-10-24 4ced53fb3c3186b163d1e43117dca935013ec6c9

 index.html

@@ -2797,6 +2797,434 @@
                  </pre>
               </section>
            </section>
            <section>
               <section>
                  <h2>CSS</h2>
                  <img data-src="/assets/images/css-sucks.png">
               </section>
               <section>
                  <h3>Warum CSS?</h3>
                  <ul>
                     <li>Erhöhte Zugänglichkeit des Inhalts</li>
                     <li>Wiederverwendbarkeit</li>
                  </ul>
               </section>
               <section>
                  <h3>Syntax</h3>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        selector [, selector2, selector3, ...] {
                           property1: value;
                           property2: value;
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Beispiel</h3>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        html, body {
                           width: 100%;
                           height: 100%;
                           margin: 0;
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Selektoren</h3>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        /* Elemente */
                        html, body {...}
								
                        /* IDs */
                        #my-id {...}
								
                        /* Klassen */
                        .my-class {...}
								
                        /* Pseudo-Klassen */
                        div:hover {...}
								
                        /* Attribute */
                        div[my-attribut="abc"] {...}
								
                        /* Kombinationen */
                        div.my-class#my-id {...}
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Variablen</h3>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        html {
                           --my-background-color: #abcdef;
                        }
								
                        html div {
                           background-color: var(--my-background-color, white);
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Das <code>display</code>-Attribut</h3>
               </section>
               <section>
                  <p>block</p>
                  <img data-src="/assets/images/css-display-block.svg">
                  <ul>
                     <li>untereinander angeordnet</li>
                     <li>nehmen sich die volle Breite</li>
                     <li><code>width</code> und <code>height</code> möglich</li>
                  </ul>
               </section>
               <section>
                  <p>inline</p>
                  <img data-src="/assets/images/css-display-inline.svg">
                  <ul>
                     <li>Standard bei <code>Custom Elements</code></li>
                     <li>nur so groß wie der content</li>
                     <li><code>width</code> und <code>height</code> nicht möglich</li>
                     <li>nebeneinander angeordnet</li>
                  </ul>
               </section>
               <section>
                  <p>inline-block</p>
                  <img data-src="/assets/images/css-display-inline-block.svg">
                  <ul>
                     <li>Mischform von <code>block</code> und <code>inline</code></li>
                     <li>nur so groß wie der content</li>
                     <li><code>width</code> und <code>height</code> möglich</li>
                     <li>nebeneinander angeordnet</li>
                  </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>
                  <p>static</p>
                  <img data-src="/assets/images/css-position-static.svg">
                  <ul>
                     <li>Standard</li>
                     <li>Element wird am Ort der Verankerung im HTML dargestellt</li>
                  </ul>
               </section>
               <section>
                  <p>relative</p>
                  <img data-src="/assets/images/css-position-relative.svg">
                  <ul>
                     <li>Verschiebung zur eigentlichen <code>static</code>-Position, z.B. mittels <code>left: 20px</code></li>
                  </ul>
               </section>
               <section>
                  <p>absolut</p>
                  <img data-src="/assets/images/css-position-absolute.svg">
                  <ul>
                     <li>relative Verschiebung zum nächsten nicht-<code>static</code>-Parent (sonst <code>window</code>)</li>
                  </ul>
               </section>
               <section>
                  <h3>Aufgabe</h3>
                  <p>Implementiere folgendes Beispiel-Menü</p>
                  <iframe data-src="/assets/html/css-menu.html"></iframe>
               </section>
               <section>
                  <h3>Lösung</h3>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        .menu-item {
                           display: inline-block;

                           position: relative;
                        }

                        .menu-item .children {
                           display: none;

                           position: absolute;
                        }

                        .menu-item:hover .children {
                           display: block;
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="html" data-trim data-line-numbers>
                        <script type="text/template">
                           <div class="menu">
                              <div class="menu-item">Eins</div>
                              <div class="menu-item">
                                 Hover Me!
                                 <div class="children">
                                    <div>Item 1</div>
                                    <div>Item 2</div>
                                 </div>
                              </div>
                              <div class="menu-item">Drei</div>
                           </div>
                        </script>
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Viewport</h3>
                  <pre>
                     <code class="html" data-trim data-line-numbers>
                        &lt;!DOCTYPE html>
                        &lt;html>
                           &lt;head>
                              &lt;meta charset="utf-8">&lt;/meta>
                              &lt;meta
                                 name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
                              >
                           &lt;/head>
                           &lt;body>
                              ...
                           &lt;/body>
                        &lt;/html>
                     </code>
                  </pre>
                  <p>Ein Muss für alle responsiven Seiten</p>
               </section>
               <section>
                  <pre>
                     <code class="bash" data-trim data-line-numbers="">
                        npm install -g http-server
                        cd pfad/zum/projekt
                        http-server --port 8080
                     </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="">
                        &lt;div class="grid"&gt;
                           &lt;span&gt;A&lt;/span&gt;
                           &lt;span&gt;B&lt;/span&gt;
                           &lt;span&gt;C&lt;/span&gt;
                           &lt;span&gt;D&lt;/span&gt;
                           &lt;span&gt;E&lt;/span&gt;
                           &lt;span&gt;F&lt;/span&gt;
                        &lt;/div&gt;
                     </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="">
                        &lt;div class="grid"&gt;
                           &lt;span class="a"&gt;A&lt;/span&gt;
                           &lt;span class="b"&gt;B&lt;/span&gt;
                        &lt;/div&gt;
                     </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="">
                        &lt;div class="grid"&gt;
                           &lt;div class="area navigation"&gt;Navigation&lt;/div&gt;
                           &lt;div class="area header"&gt;Header&lt;/div&gt;
                           &lt;div class="area content"&gt;Content&lt;/div&gt;
                           &lt;div class="area footer"&gt;Footer&lt;/div&gt;
                        &lt;/div&gt;
                     </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>