Web Developer from Zero to Hero
Beginner
4.6
1361 reviews
23k+ Learners
Discover the power to create captivating websites by harnessing HTML, CSS, and JavaScript. Immerse yourself in building dynamic web applications enhan…
178
Chapters
21
Learning hours
305
Assignments
AI Assistant
Shareable Certificate
Ergebnisse
Ergebnisse
Track content
Related courses and projects
Erfahrungsberichte
Funktionen
Preise
Ergebnisse
Ergebnisse
Track content
Related courses and projects
Erfahrungsberichte
Funktionen
Preise
Learning track content
Erkunden Sie die Funktionsweise des Webs. Erfahren Sie, wie Daten über Netzwerke übertragen werden, entdecken Sie die Rolle von Protokollen und entschlüsseln Sie die Geheimnisse von IP-Adressen und Domainnamen. Gewinnen Sie ein grundlegendes Verständnis darüber, wie Webbrowser und Server miteinander kommunizieren, um Webinhalte bereitzustellen.
Erkunden Sie die Möglichkeiten von Tags zur Strukturierung von Inhalten, von Überschriften und Absätzen bis hin zu Listen und Tabellen. Erfahren Sie, wie Sie Elemente mit Attributen erweitern können.
Verständnis von HTML-Tags
Arbeiten mit HTML-Attributen
Verständnis von Paar- und Einzel-Tags in HTML
Textauszeichnung
Listen Organisieren
Herausforderung: Erstellen Sie Ihren Ersten Webseiten-Absatz
Herausforderung: Erstellen Sie Eine Persönliche Vorstellungs-Webseite
Herausforderung: Gestaltung Einer Filmpräsentations-Webseite
Verwendung von Links
Schaltflächen Hinzufügen
Herausforderung: Links zu Beliebten Websites Erstellen
Validierung Ihres HTML-Codes Gemäß Best Practices
Der Kern der HTML-Dokumentstruktur. Lernen Sie die Bestandteile eines HTML-Dokuments kennen, einschließlich der Doctype-Deklaration, des Head- und Body-Bereichs. Verstehen Sie den Zweck jedes Elements und wie sie zur Gesamtstruktur einer Webseite beitragen.
Gestaltung einer ansprechenderen Webseite durch den Einsatz von Medien wie Bildern, Audio und Video. Umgang mit strukturierten tabellarischen Daten in Form von Tabellen.
Bilder in HTML Einfügen
Herausforderung: Arbeiten Mit Bildern
Arbeiten mit Klickbaren Bildern, Bildunterschriften und Optimierung
Verständnis von Vektor- und Rastergrafiken
Einbetten von Audio für Rich Media
Videoelement Hinzufügen
Herausforderung: Einbetten von Audio und Video in HTML
Erstellen und Strukturieren von Tabellen in HTML
Herausforderung: Entwurf Einer Funktionalen HTML-Tabelle
Erkunden Sie die Vielseitigkeit von HTML-Formularen. Lernen Sie, intuitive und benutzerfreundliche Formulare durch Anwendung zentraler Konzepte und Techniken zu gestalten. Entdecken Sie, wie Formulare die Benutzerinteraktion und Datenübermittlung auf Websites ermöglichen.
Einführung in HTML-Formulare
Grundlagen der Formularerstellung in HTML
Verwendung von Labels für bessere Formularzugänglichkeit
Formulare mit Eingabeattributen Erweitern
Untersuchung Verschiedener Eingabetypen in HTML
Herausforderung: Formular mit Eingabefeldern und Beschriftungen Erstellen
Arbeiten mit dem Textarea-Element für Mehrzeilige Eingaben
Verwendung des Select-Elements für Dropdown-Menüs
Verwendung des Datalist-Elements für vordefinierte Eingabevorschläge
Gruppierung von Formularelementen für eine bessere Struktur
Erfahren Sie, was CSS ist, wie es mit HTML verbunden wird und wie HTML-Elemente mithilfe von Selektoren gestaltet werden. Entdecken Sie grundlegende Konzepte wie Textfarben, Pseudoklassen für Benutzeraktionen und Variablen in CSS.
Was ist CSS und warum ist es wichtig?
Verknüpfung von CSS mit einem HTML-Dokument
CSS-Selektoren zur Gestaltung von HTML-Elementen Beherrschen
Herausforderung: Wenden Sie Ihre Ersten CSS-Stile An
Herausforderung: Gestaltung mit Klassenselektoren
Verbesserung von Stilen mit Pseudo-Klassen für Benutzeraktionen
Herausforderung: Anwenden von Pseudoklassen für Benutzeraktionen
Textfarben in CSS Ändern
Optimierung des Workflows für effizientes CSS-Coding
Herausforderung: Variablen für eine bessere CSS-Verwaltung Verwenden
Erfahren Sie, wie Sie Text auf Ihren Webseiten gestalten und formatieren. Lernen Sie, benutzerdefinierte Schriftarten anzuwenden und verschiedene Schriftarteigenschaften zu erkunden, um das Erscheinungsbild von Text zu verbessern.
Erlernen der Grundlagen des Box-Modells, das das Layout und die Abstände von Elementen auf einer Webseite definiert. Untersuchung von Konzepten wie Box-Sizing, Hinzufügen von Abstand zu Elementen, Arbeiten mit Block- und Inline-Elementen sowie Nutzung struktureller und funktionaler Pseudoklassen für fortgeschrittenes Styling.
Was ist das CSS-Box-Modell?
Verständnis der Box-Größenbestimmung in CSS
Abstand mit Rändern und Innenabständen Hinzufügen
Herausforderung: Box-Sizing auf Elemente Anwenden
Verwendung von Strukturellen und Funktionalen Pseudoklassen
Herausforderung: Übung Zu Strukturellen Pseudoklassen
Verständnis von Block-, Inline- und Inline-Block-Elementen
Arbeiten Mit Block-Elementen
Arbeiten Mit Inline-Elementen
Herausforderung: Seitenlayout Mit Verschiedenen Elementtypen Vorhersagen
Entdecken Sie Flexbox, eine leistungsstarke CSS-Layoutmethode zur Anordnung von Elementen in Zeilen und Spalten. Erfahren Sie, wie Sie Richtung, Ausrichtung und Abstand von Elementen horizontal und vertikal steuern sowie einzelne Flex-Elemente für präzise Layouts anpassen können.
Was ist Flexbox und warum sollte es verwendet werden?
Festlegen der Flex-Richtung für Layouts
Horizontale Ausrichtung von Inhalten mit Flexbox
Vertikales Ausrichten von Elementen in Flexbox
Verstehen von Flex-Item-Eigenschaften
Herausforderung: Flexbox-Konzepte Anwenden
Herausforderung: Ein Layout mit Flexbox Erstellen
Erfahren Sie, wie Sie mit CSS die visuelle Attraktivität Ihrer Webseiten steigern. Entdecken Sie Techniken zur Anwendung von Hintergrundfarben und -bildern, zum Stylen von Bildern, zur Nutzung dekorativer Pseudoelemente und zum Hinzufügen von Schatten für beeindruckende Designs.
Erfahren Sie, was Lernende von diesem Kurs zu fortgeschrittenem HTML- und CSS-Styling erwarten können. Welche Vorkenntnisse sind vor Kursbeginn erforderlich? Welche Themen werden behandelt?
Elemente auf Webseiten positionieren und verwalten. Verschiedene Positionierungseigenschaften kennenlernen, den Stapelreihenfolge nutzen, um die Sichtbarkeit überlappender Elemente zu steuern, und schließlich den Umgang mit Überlauf von Inhalten beherrschen.
Verständnis der CSS-Positionierung
Relative Positionierung Erklärt
Herausforderung: Relative Positionierung Anwenden
Absolute Positionierung in CSS
Herausforderung: Absolute Positionierung Umsetzen
Feste Positionierung für Haftende UI-Elemente
Herausforderung: Arbeiten mit Fester Positionierung
Sticky-Positionierung für Dynamische Layouts
Herausforderung: Beherrschung der Sticky-Positionierung
Verwaltung der Stapelreihenfolge von Elementen
Herausforderung: Steuerung von Z-Index und Überlappenden Elementen
Umgang mit Inhaltsüberlauf in CSS
Untersuchung der Leistungsfähigkeit von Übergängen und Möglichkeiten zur Verbesserung der Benutzererfahrung. Erläuterung, wie Eigenschaften fließend und schrittweise animiert werden, um nahtlose Zustandsübergänge zu ermöglichen.
Erfahren Sie mehr über die Eigenschaft „animation“ und deren Einsatz zur Erstellung dynamischer und ansprechender Designs. Entdecken Sie die Erstellung komplexer Animationen mit Keyframes sowie die Steuerung der Animation.
Untersuchung der Transformations-Eigenschaft, die das Modifizieren von Aussehen und Position von Elementen auf einer Webseite ermöglicht. Skalierung, Rotation, Schrägstellung und Verschiebung von Elementen in zwei und drei Dimensionen. Kombination mehrerer Transformationen zur Erzeugung komplexerer Effekte.
Einführung in CSS-Transformationen
Skalierung von Elementen
Drehen von Elementen in 2D und 3D
Herausforderung: Skalierung und Rotation Anwenden
Elemente für Dynamische Effekte Verschieben
Schrägstellen von Elementen für Einzigartige Designs
Verwendung von Perspektive für Tiefeneffekte
Herausforderung: Kombination von Translation und Schrägstellung
Die Prinzipien und Techniken des adaptiven/responsiven Designs zielen darauf ab, Websites und Anwendungen auf verschiedenen Geräten, Bildschirmgrößen und Ausrichtungen zugänglich und optisch ansprechend zu gestalten.
Erfahren Sie mehr über Präprozessoren in CSS und wie sie dabei helfen, effizienteren und besser wartbaren Code zu schreiben. Verstehen Sie, wie Präprozessoren den Arbeitsablauf vereinfachen und saubereren CSS-Code generieren können.
Einführung in CSS-Präprozessoren
Verständnis der Sass-Syntax für Optimiertes CSS
Verwendung von Sass-Variablen für Wiederverwendbare Stile
Berechnungen mit Numerischen Operatoren in Sass Durchführen
Verschachtelung von Styles für Übersichtlichere Code
Erweitern von Styles mit der @extend-Direktive
Organisation von Sass-Dateien für Skalierbare Projekte
Untersuchung von React und dessen Rendering von Benutzeroberflächen. Schwerpunkt auf Komponenten, JSX-Syntax und der Anzeige von Elementen auf dem Bildschirm.
Vertiefung der Datenübergabe zwischen Komponenten und Steuerung der UI-Ausgabe. Schwerpunkt auf Props, bedingtem Rendern und dem Rendern von Datenlisten.
Datenübergabe mit Props
Herausforderung: Funktionale Komponenten Erstellen
Bedingte Darstellung in React
Herausforderung: Implementierung der Bedingten Darstellung in Chat-Benachrichtigungen
Herausforderung: Implementierung der Bedingten Darstellung im Bank-Alert
Rendern von Datenlisten in React
Herausforderung: Anzeigen von Datensammlungen
Zusammenfassung Der React-Grundlagen
Erfahren Sie, wie Benutzerinteraktionen und externe Daten die Benutzeroberfläche im Laufe der Zeit verändern. Schwerpunkt auf dem Verwalten von Zustand und dem Umgang mit Seiteneffekten mithilfe von React Hooks.
Untersuchung gängiger Methoden zur Gestaltung von React-Komponenten. Schwerpunkt auf der Anwendung von Stilen mittels Inline-Styles und externer CSS.
Erfahren Sie, wie ein React-Projekt ausgeführt wird und wie dessen Struktur aufgebaut ist. Schwerpunkt auf dem Starten eines Projekts mit Vite und dem Navigieren durch die Projektdateien.
Erlernen der theoretischen Grundlagen von Konzepten wie URL, Domain, Protokoll, Abfrageparametern und mehr. Verständnis der Bedeutung von Routing in Webanwendungen und der Notwendigkeit der React-Router-Bibliothek.
Erfahren Sie, wie eine vollständige React-Anwendung von Grund auf erstellt wird, mit der Möglichkeit, Inhalte anzuzeigen, die sich anhand der URL mithilfe der React-Router-Funktionalität anpassen.
Überblick Über Die Mehrseitige Website
Installation Von React Router
Aktivierung des Routings in einer React-App
Definieren von Routen für die Navigation
Zusammenfassung: Erste Schritte in React Router
Optimierung von Imports Durch Lazy Loading
Implementierung Einer Fallback-Komponente
Zusammenfassung: Zweite Schritte in React Router
Erstellung und Verwaltung der Navigation
Die Vollständige Logik von React Router Erkunden
Zusammenfassung der Grundlagen von React Router
Erkunden Sie die Verwendung von Query-Strings zur gemeinsamen Nutzung und Verwaltung des Anwendungszustands über URLs, arbeiten Sie mit verschiedenen Datentypen in Query-Parametern und nutzen Sie React Router für Navigation und Effekte basierend auf URL-Änderungen.
Steigere deine Tech-Fähigkeiten!
mit bis zu 55% Rabatt
Features:
*Tracks not included in Pro plan
500+ Top-bewertete KurseFortschrittlicher KI-Copilot
Personalisierte Lernpfade40+ praxisnahe Projekte
Ohne Kündigung, bevor der ausgewählte Rabattplan endet, akzeptiere ich, dass Codefinity automatisch belastet $104 alle 3 Monate bis ich kündige. Erfahren Sie mehr über die Stornierungs- und Rückerstattungsrichtlinien in Abonnementbedingungen.
Recommended Courses and Projects
kurs
HTML-Grundlagen
Beherrschen Sie die Grundlagen von HTML, um gut strukturierte und zugängliche Webinhalte zu erstellen. Lernen Sie, wie Sie Dokumente mit Tags, Elementen und Attributen strukturieren. Arbeiten Sie sicher mit Text, Listen, Bildern, Audio und Video, um Webseiten zu bereichern. Erstellen Sie Tabellen für organisierte Daten und Formulare für Benutzereingaben und Interaktionen. Entdecken Sie semantisches HTML zur Verbesserung der Zugänglichkeit und zum Aufbau vollständiger, funktionaler Webseitenstrukturen von Grund auf.
3 Stunden
35 KapitelAnfänger
28 JETZT STUDIEREN
kurs
Next.js 14 Mastery Für Den Aufbau Moderner Webanwendungen
Erlernen Sie den Aufbau moderner, leistungsstarker Webanwendungen mit Next.js. Richten Sie Projekte mit strukturierten Layouts, Styling und Routing für eine nahtlose Navigation ein. Effizientes Abrufen und Anzeigen von Daten bei gleichzeitiger Optimierung von Rendering und Performance. Implementieren Sie fortgeschrittene Funktionen wie Paginierung, CRUD-Operationen und globale Suche für dynamische Webanwendungen. Stellen Sie Ihre Next.js-Projekte bereit, verbinden Sie diese mit Datenbanken und fügen Sie Authentifizierung zum Schutz von Benutzerdaten hinzu.
8 Stunden 48 KapitelFortgeschritten
3 JETZT STUDIEREN
kurs
State Management mit Redux Toolkit in React
Entdecken Sie die Leistungsfähigkeit von Redux Toolkit in Verbindung mit React und verbessern Sie Ihre Fähigkeiten im Bereich State Management. Dieser Kurs bietet eine umfassende Einführung in Redux Toolkit, eine leistungsstarke Bibliothek zur Verwaltung von Zustand. Lernen Sie, wie Sie Ihre Redux-Konfiguration optimieren, komplexe Zustandslogik vereinfachen und effiziente, skalierbare React-Anwendungen erstellen.
4 Stunden 24 KapitelFortgeschritten
kurs
CSS Foundations
Build a solid foundation in CSS and understand how styles shape the appearance of every webpage. Write and apply rules, target elements with selectors, and master the cascade and box model to create clean, organized designs. Gain the essential skills every web developer needs to style web content with precision and confidence.
1 Stunde 15 KapitelAnfänger
2 JETZT STUDIEREN
kurs
1 Stunde 12 KapitelAnfänger
kurs
HTML Forms Foundations
An introduction to creating well-structured and accessible HTML forms. Explore fundamental form elements, validation techniques, and best practices for ensuring accessibility. Learn how to design forms that are both functional and user-friendly, as they are essential components of any interactive website.
1 Stunde 10 KapitelAnfänger
kurs
End to End Testing React Apps with Playwright
Test React applications end to end using Playwright. Write reliable browser tests, interact with UI elements, handle asynchronous behavior, and validate navigation and network behavior. Apply advanced testing strategies to build scalable, maintainable test suites for production React applications.
2 Stunden 15 KapitelMittelstufe
1 JETZT STUDIEREN
kurs
CSS-Grid-Beherrschung
Entdecken Sie die Leistungsfähigkeit von CSS Grid, der modernen Methode zur Erstellung flexibler, responsiver Weblayouts. Lernen Sie, wie Seiten mit Zeilen, Spalten und erweiterten Grid-Funktionen strukturiert werden.
1 Stunde 11 KapitelAnfänger
kurs
Build Meaningful and Accessible Web Pages
Learn to create clean, meaningful, and accessible web pages using semantic HTML. Discover how to use appropriate elements to structure content, enhance SEO, and improve user experience. Master the core principles of a well-designed modern website.
1 Stunde 12 KapitelAnfänger
kurs
TanStack Query Server State Management in React
Manage server state in React applications using TanStack Query. Fetch, cache, and synchronize remote data, handle mutations and optimistic updates, and implement advanced query patterns for dynamic data flows. Optimize queries for performance, scalability, and maintainability in production React applications.
2 Stunden 14 KapitelMittelstufe
1 JETZT STUDIEREN
kurs
CSS Flexbox Foundations
Build flexible, responsive layouts using CSS Flexbox. This course breaks down how Flexbox organizes space, aligns items, and simplifies complex positioning problems in modern web design.
1 Stunde 13 KapitelAnfänger
kurs
React Forms with React Hook Form
Manage forms in React applications using React Hook Form. Learn core concepts, validation techniques, error handling patterns, and dynamic form structures that scale. Integrate forms with UI component libraries and apply performance optimizations to build reliable, user friendly form experiences.
2 Stunden 13 KapitelMittelstufe
Discover more Learning Tracks
Spur
Webentwicklung mit C#
10 Kurse
439 AufgabenAnfänger
4.7
(3822)
Spur
SQL von Null bis Held
7 Kurse248 AufgabenAnfänger
4.7
(3993)
Spur
C++ Grundlagen
6 Kurse124 AufgabenAnfänger
4.3
(1287)
Spur
Spielentwicklung Mit Unity
4 Kurse164 AufgabenAnfänger
4.4
(283)
Spur
Werden Sie Ein React-Entwickler
4 Kurse73 AufgabenMittelstufe
4.3
(122)
Spur
Full Stack Webentwicklung
7 Kurse398 AufgabenAnfänger
4.6
(1458)
Spur
Grundlagen der Frontend-Entwicklung
6 Kurse386 AufgabenAnfänger
4.6
(1390)
Spur
C++ Meisterschaft
4 Kurse85 AufgabenFortgeschritten
4.5
(104)
Spur
Java Web
6 Kurse240 AufgabenFortgeschritten
4.7
(4363)
Spur
Werden Sie QA-Ingenieur
5 Kurse315 AufgabenAnfänger
4.6
(1186)
Spur
Videoproduktion mit Adobe
4 Kurse123 AufgabenAnfänger
5.0
(13)
Spur
Ui/ux-Design-Tools
4 Kurse161 AufgabenAnfänger
4.8
(24)
Warum Menschen Codefinity wählen
Web Developer
Kwizera Mugisha
The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.
Senior Business Analyst
Sherry Barnes-Fox
My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.
Accounts Payable Specialist
Bill Wagner
I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.
IT Support Specialist
Daniel Chinea
I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.
Technology Project Manager
Steve Bruening
The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.
Project Manager
Stephanie Chan
As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.
Step-by-Step to Stellar Results
Interaktive Programmierumgebung
Tauche in unsere interaktive Umgebung ein: Schreibe und führe deinen Code mit Echtzeit-Feedback und Erfolgsmetriken aus—lerne bei jedem Schritt durch Praxis.
KI-gestützte Unterstützung
Nutze den integrierten KI-Assistenten, um Fehler zu erklären, Korrekturen vorzuschlagen oder Fragen zu deinem Code zu beantworten—so bleibst du produktiv und kommst nie ins Stocken.
Check your progress
Schließe jedes Modul mit einem kurzen Quiz ab, das sofortiges Feedback liefert, deinen Fortschritt verfolgt und sicherstellt, dass du die wichtigsten Konzepte beherrschst.
Promote your expertise
Erhalte dein branchenanerkanntes Zertifikat nach Abschluss und teile es mit einem Klick auf LinkedIn—lass dein Netzwerk sehen, was du kannst.
Vertraut von Mitarbeitern führender Unternehmen
und Studenten führender Universitäten
Zugriff auf den gesamten Katalog
Ein Abonnement eröffnet Ihnen diesen Kurs und unseren gesamten Katalog von Projekten und Fähigkeiten.Features:
500+ Top-bewertete KurseFortschrittlicher KI-Copilot
Personalisierte Lernpfade40+ praxisnahe Projekte
Ohne Kündigung, bevor der ausgewählte Rabattplan endet, akzeptiere ich, dass Codefinity automatisch belastet $104 alle 3 Monate bis ich kündige. Erfahren Sie mehr über die Stornierungs- und Rückerstattungsrichtlinien in Abonnementbedingungen.
Probiere Codefinity mit Vertrauen aus – 30-Tage-Geld-zurück-Garantie inklusive
Um dich bei Codefinity willkommen zu heißen, bieten wir bis zu 64% Rabatt auf unsere Kurse. Außerdem haben wir eine 30-Tage-Geld-zurück-Garantie, damit du uns risikofrei ausprobieren kannst.Wir freuen uns wirklich darauf, dich auf unserer Plattform willkommen zu heißen und sind bestrebt, dein Lernerlebnis einfach, interaktiv und unterhaltsam zu gestalten.
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
to kickstart your career
500+ Top-Rated courses
Completion certificates
Early access to new courses
40+ hands-on Real-world projects
Personalized study tracks
Unlimited workspaces
Sofortiger Zugriff auf 500+ Kurse
Unbegrenztes Lernen, sofortiger ZugriffErhalte vollen Zugriff auf alle Kurse und Tracks, einschließlich Videoinhalten, Quiz und ausführlichen Materialien—beginne jederzeit mit dem Lernen.
Branchenanerkannte ZertifikateErhalte Zertifikate, die deine Expertise bestätigen und deine Karriere in Tech, KI, Daten, Marketing und darüber hinaus fördern.
KI-unterstütztes LernenErhalte personalisierte Hinweise, Echtzeit-Feedback und KI-gestützte Erklärungen, um deinen Fortschritt zu beschleunigen.
Ständig wachsend: Neue Kurse & KarrierepfadeBleibe mit ständig aktualisierten Kursen, Karriereplänen, Herausforderungen und praktischen Tests auf dem neuesten Stand.
Baue relevante Fähigkeiten aufMeistere gefragte Fähigkeiten mit Kursen in KI, Datenwissenschaft, Programmierung, Marketing, Automatisierung, Webentwicklung und mehr.
Interaktives & nahtloses LernenBeteilige dich an praxisnahen Projekten, realen Übungen und einem intuitiven Lernerlebnis — keine zusätzlichen Werkzeuge erforderlich.
