public/web-development/presentation.git

Parent: 86d58898 | Patch | Commit | show whitespace

Sascha Schulz

2023-10-24 3d21c92def37bc1ce24694126fa35701bf1f5955

Merge branch 'draft'

1 Dateien geändert

7 Dateien hinzugefügt

	assets/drawio/css-grid-terminology.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/html/css-grid-example-1.html	31 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/html/css-grid-example-2.html	35 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/html/css-grid-example-3.html	34 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/html/css-grid-example-4.html	52 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/html/css-grid-excercise.html	49 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/css-grid-terminology.drawio.svg	4 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	index.html	160 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie

 assets/drawio/css-grid-terminology.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-10-24T12:09:19.799Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="mUKfkLqiDt0e9qkWBIUN" version="16.1.2" type="device"><diagram id="qX8B151_wiXKYsOxSvGI" name="Page-1">5ZnLcpswFIafhmVmkLgvGydxO9NMF15k2VFBBsay5ciixn36ykaEmzKTjlGkJt5Y/EfX7widAzjeYlsvGdoXjzTDxIFuVjvenQMhCGMg/s7KqVHCOG6EnJWZrNQJq/IPlqIr1arM8GFQkVNKeLkfiind7XDKBxpijB6H1daUDEfdoxxPhFWKyFR9KjNeNGoMo07/isu8aEcGYdJYtqitLFdyKFBGjz3Ju3e8BaOUN6VtvcDkDK/l0rR7eMX6MjGGd/wtDZarE65K/C2LqsdlEPlLXK9uZC+/EankguVk+aklwGi1y/C5E9fxbo9FyfFqj9Kz9Sh8LrSCb4m4AqI4nVQ7AmYc1z1JTnKJ6RZzdhJVjh3fwJPQih5bL5Qikj7NX9p2yxYFufJ/oAAVFEIihr1dU7GOPo7wuaKt4eZw2a5fRIVkX3c2UcrP/+ll6KYjMa+mr8Z0HeV1SciCEsoubQUXlIBITqqnry8/oR84oxvcs8C7KHTdK/3VWqVXTsPLnjcBVHhTmzM9i7Z0a/UtY+TbxwhGljECsX2QRvdabJxRYiEj3zJI7WA2QRrfbe8J6Ufw6zl3OYie4PonODxsvO+BpkRkAkSB7c2BLTDNSJWmmGY0jmzGIekJ/1dBmoQ245AiBaQZEl5S7vB/kfDOeS6ozs4AKLwJdHlTT6JyFSPfNZfNKRnpSVRmZWQ+ButJVObdSMbPTqBKVWY4PDlD6ebjn55w6M9k6k4/UbjT1+ZOG7OqUYSBxve8hVnVOPW0gJKe1yqz5p4WUArsozSOMhZQCvVEGYEEfbogA8KpO6HqEwPQlqMD1SOX6RN0tOkVsfidN72FTzKTMGOekoXPMpMwY5ySpreu84YZjZTEZfdt+WLrfaH37v8C</diagram></mxfile>

 assets/html/css-grid-example-1.html

Neue Datei
@@ -0,0 +1,31 @@
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            span {

                background-color: yellow;

            }



            .grid {

                display: grid; /* inline-flex; */



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

                grid-template-rows: 1fr 1fr;

                
                gap: 10px 20px;

            }

        </style>

    </head>

    <body>

        <div class="grid">

            <span>A</span>

            <span>B</span>

            <span>C</span>

            <span>D</span>

            <span>E</span>

            <span>F</span>

        </div>

    </body>

</html>


 assets/html/css-grid-example-2.html

Neue Datei
@@ -0,0 +1,35 @@
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            span {

                background-color: yellow;

            }



            .grid {

                display: 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;

            }

        </style>

    </head>

    <body>

        <div class="grid">

            <span class="a">A</span>

            <span class="b">B</span>

        </div>

    </body>

</html>


 assets/html/css-grid-example-3.html

Neue Datei
@@ -0,0 +1,34 @@
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            span {

                background-color: yellow;

            }



            .grid {

                display: grid;



                grid-template-areas:

                    "header header header"

                    "content content content";

            }



            .a {

                grid-area: header;

            }



            .b {

                grid-area: 2 / 1 / 2 / 3;

            }

        </style>

    </head>

    <body>

        <div class="grid">

            <span class="a">A</span>

            <span class="b">B</span>

        </div>

    </body>

</html>


 assets/html/css-grid-example-4.html

Neue Datei
@@ -0,0 +1,52 @@
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            .area {

                background-color: yellow;

            }



            .grid {

                display: grid;



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



                gap: 5px;



                grid-template-areas:

                    "navigation header header header"

                    "navigation content content content"

                    "footer footer footer footer";



                align-items: center;

                justify-items: center;

            }



            .navigation {

                grid-area: navigation;

            }



            .header {

                grid-area: header;

            }



            .content {

                grid-area: content;

            }



            .footer {

                grid-area: footer;

            }

        </style>

    </head>

    <body>

        <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>

    </body>

</html>


 assets/html/css-grid-excercise.html

Neue Datei
@@ -0,0 +1,49 @@
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            .area {

                background-color: yellow;

            }



            .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;

            }

        </style>

    </head>

    <body>

        <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>

    </body>

</html>


 assets/images/css-grid-terminology.drawio.svg

Neue Datei
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="571px" height="401px" viewBox="-0.5 -0.5 571 401" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-10-24T12:09:40.301Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36&quot; etag=&quot;4wk68zop8bXdEyjJgEHZ&quot; version=&quot;16.1.2&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;qX8B151_wiXKYsOxSvGI&quot; name=&quot;Page-1&quot;&gt;5ZnLcpswFIafhmVmkLgvGydxO9NMF15k2VFBBsay5ciixn36ykaEmzKTjlGkJt5Y/EfX7widAzjeYlsvGdoXjzTDxIFuVjvenQMhCGMg/s7KqVHCOG6EnJWZrNQJq/IPlqIr1arM8GFQkVNKeLkfiind7XDKBxpijB6H1daUDEfdoxxPhFWKyFR9KjNeNGoMo07/isu8aEcGYdJYtqitLFdyKFBGjz3Ju3e8BaOUN6VtvcDkDK/l0rR7eMX6MjGGd/wtDZarE65K/C2LqsdlEPlLXK9uZC+/EankguVk+aklwGi1y/C5E9fxbo9FyfFqj9Kz9Sh8LrSCb4m4AqI4nVQ7AmYc1z1JTnKJ6RZzdhJVjh3fwJPQih5bL5Qikj7NX9p2yxYFufJ/oAAVFEIihr1dU7GOPo7wuaKt4eZw2a5fRIVkX3c2UcrP/+ll6KYjMa+mr8Z0HeV1SciCEsoubQUXlIBITqqnry8/oR84oxvcs8C7KHTdK/3VWqVXTsPLnjcBVHhTmzM9i7Z0a/UtY+TbxwhGljECsX2QRvdabJxRYiEj3zJI7WA2QRrfbe8J6Ufw6zl3OYie4PonODxsvO+BpkRkAkSB7c2BLTDNSJWmmGY0jmzGIekJ/1dBmoQ245AiBaQZEl5S7vB/kfDOeS6ozs4AKLwJdHlTT6JyFSPfNZfNKRnpSVRmZWQ+ButJVObdSMbPTqBKVWY4PDlD6ebjn55w6M9k6k4/UbjT1+ZOG7OqUYSBxve8hVnVOPW0gJKe1yqz5p4WUArsozSOMhZQCvVEGYEEfbogA8KpO6HqEwPQlqMD1SOX6RN0tOkVsfidN72FTzKTMGOekoXPMpMwY5ySpreu84YZjZTEZfdt+WLrfaH37v8C&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="20" y="20" width="530" height="360" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="30" width="120" height="60" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 60px; margin-left: 31px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">cell</font></div></div></div></foreignObject><text x="90" y="64" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">cell</text></switch></g><rect x="160" y="30" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="30" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="300" width="510" height="10" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 508px; height: 1px; padding-top: 305px; margin-left: 31px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">line</font></div></div></div></foreignObject><text x="285" y="309" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">line</text></switch></g><rect x="420" y="30" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="40" y="110" width="490" height="40" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 488px; height: 1px; padding-top: 130px; margin-left: 41px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">track</font></div></div></div></foreignObject><text x="285" y="134" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">track</text></switch></g><rect x="30" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="40" y="180" width="230" height="110" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 228px; height: 1px; padding-top: 235px; margin-left: 41px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">area</font></div></div></div></foreignObject><text x="155" y="239" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">area</text></switch></g><rect x="30" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 index.html

@@ -3064,6 +3064,166 @@
                        <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>

Neue Datei
			@@ -0,0 +1 @@
			<mxfile host="Electron" modified="2023-10-24T12:09:19.799Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="mUKfkLqiDt0e9qkWBIUN" version="16.1.2" type="device"><diagram id="qX8B151_wiXKYsOxSvGI" name="Page-1">5ZnLcpswFIafhmVmkLgvGydxO9NMF15k2VFBBsay5ciixn36ykaEmzKTjlGkJt5Y/EfX7widAzjeYlsvGdoXjzTDxIFuVjvenQMhCGMg/s7KqVHCOG6EnJWZrNQJq/IPlqIr1arM8GFQkVNKeLkfiind7XDKBxpijB6H1daUDEfdoxxPhFWKyFR9KjNeNGoMo07/isu8aEcGYdJYtqitLFdyKFBGjz3Ju3e8BaOUN6VtvcDkDK/l0rR7eMX6MjGGd/wtDZarE65K/C2LqsdlEPlLXK9uZC+/EankguVk+aklwGi1y/C5E9fxbo9FyfFqj9Kz9Sh8LrSCb4m4AqI4nVQ7AmYc1z1JTnKJ6RZzdhJVjh3fwJPQih5bL5Qikj7NX9p2yxYFufJ/oAAVFEIihr1dU7GOPo7wuaKt4eZw2a5fRIVkX3c2UcrP/+ll6KYjMa+mr8Z0HeV1SciCEsoubQUXlIBITqqnry8/oR84oxvcs8C7KHTdK/3VWqVXTsPLnjcBVHhTmzM9i7Z0a/UtY+TbxwhGljECsX2QRvdabJxRYiEj3zJI7WA2QRrfbe8J6Ufw6zl3OYie4PonODxsvO+BpkRkAkSB7c2BLTDNSJWmmGY0jmzGIekJ/1dBmoQ245AiBaQZEl5S7vB/kfDOeS6ozs4AKLwJdHlTT6JyFSPfNZfNKRnpSVRmZWQ+ButJVObdSMbPTqBKVWY4PDlD6ebjn55w6M9k6k4/UbjT1+ZOG7OqUYSBxve8hVnVOPW0gJKe1yqz5p4WUArsozSOMhZQCvVEGYEEfbogA8KpO6HqEwPQlqMD1SOX6RN0tOkVsfidN72FTzKTMGOekoXPMpMwY5ySpreu84YZjZTEZfdt+WLrfaH37v8C</diagram></mxfile>

Neue Datei
			@@ -0,0 +1,31 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Title</title>
			<style>
			span {
			background-color: yellow;
			}

			.grid {
			display: grid; /* inline-flex; */

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

			gap: 10px 20px;
			}
			</style>
			</head>
			<body>
			<div class="grid">
			<span>A</span>
			<span>B</span>
			<span>C</span>
			<span>D</span>
			<span>E</span>
			<span>F</span>
			</div>
			</body>
			</html>

Neue Datei
			@@ -0,0 +1,35 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Title</title>
			<style>
			span {
			background-color: yellow;
			}

			.grid {
			display: 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;
			}
			</style>
			</head>
			<body>
			<div class="grid">
			<span class="a">A</span>
			<span class="b">B</span>
			</div>
			</body>
			</html>

Neue Datei
			@@ -0,0 +1,34 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Title</title>
			<style>
			span {
			background-color: yellow;
			}

			.grid {
			display: grid;

			grid-template-areas:
			"header header header"
			"content content content";
			}

			.a {
			grid-area: header;
			}

			.b {
			grid-area: 2 / 1 / 2 / 3;
			}
			</style>
			</head>
			<body>
			<div class="grid">
			<span class="a">A</span>
			<span class="b">B</span>
			</div>
			</body>
			</html>

Neue Datei
			@@ -0,0 +1,52 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Title</title>
			<style>
			.area {
			background-color: yellow;
			}

			.grid {
			display: grid;

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

			gap: 5px;

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

			align-items: center;
			justify-items: center;
			}

			.navigation {
			grid-area: navigation;
			}

			.header {
			grid-area: header;
			}

			.content {
			grid-area: content;
			}

			.footer {
			grid-area: footer;
			}
			</style>
			</head>
			<body>
			<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>
			</body>
			</html>

Neue Datei
			@@ -0,0 +1,49 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Title</title>
			<style>
			.area {
			background-color: yellow;
			}

			.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;
			}
			</style>
			</head>
			<body>
			<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>
			</body>
			</html>

Neue Datei
			@@ -0,0 +1,4 @@
			<?xml version="1.0" encoding="UTF-8"?>
			<!-- Do not edit this file with editors other than diagrams.net -->
			<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="571px" height="401px" viewBox="-0.5 -0.5 571 401" content="<mxfile host="Electron" modified="2023-10-24T12:09:40.301Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="4wk68zop8bXdEyjJgEHZ" version="16.1.2" type="device"><diagram id="qX8B151_wiXKYsOxSvGI" name="Page-1">5ZnLcpswFIafhmVmkLgvGydxO9NMF15k2VFBBsay5ciixn36ykaEmzKTjlGkJt5Y/EfX7widAzjeYlsvGdoXjzTDxIFuVjvenQMhCGMg/s7KqVHCOG6EnJWZrNQJq/IPlqIr1arM8GFQkVNKeLkfiind7XDKBxpijB6H1daUDEfdoxxPhFWKyFR9KjNeNGoMo07/isu8aEcGYdJYtqitLFdyKFBGjz3Ju3e8BaOUN6VtvcDkDK/l0rR7eMX6MjGGd/wtDZarE65K/C2LqsdlEPlLXK9uZC+/EankguVk+aklwGi1y/C5E9fxbo9FyfFqj9Kz9Sh8LrSCb4m4AqI4nVQ7AmYc1z1JTnKJ6RZzdhJVjh3fwJPQih5bL5Qikj7NX9p2yxYFufJ/oAAVFEIihr1dU7GOPo7wuaKt4eZw2a5fRIVkX3c2UcrP/+ll6KYjMa+mr8Z0HeV1SciCEsoubQUXlIBITqqnry8/oR84oxvcs8C7KHTdK/3VWqVXTsPLnjcBVHhTmzM9i7Z0a/UtY+TbxwhGljECsX2QRvdabJxRYiEj3zJI7WA2QRrfbe8J6Ufw6zl3OYie4PonODxsvO+BpkRkAkSB7c2BLTDNSJWmmGY0jmzGIekJ/1dBmoQ245AiBaQZEl5S7vB/kfDOeS6ozs4AKLwJdHlTT6JyFSPfNZfNKRnpSVRmZWQ+ButJVObdSMbPTqBKVWY4PDlD6ebjn55w6M9k6k4/UbjT1+ZOG7OqUYSBxve8hVnVOPW0gJKe1yqz5p4WUArsozSOMhZQCvVEGYEEfbogA8KpO6HqEwPQlqMD1SOX6RN0tOkVsfidN72FTzKTMGOekoXPMpMwY5ySpreu84YZjZTEZfdt+WLrfaH37v8C</diagram></mxfile>" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="20" y="20" width="530" height="360" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="30" width="120" height="60" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 60px; margin-left: 31px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">cell</font></div></div></div></foreignObject><text x="90" y="64" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">cell</text></switch></g><rect x="160" y="30" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="30" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="300" width="510" height="10" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 508px; height: 1px; padding-top: 305px; margin-left: 31px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">line</font></div></div></div></foreignObject><text x="285" y="309" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">line</text></switch></g><rect x="420" y="30" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="100" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="170" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="40" y="110" width="490" height="40" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 488px; height: 1px; padding-top: 130px; margin-left: 41px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">track</font></div></div></div></foreignObject><text x="285" y="134" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">track</text></switch></g><rect x="30" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="240" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="40" y="180" width="230" height="110" fill="#60a917" stroke="#2d7600" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 228px; height: 1px; padding-top: 235px; margin-left: 41px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 9px">area</font></div></div></div></foreignObject><text x="155" y="239" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">area</text></switch></g><rect x="30" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="160" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="290" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="420" y="310" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

			@@ -3064,6 +3064,166 @@
			<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>