Webseite mit HTML und CSS umsetzten

[da-vid]

Hallo,

unsere Aufgabe ist es eine einfache kleine Shop Webseite in HTML und CSS umzusetzen. Dafür werden wir benotet. Deshalb ich möchte von euch keinen fertigen Code haben sondern eher Anregungen wie ich dieses hoffentlich einfache Design umsetzten kann.

Ich glaube es gab CSS-Frameworks (wenn das der richtige Begriff dafür ist) wie Bootstrap etc. das ist dann am Ende glaube ich nicht mehr so modular und du musst auch und evtl. vor allem hier wissen was du machst - vielleicht ist es aber eine Option - zumindest mit Blick auf die Zeit

Zum Aufbau:

1. Oben Links kommt ein Fiktives Logo rein
2. Rechts davon der Login für den Warenkorb / Service und Mein Konto
3. Darunter die Navigation (1)
4. Der erste Graue Kasten links, ist für eine Subnavigation
5. Der zweite graue Kasten ist für den Content
6. Rechts Platz für Angebote und Social Media Icons

(1) Wenn auf Nav 1 geklickt wird, soll der blaue Balken mitwandern, sprich das Haus wird Grau hinterlegt (wie jetzt die Nav Punkte) und hat keine durchgezogene Line (wie die jetzigen Nav Punkte), dafür aber Nav1 (wie jetzt das Haus)

Der Content soll immer in drei Teile aufgebaut sein. Ist es hier ratsam mit drei DIVs zuarbeiten und diese nach links zu floaten oder lieber mit flexboxen zu arbeiten?

Ich habe persönlich bisher mit Divs und float gearbeitet (kann aber auch sein dass ich eher ein Anfänger bin und das aus Unwissenheit so gemacht habe)

Wir müssen den IE 8 / 9 nicht berücksichtigen. Schön wäre wenn es im IE alles funktioniert. Das große Hintergrundbild liege ich als Background in den Head. Der Rahmen um die Seite lege ich in den Body, somit kann ich auf das Div wrapper verzichten.

Man kann Hintergrundbilder im head definieren? Gut zu wissen :D (siehe Anfänger ;) )

Ich bin für jeden ernst gemeinten Hinweis dankbar. Das Mobile sollte irgendwann ein Thema werden, zum Start erstmal nicht, da ich hier im KA leider nur begrenze Möglichkeiten habe.

...so eine Shopseite ist ja gefühlt schon was größeres, aber wenn du dir am Anfang ein paar Gedanken machst kannst du da später mit media-queries etc. gut drauf aufbauen. (siehe auch: Repsonsive Webdesign)

Tipp: Schau dir mittels F12 an wie das andere Webseiten machen und lerne aus ihrem Aufbau - natürlich nur wenn du diesen für gut hälst / nachdem du verstanden hast was da steht :)