Kursprojekt 01 – Div-Tags

Kursprojekt 02 – Fußzeile

Stelle sicher, dass die HTML-Fußzeile mit dem Mockup in deinen Übungsdateien übereinstimmt:
1. Übungsdateien > Projekt 1 > Mockup-Beispiel – Project 1.jpg
Es muss nicht pixelperfekt sein. Errate einfach die Größen und Abstände.
Anforderungen
1. Ignoriere die Karte in der Mitte (wir machen das später gemeinsam).
2. Habe Abstände über und unter der Fußzeile.
3. Der Fußzeilentext lautet: Main St, Blackabbey, Adare, Co. Limerick – Copyright 2017©
4. Lege den Text in ein
  -Tag und gestalte den Text so, dass er zum Mockup passt.
5. Hintergrundfarbe ist schwarz, was transparent ist.
Erstelle einen Screenshot deiner beiden fertigen Seiten in Chrome und teile ihn, um zu zeigen, dass du es in einer oder allen der folgenden Punkte getan hast:
1. Aufgabenbereich dieser Website
2. Füge Kommentaren auf der Seite hinzu.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook-Gruppe hier. #byolweb

Kursprojekt 03 – Flexbox-Header

Füge das Logo und Nav zur Kopfzeile unserer Website hinzu, indem du deine neuen Flexbox-Fähigkeiten verwendest.
Deine Seite sieht am Ende wie folgt aus:

Übungsdateien > Projekt 2 > Kursprojekt 3.png
Voraussetzungen:
1. Hinzufügen einer Hintergrundfarbe zur gesamten Website von: #FC5E55
2. Erstelle ein Logo und ein Nav-Feld innerhalb des Header-Tags.
3. Füge das Logo dem Logo-Feld hinzu.
  1. Bild ist in: Übungsdateien > Projekt 2 > logo-roar-bikes.png
4. Füge dem
  -Feld Text hinzu, aber erstelle sie noch keine Links oder Buttons, nur einfacher alter Text:
  1. Online buchen Über Kontakt
5. Mache das Nav richtig ausgerichtet.
6. Entferne die Hintergrundfarbe und die Höhe des Headers.
7. Füge oben und unten im Header eine Polsterung hinzu.
8. Achte darauf, dass sowohl das Logo als auch das Nav vertikal zentriert sind.
Erstelle einen Screenshot deiner beiden fertigen Seiten in Chrome und teile ihn, um zu zeigen, dass du es in einer oder allen der folgenden Punkte getan hast:
1. Aufgabenbereich dieser Website
2. Füge Kommentaren auf der Seite hinzu.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook-Gruppe hier. #byolweb

Kursprojekt 04 – Nav-Button

Ziel: Deinen eigenen Button-Kurs zu erstellen, der wie folgt aussieht:

bafd7de7

Du lässt „mybutton“ auf die Heldenbox angewendet, aber erstelle einen neuen Stil namens „navbutton“ und wende ihn auf deine Navigation an.
Anforderungen
1. Sie sind alle -Tags.
2. Erstelle deinen eigenen benutzerdefinierten Kurs namens „navbutton“.
3. Weißer Rand um den Button.
4. Text ist Playfair Display.
5. Text ist weiß
6. Keine Unterstreichung.
7. Keine Hintergrundfarbe.
Erstelle einen Screenshot deiner beiden fertigen Seiten in Chrome und teile ihn, um zu zeigen, dass du es in einer oder allen der folgenden Punkte getan hast:
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop #byolweb
  2. Twitter: @danlovesadobe #byolweb
  3. Facebook-Gruppe hier. #byolweb

Kursprojekt 05 – Header-Design

Ziel: Diesen Header neu erstellen:

5b5a840f