Die magische F12-Taste
Zu diesem Blogpost haben mich die Leser*innen meiner Website animiert, die wegen der Erwähnung der F12-Taste in meinem letzten Post nachfragten. Sorry, da ist der erfahrene User mit mir durchgegangen und hat einfach drauflos geschrieben. Hier jetzt also die Auflösung …
Hast du dich schon mal gefragt, wie Profis herausfinden, welche Schriftart eine Website nutzt? Oder warum ein Bild auf deinem Smartphone plötzlich ganz anders aussieht als am Laptop?Die Antwort liegt direkt vor deiner Nase – auf deiner Tastatur. Es ist die F12-Taste.
Was ist das „Geheimmenü“ deines Browsers?
Wenn du in Chrome, Firefox oder Edge auf F12 drückst (oder Rechtsklick -> „Untersuchen“ wählst), öffnen sich die sogenannten Entwickler-Tools. Keine Sorge, das sieht im ersten Moment nach Matrix-Code aus, ist aber eigentlich dein bester Freund beim Lernen von HTML und CSS.
3 Dinge, die du heute mit F12 ausprobieren solltest:
- Der Inspektor (Der Röntgenblick): Klicke auf das kleine Pfeil-Symbol ganz links oben in den Entwickler-Tools und fahre dann mit der Maus über die Webseite. Du siehst sofort, welches HTML-Tag für welches Element verantwortlich ist. Es ist wie Malen nach Zahlen für Profis!
- Live-Design-Check (CSS in Echtzeit): Du willst wissen, wie deine Website mit einer blauen statt einer grünen Überschrift aussieht? Klicke die Überschrift an und ändere im rechten Fensterbereich (unter „Styles“) einfach den Farbwert. Keine Angst: Diese Änderungen siehst du nur du. Sobald du die Seite neu lädst, ist alles wieder beim Alten. Es ist der perfekte Sandkasten zum Experimentieren.
- Der Mobile-Check: Klicke auf das kleine Symbol, das wie ein Smartphone und ein Tablet aussieht. Jetzt kannst du testen, wie deine Seite auf einem iPhone, einem Pixel oder einem iPad aussieht. Unverzichtbar, wenn du modernes, responsives Webdesign lernen willst.
Warum das für dich wichtig ist
Besonders wenn du meine Bücher zu HTML und CSS liest, ist die F12-Taste dein wichtigstes Werkzeug. Du musst Code nicht nur theoretisch verstehen – du kannst ihn auf jeder Website der Welt „live“ beobachten und von den Großen lernen.
Kleiner Tipp für Mac-User: Falls du keine F12-Taste hast (oder sie mit der Helligkeit belegt ist), drücke einfach Cmd + Option + I.
Hast du die F12-Taste schon mal ausprobiert oder war sie bisher ein gut gehütetes Geheimnis für dich? Schreib es mir in die Kommentare!
