About This Course
Bootstrap 4 mit allen Komponenten und Funktionen. Praxisnahe Umsetzung von modernen Beispielen aus dem Agenturalltag.
+++ Der umfangreichste auf Bootstrap 4 fokussierte deutschsprachige Kurs mit Bootstrap-Referenzkarte und Aktualitätsgarantie (siehe unten) +++
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 über 5 Jahren erfolgreich mit Bootstrap im Agentureinsatz und möchten dir unsere Erfahrungen mit diesem Kurs praxisnah und mit vielen Beispielen näherbringen.
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.
***** Unsere Aktualitätsgarantie für Bootstrap 4 *****
Bootstrap 4 befindet sich derzeit noch in einer Beta-Version. Wir garantieren: Sollte es zwischen der Beta-Version und der kommenden finalen Version von Bootstrap 4.0.0 noch Änderungen geben, so werden wir den Kurs entsprechend aktualisieren und Informationen nachreichen. Du kannst in jedem Fall sicher sein, dass du in diesem Kurs nur die aktuellsten Informationen zu Bootstrap 4 bekommst.
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.
Wir freuen uns auf dich!
Alle Komponenten und Funktionen von Bootstrap in der neuen Version 4.0.
Tolle Praxisbeispiele und Lösungen mit Bootstrap aus dem Agenturalltag.
Webseiten für jedes Endgerät mittels Responsive Webdesign umsetzen.
Maria U.
Sehr gut erklärt und sehr interessante Themen.