KW 4 – Omnifood Projekt - Desktop Version

Eine weitere Woche mit dem HTML und CSS-Kurs ist geschafft und das Abschlussprojekt „Omnifood“ nimmt so langsam Form an.

Zu Beginn des Kapitels ging es um allgemeine Fragen zum Start eines Projektes und wie man an eigene herangeht.

1. Definition:

Für wen ist die Webseite
Ziele der Webseite
Zielgruppe

2. Projektplan:

Sammeln des Webseitencontents
Sitemap
Sektionsübersicht

3. Layout und Component Ideen sammeln:

Inspirationen von Webseiten sammeln, z.B. Behance, Dribble, Landingfolio usw.
Erste Skizzen erstellen, mit Ideen experimentieren
„Es ist noch nichts in Stein gemeißelt“

4. Design und Webseite bauen:

Designguidelines festlegen, z.B. Schriftart(en), Farbe(n), Textgröße usw.
Erste Componenten und Layouts bauen

5. Test und Optimieren

Webseite in verschiedenen Browsern optimieren
Webseite für mobile Endgeräte optimieren
Bilder optimieren
über Search Engine Optimization (SEO) nachdenken

6. Launch

Hostingplattform suchen
Domainname suchen

7. Updaten und pflegen

Daten weiter pflegen
Über einen Blog nachdenken
Analytics Software um Besucher zu erfassen

Projekt Omnifood

Im Anschluss an diese Fragen ging es los mit dem Projekt, Setup sowie Ordnerstruktur und den 9 Sektionen, die erstellt werden:

Hero
Header + Navigation
How-It-Works
Feature In
Meals
Testimonials
Pricing + Features
Call-To-Action*
Footer*

*diese Woche nicht geschafft

Die einzelnen Lektionen waren wieder sehr schön aufeinander aufgebaut und jede Sektion hatte nochmal einige kleines Features, die etwas Neues für mich bereithielten, wie z.B. farbige Logos direkt grau färben oder einen kleinen Hover-Effekt bei den Bildern.

/* Logos grau färben */
.logos img {
  filter: brightness(0);
  opacity: 50%;
}

Wochenfazit

Ich hab die Länge des Kapitels mit 10,5h ein wenig unterschätzt, da ich auch nicht jeden Tag daran arbeiten konnte. Daher fehlen noch etwa 1,5h. Außerdem habe ich leider auch nicht weiter an Extra-Components gearbeitet.

Trotz alledem haben mir die geschauten Lektionen noch einmal einen positiven Schub gegeben, den ich in die nächste Woche mitnehmen werde.

Ausblick kommende Woche

Das aktuelle Kapitel werde ich kommende Woche zusammen mit Kapitel 8 über die Umsetzung vom Responsiven Layout beenden und anschließend mein eigenes kleines Projekt fortsetzen – dazu mehr in den nächsten Woche vielleicht.

KW 4 – Omnifood Projekt – Desktop Version