Abschlussprojekt - Microsoft Website Nachbau

Herzlichen Glückwunsch! Sie haben in den vorherigen Kapiteln die grundlegenden und fortgeschrittenen Konzepte von HTML und CSS kennengelernt. Nun ist es Zeit, dieses Wissen in einem praktischen Projekt anzuwenden: Dem Nachbau der Microsoft-Website.

Projektübersicht

In diesem Abschlussprojekt werden Sie die Hauptseite der Microsoft-Website nachbauen, wobei Sie sich auf die visuellen Elemente und das Layout konzentrieren. Dies gibt Ihnen die Möglichkeit, alle erlernten HTML- und CSS-Techniken in einem realen Szenario anzuwenden.

Lernziele

• Anwendung von semantischem HTML zur Strukturierung einer komplexen Website
• Implementierung von CSS-Layouttechniken (Flexbox und Grid)
• Erstellung von responsiven Designs für verschiedene Bildschirmgrössen
• Verwendung von CSS-Variablen für ein konsistentes Designsystem
• Umsetzung von Hover-Effekten und einfachen Übergängen

Anforderungen

Was nachgebaut werden soll

Bauen Sie die Hauptseite von Microsoft.com nach, wobei Sie folgende Elemente berücksichtigen:

1. Header mit Navigation:

   • Logo
   • Hauptnavigationsmenü
   • Suchsymbol und andere Icons oben rechts

2. Hero-Bereich:

   • Hauptbild mit Überschrift und Beschreibungstext
   • Call-to-Action-Button

3. Icon/Text:

   • Produkt-Icons und Links (Surface-Geräte kaufen, Xbox-Spiele und Konsolen kaufen, …)

4. Inhaltsabschnitte:

   • 4 Kacheln mit Produkten (Bild, Überschrift, Absatz, Call-to-Action Button)
   • Hero-Banner
   • Für Unternehmen

5. Footer:

   • Mit 6-spaltiger Menüführung, restliche Punkte nicht umsetzen.

Was NICHT implementiert werden muss

• JavaScript-Funktionalität
• Animierte Slider/Karussells
• Dropdown-Menüs, die JavaScript erfordern
• Tatsächliche Suchfunktionalität
• Dynamische Elemente wie wechselnde Banner

Projektvorgaben

Dateistruktur

Erstellen Sie folgende Dateien:

microsoft-projekt/
│
├── index.html         # Hauptdatei für HTML-Struktur
├── style.css          # CSS-Stylesheet für das gesamte Projekt
└── images/            # Ordner für alle Bilder
    ├── logo.png
    ├── hero.jpg
    ├── product1.jpg
    ├── product2.jpg
    └── ...

HTML-Struktur

Erstellen Sie selbst eine passende Struktur, um die Microsoft-Website nachzubauen.

CSS-Empfehlungen

Für Ihr CSS-Stylesheet können Sie folgende Techniken verwenden:

• CSS-Variablen für konsistente Farben, Abstände und Typografie
• Flexbox für eindimensionale Layouts (wie die Navigation)
• CSS Grid für zweidimensionale Layouts (wie die Produktkacheln)
• Media Queries für responsive Designs
• Pseudo-Klassen für Hover-Effekte
• CSS-Transitions für sanfte Übergänge

Hier ist ein Grundgerüst für Ihre CSS-Datei:

:root {
  /* Farben */
  --ms-blue: #0078d4;
  --ms-black: #000;
  --ms-white: #fff;
  --ms-gray: #f2f2f2;
  --ms-dark-gray: #747474;

  /* Typografie */
  --ms-font: "Segoe UI", Arial, sans-serif;

  /* Abstände */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

/* Reset und Basis-Stile */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ms-font);
  color: var(--ms-black);
  line-height: 1.5;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Header und Navigation */
header {
  /* Ihre Stile hier */
}

/* Hero-Bereich */
.hero {
  /* Ihre Stile hier */
}

/* Produktkacheln */
.product-tiles {
  /* Ihre Stile hier */
}

/* Weitere Abschnitte... */

/* Footer */
footer {
  /* Ihre Stile hier */
}

/* Stile für Tablets */
@media (min-width: 768px) {
}

/* Stile für Desktops */
@media (min-width: 1200px) {
}

Schritt-für-Schritt-Anleitung

Schritt 1: Analyse der Microsoft-Website

Besuchen Sie Microsoft.com und analysieren Sie:

• Die allgemeine Struktur und Hierarchie der Seite
• Farbschema und Typografie
• Layouts der verschiedenen Abschnitte
• Responsive Verhaltensweisen auf verschiedenen Bildschirmgrössen

Tipp: Nutzen Sie die Browser-Entwicklertools (F12), um das Design und die CSS-Eigenschaften zu untersuchen.

Schritt 2: HTML-Struktur aufbauen

Erstellen Sie zuerst die grundlegende HTML-Struktur Ihrer Seite:

1. Header mit Logo und Navigation
2. Hero-Bereich
3. Produktkacheln
4. Weitere Inhaltsabschnitte
5. Footer

Verwenden Sie semantische HTML-Elemente wie <header>, <nav>, <main>, <section>, <article> und <footer>.

Schritt 3: Basis-CSS-Stile definieren

Legen Sie grundlegende Stile fest:

1. CSS-Variablen für Farben, Typografie und Abstände
2. Reset-Stile und grundlegende Typografie
3. Container-Klassen für konsistente Breiten

Schritt 4: Header und Navigation stylen

Erstellen Sie einen responsiven Header mit:

• Flexbox für die Navigationsleiste
• Positionierung des Logos und der Menüpunkte
• Styling der Navigationslinks und Icons

Schritt 5: Hero-Bereich gestalten

Stylen Sie den Hero-Bereich mit:

• Hintergrundbild oder -farbe
• Positionierung des Textes und der Buttons
• Responsive Anpassungen für verschiedene Bildschirmgrössen

Schritt 6: Produktkacheln implementieren

Verwenden Sie CSS Grid oder Flexbox, um:

• Ein Raster mit Produktkacheln zu erstellen
• Bilder, Icons und Text zu stylen
• Hover-Effekte für die Kacheln hinzuzufügen

Schritt 7: Weitere Inhaltsabschnitte gestalten

Stylen Sie die verbleibenden Abschnitte mit:

• Konsistenten Abständen und Typografie
• Passenden Bildgrössen und -positionierungen
• Responsive Layouts für verschiedene Bildschirmgrössen

Schritt 8: Footer erstellen

Implementieren Sie den Footer mit:

• Grid oder Flexbox für die Linkbereiche
• Styling der Kategorien und Links
• Responsive Anpassungen für Mobile

Schritt 9: Responsives Design optimieren

Fügen Sie Media Queries hinzu, um sicherzustellen, dass Ihre Website auf allen Geräten gut aussieht:

• Mobilgeräte (< 768px)
• Tablets (768px - 1200px)
• Desktop (> 1200px)

Ressourcen und Tipps

Bilder und Assets

• Sie können Screenshots der Microsoft-Website für Bilder verwenden oder ähnliche kostenlose Stockfotos von Seiten wie Unsplash oder Pexels
• Für Icons können Sie Font Awesome oder Material Icons verwenden

Nützliche Tools

• ColorZilla Browser-Erweiterung zum Erfassen von Farben
• FontNinja zum Identifizieren von Schriftarten
• Responsive Design Checker zum Testen Ihrer Website

Tipps für das Projekt

1. Fokussieren Sie sich auf das Layout: Konzentrieren Sie sich zuerst auf die Struktur und das Layout, bevor Sie Details hinzufügen.
2. Mobile-First-Ansatz: Beginnen Sie mit dem Design für mobile Geräte und erweitern Sie dann für grössere Bildschirme.
3. Wiederverwendbare Komponenten: Erstellen Sie wiederverwendbare CSS-Klassen für ähnliche Elemente.
4. Progressive Enhancement: Bauen Sie grundlegende Funktionalität zuerst, dann fügen Sie Verfeinerungen hinzu.
5. Regelmässiges Testen: Testen Sie Ihre Website regelmässig in verschiedenen Browsern und auf verschiedenen Geräten.

Abgabe

Abgabe

Reichen Sie Ihr Projekt wie folgt ein:

1. Komprimieren Sie Ihren Projektordner zu einer ZIP-Datei
2. Reichen Sie die Datei über MS Teams (Aufgabe) innerhalb der vorgegebenen Frist ein.

Fazit

Dieser Microsoft-Website-Nachbau bietet Ihnen die Gelegenheit, Ihre HTML- und CSS-Kenntnisse in einem realen Projekt anzuwenden. Sie werden nicht nur technische Fähigkeiten verbessern, sondern auch Einblicke in das Design und die Struktur einer professionellen Website gewinnen.

Viel Erfolg bei Ihrem Projekt!