HTML5 & CSS3 – Einführungskurs

Übung 1: Visitenkarte

Eine Visitenkarte auf dem Bildschirm zentrieren – einmal mit Flexbox, einmal mit Grid

CSS Flexbox CSS Grid Media Queries Google Fonts Font Awesome

Ziel der Übung

Eine Visitenkarte soll exakt in der Mitte des Browserfensters erscheinen – sowohl horizontal als auch vertikal. Egal wie groß oder klein das Fenster ist, die Karte bleibt immer zentriert.

Meine Firma ◈

Vorname Name
Musterstraße 12a · 12345 Musterstadt
+49 (0) 123 456 789
mail@meinefirma.de
meinefirma.de

Die Karte liegt immer in der Mitte des Viewports, der Hintergrund füllt die gesamte Seite.

Du erstellst diese Übung zweimal: einmal mit Flexbox, einmal mit CSS Grid. Beide Techniken können diese Zentrierung lösen – eine gute Möglichkeit, um ein Gefühl für den Unterschied zu entwickeln.

Version A

visitenkarte-flex.html
Zentrierung mit Flexbox

Version B

visitenkarte-grid.html
Zentrierung mit CSS Grid

Hinweis: Das CSS, welches beide Varianten verwenden, kommt in die externe Datei css/visitenkarte.css (z.B. Hintergrundbild, Formatierung Visitenkarte, ...). Beide HTML-Dateien verwenden dieselbe CSS-Datei – nur die Layout-Anpassungen für die Flex- bzw. Grid-Lösung unterscheidet sich. Diesen Layout-Block schreibst du direkt als <style>-Tag in den <head> der jeweiligen HTML-Datei.
Das Hintergrundbild kannst du hier herunterladen: parkett.jpg

1Dateien anlegen

Folgende Struktur bitte neu anlegen:

TAG3/
  ├── visitenkarte-flex.html
  ├── visitenkarte-grid.html
  ├── css/
      └── visitenkarte.css
  ├── img/
      └── parkett.jpg
  └── fontawesome/

2HTML-Struktur

Beide HTML-Dateien haben exakt die gleiche Struktur. Im <head> bindest du einen Google Font deiner Wahl sowie FontAwesome ein, außerdem die externe CSS-Datei und einen <style>-Block für das Layout:

<!-- Google Font (deiner Wahl) -->
<link href="..." rel="stylesheet">

<!-- FontAwesome -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">

<!-- Externe CSS-Datei -->
<link rel="stylesheet" href="css/visitenkarte.css">

<!-- Layout-CSS (Flex oder Grid) -->
<style>
    /* hier kommt dein Flex- bzw. Grid-Code */
</style>

Der Body enthält nur ein einziges <section>-Element, das die Karte als <div> umschließt:

<section>
    <div>
        <h1>Firmenname <i class="fa fa-... fa-pull-right"></i></h1>
        <p>
            Vorname Name<br>
            Straßeweg 12a<br>
            12345 Orthausen<br>
            <a href="tel:+49123456789">+49 (0) 123 456 789</a><br>
            <a href="mailto:mail@firma.de">mail@firma.de</a><br>
            <a href="https://firma.de">firma.de</a>
        </p>
    </div>
</section>

Das Icon im <h1> wählst du selbst aus FontAwesome – such dir eines aus, das zum Firmennamen passt. Mit der Klasse fa-pull-right wird es an den rechten Rand der Überschrift gesetzt.

3CSS (`visitenkarte.css`)

Die externe CSS-Datei stylt die Karte selbst: Hintergrund, Schrift, Schatten. Hier sind die Aufgaben:

Hintergrund

Das <body>-Element bekommt das Bild img/parkett.jpg als Hintergrundbild. Außerdem setzt du hier deinen Google Font als font-family ein.

Die Karte (`div`)

Das <div> innerhalb von <section> ist die eigentliche Visitenkarte. Gestalte sie so, dass sie wie eine echte Karte aussieht: weißer Hintergrund, etwas Innenabstand, ein deutlicher Schatten (box-shadow).

Schriften

Verwende deinen eingebundenen Google Font für den Fließtext. Für die Überschrift kannst du eine zweite Schrift wählen – oder du nimmst dieselbe mit einem anderen Gewicht.

Links

Die Links im <p> sollen keine Unterstreichung haben und die Textfarbe der Umgebung erben. Schau dir an, ob du vor jeden Link passend dazu ein FontAwesome-Icon setzen kannst – z. B. ein Telefon-Icon vor der Telefonnummer.

Tipp: Icons vor Links lassen sich mit dem CSS-Pseudoelement ::before und dem Attributselektor a[href^="tel"] automatisch einsetzen – du musst sie dann nicht im HTML einzeln tippen. Das ist optional, aber elegant.

4Layout – Zentrierung im Viewport

Der eigentliche Unterschied zwischen den beiden Dateien steckt hier: Das <section>-Element soll den gesamten Viewport ausfüllen (100vw × 100vh) und das <div> darin zentrieren.

Version A – Flexbox (`visitenkarte-flex.html`)

Mit Flexbox lässt sich eine einzelne Karte sehr direkt zentrieren. Überlege, welche zwei Eigenschaften zusammen dafür sorgen, dass das Kind-Element sowohl horizontal als auch vertikal mittig sitzt.

Version B – CSS Grid (`visitenkarte-grid.html`)

Mit Grid definierst du ein Raster aus drei Spalten und drei Zeilen – die mittlere Spalte und Zeile sind variabel breit bzw. hoch, die äußeren nehmen den restlichen Platz ein. Die Karte landet in der mittleren Zelle.

5Responsive Design

Ergänze in beiden Dateien je einen oder zwei @media-Blöcke, die die Schriftgröße auf kleineren Bildschirmen anpassen. Auf einem Smartphone wirkt dieselbe Schriftgröße oft zu klein – eine größere font-size auf body reicht hier als Einstieg.

Sinnvolle Breakpoints für diese Übung: 768 px und 480 px.

CSS-Eigenschaften in dieser Übung

Folgende Eigenschaften werden hier u.a. eingesetzt, manche davon sind eventuell neu:

background mit url() – Hintergrundbild setzen
box-shadow – Schatten unter der Karte
box-sizing: border-box – Padding verringert die Breite, statt sie zu vergrößern
display: flex / display: grid – Zentrierungstechniken
height: 100vh / width: 100vw – Viewport-Einheiten
column-count – Text in mehrere Spalten aufteilen
a[href^="..."]::before – Icon automatisch vor Links setzen (optional)
@media (max-width: …) – Schrift auf kleinen Bildschirmen anpassen

Für mehr Hintergrundwissen zu den neuen CSS-Eigenschaften lese in einer Referenz nach (z.B. W3Schools)