diff --git a/_config.yml b/_config.yml
index 34a3b2a..897bb3d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -10,18 +10,24 @@ map:
  - title: Core
    caption: The 'mandatory' workshop content
    subpages:
-     - title: The template structure
+     - title: Die Template Struktur
        path: /core/structure.html
-       caption: From white page to a 'Hello World'
-     - title: Your first styled Hello World!
+       caption: Von der weißen Seite zum 'Hallo Welt'
+     - title: Erstelle Dein erstes formatiertes 'Hallo Welt'
        path: /core/style.html
-       caption: Understanding CSS. What is class, Id and selector
-     - title: Create your personal Portfolio - Part 1
+       caption: CSS Verstehen. Was ist sind Klasse, Id und Selector
+     - title: Erstelle Dein persönliches Portfolio - Teil 1
        path: /core/portfolio.html
-       caption: HTML5 elements, float, box model and text style
-     - title: Create your personal Portfolio - Part 2
+       caption: HTML5 elemente, float, box model und text style
+     - title: Erstelle Dein persönliches Portfolio - Teil 2
        path: /core/portfolio-2.html
-       caption: Positioning, anchors and form elements
+       caption: Positionierung, Anker and Formelemente
+     - title: Erstelle Dein persönliches Portfolio - Teil 3
+       path: /core/portfolio-3.html
+       caption: Positionierung, Anker and Formelemente
+     - title: Effekte und Formulare
+       path: /core/effects.html
+       caption: Schatten, Runde ecken, Hover, Formulare
  - title: Extras
    caption: Interesting or useful extras
    subpages:
diff --git a/core/effects.md b/core/effects.md
new file mode 100644
index 0000000..d5a3595
--- /dev/null
+++ b/core/effects.md
@@ -0,0 +1,140 @@
+---
+
+layout: ots
+title: Effekte und Formulare
+
+---
+
+Viele Grundelemente haben wir bereits kennengelernt. Mit CSS kann man jedoch noch einiges mehr erreichen.
+Einen kleinen Ausblick darauf soll dieser Abschnitt bieten.
+
+## Effekte
+
+**Das Ziel**
+
+* Die Seite mit ein paar visuellen Effekten aufpeppen.
+* Das Menü wird aufgepeppt um die Seite interessanter zu machen
+
+### Schatten
+
+Eine Seite kann hübscher aussehen wenn sie raffinierter gestaltet wird. Wichtig ist es mit Effekten nicht zu
+übertreiben und zu versuchen einzelne wichtige Elemente herauszustellen.
+
+Nehmen wir uns als erstes vor die Überschriften auf der Seite noch deutlicher sichtbar zu machen.
+Dazu werden wir die Texte mit einem Schatten versehen. Sparsam verwendet kann der Einsatz eines
+Textschattens die z.b. die Übersicht über die Seite verbessern oder etwas auflockern.
+
+Der Schatten wird in CSS über die Eigenschaft "text-shadow" definiert. Der Wert setzt sich zusammen aus dem
+horizontalem und vertikalem Versatz, einer Unschärfe und eines Farbwertes zusammen.
+
+Die Werte werden also folgendermaßen gelesen:
+
+    text-shadow: horizontal vertikal unschärfe farbwert;
+
+Möchten wir also einen dunkelgrauen Schatten der 2 Pixel nach rechts und nach unten versetzt ist erzielen müssen wir
+dies so definieren. Um keinen harten Schatten zu haben setzen wir auch eine Unschärfe von 3 Pixeln.
+
+    text-shadow: 2px 2px 3px #777777;
+
+Wende diesen Effekt auf alle Überschriften **`<h1>`** an und überprüfe das Ergebnis im Browser.
+
+Ist es geglückt dann probiere mit den Einstellungen ein wenig herum. Durch ändern der Farben und Werte
+lassen sich auch andere spannende Effekte erzielen. Selbst mehrere Schatten auf einem Elemente sind möglich.
+
+Hier noch eine kleine [Effektsammlung](http://www.onlinecasinodemar.com/webdesign/xhtml-css/beeindruckende-effekte-mit-der-css-eigenschaft-text-shadow/)
+zur Inspiration und zum weiterspielen. Versuche doch mal den ein oder anderen Effekt nachzubauen der besonders gut
+zu Deiner Seite und Dir passt.
+
+### Runde Ecken
+
+Wenn Du auf Deiner Seite einen Absatz oder ein anderes Element hast das besonders wichtig ist, kannst Du dies
+z.b. mit Farben und einem Rahmen hervorheben. Da wir bisher aber nur eckige Boxen erzielt haben, möchten wir
+diese etwas schöner gestalten indem wir die Ecken rund machen.
+
+Angenommen wir haben ein Element mit der Klasse *info-box* auf der Seite. Können wir diese z.b. Orange einfärben.
+Die Runden Ecken erreichen wir mit der Eigenschaft "border-radius". Der angegebene Wert entspricht dabei der Intensität
+der Rundung.
+
+    .info-box {
+        background-color: orange;
+        border-radius: 10px;
+    }
+
+Hierduch kann es passieren das Inhalte innerhalb der Box durch die Rundung "abgeschnitten" werden. Um dem entgegenzuwirken
+muss man ggf. mit einem padding dafür sorgen das der Abstand zum Rand ausreichend ist.
+
+Um nur einzelne Ecken abzurunden kann für jede Ecke ein eigener Wert angegebn werden.
+
+      .info-box {
+            background-color: orange;
+            border-radius: 30px 0 30px 0;
+      }
+
+Dieses Beispiel rundet z.b. nur die obere linke und untere rechte Ecke ab. Verändere die Werte ein wenig um eine
+interessante Form zu bilden. Zusammen mit der Bordereigenschaft kann man auf diese Weise Elemente gut herausarbeiten.
+
+### Hovereffekte
+
+Das nächste Ziel soll sein das Menü interaktiver zu machen. Bewegt der Besucher die Maus über die Menüpunkte,
+so soll der Menüpunkt hervorgehoben werden. Dazu bietet sich der sogenannte Pseudoselektor ":hover" an.
+"Hover" zu deutsch "schweben" wird immer dann auf Element angewendet, wenn die Maus sich gerade über dem Element
+befindet.
+
+In der Webseite setzen wir dazu einen Effekt auf die `<li>` Elemente des Menü:
+
+    nav li:hover {
+        border: 1px solid green;
+        color: green;
+        background-color: lime;
+    }
+
+Hier wird ein grüner Rand und Textfarbe gesetzt und die Hintergrundfarbe auf einen helleren Grünton verändert.
+Speichere die Änderung am CSS ab und prüfe das Ergebnis im Browser.
+
+Jede CSS Eigenschaft kann beim "hovern" verändert werden z.b. Textgrößen oder Schatten.
+Der Fantasie sind dabei kaum Grenzen gesetzt.
+
+### Formulare
+
+Das Internet ist nicht nur Konsummedium. Es bietet auch Möglichkeiten die Inhalte zu bearbeiten (z.b. Wikipedia),
+Kommunikation über Emails (z.b. googlemail) oder Nachrichten z.b. in Foren.
+All das ist auch über Webseiten realisierbar. Um diese Eingaben möglich zu machen, verwendet man Formulare.
+
+Formulare müssen mit einem **`<form>`** Tag umgeben sein. Dieser sorgt dafür, das der Browser später alle Daten aus den Formularelementen nimmt und mittels eines Senden Buttons **submit** verschickt. Innerhalb des Form Elements können aber jegliche anderen HTML Elemente auftauchen. Nur ineinander verschachtelte Forms sind zu vermeiden.
+
+    <form action="mailto:ich@opentechschool.org">
+    </form>
+
+Das Form ist definiert aber leider noch leer. Das Attribut **action** definiert wohin das Formular geschickt werden soll. Hier wird entweder eine URL angeben oder wie in unserem Fall mit **mailto:** eine Emailadresse. Da die meisten Browser nicht in der Lage sind direkt selbst Emails zu versenden, wird beim klick auf die **submit** Schaltfläche daher das  Emailprogramm des Besuchers geöffnet und die Zieladresse sowie die Feldinhalte entsprechend vorausgefüllt.
+
+Beginne also jetzt ein Betreffeld mit einer Beschriftung innerhalb des **`<Form>`** hinzuzufügen. 
+
+    <label for="subject">Betreff</label>
+    <input name="subject" type="text"/>
+
+Hierdurch wird die Beschriftung "Betreff" und ein Texteingabefeld hinzugefügt. Wichtig sind hier vor allem der Name des Feldes *subject* und der Typ des Felds. Das **for** Attribut am **`<label>`** sagt dem Browser nur zu welchem Formelement die Beschriftung gehört. Eine wichtige Information speziell für Blinde und fehlsichtige Menschen.
+
+Der Name wird beim Absenden vom Browser mit übertragen. Da wir die Eingabe als Email versenden wurde hier **subject** verwendet um den Inhalt im Betreffsfeld der Email einzufügen.
+
+Bei unserem Betreff handelte es sich um den Feldtyp **text**. Es gibt noch eine Reihe weiterer Feldtypen wie Ankreuzfelder (Multiple Choice), Optionsfelder, Datumsfelder oder Zahlenfelder. Jede dieser Typen ermöglicht es die Eingabemöglichkeiten einzuschränken um Fehleingaben zu vermeiden und dem Benutzer eine bessere Bedienung zu ermöglichen.
+Wie der jeweilige Browser das genau anzeigt kann sich jedoch unterscheiden. Eine Übersicht mit Erklärung gibt es im Internet beispielsweise [hier](http://webkompetenz.wikidot.com/html-handbuch:feldtypen-kontrollierte-eingabe).
+
+Was fehlt ist ein Freitextfeld, wo der Besucher einen Text verfassen kann. Wir nennen es **body** um am Ende die Daten in den Text der Email zu bekommen.
+
+    <label for="body">Ihre Nachricht an mich:</label>
+    <textarea name="body" cols="50" rows="20"></textarea>
+
+Die Textarea ist ein großes Eingabefeld das in der Länge nicht limitiert ist. Die Attribute **cols** und **rows** sagen lediglich aus das der Browser es mit 50 Zeichen Breit und 20 Zeilen höhe darstellen soll.
+
+Kurze Kontrolle im Browser? Das Formular steht. Super! Gleich mal ausfüllen und ... ooops da fehlt ja was. Ein Knopf zum Absenden fehlt. In aktuellen Browsern erreicht man das mit dem **`<Button>`** Element.
+
+    <button type="submit">Senden</button>
+
+Der Type **submit** (Senden) bewirkt das der Browser beim Klick auf den Knopf, das umgebende Formular an den in der Action definierten Ort sendet. In unserem Falle eine Emailadresse.
+
+Versuch mal ob jetzt alle klappt und der Benutzer Dir darüber eine Email senden kann.
+
+
+
+
+
diff --git a/core/portfolio-3.md b/core/portfolio-3.md
new file mode 100644
index 0000000..4c66406
--- /dev/null
+++ b/core/portfolio-3.md
@@ -0,0 +1,248 @@
+---
+
+layout: ots
+title: Erweitere dein persönliches Portfolio
+
+---
+
+
+Um den Umfang der Seite noch zu erweitern und einen echten Lebenslauf zu erstellen bieten sich verschiedene Wege an. Im folgenden Abschnitt gehen wir auf die Gestaltung eines Lebenslaufs und einer simplen Tabelle zur übersichtlichen Darstellung von Fertigkeiten ein.
+
+## Euer Ausbildungsweg als übersichtliche Liste
+
+**Das Ziel**
+
+Euer Lebenslauf sollte die folgenden Abschnitte enthalten:
+
+* Personendaten (Name, Wohnort, etc.)
+* Schullaufbahn (chronologisch)
+* weitere, freie Angaben wie z.B. Ausbildungsweg oder aber Interessen
+
+Euer Lebenslauf sollte übersichtlich sein und ansprechend wirken. Mit Hilfe der bereits erlernten Design-Elemente bauen wir eine simple Auflistung der oben genannten Punkte auf.
+
+Erstelle eine neue Datei und beschreibe die Grundstruktur und gebt der Seite einen Titel. Erstellt im `<body>`-Tag eures Dokuments für einen neuen Abschnitt folgendes `<section>`-Tag:
+
+	<section id="vita">
+	</section>
+
+Innerhalb dieses Containers legen wir den Lebenslauf fest und erstellen ein einmaliges Design speziell für euren Lebenslauf über die ID "vita".
+
+Um eurem Lebenslauf eine feste Breite und Abstände zu den anderen Inhalten der Seite zu geben, sowie eine Schriftart und -Größe festzulegen weisen wir der ID "vita" noch folgende Eigenschaften in der bereits erstellten CSS-Datei zu:
+
+	#vita {
+		width: 800px;
+		margin: 50px auto 50px;
+		font: 14px Helvetica, Sans-Serif;
+	}
+
+Anschließend beginnen wir mit der Überschrift eures Lebenslaufs: Eurem Namen.
+
+	<h1>Vorname Nachname</h1>
+
+Da euer Name die größte Überschrift im Dokument sein sollte, könnt ihr diese über das `<h1>`-Tag durch CSS im Design ändern.
+
+	#vita h1 {
+		margin: 0 0 16px 0;
+		padding: 0 0 16px 0;
+		font-size: 40px;
+		font-weight: bold;
+		letter-spacing: -2px;
+		border-bottom: 2px solid #999;
+	}
+
+Das Attribut "letter-spacing" ist hierbei der Abstand zwischen den Buchstaben, der durch den Wert um 2 Pixel reduziert wird.
+	
+Der nächste Punkt im Lebenslauf sollten eure Kontaktdaten sein, die ihr wie folgt in einem Paragraphen auflistet und eure E-Mail-Adresse direkt als Link einfügt:
+
+	<p>
+		Telefon: 0231-9876555<br />
+		E-Mail: <a href="mailto:my@mail.com">my@mail.com</a>
+	</p>
+
+Die Links in eurem Lebenslauf können ebenfalls anders gestaltet werden und statt blau z.B. grau dargestellt werden. Ebenfalls kann durch die Zustandsangabe "hover" die Linkfarbe verändert werden, wenn ihr mit der Maus auf diesen zeigt.
+
+	#vita a {
+		color: #999;
+		text-decoration: none;
+		border-bottom: 1px dotted #999;
+	}
+	
+	#vita a:hover {
+		border-bottom-style: solid;
+		color: black;
+	}
+
+Diese Eigenschaften beziehen sich durch die vorangestellte ID lediglich auf die Links in eurem Lebenslauf. Eine kurze Beschreibung zu eurer Person könnt ihr unter euren Kontaktdaten einfügen:
+
+    <p id="introduction">
+		Hier könnt ihr eine kurze Beschreibung von euch einfügen. 
+	</p>
+
+Über die angegebene ID legen wir den Stil des Textes fest.
+
+	#introduction {
+		width: 500px;
+		float: left;
+		font-family: Georgia, Serif;
+		font-style: italic;
+		color: #666;
+	}
+
+Der längste Abschnitt eures Lebenslaufs wird durch Beschreibungslisten umgesetzt. Eine Beschreibungsliste wird mit dem `<dl>`-Tag umschlossen und kann folgendes beinhalten:
+
+* `<dt>`: Beschreibungsname (in unserem Fall der Abschnitt des Lebenslaufs)
+* `<dd>`: Inhalt der Auflistung (in unserem Fall die Informationen zum jeweiligen Lebensabschnitt)
+
+Beginnen wir mit der Schullaufbahn:
+
+	<dl>
+		<dt>Schulbildung</dt>
+		<dd>
+			<h2>Name der Schule</h2>
+			<p>
+				Zeitraum: August 2000 - Juli 2008<br />
+				Abschluss: Euer erreichter Abschluss
+			</p>
+		</dd>
+	</dl>
+	
+Unserer Auflistung geben wir nun noch ein passendes Design für die beiden verschiedenen Elemente mit.
+
+	dt {
+		font-style: italic;
+		font-weight: bold;
+		font-size: 18px;
+		text-align: right;
+		padding: 0 25px 0 0;
+		width: 150px;
+		float: left;
+		height: 100px;
+		border-right: 1px solid #999;
+	}
+	
+	dd {
+		width: 600px;
+		float: right;
+		margin: 0;
+		padding: 0;
+	}
+
+Damit der Name der Schule noch hervorgehoben wird, definieren wir noch einen neuen Stil für die Überschrift `<h2>`:
+
+	#vita h2 {
+		font-size: 20px;
+		margin: 0 0 6px 0;
+		position: relative;
+	}
+	
+Da wir den Elementfluss durch float ändern, damit die Elemente auf einer horizontalen Ebene dargestellt werden, müssen wir diesen nach dem jeweiligen `<dt>`-Element wieder zurücksetzen. Hierfür haben wir eine Klasse angelegt, mit deren Hilfe ein leeres `<dd>`-Element erzeugt wird, um den Elementfluss zurückzusetzen.
+	
+	<dd class="clear"></dd>
+
+Der dazu gehörige CSS-Code sieht wie folgt aus:
+
+	dd.clear {
+		clear: both;
+		float: none;
+		margin: 0;
+		height: 15px;
+	}
+
+Durch die Höhenangabe wird zudem ein Abstand zum nachfolgenden Element hergestellt.
+
+
+Zusätzlich zu eurer Schullaufbahn könnt ihr noch euren Ausbildungsweg, eure Interessen oder Sprachkenntnisse durch weitere Einträge (`<dt>` und `<dd>`-Elemente) hinzufügen. Orientiert euch hierfür einfach an der obigen Anleitung.
+
+Passt anschließend das Design durch Verändern der Werte oder das Erweitern der CSS-Datei euren Vorstellungen an. Selbstverständlich könnt ihr auch gezielt neue Klassen für das Design einführen - speziell falls ihr neue Elemente in der HTML-Datei einfügt und diese erweitert. Probiert es aus!
+
+
+## Ergänzend: Eure Kenntnisse, Schwerpunktbereiche oder Sprachen als Tabelle
+
+Als Erweiterung zu eurer Laufbahn, euren Abschlüssen und Interessen bieten sich noch Fertigkeiten, z.B. in Programmiersprachen oder mit gängiger Software an. Als sehr einfache Methode zur Darstellung zeigen wir euch, wie ihr Tabellen erstellt.
+
+Erstellt zuerst einen `<section>`-Container unterhalb eures Lebenslaufs.
+
+		<section id="skills">	
+		</section>
+		
+Innerhalb dieses Containers erstellen wir die Tabelle und definieren im Stylesheet das Aussehen/Verhalten der Tabelle, die wir aufbauen.
+
+Eine Tabelle wird mittels des `<table>`-Tags geöffnet und wie gewohnt wieder geschlossen. Innerhalb der Tabelle sollten die Beschriftungszeilen/-Spalten und die einzelnen Inhaltszellen definiert werden.
+
+	<table>
+		<thead>
+			<tr>
+				<th>Bereich</th>
+				<th>Erfahrung</th>
+				<th>Kenntnisse</th>
+			</tr>
+		</thead>
+	</table>
+
+Das Tag `<thead>` steht für den Kopf-Bereich der Tabelle. Innerhalb des Kopfbereichs, welcher so noch keine Zellen beinhaltet wird eine Zeile der Tabelle mit `<tr>` erstellt. Die Zeile muss anschließend mit einzelnen Zellen gefüllt werden. `<th>` steht hierbei für eine Zelle, die speziell als Kopf-Zelle gedacht ist. Wir erstellen in der ersten Zeile 3 Zellen und arbeiten somit mit 3 Spalten, die nach und nach gefüllt werden sollen.
+
+Jede Tabellenzeile muss einzeln erstellt werden und in jeder Zeile sollten genau so viele Zellen enthalten sein, wie es Spalten gibt. Hier sollten somit immer 3 Zellen pro Zeile erstellt werden.
+
+Um die Tabelle nach dem Tabellenkopf mit Inhalt zu füllen, erstellen wir hinter dem geschlossenen (!) Kopfbereich (`</thead>`) den Body ("Körper") der Tabelle:
+
+	<tbody>
+		<tr>
+			<th>Tabellenkalkulation</th>
+			<td>Sehr gut</td>
+			<td>Komplexe Tabellen, Szenarien, Formeln</td>
+		</tr>
+	</tbody>
+	
+Wie bereits erwähnt sollen es drei Zellen pro Zeile sein. Ergänzt bitte noch weitere Zeilen, wie z.B. eure Kenntnisse zur Textverarbeitung, Datenbanken oder vollkommen anderen Bereichen. Wie im eigentlichen Header können hier zur Zeilenbeschreibung auch `<th>`-Tags verwendet werden.
+
+Kommen wir zum Aussehen der Tabelle. Zuerst sorgen wir für die zum Lebenslauf passende Ausrichtung.
+
+
+	#skills table {
+		margin: 50px auto 50px;
+	}
+
+	
+Wenn ihr die Seite neu ladet werdet ihr feststellen, dass die Tabelle noch immer sehr gedrungen und dadurch nicht übersichtlich wirkt. Fügt den Zellen (Inhalt, als auch den Kopfzellen) einen Innenabstand hinzu:
+
+
+	#skills table td, table th {
+		padding: 5px;
+	}
+
+	
+Um die Beschriftungen der Zellen hervorzuheben und den Text der Zeilenbeschriftungen rechtsbündig zu machen, setzen wir noch Hintergrundfarben und die Textausrichtung.
+
+	#skills table thead th {
+		background-color: #4488FF;
+	}
+
+	#skills table tbody th {
+		text-align: right;
+		background-color: #0066AA;
+	}			
+
+Wie immer könnt ihr gerne die Darstellung nach eurem Geschmack anpassen.
+
+
+## Mein Lebenslauf sieht gut aus - was ist, wenn er gedruckt wird?
+
+Auch wenn Webseiten-Ausdrucken meist ein unnötiger Zeitvertreib ist, kann es besonders bei Lebensläufen natürlich vorkommen, dass diese ausgedruckt werden.
+
+
+**Farbenfrohe Webseite? Kein Problem!**
+
+Für den Fall, dass ihr euren Lebenslauf in einer anderen Darstellung auch ansehnlich druckbar machen wollt - ihr aber eure Darstellung auf der Webseite nicht speziell auf den Druck auslegen wollt, könnt ihr in eurem HTML-Dokument einfach auf eine andere CSS-Datei verweisen, die mit einem bestimmten Schlüsselwort speziell für Druckausgaben verwendet wird.
+
+Erstellt eine Kopie eurer CSS-Datei im gleichen Ordner und benennt diese in "print.css" um. Den Inhalt könnt ihr später nach und nach anpassen.
+
+Bindet nun in eurem HTML-Dokument die neu erstellte CSS-Datei im `<head>`-Bereich mit folgender Zeile ein:
+
+	<link rel="stylesheet" type="text/css" media="print" href="print.css">
+
+Durch die Medienangabe "print" wird festgelegt, dass dieses Stylesheet speziell zum Druck verwendet wird.
+
+Entfernt für einen einfachen Test einmal die Farbangaben der Tabellenhintergründe oder ändert diese in eine andere Farbe (z.B. Grau) ab. In der Druckvorschau eures Browsers ist diese Tabelle nun nicht mehr so farbenfroh wie vorher.
+
+
+Im letzten Abschnitt, [Effekte mit CSS](effects.html), könnt ihr euer Werk noch im Detail verändern.
diff --git a/core/portfolio.md b/core/portfolio.md
index 9e52832..6c972d5 100644
--- a/core/portfolio.md
+++ b/core/portfolio.md
@@ -52,7 +52,7 @@ Um eine Klasse via CSS aufzurufen, wird diese mit einem vorangestellten Punkt (.
 Hier legen wir fest, dass das Element eine Breite von 100% hat und mit dem Abstand (margin) wird festgelegt, dass das Element zentriert ist.
 Wir verwenden Prozentangaben bei der Breite, damit die Website sich bei niedrigeren oder höheren Bildschirmauflösungen oder bei der Größenänderung des Browser-Fensters anpasst.
 
-Am Anfang der `styles.css` fügen wir nun eine Beschreibung für alle Elemente (*) ein:
+Am Anfang der `styles.css` fügen wir nun eine Beschreibung für alle Elemente (`*`) ein:
 
     * {
         padding: 0;
diff --git a/index.md b/index.md
index 04d24f0..2458110 100644
--- a/index.md
+++ b/index.md
@@ -59,10 +59,14 @@ dir diese Resourcen dabei helfen.
   Benutzt HTML um aus einer blanken Seite ein 'Hello World'-Beispiel zu machen.
 * [Your first styled Hello World!](core/style.html) - 
   CSS Verständnis. Was ist eine Klasse, eine ID und ein Selektor.
-* [Create your personal Portfolio - Part 1.](core/portfolio.html) - 
+* [Erstelle Dein perönliches Portfolio - Part 1.](core/portfolio.html) - 
   HTML5-Elemente, float, Box Modell und Schrift-Gestaltung.
-* [Create your personal Portfolio - Part 2.](core/portfolio-2.html) - 
+* [Erstelle Dein perönliches Portfolio - Part 2.](core/portfolio-2.html) - 
   Positionierung, Web-Links und Formular-Elemente.
+* [Erstelle Dein perönliches Portfolio - Part 3.](core/portfolio-3.html) - 
+  Tabellen und Listen 
+* [Effekte und Formular](core/effects.html) - 
+  Effekte und Formulare
 
 ## Cheat Sheet
 
@@ -72,12 +76,17 @@ während du dich mit dem Workshop beschäfftigst und insbesondere darüber hinau
 
 * <a href="http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/" target= "_blank" > 
   HTML5 </a> - Benutze diesen Cheat Sheet um neue HTML-Elemente auszuprobieren.
+* <a href="http://tinyurl.com/plb4eju" target= "_blank" > 
+  HTML5 in Kurzform (DE)</a> - Benutze diesen Cheat Sheet um eine kurze Übersicht der wichtigsten Elemente zu erhalten.
 * <a href="http://coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/" target= "_blank" >
   CSS3</a> - Benutze diesen Cheat Sheet um neue CSS-Selektoren kennen zu lernen.
+* <a href="http://www.cheatography.com/karionis/cheat-sheets/css2-1-deutsch/" target= "_blank" >
+  CSS (DE)</a> - Eine kurze Übersicht der wichtigsten Selektoren.
 * <a href="http://csslint.net/" target= "_blank" > 
   CSS LINT</a> - Diese Seite prüft deinen CSS Code und zeigt eventuelle Fehler auf.
 
 
+
 ## Referenz-Materialien
 
 Das Mozilla Developer Network (MDN), von den Leuten, die den Firefox Browser