Frontend Development

# Section Expertise

Weiter geht es mit deinem Portfolio. Als nächstes erstellst du die "Expertise"-section. Diese soll Besuchern deiner Seite eine kurze Übersicht zu deinen drei Hauptfähigkeiten und Interessen bieten. Pro Expertise (Fähigkeit) benötigst du ein passendes Icon, einen Titel und einen kurzen Text.

# Icons finden und ablegen Aufgabe

Für diese section werden dir keine Icons vorgegeben oder bereitgestellt. Überlege kurz, welche Fähigkeiten du präsentieren möchtest und suche anschliessend im Internet nach passenden SVG-Icons. Warum gerade SVG als Grafikformat besonders geeignet ist, erfährst du später im Kapitel Grafiken, Bilder & Videos.

Kostenlose Icons im Internet finden

Achtung beim Urheberrecht

Ähnlich wie bei den Bildern gilt auch hier: Achte auf die Nutzungsbedingungen wenn du Icons integrierst. Die meisten Icons bei den oben gezeigten Links kannst du ohne Einschränkungen und ohne Nennung der Autoren nutzen. Es gibt jedoch auch welche, bei deren Verwendung du die Quelle auf deiner Website vermerken musst.

Du kannst natürlich auch eigene Icons in Illustrator zeichnen, falls es zeitlich für dich passt. Sobald du alle drei Icons hast, lege diese in den Ordner img/expertise.

# Expertise Markup Aufgabe

Gehe nun zurück in deine index.html-Datei und füge folgenden Code nach dem schliessenden </section>-Tag der "About"-section ein.

<!-- Nach der About section, innerhalb von <main> einfügen -->
<!-- Expertise section -->
<section id="expertise">
  <div class="section_title">
    <h3>Expertise</h3>
      <p class="section_subtitle">Das kann ich</p>
  </div>
  <div class="expertise_group">
    <div class="expertise_item">
      <div class="expertise_title">
        <div class="expertise_icon">
          <img src="img/expertise/brush.svg" alt="brush">
        </div>
        <h4>Digital Design</h4>
      </div>
      <p>Meine Ausbildung als Interaction Media Designer macht mich zur profesionellen Gestalterin für digitale Produkte. Von der ersten Idee bis zum Go-Live.</p>
    </div>
    <div class="expertise_item">
      <div class="expertise_title">
        <div class="expertise_icon blue">
          <img src="img/expertise/brackets.svg" alt="brackets">
        </div>
        <h4>Webdevelopment</h4>
      </div>
      <p>Nicht nur in Design-Tools, sondern auch im Code fühle ich mich zuhause. Dadurch bin ich auch in der Lage die Machbarkeit meiner Designs einzuschätzen.</p>
    </div>
    <div class="expertise_item">
      <div class="expertise_title">
        <div class="expertise_icon yellow">
          <img src="img/expertise/camera.svg" alt="camera">
        </div>
        <h4>Fotografie Design</h4>
      </div>
      <p>Gute Bilder sind enorm wichtig um ein Design hochwertig wirken zu lassen. Mit diesem Anspruch produziere ich oft die Bilder für meine Arbeiten selbst.</p>
    </div>
  </div>
</section>

Dateipfade zu Icons ersetzen

Achte darauf, dass du die Dateipfade zu den Icons in deinem Code überprüfst. Diese werden wohl nicht mit unserem Beispiel hier übereinstimmen, da du eigene Icons mit eigenen Namen verwendet hast.

Wie du siehst, gibt es kaum neue Tags, die hier verwendet werden. Es gibt wiederum eine section die den gesamten Bereich umschliesst, ein paar div-Tags, Untertitel der vierten Stufe h4, p-Tags um Textabsätze darzustellen und schliesslich das img-Tag für Bilder. All diese Dinge hast du bereits in der "About"-section eingesetzt.

# Expertise Styles Aufgabe

Zusätzlich zum HTML/Markup brauchst du natürlich auch wieder CSS/Styles, damit alles wie gewünscht aussieht. Öffne dazu deine style.css Datei und füge folgenden Code am Ende hinzu.

/* 
--------------------------------
Expertise section
--------------------------------
*/

.expertise_group {
  display: flex; /* Alle direkt untergeordneten Elemente nebeneinander darstellen */
  flex-wrap: wrap; /* Falls der Platz zu knapp wird, dürfen Elemente auf eine neue Zeile umbrechen */
  justify-content: space-between; /* Abstand zwischen den Elementen automatisch verteilen */
}

.expertise_item {
  flex-basis: 30%; /* 30% Breite pro Expertise = 90%. Die restlichen 10% werden zwischen den Items als Abstand verteilt */
}

.expertise_title {
  display: flex;
  align-items: center; /* Richtet Icon und Titel vertikal mittig aus */
}

.expertise_icon {
  display: flex;
  justify-content: center; /* Richtet das SVG innerhalb des Kreises horizontal mittig aus */
  align-items: center; /* Richtet das SVG innerhalb des Kreises vertikal mittig aus */
  border-radius: 50%; /* Maximale Abrundung der Box was zu einer Kreis-Darstellung führt */
  flex-shrink: 0; /* Dieses Element kann nicht kleiner als der Platzes werden den es mindestens braucht, um seinen eigenen Inhalt normal anzuzeigen */
  width: 3rem; /* Breite 3fach zur globalen Schriftgrösse */
  height: 3rem; /* Höhe 3fach zur globalen Schriftgrösse */
  background: #E26C76; /* Hintergrundfarbe festlegen */
  margin-right: 1rem; /* Aussenabstand nach rechts 1fach zur globalen Schriftgrösse */
}

.expertise_icon.blue {
  background-color: #02365E; /* Hintergrundfarbe für Klasse .blue festlegen */
}

.expertise_icon.yellow {
  background-color: #F5A623; /* Hintergrundfarbe für Klasse .yellow festlegen */
}

.expertise_icon img {
  max-width: 2.5rem; /* Limitiert die breite der Icons, muss möglicherweise individuell angepasst werden, je nach Icon */
}

# Überprüfen im Browser Aufgabe

Überprüfe nun im Browser, ob alles wie in der Vorlage vorgesehen (oder von dir gewünscht) dargestellt wird. Wenn du alles richtig gemacht hast, sollte die “Expertise”-section nun etwa so aussehen:

Expertise mit Styles

Passende Challenges

← Position & Transform →