HTML und CSS: Der ultimative Crashkurs

Und schon lernst du das erste wichtige Tool als Programmierer*in kennen: Die kostenlose Open-Source-Plattform ,,CodePen". Hier erstellst du Code, testet und teilst ihn und die Plattform eignet sich wunderbar für erste ,,Experimente" - also dein allererstes Programm.

Um den Inhalt der vorherigen Lektion weniger abstrakt zu halten, veranschauliche ich ihn dir hier anhand eines vorbereiteten Code-Schnipsels. Durch ihn erlebst du die drei Websprachen ,,in Aktion". Klar, der Code ist noch sehr einfach. Aber es ist doch cool, wie du jede noch so kleine Änderung im Code sofort in Echtzeit in der Ausgabe siehst...

Übung: Mit deinem ersten Pen (Code) rumspielen!

Hier findest du meinen mit CodePen erstellten ,,Pen", also Code-Schnipsel: https://codepen.io/Sinah/pen/wvPzdzw?editors=1100

Du brauchst keinen Account, um damit herumzuspielen und veränderst nur deine eigene Version. Daher bleibt das Original (mein Pen) stets erhalten. Nimm dir so viel Zeit wie du willst.

Experimentiere mit dem Code (vor allem mit der HTML- und der CSS-Datei !), versuche, Dinge zu ändern und hab' keine Angst vorm Crash. Wichtig: Um deine Pens- oder deine Version meiner Pens- zu speichern, brauchst du einen (kostenlosen) CodePen-Account. Auch wenn der Pen automatisch auf "Auto-save" eingestellt ist (siehe Settings --> Behavior--> Save Automatically?), musst du ihn einmal gespeichert haben, damit er von da an alle 30 Sekunden automatisch gespeichert wird. Es kann nicht schaden, ab und an auf ,,Save" zu klicken.

Was ist eigentlich dieses Internet? Worin besteht der Unterschied zum Web? Was passiert hinter den Kulissen, wenn jemand deine Website öffnet, zwischen Endgerät und Server? All das sehen wir in dieser Lektion.

Wie bei der Titelseite einer Zeitung werden auch auf einer in HTML erstellten Website Inhalte hierarchisch strukturiert und damit Prioritäten gesetzt. Hier gebe ich dir einen kleinen Überblick darüber.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYzbBYy?editors=1000

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/podzZqL

Wichtig: Um deine Pens- oder deine Version meiner Pens- zu speichern, brauchst du einen (kostenlosen) CodePen-Account. Auch wenn der Pen automatisch auf "Auto-save" eingestellt ist (siehe Settings --> Behavior--> Save Automatically?), musst du ihn einmal gespeichert haben, damit er von da an alle 30 Sekunden automatisch gespeichert wird. Es kann nicht schaden, ab und an auf ,,Save" zu klicken.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/zYEQXxq

Mithilfe eines nützlichen Shortcuts erstellen wir ein HTML-Template in VSCode. Wir lernen den Head oder Kopf unseres Dokuments kennen, den Teil, der ,,hinter den Kulissen" mit Metainformationen für eine reibungslose Darstellung unseres Dokuments sorgt. Unter anderem sehen wir dabei sogenannte Meta-Tags und einige vom Aussterben bedrohte Elemente.

__________________________________________________________________________________

Den Code stelle ich dir in verschiedenen Dateitypen zur Verfügung (in einem Zip-Ordner, als Bild..), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben in unterschiedlichen Dateiversionen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Wir lernen den Body des Dokuments kennen, der den ,,eigentlichen Inhalt" unserer Seite darstellt, also den für die User sichtbaren Teil sowie, sofern vorhanden, die Verknüpfung mit unserer JavaScript-Datei.

__________________________________________________________________________________

Den Code stelle ich dir in verschiedenen Dateitypen zur Verfügung (in einem Zip-Ordner, als Bild..), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben in unterschiedlichen Dateiversionen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Mein Kurs zu Grundlagen in HTML, CSS und JavaScript (u.a. Dom Manipulation):

https://www.udemy.com/course/lets-play-programmiere-dein-game-lerne-javascript-css-und-html/?referralCode=FB443A16D973181F1C21

Ich zeige dir, wie du einen CodePen-Account erstellst und verweise auf Quellen für alle deine HTML- und CSS-Fragen!

Wichtig: Um deine Pens- oder deine Version meiner Pens- zu speichern, brauchst du einen (kostenlosen) CodePen-Account. Und: Auch wenn der Pen automatisch auf "Auto-save" eingestellt ist (siehe Settings --> Behavior--> Save Automatically?), musst du ihn einmal gespeichert haben, damit er von da an alle 30 Sekunden automatisch gespeichert wird. Es kann nicht schaden, ab und an auf ,,Save" zu klicken.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYOpbOG?editors=1000

Manche HTML-Auszeichnungen führen zu dem gleichen optischen Ergebnis, unterscheiden sich aber in ihrer (semantischen) Bedeutung. Diese wird vom Screenreader erfasst, was besonders wichtig für Menschen mit Seh- oder Leseschwächen sein kann, aber auch von Suchmaschinen und Browsern.

Ich zeige dir hier solche ,,speziellen" Tags und Attribute, die zur Barrierefreiheit einer Website oder Anwendung beitragen können, ihre Kompatibilität erhöhen und technischen Problemen vorbeugen, sowie bei der Suchmaschinenoptimierung (engl. SEO für search engine optimization) eine Rolle spielen.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/GROKBVN

Hier erstellen wir eine Homepage für ein fiktionales Restaurant, fügen unser eigenes Logo ein, ein Navigationsmenü und den strukturierten Haupttext.

Wir lernen reine Text-Elemente kennen, aber auch solche, die selbst keine Text-Elemente sind, jedoch oft zum Einsatz kommen, um Text zu strukturieren, gliedern, gruppieren. Diese Elemente gucken wir uns an:

• title

• header

• headings (h1-h6)

• div

• nav

• main

• section

• article

• aside

  
  

Hier lernst du, deiner Seite Copyright oder Impressum hinzuzufügen, Kontaktinformationen und inspirierende Zitate. Ich erkläre dir den Unterschied zwischen p und div und wir sehen weitere semantische sowie rein präsentationsbezogene Elemente.

In dieser Lektion lernen wir folgende Elemente kennen:

• p

• span

• small

• blockquote

• q

• footer

• address

Wir werfen einen Blick auf zwei Arten von Listen: geordnete und ungeordnete.

Meinen Pen dazu findest du auch hier: https://codepen.io/Sinah/pen/podJpRr?editors=1100

Regeln (rules), Sektoren (selectors), Eigenschaften (properties), Werte (values) sind die Grundbausteine in CSS. Sie alle lernen wir hier kennen.

Du hast in CSS verschiedene Möglichkeiten, Farbwerte anzugeben: Über den Hexadezimalcode, die RGB- bzw. RGBA-Angabe und über Farbwörter. Diese Arten stelle ich dir hier vor.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/JjrLGgq?editors=1100

CSS hält ein paar Tücken bereit, einige Dinge, die nicht unbedingt intuitiv offensichtlich sind. Den wohl wichtigsten Teil stelle ich dir hier vor.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/rNGvKRR?editors=1100

Die Zeiten, in denen es nur Websites in Times New Roman gab, sind (zum Glück!) vorbei. Wir gucken uns an, wie du durch verschiedene Schriftarten ein schöneres Schriftbild erzeugst. Außerdem gehe ich auf ein paar Bedenken zum Thema Branding und Wiedererkennungswert, Verfügbarkeit und Lesbarkeit der unterschiedlichen Schriftgruppen ein.

Wir sehen verschiedene Arten, Schriftgrößen in CSS anzugeben und wie die Vererbung funktioniert. Außerdem lernen wir die Vorteile der relativen Angabe über rem und em kennen.

Auch über CSS kann man Wörter fett oder kursiv hervorheben. Ich stelle dir hierfür zwei Eigenschaften und ihre verschiedenen Werte vor.

Ich zeige dir, mit welchen beiden Eigenschaften du die Farben für Hintergrund und Schrift festlegst.

Ich zeige dir

• wie du bestimmte Wörter groß- oder kleinschreibst, etwa bei Markennamen,

• auf verschiedene Arten unter- , durch- oder sogar überstreichst,

• wie du Text ausrichtest und einrückst

• und den Abstand zwischen Zeilen, Zeichen und Wörtern festlegst.

Smartphones regieren die Welt. Daher wird es zunehmend wichtig, dass du deine Website für Mobilgeräte optimierst. Worauf du dabei achten solltest und was es für etablierte Ansätze hierzu gibt, erfährst du in dieser Lektion.

Hier kannst du testen, ob deine Webseite ,,mobile-friendly" (geeignet für mobile Endgeräte) ist: https://search.google.com/test/mobile-friendly?hl=de

Wow, du bist weit gekommen! Viel zu weit, um aufzugeben! Jetzt kannst du endlich deine eigenen Websites erstellen! Zur Übung mache ich dir zwei bewährte Vorschläge:

• Klone eine andere Website.

• Erstelle deine eigene Website nach deinen ganz eigenen Vorstellungen.

Vergiss dabei nicht, sowohl auf die Optik als auch die Semantik deiner Seite zu achten. Viel Spaß!

Deine Website ist in Nullkommanichts veröffentlicht, und zwar kostenfrei. Wie das geht, zeige ich dir hier.

Und hier findest du Netlify: https://www.netlify.com/

Für deine Zukunft als angehende*r Programmierer*in gebe ich dir ein paar Ratschläge aus erster Hand mit auf den Weg. Ich bedanke mich bei dir für die Teilnahme an diesem Kurs und verabschiede dich.

Außerdem verlinke ich dir hier hilfreiches Material: Unter anderem einen weiteren Kurs von mir, mit dem du sinnvoll an diesen Kurs anschließen kannst (Ich zeige dort Grundlagen in HTML, CSS und JavaScript und wie du mit den drei Sprachen ein Spiel programmierst):
https://www.udemy.com/course/lets-play-programmiere-dein-game-lerne-javascript-css-und-html/?referralCode=FB443A16D973181F1C21