Dokumentation

Erstelle deine Website unter Verwendung der folgenden Links zu Spezifikationen, Dokumentationen, Workshops und Tools.

Referenz

Im Folgenden findest du Ressourcen und Tools für die Front-End-Entwicklung. Ob zum schnellen Nachschlagen von HTML-Elementen und CSS-Eigenschaften oder um tiefer in die Thematik einzusteigen.

Schnellzugriff

HTML-Referenz: Liste aller HTML-Elemente und deren Verwendung.
CSS-Referenz: Liste aller CSS-Eigenschaften (Properties).
DevDocs: TOOL DevDocs ermöglicht den Zugriff auf sämtliche Dokumentation.

HTML

HTML-Elemente im Detail: Anatomie, Verschachtelung, Attribute und Kommentare.
Reponsive Images: Einführung in die Verwendung von Bildern in HTML.
Responsive Images 101: ARTIKEL Hervorragende Erklärung von responsiven Bildern und wie der Browser diese lädt.
Accessibility: Einführung und Dokumentation der aria-Rollen.

CSS

CSS: Custom Properties: Wiederverwendbarkeit von Variabeln, die CSS-Attribute wie Farben und Abstände standartisieren.
CSS-Spezifität: Mit der Spezifität bestimmt der Browser, welche Eigenschaften am relevantesten für ein Element zur Darstellung ist.
CSS logical properties and values: Logische Eigenschaften und Werte in CSS.
Variable Fonts: Font-Spezifikation, um statt mehrere Schriftschnitte nur einen (variablen) Font zu verwenden.
BEM: Block Element Modifier: Namenskonventionen und Modularität von Elementen.
CSS Specificity Calculator: TOOL Berechnung der Spezifität von CSS-Selektoren.
CSS: Flexbox Froggy: GAME Spielend das CSS-Layout Flexbox lernen.
CSS: Grid Garden: GAME Spielend das CSS-Layout Grid lernen.
CSS: A Complete Guide to Grid: GAME Übersicht über das CSS Grid.

JavaScript

JavaScript-Basics: Kurze Einführung in die Scriptsprache.
TypeScript for the New Programmer: Einführung in TypeScript für Anfänger.
Progressive web apps (PWAs): Einführung in PWA, sowie Leitfaden zur Entwicklung.
mockaroo: Realistische Testdaten: TOOL Mock zum erstellen von echten Daten für deine Anwendung.

Markdown

Markdown: Formatierungssyntax für Texte, die auf Plattformen wie GitHub oder Frameworks wie Astro verwendet wird
MDX: MDX lässt dich Markdown und JSX in einer Datei kombinieren. Das fidnet Anwendung in React und Astro.
JSX: JSX ist eine Syntaxerweiterung für JavaScript, mit der du HTML-Elemente in JavaScript schreiben kannst.

Entwicklung

Zur Erstellung von Websites benötigst du Entwicklungsumgebungen. Zum einen einen Editor, zum anderen einen Server, der deine Website für den Browser bereistellt.

IDE

Editoren werden meist IDE¹ genannt. Sie erleichtern dir das Schreiben von HTML, CSS und JavaScript und anderen Sprachen. Wir nutzten in GT 1191 eine vorkonfigurierte Version von Visual Studio Code.

Visual Studio Code: Kostenlose IDE von Microsoft.
VS Code Profile: Vorkonfigurierte Einstellungen für Visual Studio Code.
Emmet Cheat Sheet: Auflistung aller Kurzbefehle, um komplexes Markus schreiben zu können.

Werkzeuge

Can I use: Zeigt an, welcher Browser welches Front-end-Feature unterstützt.
Can I email: Das Selbe wie „Can I use“, nur für E-Mails.
Chrome DevTools: Zur allgemeinen Bedienung über die Verwendung spezifischer Informationen.
Dear Console …: Sammlung von kleinen Scripts für die DevTools-Konsole.
Browserslist: Browserkompatibilitätskonfiguration für beliebte JavaScript-Tools wie Autoprefixer, Babel, ESLint, PostCSS und Webpack. Interessant ist auch die Checkliste.

Umgebungen

GT 1191 Starterkeit: Vorkonfiguriertes Parcel, der prefekte Start für deine erste Website.
Astro: Bevorzugtes Web-Framework, bei denen der Inhalt im Vordergrund steht.
Laravel Herd: Einfache PHP-Entwicklungsumgebung für Mac und Windows, um PHP und Nginx bereitzustellen.

IDE steht für Integrated Development Environment. Ein Editor, der speziell für die Entwicklung von Software und Webseiten konzipiert ist. ↩