Frontend Development

# Section About Markup

Erstelle nun den ersten Bereich “About”, der später dein Bild sowie Name, Beruf und eine kurze Beschreibung umfassen soll. Dazu benötigst du eine section und mehrere div-Tags.

Damit du später weisst, welches Element welchen Inhalt hat und du diese unabhängig voneinander manipulieren kannst, fügst du zu jedem dieser div-Tags eine class hinzu. Die section erhält eine id, da sie nur einmal im Dokument vorkommen wird. Diese IDs wirst du später noch benötigten, um die Navigation funktionstüchtig zu machen.

# Markup Aufgabe

<!-- innerhalb von <main> einfügen -->
<!-- About section -->
<section id="about">
  <div class="about_content">
    <div class="about_text">
      <!-- Hier fügst du gleich deinen eigenen Inhalt ein -->
    </div>
    <div class="about_social">
      <!-- Hier fügst du gleich deine Social-Media Links ein-->
    </div>
  </div>
  <div class="about_image">
    <!-- Hier fügst du gleich dein Bild ein -->
  </div>
</section>

# Hinterlegen erster Bilder Aufgabe

Im Kapitel Setup hast du die Ordnerstruktur für dein Portfolio erstellt. Dabei solltest du auch einen img-Ordner erstellt haben. Diesen benötigst du nun, um Bilder und Icons in deinem HTML einzufügen. Für eine bessere Übersicht solltest du den img-Ordner in weitere Unterordner mit dem Namen der jeweiligen Bereiche unterteilen. Wir empfehlen dir für dieses Portfolio folgende Unterordner: social, about, expertise,work.

Sobald du diese Ordner erstellt hast, kannst du im Ordner about ein Bild von dir, oder eines deiner Wahl ablegen. Im Ordner social kannst du Icons von sozialen Netzwerken und Plattformen ablegen, auf denen du ein Profil hast.

Social Media Icons herunterladen

Wir haben für dich passende Icons in der richtigen Grösse für verschiedene Plattformen herausgesucht. Du kannst diese Icons hier herunterladen und anschliessend in deinem social Ordner ablegen. Später im Kurs wirst du auch mit eigenen Icons arbeiten.

Etwa so sollten deine Ordner nun aussehen:

Ordnerstruktur Bilder

# Einfügen erster Inhalte Aufgabe

Nachdem du die Struktur erstellt hast, kannst du nun persönliche Angaben, die Social-Media Links und ein Bild einfügen.

Um den Text besser formatieren zu können, benutze die h1–h6 Tags. “H” steht hierbei für “Heading” (Überschrift). Um externe Seiten oder auch Mailadressen zu verlinken, brauchst du das a tag.

<!-- Section About -->
<section id="about">
  <div class="about_content">
    <div class="about_text">
      <h1>Hallo, <br>ich bin Jane.</h1>
      <h2>Designer & Developer</h2>
      <p>
        Ein gutes Produkt verbindet Funktionalität mit Emotionen und Persönlichkeit. Mit diesem Anspruch, Präzision und viel Leidenschaft entwickle ich digitale Dienste und interaktive Erlebnisse.
      </p>
    </div>
    <div class="about_social">
      <a href="https://tiktok.com/jane">
        <img src="img/social/tiktok.svg" alt="tiktok">
      </a>
      <a href="https://instagram.com/jane">
        <img src="img/social/instagram.svg" alt="instagram">
      </a>
      <a href="mailto:hello@janedoe.com">
        <img src="img/social/email.svg" alt="email">
      </a>
    </div>
  </div>
  <div class="about_image">
    <img src="img/about/jane.jpg" alt="jane">
  </div>
</section>

Achtung beim Urheberrecht

Verwende ausschliesslich Medien (Bilder, Videos, Icons etc.) bei denen du das Urheberrecht besitzt, oder bei denen die kostenlose Verwendung explizit erlaubt wurde. Kostenlose Bilder findest du beispielsweise bei unsplash, pixabay oder auch pexels

# Im Browser ansehen Aufgabe

Gratulation, du hast den ersten Schritt geschafft und den ersten Bereich deines Portfolios in HTML geschrieben. Gehe nun im Finder (MacOS) oder Explorer (Windows) zu deinem Portfolio-Ordner und mache einen Doppelklick auf die index.html-Datei. Diese sollte sich nun im Browser öffnen.

Wenn du alles richtig gemacht hast, sollte das in etwa so aussehen: Ordnerstruktur Bilder

Das sieht natürlich noch nicht so aus wie in der Portfolio-Vorlage. Strukturell ist aber alles da, was du zum fortfahren benötigst. Im nächsten Schritt zeigen wir dir nun CSS, damit du deine Website wie in der Vorlage gestalten kannst.

← Einführung CSS →