HTML & CSS E-Book von Stefan Petri

Mit dem HTML & CSS E-Book von Stefan Petri machst Du aus Deiner Website-Idee eigenen Code – auch ohne Vorkenntnisse. Statt verstreute Tutorials zusammenzusuchen, lernst Du in 68 Kapiteln HTML und CSS von Grund auf kennen. Das deutschsprachige PDF-E-Book zum Download führt Dich von der ersten Seitenstruktur bis zu modernen Layouts, die auf verschiedenen Bildschirmen funktionieren.

Was steckt in den 68 Kapiteln?

Du beginnst mit dem Aufbau einer Webseite und gehst Schritt für Schritt zur Gestaltung über. So lernst Du zunächst, Inhalte mit HTML zu strukturieren, bevor Du ihnen mit CSS ihr Aussehen gibst. Darauf bauen moderne Layouttechniken, responsives Webdesign und Animationen auf. Die 68 thematisch gegliederten Kapitel geben Deinem Selbststudium einen roten Faden: von den Grundlagen bis zum selbst gestalteten Layout.

• HTML: Du lernst die Auszeichnungssprache für Webseiten kennen und verstehst, wie Du Inhalte zu einer nachvollziehbaren Seitenstruktur zusammenfügst.
• CSS: Mit der Stylesheet-Sprache gestaltest Du Deine Webseite und bestimmst, wie ihre Inhalte im Browser erscheinen.
• Flexbox: Du baust Layouts mit dem Flexbox-Modell auf und lernst, Elemente flexibel anzuordnen.
• Grid Layout: Mit CSS Grid erstellst Du Raster-Layouts und bringst Deine Gestaltung in eine klare Ordnung aus Zeilen und Spalten.
• Position: Du beschäftigst Dich mit der gezielten Positionierung von Elementen, damit sie den vorgesehenen Platz im Layout einnehmen.
• Responsives Webdesign: Du lernst, Seiten für unterschiedliche Bildschirmgrößen umzusetzen – vom Smartphone über das Tablet bis zum Desktop.
• Animationen mit Keyframes: Du gestaltest Bewegung mit CSS und erweiterst Deine Seiten um animierte Elemente.

Diese Kernthemen sind Teil eines größeren Lernumfangs. Innerhalb der 68 Kapitel behandelt das E-Book weitere HTML- und CSS-Themen. Du erhältst damit ein zusammenhängendes Werk, in dem Du Neues erarbeiten und bereits Gelerntes wieder nachschlagen kannst.

Warum HTML und CSS zusammengehören

HTML gibt Deiner Webseite ihre Struktur. Die Auszeichnungssprache beschreibt beispielsweise, welche Inhalte eine Überschrift oder einen Absatz bilden. CSS kümmert sich um die Darstellung: Die Stylesheet-Sprache legt fest, wie diese Inhalte gestaltet und angeordnet werden. HTML beschreibt den Aufbau, CSS gestaltet das Erscheinungsbild. Erst im Zusammenspiel entsteht aus Inhalten eine bewusst gestaltete Webseite.

Wenn Dich bisher HTML-Strukturen, CSS-Selektoren und Layoutregeln gleichzeitig beschäftigt haben, hilft diese Reihenfolge beim Einstieg. Du lernst zunächst die Aufgaben der beiden Sprachen kennen und führst sie anschließend zusammen. So wird verständlicher, welcher Teil des Codes für welche Veränderung auf Deiner Seite verantwortlich ist.

Moderne Layouts bauen, die auf verschiedene Bildschirme passen

Eine Website soll nicht nur auf Deinem eigenen Monitor gut aussehen. Sie muss sich auch auf schmalen Smartphone-Displays und auf Tablets sinnvoll darstellen lassen. Deshalb gehören Flexbox, Grid Layout, Positionierung und responsives Webdesign ausdrücklich zum Inhalt. Du lernst die Bausteine kennen, mit denen Du Layouts für unterschiedliche Geräte umsetzt.

Flexbox hilft Dir, Elemente flexibel innerhalb eines Layoutbereichs anzuordnen. CSS Grid gibt Dir ein Raster für die Gestaltung mit Zeilen und Spalten. Die Positionierung ergänzt diese Werkzeuge, wenn Elemente gezielt platziert werden sollen. Du beschäftigst Dich damit nicht nur mit dem Aussehen einzelner Inhalte, sondern auch mit ihrem Zusammenspiel auf der Seite.

Beim responsiven Webdesign führst Du diese Gestaltung weiter: Deine Seite soll mit unterschiedlichen Bildschirmgrößen zurechtkommen. Für Deine eigenen Projekte bedeutet das, Smartphone, Tablet und Desktop von Anfang an mitzudenken, statt ausschließlich für eine feste Ansicht zu gestalten.

Mit Animationen mit Keyframes kommt Bewegung hinzu. Keyframes beschreiben Zustände innerhalb einer CSS-Animation. Du lernst damit eine Technik kennen, mit der Du über statische Layouts hinausgehst und animierte Elemente selbst gestaltest.

Als PDF direkt starten und im eigenen Tempo lernen

Das HTML & CSS E-Book erhältst Du direkt nach dem Kauf als PDF zum Download. Anschließend kannst Du es auf Deinen eigenen Geräten lesen. Am Rechner liegt es neben Deinem Code-Editor, auf dem Tablet begleitest Du damit Deine Lerneinheit, und bei Bedarf kannst Du Inhalte ausdrucken. Nach dem Herunterladen brauchst Du zum Lesen keine dauerhafte Internetverbindung.

Du bestimmst, wie schnell Du vorankommst. Die 68 Kapitel musst Du nicht in einem Zug durcharbeiten. Nimm Dir ein abgegrenztes Thema vor, setze das Gelernte um und kehre bei Fragen zum passenden Kapitel zurück. Das PDF bleibt dabei zugleich Lernunterlage und Nachschlagewerk.

Auch wenn Du sonst gern mit Videos lernst, hat das PDF einen praktischen Vorteil: Du kannst bei einer Erklärung bleiben, solange Du möchtest, und zu einem Kapitel zurückspringen, ohne vor- oder zurückzuspulen. Besonders beim Schreiben von Code lässt sich das Lesetempo so an Deinen nächsten Arbeitsschritt anpassen.

Von der Gestaltungsidee zur eigenen Website

Du hast einen Entwurf im Kopf, möchtest ein eigenes Webprojekt beginnen oder bestehende Seiten besser verstehen? Das E-Book richtet sich an Einsteiger, Kreative sowie angehende Webdesigner und Webentwickler. Vorkenntnisse brauchst Du nicht. Als Selbstlerner erhältst Du eine thematische Reihenfolge; als Gestalter lernst Du besser einzuschätzen, wie aus Deinem Entwurf eine Webseite wird.

Zum praxisnahen Ansatz passt das Lernumfeld, aus dem das E-Book stammt. Stefan Petri ist selbst Praktiker und Selbstlerner, kein studierter Grafikdesigner oder Informatiker. Am 20. Dezember 2002 brachte er PSD-Tutorials.de online. Im Laufe der Zeit haben sich dort mehr als 850.000 Menschen registriert. Auch nach über 20 Jahren gilt die Plattform als eines der größten deutschsprachigen Fachforen für Design, Fotografie und Bildbearbeitung.

Hinter diesem Umfeld steht langjährige Erfahrung mit Lerninhalten: Stefan Petri verantwortete bereits das gedruckte Praxis-Lehrwerk „Photoshop – Webdesign“, das die Erstellung von Weblayouts anhand zahlreicher Tutorials von Praxisprofis vermittelt. Gemeinsam mit seinem Bruder Matthias Petri gründete er 2010 die 4eck Media GmbH & Co. KG. Die Brüder betreiben neben PSD-Tutorials.de auch das E-Learning-Portal TutKit.com.

Hinzu kommen Erfahrungen aus Lehre und laufender Projektarbeit. Mitgründer Matthias Petri wurde mehrfach ausgezeichnet, unter anderem mit einem Sonderpreis, und ist Lehrbeauftragter an der FHM Rostock. Das Unternehmen arbeitet bis heute als Digital-Agentur an Websites sowie 2D- und 3D-Projekten. Rund um die Brüder besteht außerdem eine aktive Community mit Foren zu Gestaltung und Bildbearbeitung, in der regelmäßig kostenlose Inhalte freigeschaltet werden. Das E-Book kommt damit aus einem etablierten Lernumfeld mit Verbindung zur praktischen Gestaltung und Webentwicklung.

Schreibe Deine erste Seite und baue darauf auf

Dein Ziel ist nicht, möglichst viele Fachbegriffe auswendig zu kennen. Du möchtest HTML-Strukturen selbst schreiben, Webseiten mit CSS gestalten und eigene Layoutideen umsetzen. Genau darauf richtet sich der Lernweg aus: Struktur aufbauen, Gestaltung ergänzen, Flexbox und Grid einsetzen, Elemente positionieren und die Seite für verschiedene Geräte anpassen. Keyframe-Animationen erweitern anschließend Deine gestalterischen Möglichkeiten.

Wenn Du danach weiterlernen möchtest, gibt es mit JavaScript Beginner und JavaScript Advanced ergänzende E-Books desselben Anbieters. Sie bieten eine thematische Weiterführung, sobald Du Dich nach HTML und CSS mit JavaScript beschäftigen willst.

Lade Dir das PDF herunter und schreibe heute Deine erste HTML-Seite. Arbeite in Deinem Tempo weiter, probiere das Gelernte aus und freue Dich über jeden Schritt, den Du selbst im Browser sichtbar machst. Viel Freude und Erfolg beim Lernen von HTML und CSS.

Häufige Fragen zu HTML & CSS E-Book