TK-5522.3-F - Webseitengestaltung Aufbau 3 - Responsive Webdesign 1

Zielgruppen:

keine Angaben

Fachliche Voraussetzungen:

keine Angaben

Technische Voraussetzungen:

Keine besonderen Anforderungen.

Systematik der Agenturen für Arbeit:

keine Angaben

Inhalte

Der Kurs bietet einen Einstieg in moderne Template (Layout) Entwicklung. Er richtet sich an Personen, die selbst ein Template mit HTML und CSS erstellen oder ändern möchten, bzw. mit Frameworks wie Bootstrap umgehen müssen. Auch wenn Sie mit einem CMS arbeiten und die Oberfläche eines Wordpress Themes bzw. eines Joomla oder Typo3 Templates erstellen oder anpassen möchten, liefert Ihnen der Kurs zur Umsetzung notwendige Kenntnisse.
Themen:
- Was die Website leisten soll
* Mobile First und Progressive Enhancement
* Responsivität
- Entwickler-Werkzeuge zum Testen
* Technische Mängel
* Accessibility
* Usability etc.
- Testen eines Website-Templates: CSS, JavaScript deaktivieren, Struktur beurteilen, Viewport, HTML- und CSS Validator, F12
- Grundlagen CSS – Layout, das CSS-Box-Modell
* HTML5 Strukturelemente am Beispiel der Kurswebsite:
die Bereiche der Kurswebsite (Layoutskizze Aufgabenblätter)
* Kennenlernen der Besonderheiten des CSS-Box-Modells und
Vereinfachen der Layoutberechnung
* Höhen und Breiten: width, height, min-width, min-height
* Layout zentrieren
- Die einspaltige Grundvariante
* Layoutcontainer mit HTML 5 Semantics
* CSS flexibel und robust:
relative Maße für Text und Layoutcontainer,
Spielraum statt fixer Höhen und Breiten.
- Responsive Webdesign
- Charakteristika responsiver Websites:
* Anpassung des Layouts an unterschiedliche Viewports
* Stufenlose Anpassung statt Arbeiten für bestimmte Bildschirmgrößen
- Flex: Die Theorie
- Flex – Layouttechnik für responsive Web-Layouts
- Flex im Einsatz - Das einspaltige Layout für größere Displays umorganisieren
* Meta-Viewport
* Breakpoints über Media Queries steuern
* Aufbauen der Tablet- und Desktop Ansicht der Beispielseite
* Abwärtskompatibilität

Voraussetzungen:
HTML und CSS-Grundkenntnisse, Dateiablage, Tippen, Internet

Beispiel-Website für Webseitengestaltung Aufbau 3 – 5: http://anjamorsch.de/test/responsive-projekt/