01 Grundlagen und Einführung

01 Grundlagen und Einführung Cover Bild

Präsentationsfolien

Ziel des Kurses

Zeitplan, Termine, Abgaben

27.11.25 Zwischenabgabe & Präsentation Ein ausgearbeitetes Portfolio Design in Figma für Desktop und Mobile. Tablet-Ansicht ist ist optional. Die Webseite sollte aus mindestens zwei einzelnen Seiten bestehen und Arbeiten gut darstellen. Ein Figma Link per e-Mail ist ausreichend als Abgabe, es muss aber in der Unterrichtsstunde präsentiert werden (max. 2-3 min).

22.01.26 Abgabe & Abschlusspräsentation Eine persönliche Portfolio-Website, die Ihre fotografischen Arbeiten professionell präsentiert. Die Umsetzung soll dem UI-Design entsprechen, responsive funktionieren und technisch sauber implementiert sein. Ein Link ist ausreichend, kann aber auch als .zip angeliefert werden. Für die Präsentation müssen Sie ihre Webseite in 3-5min. präsentieren.

Bewertungskriterien

alt text

Das Internet: Ein globales Netzwerk

Das Internet ist wie ein riesiges Postverteilungszentrum

Grundprinzip:

Client-Server Architektur

Client = Der Fragesteller

Server = Der Antworter

Diagram Internet

Domain, Hosting, Browser, DNS

Domain

Hosting

Browser

DNS (Domain Name System)

Was passiert, wenn ich eine URL eingeben?

Schritt für Schritt: www.instagram.com

  1. DNS-Lookup: Browser fragt “Wo ist instagram.com?”
  2. IP-Adresse: DNS antwortet “Bei 157.240.15.35”
  3. Verbindung: Browser kontaktiert diesen Server
  4. Anfrage: “Schick mir die Instagram-Startseite”
  5. Antwort: Server sendet HTML, CSS, JavaScript-Dateien
  6. Darstellung: Browser baut die Seite zusammen

Die drei Säulen des Web

HTML - Die Struktur

Hypertext Markup Language

CSS - Das Aussehen

Cascading Style Sheets

JavaScript - Die Interaktion

HTML Beispiel

<!DOCTYPE html>
<html>
<head>
    <title>Mein Portfolio</title>
</head>
<body>
    <h1>Max Mustermann</h1>
    <p>Fotograf aus München</p>
    <img src="portrait.jpg" alt="Portrait">
</body>
</html>

Das sieht der Browser:

Vorschau HTML Beispiel

Edit Kurs / 01 Einführung: Vereinfachtes Code Beispiel

CSS Beispiel

h1 {
  color: #333;
  font-size: 48px;
  font-family: 'Helvetica', sans-serif;
}

p {
  color: #666;
  font-size: 18px;
  line-height: 1.5;
}

img {
  width: 300px;
  border-radius: 10px;
}

Jetzt wird aus der langweiligen HTML-Seite:

Vorschau HTML + CSS Beispiel

Responsive Design

Die Herausforderung:

Eine Website muss auf allen gut aussehen, daher müssen wir Anpassungen für verschiedenen Bildschirmgrößen vornehmen

Responsive Beispiel Bild Quelle

Inspirationsquellen für Webdesign

Gute Inspirationen im Bereich Webdesign sind nicht immer leicht zu finden, aber es gibt einige Websites, die ich auf jeden Fall empfehlen kann. Diese legen großen Wert auf hochwertiges Webdesign und präsentieren Beispiele aus der Praxis – nicht nur UI-Designs, die auf Screenshots vielleicht toll aussehen, aber in der Praxis nicht wirklich funktionieren. Viele Designs von Dribbble und Behance scheitern, weil sie aus UX-Sicht nicht funktionieren.

Als (Web)Designer sollte man:

Achten Sie auf:

Praxis: Unsere erste HTML/CSS Seite

Wir erstellen gemeinsam:

Sie lernen dabei:

Edit 01_02: Praxis Start

HTML Praxis

HTML Grundstruktur

<!-- index.html -->

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Max Mustermann - Fotograf</title>
	</head>
	<body>
		<!-- Header-Bereich mit Name und Beruf und Instagram -->
		<header>
			<h1>Max Mustermann</h1>
			<p>Fotograf aus München</p>

			<a
				href="https://instagram.com/d.tampe"
				target="_blank"
				style="margin-top: 10px; display: inline-block"
			>
				<img
					src="https://api.iconify.design/ph:instagram-logo.svg"
					style="width: 24px"
				/>
			</a>
		</header>

		<!-- Hauptinhalt der Seite -->
		<main>
			<section class="portfolio">
				<h2>Meine Arbeiten</h2>
				<p>Spezialisiert auf Portraits</p>

				<!-- Bildergalerie mit 6 Beispielbildern -->
				<div class="gallery">
					<div class="gallery-item">
						<img src="/images/01.webp" alt="Bild 1" />
					</div>
					<div class="gallery-item">
						<img src="/images/02.webp" alt="Bild 2" />
					</div>
					<div class="gallery-item">
						<img src="/images/03.webp" alt="Bild 3" />
					</div>
					<div class="gallery-item">
						<img src="/images/04.webp" alt="Bild 4" />
					</div>
					<div class="gallery-item">
						<img src="/images/05.webp" alt="Bild 5" />
					</div>
					<div class="gallery-item">
						<img src="/images/06.webp" alt="Bild 6" />
					</div>
				</div>
			</section>
		</main>
	</body>
</html>

HTML Only Praxis

CSS Styling hinzufügen

Um die Webseite ansprechend zu gestalten und die Bilder optimal anzuordnen, stylen wir die Seite mit CSS. Dies umfasst die Implementierung einer Galerie mit drei Spalten, in der die Bilder gleichmäßig hoch dargestellt werden. Dafür muss die Datei style.css erstellt werden und auch in die index.html Datei eingebunden werden.

<!-- index.html -->
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Max Mustermann - Fotograf</title>
	<link rel="stylesheet" href="style.css" /> <!-- <- Diese Zeile -->
</head>
<body>
<!-- [...] -->
/* style.css */

/* Reset: Entfernt Browser-Standard-Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Grundlegende Body-Styles */
body {
  font-family: -apple-system, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Header-Styling mit grauem Hintergrund */
header {
  padding: 60px 20px;
  text-align: center;
  background-color: #f8f8f8;
}

/* Große Hauptüberschrift */
h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

/* Portfolio-Sektion mit begrenzter Breite und zentriert */
.portfolio {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Bildergalerie als CSS Grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten auf Desktop */
  gap: 20px; /* Abstand zwischen den Bildern */
  margin-top: 40px;
}

/* Styling für die Galerie-Bilder */
.gallery-item img {
  width: 100%; /* Bild füllt Container aus */
  height: 250px; /* Feste Höhe für einheitliches Raster */
  object-fit: cover; /* Bild wird zugeschnitten, behält Proportionen */
  border-radius: 8px; /* Abgerundete Ecken */
  transition: transform 0.3s ease; /* Weiche Animation für Hover-Effekt */
}

HTML + CSS Praxis

Hausaufgabe

Aufgabe: Finden Sie 3 inspirierende Portfolio-Websites

Tipps: Nutzen Sie die vorgestellten Quellen als Startpunkt