Ins kalte Wasser geworfen – Eine Liebeserklärung an die Webentwicklung

Das kalte Wasser

Ich weiß noch ganz genau, wie trocken und uninteressant ich den Bereich Webentwicklung fand. Vor zwei Jahren kam ich zum ersten mal mit HTML und CSS in Berührung. In einem stickigen Klassenzimmer wurde mir träge im Unterricht die ersten Basics der Sprachen vermittelt. Es wurde mit Fremdwörtern im Schwall geredet und in wirren Strukturen gezeichnet. Meine Verwirrung wurde dabei immer größer. In diesem Moment beschloss ich damals, dass ich den Bereich Webentwicklung nie wieder in meinem Leben betreten wollte.

Aber: Sag niemals nie!

Der Wurf

Nach dem Abschluss meiner Ausbildung zur gestaltungstechnischen Assistentin in Grafik und Objektdesign bewarb ich mich im Bereich Print für die duale Ausbildung als Mediengestalterin. Ich bekam einen Ausbildungsplatz und absolvierte mein erstes Lehrjahr im Printbereich. Was ich vorher nicht wusste: Mediengestalter, die im Bereich Digital ausgebildet werden, sind ebenfalls in meiner Berufsschulklasse. So kam es dazu, dass mich wieder HTML und CSS in der Schule verfolgten. Wieder durfte ich stupide die Sprachen lernen.

Diese Mal ging der Lehrer aber mehr auf das Verständnis der Schüler einz. Ich verstand die ersten Basics, konnte mich aber mit dem Coden nicht anfreunden. Mit meinen ersten Kenntnissen versuchte ich, eine Website zu erstellen. Ich würde heute rückblickend sagen, dass es auf jeden fall keine Website war, welche ich da gebaut habe.

Das erste Schuljahr beugte sich dem Ende und mein Lehrer quälte mich durch das trockene Schulfach. Dann kam meine Ausbildungsstätte auf den interessanten Gedanken, dass ich in den Sommerferien ein fünfwöchiges Praktikum absolvieren könnte. Die einzige Bedingung war, dass ich das Praktikum im Bereich "Frontend-Entwicklung" absolvieren sollte. Ich gab mich den Gedanken hin und fasste den Entschluss, der Webentwicklung nochmals eine Chance zu geben. Und das, obwohl ich mir wirklich nicht vorstellen konnte, dass immer mehr Menschen Coden möchten, wenn es doch so trocken ist.

In meiner Berufsschulklasse sah ich einige Mitschüler, welche wirklich gute Websiten bauten. Das gab mir den Impuls, das Webentwicklung vielleicht doch nicht trocken sein konnte. Also bewarb ich mich bei der webfactory in Bonn. Meine Vorfreude wuchs,  da ich gespannt war, ob sich meine schlechten Erfahrungen mit Webentwicklung bestätigen würden, oder ob das Frontend doch interessanter ist, als gedacht.

Treibende Strömung

Ich bekam nach einem netten Telefonat den Praktikumsplatz. Am ersten Tag wurde ich von einem netten Team und zwei süßen Hunden begrüßt. Mit einem Online-Workshop, der zwei Tage ging, ratterte ich die Basics von HTML und CSS runter. Ich war wieder an einem Punkt, wo meine schlechten Erfahrungen sich bestätigen wollten. Das Webentwicklung tatsächlich nichts für mich ist.

Doch dann kam die Wendung. Als würde ein Regenschauer vorbei ziehen und die Sonne zwischen den Wolken durchscheinen, machte ich die ersten richtig interessanten Erfahrungen. Ich baute mit meinem Wissen aus dem Workshop eine erste Website. Ich verstand wirklich, was ich da schrieb! Ich war an einem Punkt angelangt, wo ich es nicht glauben konnte, dass ich zum ersten mal so etwas wie Freude fühlen konnte, während ich die Elemente und Styles in CodePen eintippte.

Ich konnte mit CodePen direkt sehen, wie sich der eingetippte Code verhielt. Besonders das Gerüst einer Website konnte ich nun sehen und anwenden. Nach den ersten Übungen kam Lukas auf mich zu und zeigte mir ein Spiel, das die Funktionen von Flexbox erklärt. Flexbox ist ein Weblayoutmodell, mit dem man Content auf der Website ausrichten kann. Danach zeigte er mir noch das Version Control System (VCS) Git. Mit Git führt man ein Protokoll über die Veränderungen des Codes, damit man nach längerer Zeit nachvollziehen kann, was man an bestimmten Stellen im Code geändert hat. So können auch andere Mitarbeiter an dem Code weiter arbeiten und Änderungen direkt nachvollziehen. Außerdem kann man aus einem beliebigen Stand auf den Code zurückspringen, falls man ungewünschte Änderungen zurücksetzten möchte.

Richtung wählen

In der zweiten Woche meines Praktikums fing ich an, ein Konzept für meine eigene Website zu entwickeln. Mir war schnell klar, dass ich ein Portfolio erstellen wollte, da ich in meiner Freizeit Designprojekte erstelle und diese präsentieren möchte. Auf der Seite sollten also meine Projekte zu sehen sein, und dazu Texte mit Einblicken in meine kreativen Prozesse.

Ich tüftelte das Konzept eine ganze Woche lang aus. Dabei wurde ich in ein Programm namens Sketch eingeführt, welches zur Visualisierung von Website-Layouts dient. Ich bekam immer wieder Feedback von Stefan, der mir half, mehr Verständnis für die Anforderungen von Webseiten und Userinterfaces zu erlangen.

Nach mehreren Entwürfen entschied ich mich nun für einen. Mir wurde immer wieder bewusst, dass die Ausbildung "Mediengestalter Digital und Print" genannt wird, aber zwischen den Bereichen Welten liegen. Nach Erstellung des Konzepts und meinen ersten Entwürfen fing ich mit dem Code Editor Visual Studio Code an, meine erste richtige Website zu bauen. Die ersten Basics funktionierten gut. Bis ich Flexbox anwenden musste. Ich übte gefühlt mehr als eine Woche, bis ich wirklich verstand, wie Flexbox funktioniert. 

Mit immer neuen Befehlen baute ich meine Website und mein Wissen aus. Dann kam der Tag, an dem mir Søren mitteilte, das meine Website auch mobil funktionieren muss.

Responsive Design. Die Kopfschmerzen bahnten sich langsam an. Wie sollte das gehen?

Ich las Bücher und googelte mehr als zuvor, um die mobile Ansicht zu optimieren. Doch die Navigation war mein Endgegner. Ich schrieb einen komplizierten Code, der nach viel Kopfzerbrechen am Ende mit wenigen einfachen Befehlen und Flexbox gelöst werden sollte:

.navigation {    display: flex;    justify-content: space-evenly;    align-items: center;}

Da verstand ich die Schwierigkeit, Code simpel zu schreiben. Media Queries halfen mir, den Anforderungen der verschiedenen Displays und dem Design gerecht zu werden, da man mit ihnen bestimmen kann, dass für verschiedene Displaygrößen unterschiedliche Befehle gelten dürfen.

Erkenntnis

Im Laufe der Umsetzung in HTML und CSS bemerkte ich eine zunehmende Unzufriedenheit mit meinem Design. Eva eilte mir zu Hilfe und gab mir wertvolle Tipps, wie ich mein Design optimieren könnte. Ich fing an, meine ersten Entwürfe komplett zu verwerfen und hielt mich an anderen Farbwelten und Typografien fest. Ich wollte, dass meine Persönlichkeit sich in dieser Website widerspiegelte.

Der letzte große Baustein folgte noch: Ich wollte zur Präsentation meiner Projekte eine Galerie haben. Der Begriff „Overlay“ viel zum ersten Mal. Eine Ansicht, die jeder schon mal gesehen hat: Die Website verdunkelt sich und Content wird in einen Präsentationsmodus gebracht. Mit JavaScript und npm bauten Lukas und ich ein Overlay in meine Website ein.

Während des ganzen Praktikums geriet ich immer wieder in Sackgassen beim Coden, aber mir wurde immer wieder durch Bücher und Teamwork geholfen. Manchmal half es auch einfach, erst am nächsten Tag das Problem in Angriff zu nehmen. Die positive Kritik, die mir immer weiterhalf führte dazu, dass ich meine Kreativität immer mehr herausholte und mein ganzes Herzblut in dieses Projekt steckte.

Dann kam der Zeitpunkt, an dem ich meine eigene Domain kaufte, mein Git Repository mit einem Webserver verknüpfte und meine Webseite endlich online war. Hier findest du sie: lisaheidenreich.de

Mir wurde bewusst, dass ich mir vor einem Monat nicht mal ansatzweise vorstellen konnte, dass es Spaß machen würde, Webseiten zu designen. Ich kann jetzt nachvollziehen, warum Webentwicklung eine tolle und wirklich aufregende Welt ist. Jeden Tag kommen neue Befehle dazu. Es ändern sich täglich neue Dinge, weshalb man nie auslernt. Vor allem die vielen Möglichkeiten reizten mich. Da begriff ich, dass Print und Digital doch mehr Gemeinsamkeiten haben, als gedacht, und trotzdem Unterschiede wie Tag und Nacht besitzen.

Das Praktikum bei der webfactory hat mir geholfen zu verstehen, dass Webentwicklung kein Einhorn (etwas Undefinierbares) ist, sondern ein logisches, cooles, nervenaufreibendes, komplexes Designen von Webseiten und Webanwendungen sein kann.

An meinem letzten Tag des Praktikums präsentierte ich meine Ergebnisse dem Team. Hier findest du meine Präsentation: Abschluss Präsentation

Lisa Marie Heidenreich