Zum ersten Mal in dieser Serie werden wir einige neue Dinge direkt im Browser zum Design hinzufügen (nicht zuerst in Photoshop beginnen). Unser Ziel ist es, die "Hot Links"-Module zu gestalten, die auf der Homepage angezeigt werden.
Wir kennzeichnen jeden Abschnitt auf der Homepage mit Überschriften-Tags. Zum Beispiel "Neueste Blogbeiträge" und "Hot Links". Semantisch sollten wir ein h2 verwenden, aber das allgemeine h2-Styling ist für diesen Bereich zu intensiv. Wir verwenden den klassischen Trick, bei dem wir klassenbasierte Überschreibungen für unser Header-Styling haben. Auf diese Weise können wir immer das richtige semantische Tag verwenden, aber das Styling jederzeit mit dem Stil des gewünschten Headers überschreiben. Z.B.
<h2 class="h5">
<!-- correct semantically but we want style of h5 -->
</h2>Die Hot Link-Module sind weitgehend die gleichen wie die Artikel-Module, nur weniger kompliziert und sie haben ein rotes Quadrat in der oberen linken Ecke anstelle eines orangefarbenen Quadrats.