PAGE online

CSS-Grundlagen-Tutorial für Designer

Dieser Workshop führt Sie durch die Grundlagen von CSS. Also PAGE eDossier downloaden, durchlesen, One-Pager bauen – los geht’s.

Cascading Stylesheets, Cascading Style Sheets, Onepager, Screendesign, Grafikdesigner, modernes Webdesign, Kommunikationsdesign, Website erstellen, Grafikdesign, One-Pager

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!

PDF-Download: eDossier: »CSS-Grundlagen«

Tutorial mit Onepager-Demoprojekt zum Downloaden

0,00 €
AGB
[818]

Produkt: Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Best Practices für Web und Mobile. Coding-Tipps für CSS3. Tools, Bibliotheken und Generatoren fürs Prototyping & Wireframing

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren