Dieser Workshop führt Sie durch die Grundlagen von CSS. Also PAGE eDossier downloaden, durchlesen, One-Pager bauen – los geht’s.
Wer fürs Web gestaltet, ist natürlich vertraut mit dem Einsatz von Cascading Stylesheets (CSS) – doch auch Designer, die vorzugsweise in InDesign, Photoshop und Illustrator unterwegs sind, profitieren von einem soliden Verständnis der Webtechnologie-Grundlagen.
Schluss mit dem lästigen Trial-and-Error im Umgang mit CSS-Code
Doch auch wer sich für Screendesign oder andere Digital-Design-Sparten nicht so brennend interessiert, kommt irgendwann mit CSS-Code in Berührung – einfach, weil man Kollegen in der Designagentur beim Website erstellen über die Schulter schaut oder weil das Website erstellen fürs eigene Online-Portfolio relevant wird.
WordPress-Blogs oder eigene WordPress-Websites gestalten sich mit CSS-Kenntnissen ebenfalls leichter. Da heißt es ausgewählte Themes oder Templates an individuelle Bedürfnisse anpassen – und schon findet man sich im CSS-Code der jeweiligen Vorlage wieder, kramt im Scripting nach relevanten CSS-Anweisungen. Manchmal erweist sich dieses Vorgehen dann als visuelle Reise ohne Wiederkehr … schlicht weil man sich im Code nicht wirklich zurechtfindet. Blöd – das muss doch auch anders gehen.
Im Tutorial designen Sie von der Pike auf einen einfachen One-Pager
Das Verständnis für Cascading Stylesheets erwirbt man am besten, indem man die schwergewichtigen Tools und Frameworks erst mal außen vor lässt und sich aufs schlichte Coden in Notepad++, TextWrangler oder einem anderen Texteditor konzentriert.
Am Schluss des PAGE eDossiers »CSS-Grundlagen« finden Sie einen Download-Link, der Sie zum Tutorial-Code führt. Mit ihm bauen Sie einen simplen One-Pager, den Sie gemeinsam mit dem heruntergeladenen eDossier als Demoprojekt nutzen können, um sich in grundlegende CSS-Operationen einzuarbeiten. Sie werden dabei lernen, wie man eine schlichte One-Pager-Website gestaltet.
Das sind die Lernschritte des Tutorials
Diese Basisschritte erwarten Sie: Texteditor herunterladen, Stylesheet anlegen, Texte gestalten, Stile vererben, Farbe auftragen, Textblöcke ausrichten, Rahmen ziehen, Teaser setzen, Bilder skalieren, Elemente positionieren, Schatten werfen, Web-Fonts nutzen. Wir wünschen viel Spaß beim ersten Date mit CSS!
