1. Öffne das index.html
2. Erweitere das HTML-Grundgerüst im body durch folgende HTML5-Elemente. (HTML5 Tags).
   header
nav
main
article (innerhalb des main-Elements)
footer

3. Ergänze das Grundgerüst im head-Bereich mit einem Viewport Meta-Tag.
   

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

4. Erstelle den Inhalt im header mit einem h2 Untertitel und einer "Tagline" in einem Absatz p.
5. Setzte einen h1 Titel-Tag in den Inhaltsbereich im main Tag.
6. Erstelle im article Tag einen Untertitel h2 und einen Absatz p mit Blindtext (lorem).
7. Erstelle eine Listen-Navigation im nav Tag mit 4 Menupunkten (Startseite, Projekte, Portrait, Kontakt)
8. Ergänze den Footer mit Inhalt.

Lösung | Lösung ZIP

1. Öffne Deine Datei index.html im Editor Brackets.
2. Erstelle im main Tag ein zweites article Element.
3. Setze darin einen h2 Titel mit dem Wort «Favoriten».
4. Unterhalb dieses article Tags erstellst du eine Liste ul mit zwei Aufzählungen li.
5. Setzte zwei absolute Links zu deinen Lieblingsseiten in die Listenelmente.
6. Anleitung: Absoluter Link mit Brackets erstellen

Lösung | Lösung ZIP

1. Öffne Deine Datei index.html.
2. Erzeuge einen Mailto-Link im footer der Datei.
3. Anleitung: E-Mail-Link mit Brackets erstellen
4. Falls Dir Zeit bleibt, versuche dem Maillink, ein Betreff (subject) mitzugeben.

Lösung | Lösung ZIP

1. Erstelle in Deinem Projektfolder für jeden der drei weiteren Menupunkte einen eigenen Folder (kontakt, projekte, ueber-mich).
2. Kopiere oder speichere dein index.html in jeden der drei Folder (kontakt, projekte, ueber-mich).
3. Passe die title-Tags von allen Seiten dem jeweiligen Inhalt an. Diese sollten aussagekräftig sein.
4. Korrigiere auch die h1 Titel dem Seiteninhalt entsprechend.
   Beispiel: Im index.html im Folder ueber-mich mit dem h1: Über mich.
5. Lösche auch auf allen drei kopierten index.html die Farvoriten h2 und dessen Listeninhalt ul. Dieser Inhalt mit den erstellten absoluten Links sollen nur auf der Startseite sichtbar sein.
6. Verlinke nun alle vier "index.html" relativ zueinander.
7. Anleitung: Relative Links
8. Zusatz: Setze einen Link zur Startseite auf den Namen h2 im header.
   Dieser Link heisst HOME-Link. Er führt immer zur Startseite.
9. Teste das Ergebnis im Browser.

Lösung | Lösung ZIP

1. Öffne dein mitgebrachtes Bild portrait.jpg im Programm: Photoshop oder Photoshop Element.
2. Wähle > Datei > für Web und Geräte speichern ......
3. Im Fenster "für Web und Geräte speichern" kannst du das richtige Format auswählen und die Qualität und Grösse (max. 600 Pixel Breite) des Bildes einstellen. Tipps dazu gibt die Kursleitung (Notizen).
Erstelle im deinem Projektordner xx einen neuen Ordner images oder bilder
4. Speichere das ausgewählte JPG-Format als portait.jpg im Ordner images deines Projektordners "xx".
5. Öffne die Datei ueber-mich/index.html
6. Füge das komprimierte Bild in den main-Tag der Unterseite ueber-mich.html ein, anhand der Unterlage:
   Ein Bild mit Brackets einfügen

Lösung | Lösung ZIP

1. Gehe auf die Homepage giphy.com
2. Suche Dir dort eine eine Gif-Animation, welche Dir gefällt!
3. Klicke auf: Copy link.
4. Kopiere dort den GIF link.
5. Öffne deine Startseite index.html und füge im main in article unter Favoriten einen img-Tag ein
6. Füge im Attribut src="" den kopierten GIF link ein.
7. Teste die Seite.

Lösung | Lösung ZIP

1. Rufe die Website Google Maps auf https://maps.google.ch/ .
2. Gebe eine Adresse ein.
3. Kopiere den iFrame-Code(Du findest den Code unter TEILEN: Karte einebetten).
4. Öffne deine index.html-Seite im Ordner kontakt.
5. Erstelle im main-Tag einen article.
6. Füge den kopierten iFrame-Code dort in den erstellten article-Tag in den Quelltext ein.
7. Teste deine Datei im Browser.

Lösung | Lösung ZIP

1. Öffne deinen Ordner xx im Brackets.
2. Erstelle in deinen Projektfolder einen neuen Ordner mit dem Namen css.
3. Erstelle mit Menuleiste > Datei > Neu, eine CSS-Datei.
4. Speichere die CSS-Datei im Ordner css mit dem Namen style.css.
5. Öffne alle deine index.html-Dateien und verknüpfe sie mit dem style.css.
   Achtung: Die Unter-Seiten haben einen anderen Link ../
   Die Anleitung dazu: CSS-Stil extern erstellen mit Brackets
6. Erstelle für die HTML-Elementen <body>,<h1> bis <h6> CSS-Formatierungen, anhand der Übersicht: der im Kurs verwendeten CSS Eigenschaften.
7. Gib den Elementen header und footer eine Hintergrundfarbe background-color.
8. Speichere die Datei und überprüfe sie im Browser.

Lösung | Lösung ZIP

1. Öffne deine CSS – Datei.
2. Passe den h1-Tag im header-Element an. Gib ihm dieselbe Farbe wie die Hintergrundfarbe vom body (kontextsensitiv):

   header h1 {
       color:#fff;
   }

3. Die Linkfarbe im header und footer sollen weiss sein:

   header a,
   footer a,
   header a:visited,
   footer a:visited {
       color: #ffffff;
       text-decoration: none;
   }

4. Passe als nächstes die Navigation an.
   Zuerst die allegemeine Hintergrundfarbe für den nav Tag:

nav{
    background-color: #5A7247;             
}

5. Entferne nun die Listenpunkte mit:

   nav ul{ 
       list-style-type: none;
   }

6. Passe nun noch die Linkfarben der Navigation an. (kontextsensitiv)
7. Zuletzt gibst Du dem Lauftext (p-Tag) ein Zeilendurchschuss, damit die Schrift einfacher zu lesen ist:

   p {line-height: 180%;}

Lösung | Lösung ZIP

1. Öffne deine Datei style.css im Brackets.
2. Erstelle eine Klasse mit dem Namen .selected.
   Anleitung: CSS-Klasse erstellen mit Brackets
   Die Klasse .selected bekommt nun eine Hintergrundfarbe passend zu den Farben der Navigation:

   .selected{
   background:#3c4b2f;
   }

3. Öffne deine Datei kontakt/index.html im Brackets.
4. Teile die Klasse .selected dem a-Element, welches zur Kontaktseite linkt zu. Die Klasse rufst Du mit dem Attribut class="selected"auf.
5. Wiederhole diese Zuteilung auf allen Projektseiten.
6. Du kannst beliebig viele Klassen definieren und zuteilen.

Lösung | Lösung ZIP

1. Kontrolliere ob alle HTML Seiten eine Viewport Meta-Tag haben.
2. Öffne die CSS Datei und ergänze diese ganz unten im Dokument mit Media Queries.
3. Oft wird beim Schreiben von CSS der Code aus schon bestehenden Seiten kopiert (zB. aus der Lösung: unten). Dazu benutzt Du den Inspektor eines Browsers. Jeder Inspektor zeigt unter "Stilbearbeitung" oder CSS-Styles auf die externe CSS-Datei! Daraus kannst Du den Code kopieren! Wichtig ist dabei, dass Du den kopierten Code verstehst, um ihn allenfalls anpassen zu können:
4. Der Body-Tag bekommt eine Hintergrundfarbe ab einer min-width : 600px.
5. Der Body-Tag bekommt eine andere Hintergrundfarbe ab einer min-width : 980px.
6. Der a-Tag im Header soll seine Farbe gleichzeitig mit der Hintergrundfarbe im Body-Tag ändern. Erweitere das Template für Pad und Screen mit den selben Farbangaben für den a-Tag im Header. (kontextsensitiv)

Lösung | Lösung ZIP

1. Öffne deine style.css deines Projektes.
2. Setzte in der Navigation das Display der Listenelemente für die Ausgabe eines Desktop nebeneinadner (@media screen 980px).

   nav li {
   display: inline-block;
   }

Lösung | Lösung ZIP

Alle folgenden CSS - Angaben gelten für alle Geräte und aktuellen Browser.

1. Öffne deine style.css des Projektes.
2. Setzte den Universalselktor * mit den Boxsizing Angaben als erste Abgabe in deinem style.css. Mit dieser Angabe rechnen alle Blockelemente die Padding und die Border in die Breite ein.
   

   * {box-sizing: border-box;}

3. Ergänze als nächstes die Aussen - und Innenabstände für das body-Element auf Null
   

   margin:0;
   padding:0; 

   Öffne die index.html und teste sie im Browser. Alle Child-Elemente, also alle Elemente im bodybeginnen nun am linken Rand (Vererbung).
4. Ergänze die Selectoren header, footer und main mit

   padding:20px; margin:0;

   .
5. Setzte nun den Link-Tag der Navigation auf

   display:block;

6. Mache einen Browsertest. Geht der Link über die gesamte Layoutbreite?
7. Die Abstände in der Navigation sind jetzt noch zu klein. Ergänze den Link-Tag der Navigation also mit 10px Padding für oben und unten, 20px Padding für links und rechts.

   padding: 10px 20px;

8. Damit sich die Links über die gesamte Layoutbreite aufspannen, musst du den Abstand in der Liste (ul) auf 0 setzen. Diese Angaben stehen am Schluss der style.css-Datei.

   nav ul{
   list-style-type: none;
   padding: 0;
   margin: 0;
   }

Lösung | Lösung ZIP

Die Breite des Inhaltes ist zum Lesen zu breit. Du passt also die Breite an und zentrieren das gesamte Layout.

1. Öffne das index.html deines Projektes.
2. Erstellen einen div Tag, der das gesamte Layout einschliesst. Gebe diesem div die Klasse .container.
3. Öffne deine style.css.
4. Ergänze die Mediaqueries ab 980px. Definiere dort einen Border für den .container damit diese sichtbar wird.

   .container{
   border: 1px solid #000;
    }

5. Demselben .container gibst du nun eine minimale und eine maximale Breite. Das Layout soll nie breiter als 1200px werden.

   .container{
   border: 1px solid #000;
   min-width: 980px;
   max-width: 1200px;
   }

6. Zum Schluss zentriert du das gesammte Layout, indem du dem .container mit

    margin: 0 auto;

   gibst.
7. Ergänze alle anderen HTML-Seiten auch mit dem Element div class="container" damit dein Layout konsistent wird.

Lösung | Lösung ZIP