Was sind die wichtigsten Fähigkeiten, die man als Webentwicklerin braucht?

In einem kurzen Interview anlässlich des 5. Geburtstags der Codingschule habe ich ein paar Fragen beantwortet bezüglich Webentwicklung. Die Frage danach, welche Fähigkeiten für die Webentwicklung notwendig sind, konnte ich natürlich nicht in all der Bandbreite beantworten, daher gibt es hier einen ausführlichen Leitfaden:

1. Kreativität

Wer denkt, dass Web Development nur aus Code besteht, liegt falsch! Webentwicklung erfordert genauso viel Kreativität wie technisches Know-how. Webseiten, die nicht ansprechend gestaltet sind, wirken schnell veraltet. 

Als Webentwicklerin frage ich meine Kunden oft, welche Webseiten ihnen gefallen und was sie sich für ihre eigene Seite wünschen. Häufig entwickeln sie während des Prozesses auch eine Corporate Identity, die sich auf ihrer Website widerspiegelt.

Ein Gespür für Farben, Formen und Struktur ist daher essenziell. Die Zusammenarbeit mit Designern kann hilfreich sein, doch auch als Entwicklerin sollte man zumindest ein grundlegendes Verständnis für UI/UX und gestalterische Elemente haben. Das Ziel ist es immer, eine kreative Lösung zu finden, sei es bei der Gestaltung oder in der technischen Umsetzung.

2. HTML & CSS

Die absoluten Grundlagen für jede Webentwickler*in sind HTML und CSS. Diese beiden Sprachen sind das Fundament jeder Webseite.

• HTML sorgt für die Grundstruktur, und seit HTML5 gibt es Tags, die den Code nicht nur für Entwickler, sondern auch für Maschinen (wie Suchmaschinen) lesbar machen.
• CSS gibt der Webseite das Aussehen. Schriften, Farben, Positionen und Größen werden über CSS festgelegt. Seit CSS3 lassen sich sogar Animationen umsetzen.

Für Einsteiger sind Tutorials wie die von W3Schools oder freecodecamp ideal. Wenn du lieber in einer Gruppe lernen möchtest, kannst du zum Beispiel den Web Basics Kurs der Codingschule buchen.

3. Mobile-first, responsive Design

Da inzwischen fast 80 % der Webseiten über mobile Endgeräte aufgerufen werden, ist es unerlässlich, dass Webseiten responsive sind. Das bedeutet, dass sie auf allen Bildschirmgrößen, von Smartphones bis hin zu Desktop-Monitoren, gut aussehen und funktionieren.

Webentwickler sollten immer testen, wie ihre Seite auf verschiedenen Geräten aussieht. Viele Browser bieten Entwickler-Tools, mit denen sich verschiedene Bildschirmgrößen simulieren lassen, um so schnell Optimierungspotenziale zu erkennen.

4. JavaScript & TypeScript

JavaScript ist eine der wichtigsten Programmiersprachen für dynamische Webseiten. Mit JavaScript lässt sich weit mehr als nur statischer HTML- und CSS-Code umsetzen: Animationen, Interaktionen und komplexe Logik können integriert werden. Früher wurden Animationen oft mit Flash erstellt, heute setzt man dazu fast ausschließlich JavaScript ein. Für Webentwickler*innen ist es unerlässlich, die Grundlagen von JavaScript zu beherrschen.

TypeScript geht noch einen Schritt weiter. Es ist eine auf JavaScript aufbauende Sprache, die es Entwicklern ermöglicht, typen sicheren Code zu schreiben. Während JavaScript flexibel und dynamisch ist, gibt TypeScript Entwicklern die Möglichkeit, den Code präziser zu definieren. Durch die Typsicherheit lassen sich viele Fehlerquellen bereits während des Schreibens vermeiden, was besonders in größeren Projekten von Vorteil ist.

Ein weiteres Plus von TypeScript ist, dass es gut mit modernen Frameworks wie Angular und React harmoniert. Wer JavaScript schon kennt, wird TypeScript schnell lernen und von den zusätzlichen Möglichkeiten profitieren.

5. MySQL und Datenbank-Kenntnisse

Auch wenn Datenbanken oft eher als Backend-Thema angesehen werden, ist es für Webentwickler*innen wichtig, zumindest Grundkenntnisse in MySQL und in der Arbeit mit relationalen Datenbanken zu besitzen. Gerade im Zusammenhang mit dynamischen Webseiten ist es hilfreich zu verstehen, wie Daten gespeichert, abgefragt und verwaltet werden.

• MySQL: MySQL ist eines der am weitesten verbreiteten Datenbank-Management-Systeme. Grundlegendes Wissen über SQL (Structured Query Language), das Abfragen und Verwalten von Daten, ist nützlich, um die Datenbankstruktur zu verstehen und zu erkennen, wie Daten zwischen Frontend und Backend übertragen werden.
• Verständnis für Datenmodelle: Selbst als Webentwickler*in  sollte man verstehen, wie die Daten in der Datenbank organisiert sind, um APIs und Backend-Systeme optimal in das Frontend zu integrieren.

6. Git und Versionskontrolle

Eine weitere unverzichtbare Fähigkeit in der Webentwicklung ist der Umgang mit Git und Versionskontrollsystemen. Git ermöglicht es Entwicklern, den Code zu verwalten, Änderungen nachzuverfolgen und mit anderen Entwicklern effektiv zusammenzuarbeiten.

• Git: Git ist das weltweit am häufigsten genutzte Versionskontrollsystem. Es ermöglicht dir, Änderungen an deinem Code zu speichern, Versionen zu erstellen und den Überblick über unterschiedliche Entwicklungsstände zu behalten. Hier findest du die Git-Dokumentation. 
• Zusammenarbeit: Gerade in Teams ist Git essenziell. Über Plattformen wie GitHub oder GitLab kannst du gemeinsam mit anderen Entwicklern an Projekten arbeiten, Pull Requests erstellen und Code-Reviews durchführen. Zum Thema Github haben wir einen spannenden Artikel verfasst.  
• Branching: Die Möglichkeit, Branches zu erstellen, ermöglicht es dir, parallel an verschiedenen Features oder Bugfixes zu arbeiten, ohne dass die Hauptversion des Projekts beeinträchtigt wird. Wenn ein Feature fertig ist, kann es problemlos in den main branch integriert werden.

4. Lernen, weiter lernen und noch mehr lernen!

Gratulation! Du hast die ersten Schritte geschafft, kannst jetzt Webseiten selbst erstellen und weißt, worauf es ankommt. Jetzt beginnt aber erst die wirklich spannende Phase! Technik entwickelt sich nunmal ständig weiter, es kommen neue Funktionen dazu, andere fallen weg oder werden durch bessere ersetzt. Als Webentwicklerin lernst du niemals aus. Es gibt ständig etwas Neues zu lernen und genau das ist das Spannende an diesem Job!

Die wichtigste Fähigkeit, die du also als Webentwicklerin brauchst ist, dich ständig weiter entwickeln zu wollen. Dabei kannst du bei jedem neuen Projekt etwas dazu lernen – “learning by doing”. Es gibt kaum eine Zeile Code, die nicht schon einmal von irgendwem geschrieben wurde. Recherchiere einfach nach Beispielen (Stackoverflow oder Github/Gist ist da sehr hilfreich) oder unterhalte dich mit anderen Entwicklern über deine aktuelle Problemstellung. Was du aber nicht tun solltest, ist stumpfes abschreiben und kopieren ohne den Code zu verstehen!

Beispiele, was du aufbauend lernen kannst:

• PHP: Diese Sprache wird für dynamische Webseiten verwendet, oft in Kombination mit Datenbanken. Systeme wie WordPress basieren auf PHP.
• JavaScript-Frameworks: React, Angular oder Vue.js bieten mächtige Werkzeuge für die Entwicklung interaktiver und performanter Webseiten.

Das Lernen weiterer Programmiersprachen ergibt sich meist, wenn du die Logik dahinter verstanden hast. Ähnlich wie beim Sprachen lernen, folgen Code-Sprachen einer gewissen Struktur – die Reihenfolge ist häufig sehr wichtig und nicht beliebig.

Noch ein Tipp zum Schluss

Es gibt Momente, in denen einfach nichts so funktioniert, wie es sollte. Diese Momente kennt wirklich jede Developerin! Es sind diese vermaledeiten Stunden, in denen nichts vorwärts geht, man verzweifelt vor dem Computer sitzt und sich die Haare rauft. Irgendwann kommt der Punkt, wo man am liebsten den Computer aus dem Fenster werfen möchte. Genau dann kannst du nur noch eins tun: Abschalten, eine Nacht drüber schlafen und am nächsten Tag weiter machen!

Weißt du, was das häufigste Problem eines nicht-funktionierenden Codes ist? Ein falsch gesetztes Komma oder Semikolon, eine nicht geschlossene Klammer oder fehlende Anführungszeichen. Das ist buchstäblich die kleine Mücke, die zum Elefanten wird!

Also: Ruhig Blut! Du schaffst das! 😉