2. Projektarbeit Bootstrap

CSS Logo

Inhaltsverzeichnis

Aufgabenstellung

Projekt: Einfache persönliche Portfolio-Website

Erstellung einer einfachen persönlichen Portfolio-Website mit Bootstrap.

Schritt 1: Recherche

  1. Recherchieren Sie zu Bootstrap und notieren Sie die Rechercheergebnisse
  2. Erstellen Sie einen neuen Ordner für Ihr Projekt.

Schritt 2: Grundgerüst der Website erstellen

  1. Erstellen Sie eine HTML-Datei (index.html).
  2. Fügen Sie das Grundgerüst von HTML hinzu (<!DOCTYPE html>, <head>, <body>, etc.).

Schritt 3: Bootstrap integrieren

  1. Binden Sie Bootstrap ein, indem Sie den Bootstrap-CDN-Link im <head> Ihrer HTML-Datei hinzufügen. Sie finden den Link auf der Bootstrap-Website.
  2. Überprüfen Sie, ob Bootstrap korrekt eingebunden ist, indem Sie eine Bootstrap-Komponente hinzufügen, z.B. einen Button.

Schritt 4: Inhalte und Struktur

  1. Erstellen Sie verschiedene Bereiche auf Ihrer Webseite, wie z.B. „Über mich“, „Projekte“, „Kontakt“.
  2. Verwenden Sie Bootstrap-Grid-System, um Ihre Inhalte ansprechend anzuordnen.

Schritt 5: Navigation und Layout

  1. Fügen Sie eine Navigationsleiste hinzu. Nutzen Sie dafür die Bootstrap-Navigationskomponenten.
  2. Stellen Sie sicher, dass Ihre Website responsive ist, d.h., dass sie auf verschiedenen Gerätegrößen gut aussieht.

Schritt 6: Inhalte hinzufügen

  1. Fügen Sie Texte und Bilder hinzu, die Ihre Fähigkeiten, Projekte und Erfahrungen darstellen.
  2. Achten Sie darauf, dass die Inhalte strukturiert und leicht zu lesen sind.

Schritt 7: Stilisierung und Anpassungen

  1. Passen Sie das Aussehen Ihrer Webseite an, indem Sie eigene CSS-Regeln hinzufügen. Sie können die Bootstrap-Klassen überschreiben, um ein individuelles Design zu erstellen.
  2. Experimentieren Sie mit verschiedenen Bootstrap-Komponenten, um das Design zu verbessern.

Schritt 8: Abschluss und Test

  1. Überprüfen Sie Ihre Website auf verschiedene Browser und Geräte, um die Kompatibilität sicherzustellen.
  2. Nehmen Sie ggf. erforderliche Anpassungen vor.

Tipps:

  • Nutzen Sie die Bootstrap-Dokumentation, um sich mit den verschiedenen verfügbaren Klassen und Komponenten vertraut zu machen.
  • Halten Sie das Design einfach und fokussieren Sie sich auf eine klare Struktur und Benutzerfreundlichkeit.
  • Experimentieren Sie mit verschiedenen Design-Elementen, aber vermeiden Sie es, die Seite mit zu vielen unterschiedlichen Komponenten zu überladen.