Bootstrap 4 – Online-Kurs (Komplettkurs)

Möchtest du lernen, großartige Webseiten mit Bootstrap 4 zu erstellen?
In diesem Komplettkurs lernst du praxisnah die Schritt-für-Schritt-Umsetzung einer vollständigen Webseite mit Bootstrap 4 und allen dazugehörigen Komponenten. Dabei zeigen wir dir nur das, was du brauchst, um schnell Ergebnisse zu erzielen und sofort loszulegen.

Wir erklären dir anhand der Dokumentation von Bootstrap alle Funktionen und die gesamte Umsetzung an einer modernen Beispielwebseite, von der du natürlich auch den gesamten Code für deine eigene Übung erhältst. Du lernst die Umsetzung von der Photoshop- / PSD-Datei hin zur fertigen Webseite auf Bootstrap-Basis.

Du lernst also den kompletten Erstellungsprozess mit vielen Tipps und Tricks aus dem Agenturalltag. Wir arbeiten bereits seit vielen Jahren erfolgreich mit Bootstrap im Agentureinsatz und möchten dir unsere Erfahrungen mit diesem Kurs praxisnah und mit vielen Beispielen näher bringen.

Das Rezept für die erfolgreiche Webseite mit Bootstrap
Ein Frontend-Framework ist dann gut und erfolgreich, wenn man der Webseite nicht mehr sofort ansieht, dass sie auf einem Framework basiert. Vielleicht kennst du sogar die eine oder andere Webseite, bei der du sofort Bootstrap als Basis erkennst?

Bei uns lernst du, Webseiten mit Bootstrap so zu erstellen, dass der Besucher diese Grundlage nicht direkt erkennt. Wir werden gemeinsam eine umfangreiche Beispielwebseite umsetzen, die vollständig auf Bootstrap basiert. Aber genau das werden wir gut kaschieren und die Seite vollständig individualisieren!

Los geht’s mit den Grundlagen
Wir zeigen dir die Grundlagen von Bootstrap. Lerne das flexible Grid und die Helper kennen. Weiterhin lernst du die Dateistruktur kennen und welche Dateien für welchen Anwendungsfall verwendet werden können.

Die komplette Umsetzung Schritt für Schritt – von der PSD-Datei zur fertigen Webseite!
In unserem Kurs lassen wir keinen Schritt aus! Das beginnt bereits bei dem Design der geplanten Webseite. Wir haben eine moderne Webseite in Photoshop vorbereitet und setzen diese aus der PSD-Datei heraus um. Du lernst den kompletten Umsetzungsprozess aus einer Designvorlage heraus.

Dabei lernst du also nicht nur die Verwendung der Bootstrap-Komponenten, sondern auch deren Individualisierung nach Kundenwunsch und eigenem Design.

Alle Komponenten von Bootstrap. Alle Komponenten? Alle!
Bootstrap ist eines der umfangreichsten Frontend-Frameworks unserer Zeit. Wir zeigen dir alle verfügbaren Komponenten, die Bootstrap zur Verfügung stellt, mit entsprechenden Beispielen.

Entwickle lebendige Webseiten
Bootstrap bietet viele Komponenten, die der Webseite eine gewisse Dynamik und Leben einhauchen. Du erfährst bei uns, wie du diese sinnvoll nutzen kannst und welche Anwendungsfälle damit umgesetzt werden können.

Bootstrap und jQuery
Um dem Kurs die sprichwörtliche Krone aufzusetzen, lernst du zum Schluss die Königsdisziplin: Bootstrap-Methoden und jQuery. Dank der jQuery-Implementierung kannst du jede Bootstrap-Komponente vollständig individualisieren. Eigene Steuerelemente für das Carousel / die Slideshow oder die Verbindung von Komponenten – dank der jQuery-Funktionen alles kein Problem.

Wäre es nicht cool, wenn die Webseite automatisch Informationen über die Öffnungszeiten anzeigt, wenn ein Nutzer diese über ein Kontaktformular mit freier Texteingabe anfragen möchte? Ja, das wäre definitiv ein cooles Beispiel, und wir zeigen dir, wie etwas in der Art realisiert werden kann.

Bootstrap-Referenzkarte
Wir haben für dich eine übersichtliche Referenzkarte mit wichtigen Helper-Klassen und Schnellreferenz zu wichtigen Layout-Bestandteilen wie z. B. dem Grid-System erstellt. Diese mehrseitige PDF-Referenzkarte kannst du entweder ausdrucken oder als digitale Gedankenstütze verwenden.

Worauf wartest du also noch, starte jetzt gemeinsam mit Bootstrap 4 durch!

Auszug und Beispiele für Bootstrap Komponenten, welche wir dir im Kurs vorstellen:

• Alerts – Warn- bzw. Erfolgsmeldungen
• Badges – Badges für Texte und Buttons, klein aber fein
• Breadcrumb – Leichte Orientierung im Content
• Buttons – Grundelemente von Bootstrap 4
• Card – Die Universal-Komponente
• Carousel – Moderne Slideshow
• Collapse / Accordion
• Forms – Formulare für Login oder Kontakt
• Jumbotron / Hero Header – Stylische UI-Elemente
• Modal – Content-Overlay-Box bzw. Popup Lösung von Bootstrap
• Navigation – Kreative Navigationssysteme
• Pagination – Seitenzahlen für Blogs und Artikel
• Popovers – Klick-Alternative mit mehr Inhalt
• Tooltips – Ein must-have für viele Webseiten oder Apps
• Progressbar – Optisch ansprechende Ladebalken oder Diagramme
• Scrollspy – Inhalte dynamisch scrollen

Content Komponenten:

• Reboot
• Typografie
• Code
• Images
• Tables
• Figure

So wie viele weitere Tipps & Tricks rund um Bootstrap 4. Schau dir direkt die kostenlosen Vorschau-Videos an und starte sofort mit Bootstrap 4 durch.

Falls du im Verlauf des Online-Kurses Fragen oder Probleme hast, stehen wir dir selbstverständlich auch persönlich zur Seite. Im Fragen & Antworten Bereich des Kurses kannst du jederzeit mit uns und allen anderen Teilnehmern in Kontakt treten.