Herausforderung: Gestaltung einer Biografie-Seite

In dieser Herausforderung werden Sie eine einfache Biografie-Seite gestalten und dabei einige der Fähigkeiten testen, die Sie in den letzten Lektionen gelernt haben, einschließlich der Erstellung von Selektoren und der Textgestaltung.

Hinweis: Sie können auf "Play" in den unten stehenden Live-Beispielen klicken, um den Code im MDN Playground zu öffnen, oder Sie können den Code in Ihre eigene IDE oder einen Online-Editor wie CodePen oder JSFiddle kopieren und einfügen. Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.

Projektbeschreibung

Das folgende Live-Beispiel zeigt eine Biografie, die mit CSS gestaltet wurde. Die verwendeten CSS-Eigenschaften sind wie folgt — jede verlinkt auf ihre Eigenschaftsseite bei MDN, die Ihnen weitere Beispiele zur Verwendung bietet.

Im Beispiel sind bereits einige CSS-Regeln vorhanden, die Teile des Dokuments mit Elementselektoren, Klassen und Pseudoklassen auswählen. Nehmen Sie die folgenden Änderungen an diesem CSS vor:

  1. Machen Sie die Überschrift der ersten Ebene pink, indem Sie das CSS-Farbschlüsselwort hotpink verwenden.
  2. Geben Sie der Überschrift einen 10px gepunkteten border-bottom, der das CSS-Farbschlüsselwort purple verwendet.
  3. Machen Sie die Überschrift der zweiten Ebene kursiv.
  4. Verleihen Sie der für die Kontaktdaten verwendeten ul eine background-color von #eeeeee und einen 5px breiten, festen, violetten border. Verwenden Sie etwas padding, um den Inhalt von der Grenze wegzuschieben.
  5. Machen Sie die Links beim Hover grün.

Hinweise und Tipps

  • Verwenden Sie den W3C CSS Validator, um unbeabsichtigte Fehler in Ihrem CSS zu erkennen — Fehler, die Sie möglicherweise übersehen hätten — damit Sie sie beheben können.
  • Versuchen Sie anschließend, einige auf dieser Seite nicht erwähnte Eigenschaften im MDN CSS Reference nachzuschlagen und seien Sie experimentierfreudig!
  • Denken Sie daran, dass es hier keine falsche Antwort gibt — in diesem Stadium Ihres Lernprozesses können Sie sich ein wenig Spaß erlauben.

Beispiel

Am Ende sollte es so aussehen wie auf diesem Bild.

Screenshot, wie das Beispiel nach Abschluss der Bewertung aussehen sollte.

Hier sind HTML- und CSS-Codeblöcke sowie das Ergebnis ihrer Kombination:

html
<h1>Jane Doe</h1>
<div class="job-title">Web Developer</div>
<p>
  Far far away, behind the word mountains, far from the countries Vokalia and
  Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
  right at the coast of the Semantics, a large language ocean.
</p>

<p>
  A small river named Duden flows by their place and supplies it with the
  necessary regelialia. It is a paradisematic country, in which roasted parts of
  sentences fly into your mouth.
</p>

<h2>Contact information</h2>
<ul>
  <li>Email: <a href="mailto:jane@example.com">jane@example.com</a></li>
  <li>Web: <a href="http://example.com">http://example.com</a></li>
  <li>Tel: 123 45678</li>
</ul>
css
body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  color: #375e97;
  font-size: 2em;
  font-family: Georgia, "Times New Roman", Times, serif;
  border-bottom: 1px solid #375e97;
}

h2 {
  font-size: 1.5em;
}

.job-title {
  color: #999999;
  font-weight: bold;
}

a:link,
a:visited {
  color: #fb6542;
}

a:hover {
  text-decoration: none;
}