ARCHIVED
Work in Progress: Diese Seite wird noch bearbeitet und ergänzt.

Webentwicklung

Moderne Webtechnologien und Best Practices

Vorlesung 8 Sitzungen 90 Minuten

Einführung in moderne Webentwicklung mit HTML, CSS, JavaScript und aktuellen Frameworks. Von den Grundlagen von HTML und CSS über JavaScript Fundamentals bis zu modernen Frontend-Technologien.

Dozent: Dr. Christopher Pollin

Kontakt: christopher.pollin@dhcraft.org

Lernziele

  • HTML5-Dokumente strukturiert erstellen und semantisch korrekt auszeichnen
  • CSS für Layout, Styling und responsive Designs einsetzen
  • JavaScript-Grundlagen verstehen und anwenden (Variablen, Funktionen, DOM-Manipulation)
  • Mit Bootstrap moderne, responsive Webseiten entwickeln
  • Event Handling und asynchrone Programmierung mit JavaScript
  • JSON-Daten verarbeiten und dynamische Inhalte generieren

Voraussetzungen

  • Grundlegende Programmierkenntnisse

Sitzungen

1
SITZUNG 1

HTML

Grundlagen von HTML5: Struktur, semantische Elemente und Best Practices

Themen
  • HTML5-Grundstruktur und Dokumentaufbau
  • Semantische HTML-Elemente
  • Formulare und Eingabeelemente
  • HTML5 APIs und neue Features

MATERIALIEN:

HTML HTML Introduction to HTML Basic HTML Elements HTML5 Tutorial Beginner's HTML5 Cheatsheet HTML5 Periodensystem

Aktivitäten:

  • Hands-on: helloworld.html erstellen
  • Hands-on: lotr-index.html strukturieren
2
SITZUNG 2

CSS

Cascading Style Sheets: Layout, Styling und responsive Design

Themen
  • CSS-Selektoren und Spezifität
  • Box-Model und Positioning
  • Flexbox und Grid Layout
  • Responsive Design mit Media Queries
  • CSS3-Animationen und Transitions

MATERIALIEN:

CSS CSS Learn CSS in 20 Minutes CSS Tutorial

Aktivitäten:

  • Hands-on: style.css für lotr-index.html erstellen
3
SITZUNG 3

Bootstrap 5.3

Moderne responsive Webseiten mit Bootstrap Framework

Themen
  • Bootstrap Grid System
  • Bootstrap Komponenten (Navbar, Cards, Forms)
  • Utility Classes
  • Responsive Breakpoints
  • Bootstrap Icons

MATERIALIEN:

Bootstrap 5.3 Bootstrap 5.3 Bootstrap 5 Crash Course

Aktivitäten:

  • Hands-on: Bootstrap für index.html implementieren
4
SITZUNG 4

Einführung: Internet und Web

Technische Grundlagen des Internets und World Wide Web

Themen
  • Geschichte des Internets und WWW
  • Client-Server-Architektur
  • HTTP-Protokoll
  • Browser und JavaScript Runtime
  • Web Standards und W3C

MATERIALIEN:

Einführung Web-Entwicklung JavaScript and the Browser Digital Humanities. Eine Einführung (S. 45-58)
5
SITZUNG 5

JavaScript Fundamentals 1 - Running JS | Values, Types, and Operators

Grundlagen von JavaScript: Ausführung, Datentypen und Operatoren

Themen
  • JavaScript ausführen (Browser Console, Node.js)
  • Primitive Datentypen (Number, String, Boolean)
  • Operatoren (arithmetisch, logisch, Vergleich)
  • Type Coercion und Konvertierung
  • Truthy und Falsy Values

MATERIALIEN:

Eloquent JavaScript: Introduction Eloquent JavaScript: Values, Types, and Operators JavaScript Fundamentals 1 JavaScript Fundamentals 1 JavaScript Shopping Cart Tutorial for Beginners

Aktivitäten:

  • Hands-on: Hello World in JavaScript
  • Hands-on: Mood Color Picker mit Bootstrap 5
6
SITZUNG 6

JavaScript Fundamentals 2 - Program Structures | Functions | Data Structures

Kontrollstrukturen, Funktionen und Datenstrukturen in JavaScript

Themen
  • Kontrollstrukturen (if, switch, loops)
  • Funktionen definieren und aufrufen
  • Scope und Closures
  • Arrays und Array-Methoden
  • Objects und Properties
  • JSON-Datenformat

MATERIALIEN:

Eloquent JavaScript: Program Structure Eloquent JavaScript: Functions Eloquent JavaScript: Data Structures JavaScript Fundamentals 2 Program Structure Functions Data Structures: Objects and Arrays

Aktivitäten:

  • Hands-on: Looping a triangle
  • Hands-on: FizzBuzz
  • Hands-on: Bean counting
  • Hands-on: Chessboard
  • Hands-on: More Mood for the Mood Color Picker
7
SITZUNG 7

JavaScript Fundamentals 3 - JSON | DOM | jQuery | Event Handling

Document Object Model, Event Handling und dynamische Webseiten

Themen
  • Document Object Model (DOM)
  • DOM-Manipulation (createElement, appendChild, etc.)
  • Event Handling und Event Listeners
  • JSON parsen und erstellen
  • Fetch API für HTTP-Requests
  • LocalStorage und SessionStorage

MATERIALIEN:

Eloquent JavaScript: The Document Object Model Eloquent JavaScript: Handling Events JSON | DOM | BuildTable.js Document Object Model (DOM) | BuildTable.js Event Handling Event Handling

Aktivitäten:

  • Hands-on: Fetch API verwenden
  • Hands-on: DOM-Manipulation und Event Handling
8
SITZUNG 8

JavaScript Fundamentals 4 - The Journey Just Started

Fortgeschrittene JavaScript-Konzepte und Best Practices

Themen
  • JavaScript Coding Styles und Best Practices
  • Object-oriented Programming in JavaScript
  • Arrow Functions (ES6)
  • Method Chaining
  • JavaScript Objects und Keyword 'this'
  • Cookies vs LocalStorage vs SessionStorage
  • Moderne JavaScript-Loops

MATERIALIEN:

JS Coding Styles and Best Practice JavaScript Fundamentals 4 Javascript Objects and Keyword this JavaScript Loops Made Easy JavaScript ES6 Arrow Functions Tutorial JavaScript Cookies vs Local Storage vs Session JavaScript and Object-oriented Programming JavaScript Method Chaining JavaScript Fetch API JavaScript Fundamentals 4 Advanced JavaScript Concepts Hands-On Session JS 4

Aktivitäten:

  • Hands-on: Advanced JavaScript Exercises

Ressourcen

Wesentliche Werkzeuge

Empfohlene Literatur