Frontend Development

# Section Career

Weiter geht es mit deinem Portfolio. Als nächstes kümmerst du dich um die “Career”-section. Hier zeigst du die beruflichen und schulischen Stationen aus deinem Lebenslauf.

Die Vorlage ist wie eine Timeline (Zeitstrahl) aufgebaut. Es gibt pro Station in deiner Laufbahn einen Datumsbereich und einen dazugehörigen Text. Zur visuellen Unterstützung erhält jede einzelne Station einen Kreis, der mit einer Linie zur vorherigen Station verbunden ist.

# Career Markup Aufgabe

Gehe nun wieder in deine index.html-Datei und füge folgenden Code nach dem schliessenden </section>-Tag der “Work”-section ein.

<!-- Nach der Work section, innerhalb von <main> einfügen -->
<!-- Career section -->
<section id="career">
  <div class="section_title">
    <h3>Career</h3>
    <p class="section_subtitle">Das ist mein Werdegang</p>
  </div>
  <div class="career_group">
    <div class="career_item">
      <span class="career_date">2020 - heute</span>
      <div class="career_timeline"></div>
      <div class="career_text">
        <h5>Ausbildung Interactive Media Designer</h5>
        <p>Zurzeit absolviere ich die 4-jährige Berufslehre zum Interactive Media Designer. Dabei arbeite ich neben der Schule drei Tage pro Woche im Lehrbetrieb XY.</p>
      </div>
    </div>
    <div class="career_item">
      <span class="career_date">Aug - Dez 2019</span>
      <div class="career_timeline"></div>
      <div class="career_text">
        <h5>Gestalterischer Vorkurs</h5>
        <p>Um mich best möglich auf die IMD Ausbildung  vorzubereiten, habe ich während drei Monaten den gestalterischen Vorkurs an der SFGBB in Bern besucht.</p>
      </div>
    </div>
    <div class="career_item">
      <span class="career_date">2016 - 2019</span>
      <div class="career_timeline"></div>
      <div class="career_text">
        <h5>Sekundarschule Bern</h5>
        <p>Meine gesamte obligatorische Schulzeit habe ich in Bern absolviert und mit sehr guten Noten abgeschlossen.</p>
      </div>
    </div>
  </div>
</section>

Auch hier nichts Neues, was du nicht bereits aus vorherigen Kapiteln kennst.

Erwähnenswert ist, dass du hier mittlerweile beim h5, also dem fünften Level der Überschriftenhierarchien angelangt bist. Semantisch ist es wichtig, dass du Headings (Überschriften) wenn immer möglich mit den h1 bis h6 Tags auszeichnest. Das ist einerseits für die Barrierefreiheit (Accessibility) wichtig, andererseits verbesserst du damit die SEO (Suchmaschinenoptimierung). Beide Themen würden den Rahmen dieses Kurses sprengen. Ein paar hilfreiche Links dazu findest du jedoch im Kapitel Weiterführendes.

# Career Styles Aufgabe

Zurück in der style.css-Datei fügst du folgenden Code am Ende hinzu.

/* 
--------------------------------
Career section
--------------------------------
*/

.career_group {
  max-width: 50rem; /* Breite limitieren */
  margin: 0 auto; /* Horizontal (ohne Flexbox) zentrieren */
}

.career_item {
  display: flex;
  justify-content: center;
}

.career_timeline {
  flex-basis: 10%;
  position: relative;
  text-align: center;
}

.career_timeline:before {
  /* Kreis einfügen durch Pseudoelement, im nächsten Kapitel mehr dazu */
  content: " ";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid #02365E;
  background: white;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.career_timeline:after {
  /* Linie einfügen durch Pseudoelement, im nächsten Kapitel mehr dazu */
  content: " ";
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* Zur Erinnerung: Auf der X-Achse um die Hälfte der eigenen Breite nach Links schieben */
  height: 100%;
  width: 3px;
  background: #02365E;
  z-index: 1; /* Immer hinter dem before-Element */
}

.career_date {
  text-align: right;
  flex-basis: 45%;
  font-size: min(max(1rem, 3vw), 1.15rem); /* Zur Erinnerung: Mindestens 1rem, maximal 1.15rem. Dazwischen 3% von der Bildschirmbreite */
  font-weight: bold;
  letter-spacing: normal;
}

.career_text {
  flex-basis: 45%;
  padding-bottom: 7rem;
}

.career_text h5 {
  margin: 0;
}

/* Die nächsten Zeilen verwenden Pseudoelemente und Pseudoklassen. 
Du kannst somit in CSS ohne zusätzliches HTML Dinge erscheinen lassen und DOM-Elemente gezielt manipulieren.
Obwohl Namen wie last-child es dich bereits erahnen lassen, was dort vor sich geht, 
erfährst du im nächsten Kapitel im Detail, wie diese genau funktionieren. */

.career_item:nth-child(even) {
  flex-direction: row-reverse; /* Jedes gerade Element (0, 2, 4...) soll reversed (umgekehrt) dargestellt werden. */
  text-align: right; /* Bei Elementen die reversed sind, soll der Text rechts ausgerichtet sein */
}

.career_item:nth-child(even) .career_date{
  text-align: left;
}

.career_item:last-child .career_timeline:after {
  display: none; /* Beim letzten career_item willst du keine vertikale Linie anzeigen */
}

.career_item:last-child .career_text {
  padding-bottom: 0;
}

# Überprüfen im Browser Aufgabe

Wie immer solltest du nun im Browser das Ergebnis überprüfen. Wenn alles stimmt, müsste die “Career”-section nun etwa so aussehen:

Career mit Styles

Passende Challenges

← Pseudoklassen & Pseudoelemente →