Webentwicklung lernen

Willkommen im MDN-Lernbereich. Diese Reihe von Artikeln soll Anfängern in der Webentwicklung grundlegende Fähigkeiten zum Codieren von Websites vermitteln. Ziel ist es nicht, Sie von "Anfänger" zu "Experte" zu machen, sondern von "Anfänger" zu "wohlfühlend". Von dort aus sollten Sie in der Lage sein, Ihren eigenen Weg zu gehen, indem Sie von dem Rest von MDN und anderen mittleren bis fortgeschrittenen Ressourcen lernen, die viel Vorwissen voraussetzen.

Wenn Sie ein kompletter Anfänger sind, kann die Webentwicklung herausfordernd sein – wir werden Sie an die Hand nehmen und genug Details bereitstellen, damit Sie sich wohlfühlen und die Themen richtig lernen können. Sie sollten unabhängig davon, ob Sie ein Schüler sind, der Webentwicklung lernt (alleine oder als Teil eines Kurses), ein Lehrer auf der Suche nach Unterrichtsmaterialien, ein Hobbyist oder jemand, der einfach mehr darüber erfahren möchte, wie Webtechnologien funktionieren, sich hier wohlfühlen.

Wo man anfangen sollte

Wenn Sie sich nicht sicher sind, ob Sie sich tiefgehend mit der Webentwicklung befassen möchten und mit einer Kostprobe beginnen möchten, empfehlen wir, dass Sie mit unseren Erste Schritte im Web Leitfäden beginnen. Darüber hinaus sollten Sie mit dem Lernen der folgenden Themen beginnen:

HTML und CSS: HTML bietet Struktur für Webinhalte, während CSS Anweisungen gibt, wie dieser Inhalt gestylt und angeordnet wird. Siehe Einführung in HTML und CSS: Erste Schritte für wichtige Starterinformationen.
JavaScript: JavaScript ermöglicht Ihnen, interaktive Funktionalitäten auf Websites zu programmieren. Beginnen Sie mit JavaScript: Erste Schritte.
Frameworks und Werkzeuge: Nachdem Sie die Grundlagen von reinem HTML, CSS und JavaScript gemeistert haben, sollten Sie mehr über clientseitige Webentwicklungswerkzeuge lernen und dann überlegen, sich mit clientseitigen JavaScript-Frameworks zu befassen. Zudem sollten Sie die grundlegenden Konzepte des serverseitigen Website-Programmings lernen.

Hinweis: Unser Glossar bietet Definitionen von Fachbegriffen. Wenn Sie außerdem eine spezifische Frage zur Webentwicklung haben, finden Sie möglicherweise in unserem Abschnitt Häufige Fragen etwas Hilfreiches.

Möchten Sie ein Frontend-Webentwickler werden?

Wenn Sie Frontend-Webentwickler werden möchten und sich nicht sicher sind, was Sie zuerst lernen sollen, empfehlen wir, den MDN-Lehrplan zu nutzen, um Ihr Lernen zu planen. Er bietet einen strukturierten Lernweg, der die wesentlichen Fähigkeiten und Praktiken abdeckt, die für einen erfolgreichen Frontend-Entwickler notwendig sind, zusammen mit empfohlenen Lernressourcen.

Jetzt starten

Abgedeckte Themen

Im Folgenden finden Sie eine Liste aller Themen, die wir im MDN-Lernbereich abdecken.

Erste Schritte im Web: Bietet eine praktische Einführung in die Webentwicklung für absolute Anfänger.
HTML — Das Web strukturieren: HTML ist die Sprache, die wir verwenden, um die verschiedenen Teile unseres Inhalts zu strukturieren und zu definieren, was ihr Bedeutung oder Zweck ist. Dieses Thema lehrt HTML im Detail.
CSS — Das Web gestalten: CSS ist die Sprache, die wir verwenden, um das Styling und Layout unseres Webinhalts zu steuern, sowie Verhalten wie Animation hinzuzufügen. Dieses Thema bietet eine umfassende Abdeckung von CSS.
JavaScript — Dynamisches clientseitiges Skripting: JavaScript ist die Skriptsprache, die verwendet wird, um dynamische Funktionalität zu Webseiten hinzuzufügen. Dieses Thema lehrt alle wesentlichen Dinge, die notwendig sind, um komfortabel JavaScript zu schreiben und zu verstehen.
Webformulare — Arbeiten mit Benutzerdaten: Webformulare sind ein mächtiges Werkzeug, um mit Benutzern zu interagieren – am häufigsten werden sie verwendet, um Daten von Benutzern zu sammeln oder ihnen die Steuerung einer Benutzeroberfläche zu ermöglichen. In den unten aufgeführten Artikeln werden wir alle wesentlichen Aspekte der Strukturierung, Gestaltung und Interaktion mit Webformularen abdecken.
Barrierefreiheit – Das Web für alle nutzbar machen: Barrierefreiheit ist die Praxis, Webinhalte für möglichst viele Menschen zugänglich zu machen, unabhängig von Behinderung, Gerät, Standort oder anderen unterscheidenden Faktoren. Dieses Thema bietet alles, was Sie wissen müssen.
Web Performance — Websites schnell und reaktionsschnell machen: Web-Performance ist die Kunst, sicherzustellen, dass Webanwendungen schnell heruntergeladen werden und reaktionsschnell auf Benutzerinteraktionen sind, unabhängig von der Bandbreite, Bildschirmgröße, dem Netzwerk oder den Gerätefähigkeiten des Benutzers.
MathML: MathML ist die Sprache, die wir verwenden können, um mathematische Formeln in Webseiten zu schreiben, einschließlich Brüchen, Skripten, Radikalen, Matrizen, Integralen, Serien usw. Dieses Thema behandelt MathML.
Werkzeuge und Tests: Dieses Thema behandelt die Werkzeuge, die Entwickler verwenden, um ihre Arbeit zu erleichtern, wie z.B. Werkzeuge zum Testen von Browserübergreifender Kompatibilität, Linter, Formatter, Transformationstools, Versionskontrollsysteme, Bereitstellungstools und clientseitige JavaScript-Frameworks.
Serverseitige Website-Programmierung: Selbst wenn Sie sich auf die clientseitige Webentwicklung konzentrieren, ist es nützlich zu wissen, wie Server und serverseitige Code-Features funktionieren. Dieses Thema bietet eine allgemeine Einführung, wie die Serverseite funktioniert, und detaillierte Tutorials, wie man eine serverseitige App mit zwei beliebten Frameworks entwickelt: Django (Python) und Express (Node.js).

Aufgaben und Bewertungen

Im "Lernen der Webentwicklung"-Bereich von MDN gibt es viele eigenständige Aufgaben und Bewertungen, die Sie abschließen können. Diese gibt es in zwei Haupttypen:

"Testen Sie Ihre Fähigkeiten"-Aufgaben, zum Beispiel in Entscheidungen in Ihrem Code treffen — Konditionale.
Detailliertere Bewertungen am Ende einiger Module, zum Beispiel Bildergalerie.

Jede davon hat eine dazugehörige Anleitung zur Bewertung und empfohlene Lösung, die Ihnen helfen, Ihre Arbeit zu bewerten. Es gibt Muster, die es einfacher machen, diese Ressourcen zu finden, zum Beispiel:

Die oben verlinkte Testen Sie Ihre Fähigkeiten-Aufgabe hat eine Bewertung und Ressourcen verfügbar unter https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/tasks/conditionals.
Die oben verlinkte Bewertung hat eine Bewertung und Ressourcen verfügbar unter https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/gallery.

Hinweis: Die meisten Bewertungsanleitungen und anderen Ressourcen für die Aufgaben und Bewertungen sind in mdn/learning-area verfügbar, obwohl einige in mdn/css-examples sind.

Unsere Codebeispiele bekommen

Die Codebeispiele, die Sie im Lernbereich finden, sind alle auf GitHub verfügbar. Wenn Sie sie alle auf Ihren Computer kopieren möchten, ist der einfachste Weg, ein ZIP der neuesten Haupt-Codezweigs herunterzuladen.

Wenn Sie das Repo auf eine flexiblere Weise kopieren möchten, die automatische Updates ermöglicht, können Sie den komplexeren Anweisungen folgen:

Installieren Sie Git auf Ihrem Rechner. Dies ist die zugrunde liegende Versionskontrollsystem-Software, auf der GitHub aufbaut.
Öffnen Sie die Eingabeaufforderung (Windows) oder das Terminal (Linux, macOS) Ihres Computers.
Um das Lernbereichs-Repo in einen Ordner namens learning-area an dem aktuellen Ort, auf den Ihre Eingabeaufforderung/Terminal zeigt, zu kopieren, verwenden Sie den folgenden Befehl:
bash
```
git clone https://github.com/mdn/learning-area
```
Sie können nun das Verzeichnis betreten und die Dateien finden, die Sie suchen (entweder mit Ihrem Finder/Dateiexplorer oder dem cd-Befehl).

Sie können das learning-area-Repository mit den folgenden Schritten mit allen Änderungen, die an der Hauptversion auf GitHub vorgenommen wurden, aktualisieren:

Gehen Sie in Ihrer Eingabeaufforderung/Ihrem Terminal mit cd in das learning-area-Verzeichnis. Zum Beispiel, wenn Sie sich im übergeordneten Verzeichnis befanden:
bash
```
cd learning-area
```
Aktualisieren Sie das Repository mit dem folgenden Befehl:
bash
```
git pull
```

Kontaktieren Sie uns

Wenn Sie mit uns über irgendetwas sprechen möchten, nutzen Sie die Kommunikationskanäle. Wir würden gerne von Ihnen hören, wenn Sie etwas finden, das Ihrer Meinung nach auf der Seite falsch oder fehlend ist, Anfragen für neue Lernthemen, Anfragen für Hilfe mit Punkten, die Sie nicht verstehen, oder andere Fragen oder Anliegen haben.

Wenn Sie daran interessiert sind, Inhalte zu entwickeln/verbessern, schauen Sie sich an, wie Sie helfen können und treten Sie mit uns in Kontakt! Wir sprechen mehr als gerne mit Ihnen, egal ob Sie Lernender, Lehrer, erfahrener Webentwickler oder jemand anderes sind, der daran interessiert ist, das Lernerlebnis zu verbessern.

Siehe auch

Der Karriereweg zum Frontend-Entwickler ^{MDN-Lehrplanpartner}: Scrimbas Frontend Developer Career Path lehrt alles, was Sie wissen müssen, um ein kompetenter Frontend-Webentwickler zu werden, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, kenntnisreichen Lehrern und einer unterstützenden Gemeinschaft. Vom Anfänger bis zum ersten Frontend-Job! Viele der Kurskomponenten sind als eigenständige kostenlose Versionen verfügbar.
Lernen Sie JavaScript: Eine ausgezeichnete Ressource für angehende Webentwickler – Lernen Sie JavaScript in einer interaktiven Umgebung, mit kurzen Lektionen und interaktiven Tests, begleitet von automatisierter Bewertung. Die ersten 40 Lektionen sind kostenlos, und der gesamte Kurs ist für eine geringe Einmalzahlung verfügbar.
Codecademy: Eine großartige interaktive Seite, um Programmiersprachen von Grund auf zu lernen.
freeCodeCamp.org: Interaktive Seite mit Tutorials und Projekten, um Webentwicklung zu lernen.
The Odin Project: Bietet einen kostenlosen und Open-Source-Vollstack-Lehrplan, von Anfänger bis Fortgeschrittene.
MDN Blog: Der MDN-Blog enthält Artikel vom MDN-Team und Gastautoren über neue Entwicklungen auf der Seite, HTML, CSS, JavaScript und andere Webentwicklungs-News.
Mozilla-Entwickler-Newsletter: Unser Newsletter für Webentwickler, der eine ausgezeichnete Ressource für alle Erfahrungsstufen ist.