Feature/tf 726 refactor frontend

content/en/docs/web/html_css/01_html_intro.md

@@ -8,31 +8,31 @@ description: >
 
 #### Ziele
 
-- Ich weiss, was HTML ist und warum es bei Webseiten angewendet wird.
+- Ich weiss, was HTML ist und wofür es bei der Entwicklung von Webseiten genutzt wird.
 - Ich kann zwischen HTML, CSS und JavaScript unterscheiden.
 
 ## Wie funktionieren Webseiten?
 
-Im Gegensatz zu Desktop-Programmen SOLLTEN Webseiten auf jedem Betriebssystem und Browser gleich laufen und aussehen. Damit das funktionieren kann, müssen die Webseiten so programmiert/geschrieben worden sein, dass sie von jedem Browser verstanden werden können.
+Im Gegensatz zu Desktop-Programmen **sollten** Webseiten auf jedem Betriebssystem und Browser gleich laufen und aussehen. Damit das funktionieren kann, müssen die Webseiten so programmiert worden sein, dass sie von jedem Browser verstanden werden können.
 
 Genau das wird mit HTML erreicht. Jeder Browser versteht HTML.
 
 ## Was ist HTML?
 
-Beginnen wir mit der Definition der Abkürzung "HTML". Diese steht für "HyperText Markup Language". Okay, was aber bedeutet das?
+Beginnen wir mit der Definition der Abkürzung "HTML". Diese steht für "HyperText Markup Language". Aber was bedeutet das konkret?
 
-Mit HyperText ist ein Dokument gemeint, das in der Regel nicht dafür gemacht ist, um von oben nach unten gelesen zu werden. HyperText enthält also z.B. Links, die auf andere Dokumente oder zu anderen Stellen auf der gleichen Seite führen. Unter Markup ist zu verstehen, dass das Dokument strukturiert (Kopfzeilen, Hauptteil, Fusszeilen) und formatiert (z.B. kursiver/fetter Text) ist.
+Mit HyperText ist ein Dokument gemeint, das in der Regel nicht dafür gemacht ist, um von oben nach unten gelesen zu werden. HyperText enthält also z.B. Links, die auf andere Dokumente oder zu anderen Stellen auf der gleichen Seite führen. Unter Markup ist zu verstehen, dass das Dokument strukturiert (Kopfzeile, Hauptteil, Fusszeile) und formatiert (z.B. kursiver/fetter Text) ist.
 
-Somit ist HTML also eine Sprache, die alle Elemente auf einer Webseite **BESCHREIBT**. Die Betonung liegt hier auf "beschreibt". Das bedeutet, dass HTML keine Programmiersprache ist. Code, der auf der Webseite ausgeführt wird, ist in JavaScript geschrieben.
+Somit ist HTML also eine Sprache, die alle Elemente auf einer Webseite **beschreibt**. Das bedeutet, dass HTML keine Programmiersprache ist. Code, der auf der Webseite ausgeführt wird, ist in JavaScript geschrieben.
 
 ## Übersicht zu HTML, CSS und JavaScript (JS)
 
-Während Deiner Einführung in die Webentwicklung wirst du die Begriffe "HTML", "CSS" und "JavaScript" immer wieder hören bzw. lesen. Deswegen beginnen wir mit einem Überblick:
+Während deiner Einführung in die Webentwicklung wirst du die Begriffe "HTML", "CSS" und "JavaScript" immer wieder hören bzw. lesen. Deswegen beginnen wir mit einem Überblick:
 
 ![htmlCssJs](../html-css-js.png "HTML, CSS und JavaScript")
 
 Im HTML beschreibst du die Struktur einer Webseite und fügst auch die wichtigsten Elemente davon ein. Diese Elemente können Text, UI-Elemente, Bilder und vieles mehr sein.
 
 In CSS beschreibst du, wie das HTML im Browser aussehen soll. Beispielsweise kannst du Schriftfarben, -arten, -grössen, das Aussehen von UI-Elementen und Layouts damit beschreiben.
 
-Möchtest du im Browser Code ausführen, dann geschieht das mit der Programmiersprache JavaScript. Zum Beispiel kannst Du im HTML definieren, dass eine JavaScript-Funktion ausgeführt wird, wenn Du auf einen Button klickst.
+Möchtest du im Browser Code ausführen, dann geschieht das mit der Programmiersprache JavaScript. Zum Beispiel kannst du im HTML definieren, dass eine JavaScript-Funktion ausgeführt wird, wenn du auf einen Button klickst.

content/en/docs/web/html_css/02_html_first_code.md

@@ -3,7 +3,7 @@ title: "Erste Seite erstellen"
 linkTitle: "Erste Seite erstellen"
 weight: 2
 description: >
-  Modul #F3 - HTML und CSS - Erste HTML Seite erstellen
+  Modul #F3 - HTML und CSS - Erste HTML-Seite erstellen
 ---
 
 #### Ziele
@@ -13,19 +13,19 @@ description: >
 
 ## Eine HTML-Seite mit formatiertem Text erstellen
 
-Wir beginnen ganz unkompliziert. Erstellen wir zuerst eine Text-Datei. Dafür erstellen wir zuerst ein Ordner, in dem wir später unsere Projekt-Dateien speichern. Anschliessend kannst du diesen Ordner mit der IDE (Integrated Development Environment = Entwicklungsumgebung) deiner Wahl öffnen (hier VS Code). Erstelle nun eine neue HTML-Datei im soeben erstellten Ordner. In VS Code kannst du das z.B. wie folgt machen:
+Wir beginnen ganz unkompliziert und erstellen eine Seite, welchen einen simplen Text darstellt. Dafür musst du zuerst einen Ordner erstellen, in dem du später deine Projekt-Dateien speichern kannst. Anschliessend kannst du diesen Ordner mit der IDE (Integrated Development Environment = Entwicklungsumgebung) deiner Wahl öffnen (hier VS Code). Erstelle nun eine neue HTML-Datei im soeben erstellten Ordner. In VS Code kannst du das z.B. wie folgt machen:
 
 ![createFile](../vs-code-create-file.png "Erstelle eine neue Datei, indem du im Explorer von VS Code mit deiner Maus über deinen Ordner bewegst. Klicke dann auf das Datei-Symbol und gib einen Dateinamen an, der mit .html endet.")
 
-Fülle diese Datei nun mit einem beliebigen Text. Speichere diese Datei. Kopiere nun den Pfad zu dieser Datei. In VS Code kannst du den Pfad mit einem Rechtsklick auf die Datei kopieren:
+Fülle diese Datei nun mit einem beliebigen Text und speichere deine Änderungen (beispielsweise mit "ctrl" + "s". Kopiere jetzt den Pfad zu dieser Datei. In VS Code kannst du den Pfad mit einem Rechtsklick auf die Datei kopieren:
 
 ![copyPath](../vs-code-copy-path.png " ")
 
 Gib diesen Pfad im Browser deiner Wahl ein. Du solltest nun einen unformatierten Text im Browser sehen:
 
 ![unformatedHtmlFile](../unformated-html-file.png " ")
 
-Obwohl du vorher evtl. Zeilenumbrüche und mehrere Leerschläge hattest, sind diese im Browser verschwunden. Willst du deinen Text strukturieren, kannst du den Text mit Hilfe von HTML-Tags formatieren. Der HTML-Code könnte dann z.B. dann so aussehen:
+Obwohl du vorher vielleicht Zeilenumbrüche und mehrere Leerschläge hattest, sind diese im Browser nun nicht sichtbar. Willst du deinen Text strukturieren, kannst du den Text mithilfe von HTML-Tags formatieren. Der HTML-Code könnte dann zum Beispiel so aussehen:
 
 ```html
 <h1>Kleiner Witz</h1>
@@ -41,4 +41,4 @@ Nun hast du eine Seite mit formatiertem Text:
 
 ![formatedHtmlFile](../formated-html.png " ")
 
-Was haben wir hier genau gemacht? Das erfährst du auf der nächsten Seite.
+Was wir hier genau gemacht haben, erfährst du auf der nächsten Seite.

content/en/docs/web/html_css/03_html_basics.md

@@ -8,8 +8,8 @@ description: >
 
 #### Ziele
 
-- Ich kenne die HTML-Tags `<h1>` und `<p>` und weiss, was ihre Aufgaben sind.
-- Ich kenne die allgemeine Struktur von HTML-Tags.
+- Ich kenne die HTML-Tags `<h1>` und `<p>` und weiss, wofür ich diese verwende.
+- Ich kenne die allgemeine Struktur und den Aufbau von HTML-Tags.
 
 ## Erklärung zum vorherigen Beispiel
 
@@ -25,18 +25,18 @@ Im vorherigen Beispiel hatten wir diesen Code:
 <p>Keinen, das ist ein Hardware-Problem!</p>
 ```
 
-Du hast gesehen, dass das zwischen `<h1>` und `</h1>` wie eine Überschrift formatiert wurde, und dass der Text zwischen `<p>` und `</p>` in eigenen Abschnitten dargestellt wurde.
+Du hast gesehen, dass der Teil zwischen `<h1>` und `</h1>` wie eine Überschrift formatiert wurde, und dass die jeweiligen Texte zwischen `<p>` und `</p>` in eigenen Abschnitten dargestellt wurden.
 
 ## HTML Tags
 
-Du hast schon die ersten "HTML Tags" kennengelernt: `<h1>` und `<p>`. `<h1>` wird für Überschriften und `<p>` wird für Absätze verwendet.
+Damit hast du bereits die ersten "HTML Tags" kennengelernt: `<h1>` und `<p>`. `<h1>` wird für Überschriften und `<p>` für Absätze verwendet.
 
 HTML Tags sind wie Keywords (Schlüsselbegriffe), die beschreiben, wie der Browser deren Inhalt (Content) interpretiert.
 
-Die Tags inklusiv deren Inhalt nennen wir "Element". Das Element ist wie folgt aufgebaut:
+Die Tags inklusive deren Inhalt nennen wir "Element". Das Element ist wie folgt aufgebaut:
 
 ![htmlElement](../html-tag.svg "(Bild, das den Aufbau eines HTML-Elements zeigt.)")
 
 Jedes Element beginnt mit einem "Opening Tag". Zwischen diesem und dem Closing Tag befindet sich der Content, der auf Grundlage des Tags formatiert wird. Der Content wird oft "InnerText" oder "InnerHtml" genannt. Das Closing Tag hat immer vor dem Tag-Namen ein "/", das symbolisiert, dass es sich um ein Closing Tag handelt.
 
-Im Opening Tag können Attribute vorkommen, die den Tag "konfigurieren". Eine solche Konfiguration beinhaltet in den meisten Fällen ein Attribut-Key und -Value, welche mit einem Gleichzeichen verbunden werden. Der Attribut-Value (Wert) beginnt und endet IN JEDEM FALL mit einem Anführungs- bzw. Schlusszeichen, auch wenn der Wert eine Zahl oder true bzw. false ist.
+Im Opening Tag können Attribute vorkommen, die den Tag "konfigurieren". Eine solche Konfiguration beinhaltet in den meisten Fällen einen Attribut-Key und -Value, welche mit einem Gleichzeichen verbunden werden. Der Attribut-Value (Wert) beginnt und endet **in jedem Fall** mit einem Anführungs- beziehungsweise Schlusszeichen, auch wenn der Wert eine Zahl oder true/false ist.