Bootstrap-Tutorial: Responsive Website erstellen

Befreie deine Website – responsive Webdesign mit Bootstrap

Responsive Websites sind längst Stand der Technik: Moderne Websites müssen sich den verfügbaren Endgeräten flüssig anpassen und den Content auf großflächigen Computerbildschirmen ebenso übersichtlich darstellen wie auf kleinflächigeren Smartphone-Displays. Damit lassen sich deine Inhalte nicht nur überall lesen, sondern werden von Suchmaschinen auch noch bevorzugt gefunden! Bootstrap wurde genau für diese Anforderungen geschaffen. Das kostenfreie Open-Source-Framework verfügt über ein ausgefeiltes Raster- und Spalten-System und bietet zahlreiche Komponenten zur Seitenerstellung. Effizientes Webdesign für ambitionierte Projekte!

In dem 2,5-stündigen Video-Tutorial führt dich Sascha Rudolph durch die Infrastruktur des Frameworks. Du lernst die Bedienung und Funktionsmöglichkeiten kennen und vollziehst am Praxisbeispiel nach, wie eine Website vom ersten Drop-down-Menü bis zur mobile-optimierten Codestruktur erstellt wird. Deine eigene moderne, responsive Website erstellen – hier schon mal ein kleiner Vorgeschmack:
 

Responsive Website erstellen?! Kein Problem – mit Bootstrap und diesem Tutorial

Das 2,5-stündige Bootstrap-Tutorial unterteilt sich in zwölf Lektionen. Nach einer Einführung in die Bootstrap-Oberfläche und in die grundlegende Funktionsweise lernst du, das Raster- und Spalten-System anzuwenden und eine dynamische Slideshow zu erstellen. Anschließend begleitest du deinen Trainer bei der praktischen Umsetzung einer responsive Website, vom ersten Grundgerüst über die Einbindung von Content-Accordions bis zum finalen Feinschliff der Mobile-Optimierung. Dabei siehst du nicht nur zu, sondern kannst mit den Arbeitsmaterialien jeden Schritt selbst nachvollziehen! Learning by Doing, damit das Gelernte sitzt und du deine nächsten Websites effizient und professionell erstellen kannst.

Kompatibilität (alle Produkte für Windows und macOS)

Bootstrap selbst steht dir als kostenloses Open-Source-Framework online zur Verfügung. In den Arbeitsmaterialien sind eine Bootstrap-Website und eine Photoshop-Datei enthalten. Damit du die einzelnen Schritte selbst nachvollziehen kannst, benötigst du einen Code-Editor (z. B. Dreamweaver) und mindestens Photoshop CS2 oder eine höhere Version.

Fazit

Fit in Bootstrap: Lerne im Video-Tutorial, wie du Bootstrap zum Erstellen einer responsive Website nutzt. Mobile first leicht gemacht.