Responsive Webdesign mit Bootstrap

Erstellung von flexiblen Webseiten für alle Geräte mit responsive Webdesign und das Arbeiten mit dem Framework Boostrap. Die Teilnehmer erhalten weiterhin eine Einführung in Less.

Inhalte des Seminars

Die Web-Welt im Wandel

Moderne Webdesign und Gestaltung
Gestaltung einer Webseite mit Tabellen
Gestaltung einer Webseite mit DIVs und CSS-Layouts
960 Pixel-Layout (fest/flexibel - 960.gs/designinfluences.com/fluid960gs/)
iPhone bis Full-HD
Gestaltung einer Webseite im Grid-Layout und Media-Queries
Aktueller Stand: HTML/CSS/JavaScript-Frameworks

Layout-Typen

Fixed Layout
Fluid Layout
Elastic Layout
Responsive Layout
Adaptives Layout
Grid/Blöcke

Techniken für responsives Webdesign

Ordnung schaffen mit dem Grid-Layout
Prozentbasiert
Media Queries
Flexible Bilder

Tools

Webseiten-Auflösung verändern
Firefox Bildschirmgrößen testen
Developer Tools: Element durchsuchen, CSS-Kontrolle
Angepasste Layouts anzeigen

Media Queries

Was sind Media Queries?
Ursprünge mit Screen/Print
Viewport
Min-/Max-width, Orientation
Browser-Unterstützung, Conditional Comments
Beispiele: Container-Positionen, Menüleisten

Bootstrap Grundlagen

Quellen
Lizenz
Struktur/Browser
Bootstrap installieren
Bootstrap-Datei

Bootstrap Grid Raster

Aufbau des Rasters
Container, Reihen, Spalten
Umbrüche, Geräteklassen
Struktur, Leerblöcke
CSS-Namen

Typografie und Komponenten

Überschriften
Listen
Tabellen
Formulare
Bilder
Glyphicons
Button, Button-Dropdown
Navbar
Breadcrumb
Accordion
Slider

Bootstrap Extended

Barrierefreiheit
Templates
Less/Sass
Ausblick auf Bootstrap 4

Termine / Kontakt

Jedes Seminar führt tutego als kundenangepasstes Inhouse-Seminar durch.

Alle unsere Seminare können zudem als Live-Online-Seminar besucht werden.

Wir helfen Ihnen gerne bei der Anmeldung und einen passenden Termin zu finden. Kontaktieren Sie uns per E-Mail oder unter 0800/tutegos (kostenlos aus allen Netzen).

Die Fakten

Empfohlene Schulungsdauer: 2 Tage, insgesamt 16 Unterrichtsstunden à 45 Minuten
Zielgruppe: Webentwickler, die den aktuellen Stand der Webentwicklung mit Bootstrap beherrschen möchten.
Vorkenntnisse: Kenntnisse in der Erstellung von Webseiten mit HTML und CSS.
Schulungsunterlagen: Schulungsunterlagen als Foliensatz
Seminar-Software: Beliebiger Code-Editor