Herausforderung: Mozilla-Splash-Seite

In dieser Herausforderung testen wir Ihr Wissen über einige der in den letzten Lektionen besprochenen Techniken, indem wir Sie auffordern, einige Bilder und Videos zu einer originellen Splash-Seite über Mozilla hinzuzufügen!

Ausgangspunkt

Um mit dieser Bewertung zu beginnen, müssen Sie das HTML und alle Bilder aus dem Verzeichnis mdn-splash-page-start auf GitHub herunterladen. Speichern Sie den Inhalt von index.html in einer Datei namens index.html auf Ihrem lokalen Laufwerk in einem neuen Verzeichnis. Speichern Sie dann pattern.png im selben Verzeichnis (klicken Sie mit der rechten Maustaste auf das Bild, um die Option zum Speichern zu erhalten).

Greifen Sie auf die verschiedenen Bilder im Verzeichnis originals zu und speichern Sie sie auf die gleiche Weise; Sie sollten sie fürs Erste in einem anderen Verzeichnis speichern, da Sie einige von ihnen mit einem Grafikeditor bearbeiten müssen, bevor sie verwendet werden können.

Alternativ können Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch verwenden.

Hinweis: Die Beispiel-HTML-Datei enthält ziemlich viel CSS zum Stylen der Seite. Sie müssen das CSS nicht anfassen, nur das HTML im <body>-Element — solange Sie das korrekte Markup einfügen, wird das Styling es korrekt aussehen lassen.

Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle erreichen.

Projektbeschreibung

In dieser Bewertung präsentieren wir Ihnen eine fast fertige Mozilla-Splash-Seite, die etwas Nettes und Interessantes darüber aussagen soll, wofür Mozilla steht, und einige Links zu weiteren Ressourcen bereitstellen soll. Leider wurden noch keine Bilder oder Videos hinzugefügt — das ist Ihre Aufgabe! Sie müssen einige Medien hinzufügen, um die Seite ansprechend und verständlicher zu gestalten. Die folgenden Unterabschnitte beschreiben, was Sie tun müssen:

Vorbereitung der Bilder

Verwenden Sie Ihren bevorzugten Bildeditor, um 400px breite Versionen von folgenden Bildern zu erstellen:

  • firefox_logo-only_RGB.png
  • firefox-addons.jpg
  • mozilla-dinosaur-head.png

Zusammen mit mdn.svg werden diese Bilder Ihre Symbole zum Verlinken auf weitere Ressourcen im Bereich further-info sein. Sie verlinken auch das Firefox-Logo in der Kopfzeile der Seite. Speichern Sie Kopien davon im selben Verzeichnis wie index.html.

Erstellen Sie anschließend eine 1200px breite Landschaftsversion von red-panda.jpg. Nennen Sie sie sinnvoll, damit Sie sie leicht identifizieren können. Speichern Sie eine Kopie im selben Verzeichnis wie index.html.

Hinweis: Sie sollten Ihre JPG- und PNG-Bilder optimieren, um sie so klein wie möglich zu machen, während sie noch gut aussehen. tinypng.com ist ein großartiger Dienst, um dies einfach zu tun.

Hinzufügen eines Logos zur Kopfzeile

Fügen Sie im <header>-Element ein <img>-Element hinzu, das die kleine Version des Firefox-Logos in der Kopfzeile einbettet.

Hinzufügen eines Videos zum Hauptartikelinhalt

Direkt im <article>-Element (direkt unterhalb des öffnenden Tags) betten Sie das YouTube-Video unter https://www.youtube.com/watch?v=ojcNcvb1olg ein, indem Sie die entsprechenden YouTube-Tools zur Codegenerierung nutzen. Das Video sollte 400px breit sein.

Hinweis: Dies ist ein etwas herausforderndes Ziel, da wir den für das Einbetten von YouTube-Videos erforderlichen Code in unserem Kurs nicht besprochen haben. Versuchen Sie online nachzuschauen, wie man ein YouTube-Video einbettet.

Im <div> mit der Klasse further-info finden Sie vier <a>-Elemente — jedes verlinkt zu einer interessanten Mozilla-bezogenen Seite. Um diesen Abschnitt zu vervollständigen, müssen Sie in jedes von ihnen ein <img>-Element einfügen, um das entsprechende Bild einzubetten.

Stellen Sie sicher, dass Sie die richtigen Bilder mit den richtigen Links verknüpfen!

Hinzufügen des Roten Pandas

Im <div> mit der Klasse red-panda möchten wir ein <img>-Element einfügen, das das Bild des Roten Pandas anzeigt.

Hinweise und Tipps

  • Sie können den W3C Nu HTML-Checker verwenden, um Fehler in Ihrem HTML zu finden.
  • Sie müssen kein CSS kennen, um diese Bewertung abzuschließen; Sie benötigen lediglich die bereitgestellte HTML-Datei. Der CSS-Teil ist bereits für Sie erledigt.
  • Das bereitgestellte HTML (einschließlich der CSS-Styling) erledigt bereits den größten Teil der Arbeit für Sie, sodass Sie sich nur auf das Einbetten der Medien konzentrieren müssen.

Beispiel

Die folgenden Screenshots zeigen, wie die Splash-Seite aussehen sollte.

Eine Weitaufnahme unserer Beispiel-Splash-Seite