Der große Kurs der Webentwicklung: HTML, CSS, JS, PHP und Co
4.6 (722 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,122 students enrolled

Der große Kurs der Webentwicklung: HTML, CSS, JS, PHP und Co

Moderne Webseiten erstellen mit HTML 5, CSS 3, JavaScript, jQuery, Bootstrap 4 un PHP 7! Responsive Webdesign inklusive!
Highest Rated
4.6 (722 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,122 students enrolled
Created by David Mika
Last updated 3/2020
German
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 32 hours on-demand video
  • 9 articles
  • 178 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Erstelle Webseiten mit HTML, CSS und JavaScript
  • Dynamische Webseiten mit JavaScript und jQuery
  • Baue dein eigenes responsive Framework für responsive Webdesign auf
  • Erstelle moderne responsive Webseiten mit Bootstrap
  • Erstelle erste Praxisprojekte für dein persönliches Portfolio
  • Lerne viele nützliche kostenlose Ressourcen kennen
  • Arbeite serverseitig mit PHP
  • Verarbeite Daten deiner Webseite mit PHP und MySQL
Course content
Expand all 187 lectures 31:57:39
+ Einführung zum Kurs
5 lectures 21:26

Einführendes Video zum Kurs "Der große Kurs der Webentwicklung".

Preview 05:57

In dieser Lektion sprechen wir über die kostenlose Software, die wir für diesen Kurs verwenden.

Installation der (kostenlosen) Software
05:37

DIE erste Seite, die jeder erstellt, wenn er mit der Webentwicklung beginnt.

Preview 04:50

Erfahre, was du tun kannst, wenn sich während des Kurses Fragen auftun.

Fragen? So bekommst du Hilfe
04:07

Allgemeine FAQs und deren Antworten.

Kurs FAQs
00:55
+ HTML 5
26 lectures 03:30:15

Ein Überblick über die Grundlagen von HTML in Form einer kommentierten Präsentation.

Preview 10:18

Jedes .html-Dokument folgt einer Grundstruktur. Lerne sie in dieser Lektion kennen.

Grundstruktur: Html, Head, Body
06:34

Lerne die Headings kennen, die uns ermöglichen Überschriften auf unseren Seiten zu platzieren.

Headings (Überschriften)
06:09

Mit den Paragraphen bringen wir Textinhalte auf unsere Webseiten.

Paragraphs (Absätze)
07:41

Wie du deinen Text ähnlich einem Textverarbeitungsprogramm á la Word formatieren kannst erfährst du in dieser Lektion.

Text Formatierung
08:21

Ohne Style wären Webseiten sehr langweilig. Deshalb legen wir mit dieser Lektion den Grundstein, um uns gestalterisch ausleben zu können.

Style (Attribut)
06:59

Um zu bestimmten Stellen auf unserer Seite oder anderen Webseiten verlinken zu können brauchen wir - wie der Name schön verrät - Links. Unser Thema dieser Lektion.

Links
11:17

Egal ob To-Dos, Zusammenfassungen oder andere Informationen - Listen eignen sich bestens, um solche Inhalte darzustellen. Auch auf Webseiten.

Listen
08:02

Lerne, wie du Bilder in deine Web-Projekte einbinden kannst.

Bilder
10:42

Daten lassen sich meist sehr gut in Tabellen darstellen. In dieser Lektion lernen wir, wie wir mit HTML Tabellen erstellen können.

Tabellen
09:35

Du möchtest ein Zitat oder eine andere Quelle in deine Seite einbinden? Lerne in dieser Lektion, wie es geht.

Zitate
09:06

Um zu verstehen, wie sich Elemente auf unserer Seite anordnen, besprechen wir in dieser Lektion den Unterschied zwischen Block- & Inline-Elementen.

Block & Inline Elemente
06:57

Um Elemente zu gruppieren (und ihnen später eine einheitliche Gestaltung zu verleihen) stehen uns die Klassen zur Verfügung.

Klassen
07:00

iFrames dienen uns z.B. dazu YouTube-Videos in unsere Seite einzubinden. Aber auch andere Web-Inhalte können wir so auf unserer Seite platzieren.

iFrames
08:36

Erfahre in diesem Video die Aufgabenstellung zu deinem ersten selbstständigen Entwicklungsprojekt in diesem Kurs. Wir erstellen eine informative Webseite über das Sonnensystem und setzen die bisher gelernten "Bausteine" des HTML ein. Viel Spaß beim Lösen dieser Aufgabe!

Projekt - Aufgabe
02:13

Dieses Video bietet eine mögliche Lösung zur Aufgabe unseres HTML-Projektes. Es kann bei Bedarf jedem dazu dienen nachzuvollziehen, wie ich zu meiner Lösung gekommen bin. Weitere alternativen und eure Vorschläge können wir gerne im Fragen & Antworten Forum besprechen.

Projekt - Lösung
27:20

Um den Code unserer Seiten besser zu verstehen und die Zusammenarbeit mit Kollegen und Freunden zu verbessern stehen uns die Kommentare zur Verfügung. Lerne in dieser Lektion, wie du sie einsetzen kannst um bspw. Notizen im Code zu hinterlassen oder deinen Kollegen Hinweise zu geben.

Kommentare
06:45

Wenn wir Informationen von unseren Besuchern / Nutzern abfragen möchten, dann bieten uns die Formulare eine tolle Möglichkeit dazu. Lerne in diesem Video, wie du dein individualisiertes Formular erstellen kannst und welche Arten von Informationen (Input) du erfassen kannst.

Forms
08:05

Lerne zu verstehen, was sich hinter den "Meta Tags" und dem "Charset" verbirgt.

Meta Tags (Charset)
03:07

Diese Lektion erklärt wie wir die HTML Entities dazu verwenden können, um HTML-spezifische Zeichen auf unsere Seite bringen zu können.

Entities
03:56

Diese Lektion erklärt wie wir eine bestimmte Schreibweise verwenden, um Symbole auf unsere Seite zu bringen.

Symbole
06:26

Um den erfolgreichen Zugriff auf Dateien in verschiedenen Verzeichnissen zu verstehen schauen wir uns in diesem Video an, wie wir mit Dateipfaden umgehen.

Dateipfade
08:38

HTML5 stellt uns besondere Möglichkeiten bereit, um mit verschieden Qualitätsstufen und Größen von Bildern umzugehen.

Preview 07:08

Lerne, wie du Scalable Vector Graphics in deine Seite einbinden kannst.

SVG
09:05

Audio-Dateien einzubinden ist denkbar einfach. In dieser Lektion lernst du, wie es geht.

Audio
04:34

Nicht nur mit Audio, sondern auch mit Video-Dateien und unseren eigenen Playern können wir durch HTML5 sehr einfach arbeiten. Erfahre hier, wie es geht.

Video
05:41

Als Abschluss des HTML-Abschnitts noch ein umfassendes Quiz, um deine neu erlernten Fähigkeiten zu testen. So kannst du dich einerseits deines Fortschritts vergewissern und andererseits herausfinden, welche Lektionen du dir noch einmal anschauen könntest. Viel Erfolg!

HTML-Quiz
9 questions
+ CSS 3
37 lectures 08:01:07

Ein Überblick über die Grundlagen von CSS in Form einer kommentierten Präsentation.

Grundlagen CSS
09:13

Lerne die verschiedenen Arten kennen, auf die wir Farben in CSS ausdrücken und verwenden können.

Farben
16:15

Hintergründe werden meistens erst durch den Einsatz von Farben und Bildern interessant. Lerne in dieser Lektion, wie das geht.

Hintergründe
12:36

Dieses Video behandelt die Borders, also die Rahmen unserer HTML-Elemente.

Borders
11:51

Einer der wichtigsten Bestandteile zur Positionierung von Elementen ist die Margin, der Raum um Elemente.

Margins
07:45

Einer weiterer sehr wichtigster Bestandteile zur Positionierung von Elementen ist das Padding, der zusätzliche Raum innerhalb von Elementen.

Paddings
02:39

Um die Positionierung und Größe von Elementen komplett zu verstehen besprechen wir in dieser Lektion das sogenannte Box-Model des CSS.

Box-Model
07:58

Nicht nur mit HTML können wir Text formatieren. CSS bietet uns dazu noch viele weitere Möglichkeiten.

Text Formatierung
13:40

Einer der leichtesten Wege, um eine Seite interessant und individuell zu machen, ist die Verwendung von Schriftarten. Lerne kennen, wie du diese einsetzt und wo du sie finden kannst.

Fonts (Schriftarten)
15:47

Auch unsere Links lassen sich durch CSS in ihrer Gestaltung bearbeiten. Lerne in diesem Video, wie das geht.

Links
12:41

Genau wie für Links bietet uns CSS auch für Listen weitere Gestaltungsmöglichkeiten.

Listen
09:53

In dieser Lektion betrachten wir, wie wir Tabellen durch CSS wesentlich ansehnlicher gestalten können.

Tabellen
11:12

Erfahre mehr über die "display" Eigenschaft von Elementen.

Display
10:44

Lerne die Darstellung durch den "inline-block" genauer kennen und wie du diese einsetzen kannst.

Inline-block
09:11

Erfahre was es mit der maximalen Breite von Elementen, der "max-witdth", auf sich hat.

Max-width
07:04

Baue dein Wissen zur Positionierung von Elementen auf deiner Seite mit dieser Lektion weiter aus.

Position
22:05

Deine Inhalte sind für einen bestimmten Bereich zu lang oder groß? Kein Problem! Die overflow-Eingeschaft erlaubt es uns festzulegen, wie damit umgegangen werden soll.

Overflow
08:12

Auf unserem Weg zu einem umfassenden Verständnis davon, wie sich Elemente verhalten, betrachten wir in dieser Lektion "float" und "clear". 

Float & Clear
14:52

Die Ausrichtung lässt sich in CSS über "align" bestimmen, dass das Thema dieser Lektion ist.

Align
24:04

Wir betrachten in diesem Video eine Image-Gallery als Praxisbeispiel zum CSS-Einsatz.

Image Gallery (Praxisbeispiel: Photo Portfolio)
16:53

Lerne, wie du mit CSS deinen Formularen einen individuellen Look verleihst. Am Praxisbeispiel eines Logins!

Forms bzw. Formulare (Praxisbeispiel: Login und Registrierung)
28:49

Erfahre, was die Aufgabe für dein CSS-Projekt ist: Wir möchten die Airbnb-Seite nachempfinden. Dieses Video gibt dir außerdem weitere Bearbeitungshinweise.

Preview 05:45

Detaillierte Bearbeitungshinweise und zusätzliche Infos zur Aufgabenstellung unseres Airbnb-Projekts.

Projekt: Airbnb - Lösung
01:47

Teil 1 des HTML-Codings für unser Airbnb-Projekt.

Projekt: Airbnb - HTML (Teil 1)
23:09

Teil 2 des HTML-Codings für unser Airbnb-Projekt.

Projekt: Airbnb - HTML (Teil 2)
18:22

Teil 3 des HTML-Codings für unser Airbnb-Projekt.

Projekt: Airbnb - HTML (Teil 3)
16:15

Teil 1 des CSS-Codings für unser Airbnb-Projekt.

Projekt: Airbnb - CSS (Teil 1a)
16:53

Teil 1 des CSS-Codings für unser Airbnb-Projekt.

Projekt: Airbnb - CSS (Teil 1b)
13:27

Teil 2 des CSS-Codings für unser Airbnb-Projekt.

Projekt: Airbnb - CSS (Teil 2a)
14:45

Teil 2 des CSS-Codings für unser Airbnb-Projekt.

Projekt: Airbnb - CSS (Teil 2b)
17:50

Teil 3 des CSS-Codings für unser Airbnb-Projekt.

Projekt: Airbnb - CSS (Teil 3a)
18:35

Teil 3 des CSS-Codings für unser Airbnb-Projekt.

Projekt: Airbnb - CSS (Teil 3b)
18:58

Lerne, wie du internes CSS in externe Dateien auslagern kannst, um die Übersicht und Handhabung des Codes zu verbessern.

Externes CSS
06:36

Lerne, wie du über externe Ressourcen tolle Icons in deine Projekte einbauen kannst.

Icons
09:14

Diese Lektion erklärt die CSS-Combinators.

Combinators
10:30

Erfahre, wie du Pseudoklassen zur gezielten Selektion von Elementen auf deiner Seite verwenden kannst.

Pseudo-Klassen
10:48

Erfahre, wie du Pseudoelemente zur gezielten Selektion von Elementen auf deiner Seite verwenden kannst.

Pseudo-Elemente
04:49

Als Abschluss des CSS-Abschnitts noch ein umfassendes Quiz, um deine neu erlernten Fähigkeiten zu testen. So kannst du dich einerseits deines Fortschritts vergewissern und andererseits herausfinden, welche Lektionen du dir noch einmal anschauen könntest. Viel Erfolg!

CSS Quiz
7 questions
+ Responsive Web Design
8 lectures 01:17:29

Ein Überblick über die Grundlagen von RWD in Form einer kommentierten Präsentation.

Grundlagen RWD
07:14

In diesem ersten Video zum RWD besprechen wir, welche Rolle der Viewport spielt, wenn wir unsere Seiten auch für die mobile Darstellung schreiben wollen.

Viewport
08:50

Lerne das Flexbox-Konzept kennen und wie du es einsetzen kannst, um Inhalte flexibel zu gestalten.

Flex Box
17:13

Eine tolle Möglichkeit, um mit mobiler Darstellung umzugehen, ist es ein Grid zu verwenden. In diesem Video lernen wir was das ist und wie wir es aufsetzen können.

Preview 13:24

Anschließende Hinweise zur Grid View Lektion.

Hinweis: Grid View Lektion
00:27

Verstehe, wie uns die Media Queries dabei helfen unsere Seite dynamisch auf verschiedene Endgeräte anzupassen.

Media Queries
12:58

Erfahre, wie wir im RWD mit Bildern und Videos umgehen.

Images & Videos
15:01

Erhalte einen kurzen Überblick zu RWD Frameworks. Das vermutlich prominenteste - Bootstrap 4 - ist auch Bestandteil dieses Kurses und folgt in einem späteren Abschnitt.

RWD Frameworks
02:22
+ JavaScript
34 lectures 06:06:20

Ein Überblick über die Grundlagen von JavaScript in Form einer kommentierten Präsentation.

Grundlagen
07:02

Schreibe eine erste "Hallo Welt"-Seite mit JavaScript.

Hallo Welt
03:21

Übersicht über die Gestaltung des JavaScript-Abschnitts.

JavaScript Abschnitt: Teil 1 - Die Sprache
00:24

Lerne die grundsätzliche Syntax von JavaScript kennen. Außerdem behandeln wir in dieser Lektion die Verwendung von Kommentaren in JS.

Syntax und Kommentare
06:53

Erfahre, wie wir über "use strict" den modernen Modus von JavaScript aktivieren können.

Der "moderne" Weg: "use strict"
02:22

In dieser Lektion besprechen wir die Erstellung von Verwendung von Variablen.

Variablen
09:21

Erfahre, welche Datentypen uns in JS zur Verfügung stehen und was dieses ausmacht.

Datentypen Grundlagen
14:43

Die Type Conversions ermöglichen es uns, den Datentyp unserer Informationen zu ändern. Welche Grundregeln dabei gelten erfährst du in dieser Lektion.

Type Conversions: Den Typ ändern
11:56

Erfahre, welche wichtige Rolle die Operatoren in JS spielen.

Operatoren
21:04

In dieser Lektion besprechen wir, wie wir Informationen miteinander vergleichen können und welches Ergebnis und diese Vergleiche liefern.

Vergleiche
09:25

JavaScript stellt uns einige Möglichkeiten zur Interaktion mit dem Seitenbesucher / Nutzer zur Verfügung. Diese besprechen wir in dieser Lektion.

Interaktion: alert, promt, confirm
06:30

Lerne, wie und wozu wir Bedingungen verwenden.

Bedingungen
14:08

In diesem Video besprechen wir die logischen Operatoren.

Logische Operatoren
16:04

Schleifen helfen uns dabei Anweisungen in Abhängigkeit von bestimmten Faktoren mehrmals auszuführen.

Schleifen: while, for
25:37

Die "Switch" Anweisung erlaubt es uns Überprüfungen auf verschiedene Fälle durchzuführen und je nach Fall andere Anweisungen zu hinterlegen.

"Switch" Anweisung
11:04

Lerne kennen, wie mächtig die Funktionen sind und wie du dir deine eigenen Funktionen erstellen kannst.

Preview 20:19

Ein wichtiger Aspekt - speziell von komplexeren Projekten - ist die Fehlersuche und die entsprechende Korrektur. Dabei hilft uns das Debugging.

Qualitätskontrolle: Debugging in Chrome
12:32

Wenn wir beim Coden einen bestimmten Stil einhalten, dann vermeiden wir Fehler, machen unsren Code verständlicher und fördern die Zusammenarbeit. Erhalte diesbezüglich einen Überblick.

Qualittätssicherung: Coding Style
07:32

Erfahre, was die Objekte als Datentyp so besonders macht. Erhalte außerdem einen kleinen Ausblick auf Objektorientierte Programmierung (OOP).

Objekte (Teil 1)
21:09

Erfahre, was die Objekte als Datentyp so besonders macht. Erhalte außerdem einen kleinen Ausblick auf Objektorientierte Programmierung (OOP).

Objekte (Teil 2)
23:35

Mit den Symbolen schließen wir die Betrachtung aller grundlegenden Datentypen in JS ab.

Symbole
09:24

Methoden erlauben es uns vordefinierte Anweisungen für Objekte durchzuführen. Lerne in dieser Lektion, wie du sie erstellen und nutzen kannst.

Objekt Methoden, "this"
08:39

Erfahre, was der Constructor in JavaScript ist und was "new" bewirkt.

Constructor, "new"
07:25
JavaScript Abschnitt: Teil 2 - Der Browser
00:28

Wir starten unseren zweiten Teil des JavaScript Abschnitts mit einer Betrachtung unserer "neuen" Umgebung: dem Browser.

Browser Umgebung
08:33

Lerne, was der DOM Baum ist und warum er so wichtig für uns ist.

DOM Baum (Tree)
11:19

In dieser Lektion betrachten wir, wie wir Elemente auf unserer Seite suchen, finden und auswählen können.

Elemente suchen: getElement* und querySelector*
07:59

Lerne, wir du mit den Attributen von HTML-Elementen und derem "innerHTML" umgehen kannst.

HTML ändern: Attribute und innerHTML
08:20

Wir besprechen, wie wir unser Dokument mit JavaScript modifizieren können, um die Anzeige im Browser zu verändern.

Das Dokument modifizieren
11:35

Wir besprechen, wie wir mit JavaScript Einfluss auf das Styling von Elementen und deren CSS-Klassen nehmen können.

Style und Klassen
10:02

Erfahre, wie in JS die Größe von Elementen verstanden wird.

Elementgröße und Scrollen
16:17

Erfahre, wie in JS die Größe des Browserfensters verstanden wird.

Fenstergröße und Scrollen
12:28

Erhalte eine kurze Einführung zu den Events im Browser. Detaillierter werden wir dieses Thema im folgenden jQuery-Abschnitt behandeln.

Browser Events
08:25

Kurzer einführender Hinweis zum folgenden jQuery-Abschnitt.

Hinweis: jQuery Abschnitt
00:24

Als Abschluss des JavaScript-Abschnitts noch ein umfassendes Quiz, um deine neu erlernten Fähigkeiten zu testen. So kannst du dich einerseits deines Fortschritts vergewissern und andererseits herausfinden, welche Lektionen du dir noch einmal anschauen könntest. Viel Erfolg!

JavaScript Quiz
6 questions
+ jQuery
17 lectures 01:56:33

Ein Überblick über die Grundlagen von jQuery in Form einer kommentierten Präsentation.

Grundlagen
05:03

Erhalte einen Überblick über jQuery und darüber, wie du es in deine Projekte einbinden kannst.

Setup und Document-ready-Funktion
07:38

Selektoren - ähnlich wie beim CSS - erlauben es uns, Elemente auf unserer Seite sehr gezielt auszuwählen.

Syntax und Selektoren
04:46

Erweitere dein Verständnis von Events in der Interaktion zwischen Nutzer, Browser und Webseite.

Events
12:08

Lerne, wie du mit "Hide" und "Show" Elemente ein- und ausblenden kannst.

Ein-/Ausblenden: Hide, Show, Toggle
06:47

Lerne, wie du mit "Fade" Elemente ein- und ausblenden kannst.

Preview 07:38

Lerne, wie du mit "Slide" Elemente ein- und ausblenden kannst.

Ein-/Ausblenden: Slide
04:38

jQuery erlaubt es uns mit "animate()" Animationen für unsere Elemente zu erstellen, indem wir CSS-Eigenschaften dynamisch ändern.

Animationen: Animate
10:58

Erfahre, wie uns "stop()" dabei hilft, Animationen wieder anzuhalten. Außerdem erfährst du, wie du bestimmst, was nach dem Stop passiert.

Animationen: Stop
04:45

Die Callback-Funktionen erlauben es uns, sicherzustellen, dass ein Effekt abgeschlossen ist, bevor wir die nächste Anweisung ausführen.

Callback Funktionen
03:24

Mit "Chaining" beschreibt man das Aneinanderreihen von mehreren Methoden.

Chaining: Methoden aneinanderreihen
02:53

Lerne, wie du auch mit jQuery Inhalte von bereits vorhanden Elementen verändern kannst.

HTML beeinflussen: Inhalte
13:27

In dieser Lektion betrachten wir, wie wir mit jQuery neue Elemente zu unserer Seite hinzufügen können.

HTML beeinflussen: Elemente hinzufügen
04:48

In dieser Lektion betrachten wir, wie wir mit jQuery Elemente von unserer Seite entfernen können.

HTML beeinflussen: Elemente entfernen
06:01

Zur Gestaltung von unsere Seite bietet jQuery einfache Methoden, die uns die Kontrolle über die CSS-Klassen von Elementen gibt.

CSS beeinflussen: Klassen
05:28

Außer dem Klassen können wir auch ganz gezielt die CSS-Eigenschaften abfragen und verändern.

CSS beeinflussen: Eigenschaften
07:56

Verstehe, wie jQuery - im Vergleich zu JavaScript - die Größe von Elementen misst.

CSS beeinflussen: Dimensionen (Größe)
08:15

Als Abschluss des jQuery-Abschnitts noch ein umfassendes Quiz, um deine neu erlernten Fähigkeiten zu testen. So kannst du dich einerseits deines Fortschritts vergewissern und andererseits herausfinden, welche Lektionen du dir noch einmal anschauen könntest. Viel Erfolg!

jQuery Quiz
4 questions
+ Bootstrap 4
41 lectures 08:28:48

Ein Überblick über die Grundlagen von Bootstrap in Form einer kommentierten Präsentation.

Grundlagen
05:29

Erhalte eine einführende Übersicht über einige Bootstrap Beispiele. So verstehen wir am einfachsten, was Bootstrap so besonders macht.

5 Bootstrap Beispiele
07:53

Führe die Einrichtung von Bootstrap per Download durch.

Bootstrap per Downlaod
09:51

Führe die Einrichtung von Bootstrap per CDN durch.

Bootstrap per CDN
07:24

Erhalte einen Überblick über die Ordnerstruktur zu diesem Zeitpunkt unseres Kurses.

Datenmanagement Bootstrap-Abschnitt
00:27

Lerne den Container in Bootstrap kennen.

Layout: Container
08:16

Lerne das Grid in Bootstrap kennen.

Layout: Grid
12:42

Lerne die Typography in Bootstrap kennen.

Content: Typography
12:53

Lerne den Code in Bootstrap kennen.

Content: Code
09:36

Lerne die Bilder in Bootstrap kennen.

Content: Images
10:36

Lerne die Tabellen in Bootstrap kennen.

Content: Tables
13:56

Lerne die Alerts in Bootstrap kennen.

Components: Alerts
14:04

Lerne die Badges in Bootstrap kennen.

Components: Badge
09:33

Lerne Breadcrumb-Verzeichnisse in Bootstrap kennen.

Components: Breadcrump
06:03

Lerne die Buttons in Bootstrap kennen.

Components: Buttons
13:09

Lerne die Button Groups in Bootstrap kennen.

Components: Button Group
09:10

Lerne die Cards in Bootstrap kennen.

Components: Cards - Grundlagen
23:06

Lerne das Layout der Cards in Bootstrap kennen.

Components: Cards - Layout
14:11

Lerne das Carousel in Bootstrap kennen.

Components: Carousel
18:49

Lerne Collapse in Bootstrap kennen.

Components: Collapse
17:15

Lerne die Dropdowns in Bootstrap kennen.

Components: Dropdowns
19:18

Lerne die Formulare in Bootstrap kennen.

Components: Forms
25:42

Lerne die Input Groups in Bootstrap kennen.

Components: Input Group
17:17

Lerne den Jumbotron in Bootstrap kennen.

Components: Jumbotron
05:39

Lerne die List Groups in Bootstrap kennen.

Components: List Group
14:41

Lerne das Modal in Bootstrap kennen.

Components: Modal
13:28

Lerne Navs in Bootstrap kennen.

Components: Navs
19:46

Lerne die Navbar in Bootstrap kennen.

Components: Navbar
21:25

Lerne die Pagination in Bootstrap kennen.

Components: Pagination
08:47

Lerne die Popovers in Bootstrap kennen.

Components: Popovers
12:50

Lerne die Progressbar in Bootstrap kennen.

Components: Progressbar
12:17

Lerne Scrollspy in Bootstrap kennen.

Components: Scrollspy
07:21

Lerne die Tooltips in Bootstrap kennen.

Components: Tooltips
06:41

Erfahre mehr über die Aufgabe des Bootstrap-Projekts: Die Erstellung einer modernen komplett responsiven Webseite für ein Start-up einer Photo-App.

Preview 07:08

Erfahre mehr über die Lösung des Bootstrap-Projekts: Die Erstellung einer modernen komplett responsiven Webseite für ein Start-up einer Photo-App.

Projekt: Startup-Seite - Lösung
00:57

Teil 1 der Lösung des Bootstrap-Projekts: Navbar und Header

Projekt: Startup-Seite - Lösung (Teil 1: Nav & Header)
22:26

Teil 2 der Lösung des Bootstrap-Projekts: Features

Projekt: Startup-Seite - Lösung (Teil 2: Features)
11:43

Teil 3 der Lösung des Bootstrap-Projekts: Pricing

Projekt: Startup-Seite - Lösung (Teil 3: Pricing)
12:52

Teil 4 der Lösung des Bootstrap-Projekts: Testimonials

Projekt: Startup-Seite - Lösung (Teil 4: Testimonials)
18:15

Teil 5 der Lösung des Bootstrap-Projekts: Contact und Footer

Projekt: Startup-Seite - Lösung (Teil 5: Contact & Footer)
20:25

Teil 6 der Lösung des Bootstrap-Projekts: Abschließende Details

Projekt: Startup-Seite - Lösung (Teil 6: Details)
05:26
+ Webhosting
3 lectures 13:56
Webhosting
02:55
Setup für folgende Abschnitte
05:09
Alternative Möglichkeit
05:52
+ PHP
16 lectures 02:01:43
Grundlagen
06:33
Syntax und Kommentare
08:45
Textausgabe: echo, print
08:56
Variablen
05:31
Datentypen
07:22
Operatoren
09:24
Bedingungen: if, else, else if
04:19
Switch
04:38
Vergleichsoperatoren
06:31
Logische Operatoren
09:00
Schleifen: while
07:00
Schleifen: for
07:10
Funktionen (inkl. Bootstrap-Beispiel)
09:38
Arrays
16:30
$_GET und $_POST (Formulardaten verarbeiten)
10:14
Hinweis: In Produktion
00:12
Requirements
  • Ein Computer mit Windows, MacOS oder Linux
  • Alle verwendete Software ist kostenlos verfügbar
Description

Der große Kurs der Webentwicklung: Erstelle eigene Webseiten

"HTML ist was auf einer Webseite steht, CSS sorgt dafür, dass es aussieht, wie es aussieht, und Javascript bestimmt, wie sich die Inhalte verhalten." - Vereinfachte Beschreibung der Webentwicklung

Deshalb starten wir in dem neuesten deutschen Kurs zur Webentwicklung mit der Sprache, die das Web maßgeblich prägt: HTML. So kann jeder sein Wissen von Beginn an in einer Reihenfolge aufbauen, die Sinn ergibt. Fortsetzen werden wir unsere Reise zum Webentwickler mit CSS. Der Sprache, die den Inhalten ihren Look verleiht. Im Anschluss daran betrachten wir die responsive Webentwicklung unter Einsatz von Grids und Media Queries.

Erste Funktionalitäten wie einfaches Verhalten, Animationen und Co. einzusetzen lernen wir durch JavaScript und jQuery. So können wir beispielsweise Elemente ein- und ausblenden oder Animations-Effekte zu unserer Seite hinzufügen.

Aufbauend auf diesem Grundwissen der Webentwicklung schauen wir uns ein Frontend-Framework in Form von Bootstrap 4 an. Solche Frameworks stellen bereits viele vordefinierte Elemente, Klassen und Funktionen zur Verfügung. Bootstrap selbst ist einer der am weitesten verbreiteten Standards für die responsive mobile-first Webentwicklung und dementsprechend ein tolles und einfaches Hilfsmittel, um moderne Webseiten zu bauen.

In über 30 Stunden und mehr als 180 Lektionen könnt ihr so alles lernen, um eigene Projekte in der Webentwicklung umzusetzen. Sei es zum beruflichen Einsatz, privaten Gebrauch oder nur zum Spaß; dieser Kurs lässt dich selbstbewusst in die Webentwicklung starten!

Über den gesamten Kurs verteilt werdet ihr viele Projekte selbstständig und/oder gemeinsam mit mir Lösen können. Diese Projekte beinhalten:

  • Eine einfache informative Webseite (über das Sonnensystem)

  • Einen Klon der Airbnb-Webseite

  • Eine moderne Startup-Webseite

Hinweis zu den fortlaufenden Erweiterungen und Updates des Kurses:

Aktuell wird der PHP-Teil des Kurses aufgenommen und zukünftig erweitert.

Die folgenden Themen sind als feste Erweiterungen des Kurses geplant:

- MySQL (Kurze Einführung)

- Abschlussprojekt

Who this course is for:
  • Alle, die Programmierung lernen möchten
  • Alle, die Webentwicklung lernen möchten
  • Alle, die Webseiten erstellen möchten