Von Anfängerfehlern zur fertigen Webseite: Meine Reise in der Webentwicklung

Wie startet man eigentlich in der Webentwicklung? Für viele (mich eingeschlossen!) beginnt die Reise mit einem wilden Mix aus HTML-Tags, schiefen Layouts und Google-Suchen wie „Warum ist Webdesign so schwer?“. In diesem Beitrag möchte ich dir zeigen, wie ich vom völligen Anfänger, der noch nie von CSS geschweige denn von JavaScript gehört hatte, zu jemandem wurde, der stolz auf seine ersten eigenen Webseiten blicken kann. Der Weg war alles andere als ein roter Faden, aber genau das hat ihn so aufregend gemacht!

Erste Schritte und Herausforderungen

Alles begann damit, weit vor dem ersten Schreiben von Code, dass ich im Netz unterwegs war und mir mal wieder schöne neue Tech-Geräte angeschaut habe (ja, ich liebe neue Technik einfach…). Da kommt man nicht an Seiten wie Apple, Sonos oder Oura vorbei, um einige Beispiele zu nennen. Die Designs haben mir so gut gefallen, dass ich das erste Mal das Interesse entwickelt habe, wissen zu wollen, was denn dahinter steckt (ich mein, schaut euch die Webseite von Oura-Rings an – fantastisches Design!).

Also ging es los: Ich habe mir ein paar YouTube-Videos angeschaut, um die Grundlagen zu verstehen und überhaupt einen ersten Sinn für das Programmieren und designen zu bekommen. Da mein Job mich nicht wirklich gefordert hat, war es der optimale Zeitpunkt, etwas Neues zu lernen – etwas, das vielleicht eines Tages mehr aus mir herauskitzelt und womöglich sogar ein kleines Einkommen generieren könnte.

Meine ersten Gehversuche: Beim Durchforsten des Internets nach Möglichkeiten, sich mit der Materie vertraut zu machen stieß ich auf The Odin Project, eine Plattform, die sich perfekt für den Einstieg ins Programmieren eignet und zudem auch noch kostenlos ist! Zuerst habe ich einfache HTML-Strukturen aufgebaut und mit CSS herumexperimentiert. Schon bald wurde mir jedoch klar: Reines "Coden" hat nichts mit Design zu tun. Es sind zwei komplett unterschiedliche Welten und dadurch hatte (und habe) ich auch mindestens zweimal soviel zu lernen 😅.

Ab dem Moment habe ich begonnen, mich auch mit dem Thema Design zu beschäftigen. Ich habe Websites, die mir besonders gut gefielen, analysiert und versucht, sie nachzubauen. Mit dem Inspektor in Chrome habe ich den Code überprüft, um herauszufinden, wie die Profis hinter den Webseiten so wunderschöne Designs implementiert haben. Dazu habe ich mich mit den Grundtheorien für Design beschäftigt auf die ich ein klein wenig in meinem letzten Beitrag eingehe -> Klick mich.

Vertiefung und erste Projekte

Mein erster „echter“ Erfolg war eine einfache Website, die ich als Aufgabe für The Odin Project erstellt habe (Link zur Seite). Auch wenn sie weder "responsive" ist, noch Animationen enthält, habe ich mich damals wie ein Hacker gefühlt. Heute sehe ich das Projekt als typisches Beispiel einer Anfänger-Website. Doch genau das ist es, was mich motiviert – meine eigene Entwicklung zu verfolgen und zu sehen, wie weit ich gekommen bin.

Vom einfachen HTML zur komplexen Website-Architektur – als ich anfing, mit statischen Website-Generatoren wie Eleventy zu arbeiten, wurde mir schnell klar, dass ich mich auch mit dem Backend auseinandersetzen musste, ( also mit dem was im Hintergrund passiert und nicht visuell im Browser sichtbar ist, quasi das Hirn hinter allem). Das war der Punkt, an dem ich begann, mein Wissen über reine HTML-Seiten hinaus zu erweitern.

Plötzlich ging es darum, wie verschiedene Komponenten miteinander kommunizieren und welche Rolle die Dateistruktur spielt. Ich musste lernen wie das Backend arbeitet und es optimal für meine Projekte nutzen kann.

Ich entschied mich, SCSS für meine Stylesheets zu nutzen, was mich anfangs ebenfalls herausforderte. Aber so fügte sich Stück für Stück ein Element zum anderen und ich entwickelte meinen eigenen Workflow – einen Prozess, mit dem ich heute Webseiten baue.

Hilfe aus unerwarteter Richtung: Die wohl größte Unterstützung kam von Tools wie ChatGPT und Perplexity AI, die mir immer dann weiterhalfen, wenn ich nicht weiterwusste. Außerdem habe ich viele hilfreiche Informationen und Inspiration auf codestitch.com gefunden, wo ich auch die Basis für meine Projekte gefunden habe. Codestitch arbeitet mit veschiedenen Code-Snippets, die sich in ein Template einfügen lassen, hört sich an wie ein Baukastensystem, ist es aber nicht. Man kann trotzdem absolut alles so anpassen wie man es sich wünscht und auch selbst Code usw. hinzufügen.

Der Aha-Moment

Als ich all die erlernten Techniken – vom Schreiben von HTML- und CSS-Code über die Nutzung von SCSS bis hin zum Einsatz von Eleventy mit JavaScript – endlich in einem Projekt kombinieren konnte, fühlte es sich wie ein Durchbruch an. Plötzlich ergaben alle Puzzleteile ein stimmiges Gesamtbild. Als ich dann meine eigene Webseite nach einiger Zeit fertiggestellt hatte, haben sich zum ersten Mal alle Zweifel gelegt, und ich hatte das Ergebnis monatelangen Lernens klar vor mir auf dem Bildschirm:

Jetzt war mir klar, dass ich auch anderen diesen Mehrwert bieten kann. Ich bin fähig, Websites zu bauen, Frontend (was du siehst) sowie Backend (was im Hintergrund abläuft) zu implementieren, ein CMS aufzusetzen und mich um alles zu kümmern, was nötig ist, um eine optimale Onlinepräsenz zu bieten.

Von den ersten Erfolgen zur Weiterentwicklung

Mein Stil: Ich mag minimalistisches und modernes Design, wobei ich meinen Stil nicht strikt festlege. Es ist das Schöne am Webdesign: Es gibt Raum für Experimente.

Was mich antreibt: Der Gedanke, dass man jeden Tag etwas Neues lernen kann. Es fühlt sich einfach großartig an, aus dem Nichts etwas zu erschaffen. Der Code-Editor mag für Außenstehende wie eine monotone Ansammlung von Zahlen und Buchstaben aussehen, doch für mich ist er der Ort, an dem ich in einen Zustand tiefer Konzentration und Zufriedenheit komme.

Tipps und Learnings für angehende Webdesigner

• Gehe es langsam an: Es bringt nichts, sich riesigem Stress auszusetzen und zu versuchen alles so schnell wie möglich zu lernen, dein Gehirn braucht einfach Zeit und viele Wiederholungen bis es sitzt. Lerne die Basics gründlich, denn sie bilden das Fundament, auf dem alles aufbaut. Jeden Tag lerne ich etwas Neues dazu, werde stetig besser, entwickle meine eigenen Methoden und wachse so Schritt für Schritt in die Rolle eines Webentwicklers hinein.

• Nutze KI als Assistent, nicht als Lösung: Tools wie ChatGPT können hervorragende Lehrer sein, aber übernehme nie blind den generierten Code. Die KI kann dir beim Verständnis helfen, aber das eigene Schreiben bleibt unerlässlich wenn du dich weiterentwickeln willst.

• Du bist nicht allein: Die Programmierwelt ist riesig und es gibt unzählige Communities. Auch wenn du gerade alleine lernst, wie ich es getan habe, gibt es immer Möglichkeiten, Gleichgesinnte zu finden.

• Typische Anfängerfehler vermeiden: Ein häufiger Fehler ist die sogenannte „Tutorial-Hell“. Der beste Weg, diesen zu vermeiden, ist es, sich auf einen Kurs zu konzentrieren und diesen durchzuziehen. Auch das passive Konsumieren von Videos bringt wenig – du musst selbst Hand anlegen, Code schreiben und aktiv lernen. Zum Thema lernen werde ich einen separaten Artikel schreiben, sei gespannt 😃.

• Meine Ressourcen-Empfehlung: Für alle, die in die Webentwicklung einsteigen möchten, kann ich The Odin Project wärmstens empfehlen. Es bietet eine tolle Struktur und baut Wissen sinnvoll aufeinander auf. Es fängt ganz von vorne an mit dem Download der nötigen Programme. Jeder der es schafft einen Computer anzuschalten ist in der Lage mit dem Kurs zu starten😅.
• Alle Aufgaben werden im eigenen Code Editor bearbeitet und so lernst du direkt wie du deinen Computer für das Programmieren nutzt, so wie man es auch in einem Job macht.

Fazit: Neugierde und Beständigkeit als Schlüssel zum Erfolg

Webdesign und Webentwicklung sind riesige Bereiche, die man nicht einfach auf die schnelle zusammenfassen kann. Aber genau das macht sie so spannend! Sei neugierig und schau dich um. Wenn dich etwas besonders fasziniert, finde Leute, die darin wirklich gut sind, und lerne von ihnen. Plane dir Zeit fest ein, um täglich einzutauchen – auch nur eine Stunde pro Tag kann einen großen Unterschied machen.

Und vor allem: Hab Geduld und genieße den Prozess!