Die komplette Web-Entwickler Masterclass

Lerne HTML, CSS, Javascript, jQuery, Bootstrap, PHP und werde zum kompletten Webentwickler in 6 Wochen

4.50 (3424 reviews)
Udemy
platform
Deutsch
language
Web Development
category
instructor
18,068
students
36 hours
content
Feb 2024
last update
$19.99
regular price

What you will learn

Erstelle tolle Webseiten die von den Besuchern geliebt werden

Qualifiziert dich für eine Position als Junior Webentwickler und ermäglicht dir als Quereinsteiger deinen Traumjob zu kriegen

Qualifiziert dich an Webseitenprojekten als Freelancer zu arbeiten und endlich diesen Lifestyle zu leben, von dem du seit langem träumst.

Starte Dein eigenes Business und baue so deine finanzielle Unabhängigkeit auf.

Werde zu einem selbstbewussten Front-End Entwickler der die Scriptsprachen HTML CSS und Javascript beherrscht wie seine Muttersprache.

Lerne die Verwendung von Datenbanken und serverseitigen Programmiersprachen

Description

Über 20.000 Teilnehmer haben im zweiten Teil ("Der komplette Webentwickler 2.0") alle Details über die moderne Webentwicklung gelernt. Jetzt gibt es eine komplett überarbeitete Fassung mit einer gänzlich anderen Herangehensweise. Frische Inhalte, besserer Video- und Audioqualität. Mit 32 Stunden Kursmaterial bekommst du alles was du über die Front- und Backend-Webentwicklung wissen musst!

Massimo schrieb über den Kurs
★★★★★

"Ich absolviere diesen Online-Kurs neben einem Web-Developer Lehrgang und bisher bin ich sehr zufrieden.2 sympathische Dozenten, ein angenehmes Tempo, sehr angenehme Stimmen. Gefällt mir wirklich gut bisher. Bin gespannt was noch alles kommt! LG aus der Schweiz!"

**Aufbau des Kurses**
In über 15 Kapiteln behandeln wir alle Details der Webentwicklung. Jedes Kapitel enthält Übungsaufgaben, die einen sicheren Umgang mit dem neuen Wissen garantieren.

Los geht’s mit den Grundlagen. Du lernst die richtigen Programme und Tricks kennen, so dass du schon in wenigen Tagen die Basics von HTML5, CSS3 und Javascript beherrschst.

Danach geht es an fortgeschrittene Themen und Techniken, die Dir beispielsweise ermöglichen Responsive Websites zu erstellen. Dazu gehört jQuery, Twitter Bootstrap, PHP7, MySQL5 und .

Entwickle Webseiten wie sie im Jahr 2022 geliebt werden

Bis dahin wirst du in der Lage sein eigene Blogs, Portfolio- und eCommerce Seiten mit Wordpress zu erstellen.

Wie wir alle wissen, macht Übung den Meister. Daher ist dieser Kurs mit interessanten und spannenden Übungsaufgaben vollgepackt, um das neu gelernte Wissen direkt umsetzen zu können.

Natürlich findest du auch jede Menge Quizze, die dir helfen dein Wissen zu prüfen.

Du entwickelst dynamische Webseiten

Natürlich sind dynamische Webseiten der Standard. Die Sprache überhaupt dafür ist PHP. Hier lernst Du sie kennen. 

Mit diesem Wissen befindest Du Dich in guter Gesellschaft. Viele erfolgreiche Projekte setzen darauf. Große eCommerce Lösungen wie Magento, Content Management Systeme wie WordPress und Typo3 und viele andere Projekte.

Sicher kennst Du auch die prominenteste PHP-Webseite der Welt: Facebook! Im Kurs lernst Du die Sprache kennen, mit der die größte Webseite der Welt arbeitet.

**Inhalte des Kurses**

  • Wie funktioniert das Web

  • Wie setzt man seine eigene Webseite auf

  • HTML

  • CSS

  • Javascript

  • jQuery

  • Bootstrap und Responsive Design

  • Contentmanagementsysteme wie Wordpress

  • SEO (Suchmaschinenoptimierung)

  • PHP Programmierung

  • MySQL Datenbanken

Erstellen von zwei kompletten und umfangreichen Projekten - von 0 bis 100

Anders als in bisherigen Kursen, in denen nur die Grundlagen der Themen behandelt werden und ein paar kleiner Beispiele gezeigt werden, werden in diesem Kurs zwei komplette Projekte umgesetzt.
Du lernst hierbei wie man alle erlernten Grundlagen direkt in einem ECHTES PROJEKT einsetzt und dieses effizient und sauber umsetzt.

Dazu werden wir nach jedem größeren Meilenstein direkt in die Umsetzung gehen und an dem Projekt weiterarbeiten.

Z.B. nachdem du HTML, CSS und Javascript gelernt hast, wird das Projekt ausgebaut und nutzt alle diese Sprachen.
Wenn dies bewerkstelligt ist, geht es daran die Seite wunderschön zu machen, mit jQuery und Bootstrap, geht das heutzutage am besten. Sobald du dann noch die Grundlagen der Backendentwicklung mit PHP und MySQL gelernt hast, wird ein Backend zur Projekt Webseite hinzugefügt und die Daten in der Datenbank gespeichert.


**Was Du sonst noch kriegst**

  • Eine Community die Dir bei jedem Schritt hilft.

  • Persönlichen Kontakt mit uns und unseren technischen Assistenten

  • Lebenslanges Zugriffsrecht auf alle Kursunterlagen

  • Übungsaufgaben um alles zu verinnerlichen

  • Verständnis zur Programmierung und Design

Deine einmalige Chance ist JETZT

Das digitale Zeitalter hat gerade erst begonnen. Du hast die Chance ein Teil dieser Entwicklung zu sein, eigene Ideen umzusetzen, Geld als Entwickler zu verdienen - die Zukunft unserer Gesellschaft aktiv zu gestalten. Lass sie die Chance nicht verstreichen. Ergreife diese Gelegenheit. Handle jetzt.

Wir freuen uns dich in diesem Kurs als neuen Teilnehmer begrüßen zu können und sind überzeugt, dass du mit den frisch angeeigneten Fähigkeiten neue Aufgaben im privaten und beruflichen Bereich übernehmen kannst. Bitte melde dich bei Fragen oder Unklarheiten direkt bei uns!

Content

Einführung

Willkommen im Kurs
Wie du das meiste aus dem Kurs holst

Einrichtung

Visual Studio Code Installieren
Wichtiger Hinweis!
Sprache in Visual Studio Code ändern

HTML Grundlagen

Hallo Welt und Dateiendungen
Grundgerüst einer HTML Datei
Kommentare
HTML Unterlagen
Was passiert wenn man eine Seite besucht
Woraus besteht Webentwicklung
Installieren der Live Server Extension
Überschriften in HTML
Absätze und Zeilenumbrüche
Quiz 1
Links in HTML
Bilder
Übung 1 Text
Übung 1
Ungeordnete und geordnete Liste
Quiz 2
Das Lang Attribut
Text formatieren in HTML
Verwendung von Symbolen
Übung 2 Text
Übung 2
UTF - 8 und seine Geschichte
UTF-8 und die Auswirkung auf HTML
Formulare
Formulare mit Radiobuttons
Weitere Input Typen
Quiz 3
Input Attribute
Übung 3 Text
Übung 3

CSS Grundlagen

Was ist CSS
CSS Unterlagen
Unser erstes Style - Inline CSS
Internes Style Sheet
Kommentieren in CSS
Das Div Tag
Quiz 4
Farbenlehre
CSS Übung 1 Text
CSS Übung 1
Links stylen
Fonts
ID Selektor
Class Selektor
CSS Übung 2 Text
CSS Übung 2
Quiz 5
Selektoren gruppieren
Selektoren erweitert
Hintergrundfarbe und - bild ändern
Margin, Padding, Border
Listen stylen
Tabellen stylen
CSS Übung 3 Text
CSS Übung 3
Position
Float
Display
Allign
Pseudoklassen
Quiz 6
Formulare stylen
CSS Übung 4 Text
CSS Übung 4
Overflow

Projekt HTML und CSS

Unterlagen für unser erstes HTML & CSS-Projekt
Worum geht es in diesem Abschnitt
Projektstart
Container mittig platzieren
Bild einbinden und display block
Bild verschönern (box-shadow)
Text- vs. Box-Shadow
externe Schriftart laden
Etwas Feinschliff
Weitere Unterseiten einbauen und Projekt abschließen

Expertenwissen: CSS (Teil 1)

Unterlagen für das Expertenwissen CSS (Teil 1)
Animationen in CSS
Animationen in CSS (Teil 2)
Position: absolute vs. relative
Farbverläufe: Linear-Gradient
Projekt: Position und Gradient (inkl. Aufgabe)
Projekt: Position und Gradient (Musterlösung)
Expertenwissen (optional): vw vs. vh

Expertenwissen CSS (Teil 2)

Unterlagen für das Expertenwissen CSS (Teil 2)
Expertenwissen Gradients
Pseudoselectors in CSS
Pseudoelemente
Exkurs: Font-Awesome
@media-Queries

Javascript Grundlagen

Was ist Javascript
Javascript Unterlagen
Unsere erste Interaktion via Click
Chrome Console, Script Tag und Element via ID ansprechen
Variablen und Zählerwebseite
Datentypen und typeof
Infos aus Formular in Javascript nutzen
If und Else If Bedingung
Arrays
Einstieg in Funktionen
Parsint
Funktionen mit Parametern
Array Funktionen
Return Statement
Javascript Quiz 1
Lokale vs globale Variablen
Mathematische und Zuweisungsoperatoren
Do While Schleife
While Schleife, prompt und Durchschnittsrechner Challenge
For Schleife
Javascript Quiz 2
Zufallsgenerator - Random
Zitate Webseite Intro
Zitate Webseite Lösung
Javascript Quiz 3

jQuery Grundlagen

jQuery Unterlagen
Erster jQuery Code
Style ändern mit jQuery
Verblassen von Inhalten
jQuery Quiz 1
Animationen
Chaining
Hide, append, prepend, before, after
Werte auslesen mit val()
Selektoren in jQuery
Tastatureingabe nutzen - Listen und remove
Events
jQuery Quiz 2

Flexbox

Unterlagen für Flexbox
Erste Schritte mit Flexbox
Flex-Basis und Flex-Grow
Flex-Basis und Flex-Shrink
Layout entwickeln (mit Flexbox)
Navigation bauen (justify-content)
Navigation bauen (align-self, align-items)
Navigation bauen (flex-direction)
Aufgabe: Würfel modellieren
Musterlösung: Würfel modellieren (Teil 1)
Musterlösung: Würfel modellieren (Teil 2)

Bootstrap

Was ist Bootstrap
Bootstrap unterlagen
Das Grundgerüst
Grid System
Tabellen
Jumbotron
Bootstrap Quiz 1
Navbar
Cards
Formulare
Carousel
Dropdown
Alerts und wie man eine Emailadresse validiert
Popover und Events in Bootstrap
Scrollspy
Hier Findest du Codesnippets und Progressbar
Text

SASS

Unterlagen zum SCSS-Abschnitt
Crashkurs SASS / SCSS (Teil 1)
Crashkurs SASS / SCSS (Teil 2)
Crashkurs SASS / SCSS (Teil 3)

Projekt

Ausblick: Was erwartet dich in diesem Abschnitt?
Unterlagen zu diesem Abschnitt
Wichtiger Hinweis zu den Unterlagen zu diesem Abschnitt
Teil 1: Projekt anlegen
Teil 2: Navigation umsetzen (1)
Teil 3: Navigation umsetzen (2)
Teil 4: Header umsetzen
Teil 5: Feinschliff Navigation
Teil 6: Kompletten Kopfbereich umsetzen
Teil 7: Flexbox für den Kopfbereich
Teil 8: Kopfbereich finalisieren
Teil 9: Service-Bereich umsetzen
Teil 10: Service-Bereich finalisieren
Teil 11: Aufgabe Portfolio-Bereich
Teil 12: Musterlösung Portfolio-Bereich
Teil 13: Portfolio-Bereich responsive machen
Teil 14: Der Über-uns-Bereich
Teil 15: Über-uns-Bereich, Bild platzieren
Teil 16: Über-uns-Bereich, Responsive Design
Teil 17: Über-uns-Bereich, Responsive Design & Aufgabe
Teil 18: Über-uns-Bereich, Musterlösung
Teil 19: Über-uns-Bereich, senkrechte Linie zeichnen
Teil 20: Team-Bereich, Aufgabe
Teil 21: Team-Bereich, Musterlösung (1)
Teil 22: Team-Bereich, Musterlösung (2)
Teil 23: Team-Bereich, Musterlösung (3)
Teil 24: Team-Bereich, Musterlösung (4)
Teil 25: Kontakt-Bereich, Hintergrundbild platzieren
Teil 26: Kontakt-Bereich, Eingabefelder platzieren
Teil 27: Kontakt-Bereich, Größe der Textarea anpassen
Teil 28: Kontakt-Bereich, Formular konfigurieren
Teil 29: Footer umsetzen
Teil 30: Navigation fixen (1)
Teil 31: Navigation fixen (2)
Teil 32: Refresher positioning und overflow
Teil 33: Slideout-Menü entwickeln (1)
Teil 34: Slideout-Menü entwickeln (2)
Teil 35: Slideout-Menü entwickeln (3)
Teil 36: Slideout-Menü entwickeln (4)
Teil 37: Slideout-Menü animieren
Teil 38: Ladezeit analysieren
Teil 39: Ladezeit optimieren
Teil 40: Finale Bugfixes

Wordpress

XAMPP bzw Webhosting Einrichten
Wordpress Einführung
Wordpress via FileZilla installieren
Wordpress one click Installation
Dashboard
Beiträge
Beiträge Übersicht der Möglichkeiten
Medien in Wordpress
Links
Seiten
Menüs erstellen und verwalten
Theme anpassen
Widgets
Plugins und Kontaktformular
Benutzer verwalten
Einstellungen
Cashing und Seitengeschwindigkeit
Themes installieren und anpassen
Woocommerce Plugin einrichten
Warenkorb Plugin für Woocomerce
Themes hochladen und wo man sie findet
Wordpress Quiz

SEO - Suchmaschinenoptimierung

Seo Einführung und Beweis
Keyword Suche
Permalinkstrutkur und Yoast SEO Plugin
Bedeutung der Performance für SEO
Backlinks und Backlink Ideen

PHP Grundlagen

Installieren von XAMPP
Hinweis für Mac-User
PHP Unterlagen
Erste Schritte in PHP
Zahlen und Strings in PHP
Funktionen in PHP
Funktion in PHP 2
If Abfragen
Funktionen mit Return
Booleans und Empty()
for, while, do while Schleifen
Arrays und Foreach
pre tag und print_r
Include Befehl
Require
Require_once
DIR Konstanten
PHP Quiz

Formulare mit PHP

GET Methoden
PHP Formulare Unterlagen
Post Methode
Wann POST und wann GET?
Formulare und Arrays mit Checkboxen

MySQL Grundlagen

MySQL Grundlagen
MySQL Unterlagen
PHP My Admin Einführung
Tabelle für unser Beispiel vorbereiten
MySQL Benutzeraccount anlegen und Rechte verwalten
MIT PDO Verbinden und Daten per Select abrufen
Daten mit INSERT einfügen
MySQL Quiz

Praxisprojekt: Kontaktformular & Admin-Menü

Kursmaterialien für diesen Abschnitt
Teil 1: Projekt vorbereiten
Teil 2: Verzeichnis vor Zugriffen schützen
Teil 3: Navigation per PHP generieren
Teil 4: Datenbank anlegen
Teil 5: Daten in die Tabelle schreiben (1)
Teil 6: Daten in die Tabelle schreiben (2)
Exkurs: Ein Blick in die Dokumentation
Teil 7: Daten in die Tabelle schreiben (3)
Teil 8: Validierung vom Formular
Teil 9: Bestätigungsnachricht anzeigen
Teil 10: Zeitstempel mit abspeichern
Teil 11: Exkurs - Die Probleme bei der Formularvalidierung im Browser
Teil 12: Admin-Bereich anlegen
Teil 13: Nachrichten anzeigen
Teil 14: Daten als Tabelle ausgeben
Teil 15: Datumsangaben formatieren
Teil 16: Einzelne Nachricht anzeigen
Teil 17: Daten in Formular anzeigen
Teil 18: Daten zurück in Datenbank schreiben
Teil 19: Zeitstempel editierbar machen
Teil 20: Nachricht löschbar machen
Teil 21: Passwortschutz einbauen

Schluss

Schlussworte

Screenshots

Die komplette Web-Entwickler Masterclass - Screenshot_01Die komplette Web-Entwickler Masterclass - Screenshot_02Die komplette Web-Entwickler Masterclass - Screenshot_03Die komplette Web-Entwickler Masterclass - Screenshot_04

Reviews

F.
November 11, 2023
Das erste Drittel des Kurses habe ich bereits erfolgreich durchgearbeitet. Die beiden Dozenten wissen, was sie tun, und man lernt nach und nach, wie ein Web-Entwickler zu denken. Mit "script", "function" etc. zu hantieren, war mir nicht vertraut, was sich gerade ändert. Es macht Spaß, die kleinen Fortschritte zu sehen, nebenbei das logische Denken zu trainieren und die Übungsbeispiele auf die eigenen Ideen zu übertragen. Manche Fragen beantworten sich von selbst, wenn man ein Video mehrmals schaut. Ein sehr guter Kurs. Danke.
Jürg
October 3, 2023
Die Einführung ist... - klar verständlich - in einem gut verfolgbarem Rhythmus - gleich von Anbeginn an werden die wichtigen Elemente erläutert und deren Installation verständlich vorgezeigt - Einstellungen für eine individuell angepasste Lerngeschwindigkeit aufgezeigt - Die Aussprache ist sehr gut verständlich, obwohl ich manchmal wünsche, dass Kürzel einmal voll ausgesprochen und deren Bedeutung kurz erörtert würden (hilft vielleicht um sie besser zuweisen zu können)
Udo
June 18, 2023
Inhaltlich sehr umfangreich und generell sehr gut thematisch aufgebaut und rübergebracht. Kleines Manko: Vor Allem bei kurzen Themen kommt es sehr häufig zu einer x-fachen Wiederholung des gleichen Satzes, nur mit geänderter Wortreihenfolge. Dadurch wird das entsprechende Thema etwas langwierig abgehandelt.
Lukas
June 1, 2023
Bisher sehr gut, ich habe jetzt HTML Grundkurs durch, ich habe vorher kaum Erfahrung gehabt, vorher 1 Video auf Youtube geschaut und mit VCS "meine erste Homepage" probiert bzw. einfach nach geschrieben aus dem Youtube video. Jetzt mit den ganzen Lernstoff, zwischen durch die Quiz bin ich sehr zu Frieden und mit den Übungen auch. Ich füge mir auch selbst im Code immer Kommentare hinzu mit Shortcuts oder tipps. Ich werde die Bewertung weiter auf dem neusten Stand halten.
SwordArt
May 1, 2023
bin erst bei Lektion 14, und man kommt gut mit. Allerdings halben Stern abzug weil manche Lektionen sehr Sprunghaft sind sprich man wird sofort ins kalte Wasser geworfen. Aber kein Grund zu Sorge, jeder der nicht grenzdebil ist wird sicher mitkommen.
Ahmet
April 25, 2023
Im Grunde werden viele Themen angeschnitten aber ein "kompletter Kurs" ist das sicher nicht. Panjuta hat keine Struktur. Er überspringt immer wichtige Punkte, erklärt die wichtigsten Klassen nicht, schweift vom Thema ab und spricht dann minutenlang über aus dem Kontext gerissene ganz andere Sachen an. Ich persönlich kann bei so einem unstrukturierten Kurs nur ungefähr erfahren was die Themenbereiche sind, jedoch nicht in detaillierter Weise. Seemann ist da weit genauer und verständlicher. Wünschte Seemann hätte den gesamten Kurs alleine gemacht. Leider nur 1 Stern.
Mohamad
April 5, 2023
Der Kurs war sehr detailliert und hatte interessanterweise individuelle Erfahrungen des Dozenten. Durch diese wurde ein besserer Einblick in die Umgebung eines Webentwicklers ermöglicht. Man erlebt bei der Problemlösung welche Finesse und Geduld man besitzen muss um ans Ziel zu gelangen. Dahinter steckt die Motivation jedes Webentwicklers. Ich bin aufjedenfall sehr dankbar für diesen wahrlich umfangreichen Kurs. Mit so einer Bandbreite an Wissen ist man sicherlich gut gewappnet für ein Leben als Webentwickler. Ich kann nur nochmals unterstreichen, dass ich dankbar für den Kurs bin und das ich ihn sehr weiterempfehle.
Sven
April 3, 2023
Der Kurs bietet einen umfassenden Überblick über die Webentwicklung und die Praxisprojekte haben mir besonders gut gefallen. Einige der Lektionen waren etwas veraltet, aber dennoch konnte ich alles selbstständig umsetzen.
Nico
February 13, 2023
Sehr angenehm zum zuhören, die Tutoren wirken kompetent. Sollte es bei 5 Sternen bleiben, bedeutet das, dass ich sehr zufrieden war.
Baran
January 25, 2023
Der kurs ist top! alles wird mega gut erklaert danke denis und janis fuer eure arbeit dank euch lerne ich alles! Preis einfach fuer das wissen top!
Ulrike
January 8, 2023
Super guter Kurs, ich liebe diese kleinen Übungen. Macht richtig Spaß! Manchmal wird doch etwas Wissen vorausgesetzt, z.B., was "debuggen" ist, weiß vielleicht nicht jeder. Vielleicht kommt da aber später noch was dazu. Ich freu mich drauf!
Andy
January 5, 2023
Wirklich klasse Kurs. Die Basics werden sehr verständlich vermittelt. Ich hoffe, dass sich das auch bis zum Ende des Kurses so verhält. Mittlerweile fühle ich mich jedoch bereit um eine Bewertung abzugeben.
Jürgen
December 6, 2022
Der Begriff "Masterclass" ist hier vielleicht nicht der passende Begriff. Es werden die absoluten Basics vermittelt und nicht mehr. Objektorientierung ist hier gar nicht erst enthalten. Es ist aber kein Grund diesem Kurs nur 1 Stern oder so zu geben. Bei Denis bin ich noch sehr unschlüssig, wie ich ihn bewerten soll. Er hat sich Mühe gegeben, aber diese Thematik scheint nicht sein "Kernelement" zu sein. Somit wurden ein paar Dinge falsch erklärt, die signifikante Auswirkungen haben (Um ein Beispiel zu nennen: Variablen deklarieren). Mir hat vor allem gefehlt, woher er neue Befehle genommen hat (mir ist klar, aus der Dokumentation) - bzw. mal etwas genauer darauf eingehen würde hier fehlen. Gerade für komplette Anfänger -> glücklicherweise kannte ich schon sehr viel. Jannis hat das Tempo hier ordentlich angezogen und ist dann, wie ich bei Denis bemängelt habe, aber auf neue Befehle (auf die nicht tiefgehend eingegangen wird) und dessen Struktur eingegangen. Hat dies über die Dokumentation noch genauer erläutert. Grundlegend, nach diesem Kurs seid ihr nicht wirklich Web Entwickler, sondern könnt quasi "Eine sehr simple Website" erstellen. Als nächsten Schritt, empfehle ich weiterführende Kurse in eine spezielle Thematik -> JavaScript. Ich weiß nicht, ob ich persönlich noch einmal einen Kurs von Denis ansehen würde. Bei Jannis werde ich weiterführend in JavaScript schauen, denn Jannis kommt mir in der Thematik "kompetenter" bzw. Berufserfahrener vor.
Oliver
November 30, 2022
Der Kurs hat mir wirklich sehr gut gefallen! Für absolute Einsteiger wirklich alles abgedeckt, was beim Thema Web-Development zu berücksichtigen ist. In diesem Sinne Danke für diesen sehr informativen Kurs!
Dodji
November 20, 2021
Der Kurs ist sehr gut. Vor dem Kauf wurde mir nicht bewusst, dass dieser Kurs und der aktuellste "der komplette Webentwickler Kurs 2.0" unabhängig voneinander sind. Ich dachte das war Teil 1 und Teil 2. Heute hätte ich lieber der Kurs 2.0 gekauft. Trotzdem komme ich klar mit diesem auch.

Charts

Price

Die komplette Web-Entwickler Masterclass - Price chart

Rating

Die komplette Web-Entwickler Masterclass - Ratings chart

Enrollment distribution

Die komplette Web-Entwickler Masterclass - Distribution chart
1969484
udemy ID
10/16/2018
course created date
11/1/2019
course indexed date
Bot
course submited by