Nachdem unser Design für den Footer in Photoshop fertig ist, können wir beginnen, es in unser statisches HTML- und CSS-Mockup zu integrieren. Der erste Schritt ist, uns etwas HTML zur Verfügung zu stellen. Wir haben bereits einen „Teil“, den wir auf allen Seiten einbinden und der „footer.php“ heißt. Das ist vorerst der perfekte Ort, um unsere Footer-Struktur einzufügen.
Wie Sie vielleicht erwarten, ist der Footer ein `
Wir nutzen die Zen Coding-Funktion in CodePen, um schnell eine Menge von Links zum Arbeiten zu erhalten. Um es auszuprobieren, geben Sie `a*8` im HTML-Editor von CodePen ein und drücken Sie dann Tab.
Wir beenden die Arbeit, indem wir auch das Markup für den unteren Footer schreiben. Wir überlegen ein wenig hin und her, welches Markup dort am besten geeignet ist, aber am Ende wählen wir einfach etwas und machen weiter. Dinge sind im Web sowieso leicht zu ändern.
Ungefähr um 12:50 Uhr beschlossen Sie, den Text im Codepen im Footer zu ergänzen: „CodePen is a playground…“, was Sie schließlich auch getan haben, nur fehlt Ihnen das Wort „a“ (Sie haben „CodePen is playground“). ;)
Tippfehler! Behoben!