HTML Schnellstart / HTML Schnellstart Modul 3
0%
In Bearbeitung

Coding-Challenge: Erstelle ein Webseitenlayout

Nun erstellen wir ein simples Webseitenlayout.

Wie funktioniert diese Challenge?

  1. Diese Coding-Challenge besteht aus 5 verschiedenen Aufgaben.
  2. Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

Starten wir mit der ersten Aufgabe:

1. HTML-Grundstruktur einbauen

Verwende folgende HTML-Struktur (die kann sich fast niemand merken!):

<!DOCTYPE html>
<html lang="de-DE" id="html">
  <head>
  
  </head>
  <body>
  
  </body>
</html>

 

2. Layout definieren: Flexbox

Erstelle passende div-Elemente um ein Flexbox-Layout zu erstellen. Wir wollen eine 1/4 große Seitenleiste und eine 3/4 breiten Inhaltsbereich.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<div style="display:flex;">
  <div style="flex:1">

  </div>
  <div style="flex:3">
      
  </div>
</div>

[/lp_spoiler]

 

3. Inhalte einfügen: Seitenleiste & Inhaltsbereich

Erstelle auf jedem Bereich eine Überschrift und einen Textabsatz. Außerdem soll der Inhaltsbereich einen eigenen div-Bereich als Header erhalten.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<div style="display:flex;">
  <div style="flex:1">
    <h2>Seitenleiste</h2>
    <p>Wichtige Information!</p>
  </div>
  <div style="flex:3">
    <div>
      <h1>Header</h1>
    </div>
    <div>
      <h1>Inhalt</h1>
      <p>Mein Text, mein Inhalt, Mein Layout, mein Block. </p>
    </div>
  </div>
</div>

[/lp_spoiler]

4. Layout definieren: Footerbereich

Erstelle ein neues div als Footerbereich unter dem Layout mit einer Überschrift.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

  <div>
    <h1>Footer</h1>
  </div>

[/lp_spoiler]

5. Simples Menü erstellen

Erstelle 3 Menüpunkte in der Seitenleiste mit dem a-Element:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<div> <a href="#">Home</a> <a href="#">Shop</a> <a href="#">Über mich</a> </div>

[/lp_spoiler]