Baue echte HTML5 & CSS3 - Webseiten: Vom Anfänger zum Profi!
4.6 (220 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,396 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Baue echte HTML5 & CSS3 - Webseiten: Vom Anfänger zum Profi! to your Wishlist.

Add to Wishlist

Baue echte HTML5 & CSS3 - Webseiten: Vom Anfänger zum Profi!

Learning by Doing bis hin zum Webentwickler: Modernes HTML5, CSS3. Alles am Beispiel, einfach erklärt.
4.6 (220 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,396 students enrolled
Created by Jannis Seemann
Last updated 4/2017
German
Current price: $10 Original price: $150 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 16 hours on-demand video
  • 3 Articles
  • 90 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Setze ein echtes Praxisprojekt um
  • Starte deine Karriere als Webentwickler
  • Entwickle eigenständig Webseiten in HTML5 + CSS3
  • Lerne alles strukturiert und aus einer Hand
  • Setze coole Funktionen mit jQuery um
  • Verstehe das Zusammenspiel zwischen PHP, JS, HTML und CSS
View Curriculum
Requirements
  • Du benötigst einen Mac oder einen PC
  • Du brauchst keine Programmierkenntnisse
  • Alle zusätzliche Software installieren wir gemeinsam im Laufe des Kurses
Description

Umfangreich und praxisnah wird der Kursinhalt sehr gut vermittelt. Es macht dabei riesen Spaß seine eigene Seite parallel mit aufzubauen. Danke für den tollen Kurs!“ (Toni Frisch, ★★★★★)

Herzlich willkommen in der Welt der Webentwicklung. In diesem praxisorientierten Kurs mache ich dich fit auf deinem Weg zum Webentwickler.

ES WERDEN KEINE PROGRAMMIERKENNTNISSE BENÖTIGT

Zuerst ein Kurzer Ausblick, was du nach Abschluss des Kurses alles machen kannst:

  • Entwickle Webseiten, die überall gut aussehen - egal ob auf dem PC, Tablet oder Smartphone
  • Fühle dich sicher beim Zusammenspiel von HTML + CSS
  • Profitiere von unzähligen Praxistipps und Best-Practices aus unzähligen Jahren an Erfahrung
  • Perfekte Grundlage für einen Job in einer Webentwickler - Agentur
  • Setze eigene Projekte um oder steige als Freelancer in die Webentwicklung ein

Dieser Kurs ist ein echter Praxiskurs. Schritt für Schritt wirst du zu einem fähigen Webentwickler.

Ich habe diesen Kurs entwickelt, um dir zu ermöglichen, schnellstmöglich in die Webentwicklung einzusteigen. Dabei ist die Praxis in diesem Kurs unglaublich wichtig, Schritt für Schritt zeige ich dir, wie du als Entwickler eine Webseite in HTML + CSS entwickelst. 

Nach Abschluss dieses Kurses hast du dann eine richtig schicke Webseite, und hast nebenher alle wichtigen Technologien der Webentwicklung kennengelernt. Über jQuery, PHP, Modernizr, SASS, JavaScript, responsive Design, bis hin zu einem funktionierenden Kontaktformular inkl. E-Mail-Versand mit PHP - dieser Kurs deckt alles ab.

Warum solltest du diesen Kurs belegen?

  1. Dieser Kurs macht Spaß: Anschauliche Praxis statt grauer Theorie
  2. Werde in kürzester Zeit zu einem fähigen Webentwickler
  3. Blick über den Tellerrand: Profitiere von meiner Berufserfahrung
  4. Verstehe en Detail, wie HTML, CSS, JS, und PHP zusammenspielen

Wie ist dieser Kurs aufgebaut?

  • Zuerst lernst du die Grundlagen in HTML & CSS
  • Nach bereits 2 Stunden hast du eine einfache Webseite entwickelt
  • Anschließend lernst du Webdesign kennen, Schriftarten, Verwendung von Bildern und Icons
  • Jetzt kommt das Praxisprojekt: Wir entwickeln Schritt für Schritt ein komplettes Design
  • Wir vereinfachen unseren CSS-Code mit SASS...
  • ... und machen unsere Webseite fit für Smartphone und Tablet
  • ... schauen uns ein paar Basics in JavaScript, jQuery und PHP an,
  • ... und laden die Webseite auf einen Webhoster hoch (optional)

Nach Abschluss dieses Kurses hast du also eine eigene Webseite entwickelt und online gestellt!

Hinweis: Im Kurs verwenden zeige ich euch, wie ihr die Webseite auf den Hoster "Checkdomain" hochladen könnt. Dafür müsst ihr euch dort registrieren. Alternativ funktioniert das ganze natürlich 1:1 auch mit jedem anderen Hoster.

Who is the target audience?
  • An alle, die HTML lernen möchten
  • Du betreibst einen eigenen Blog? Du suchst einen Berufseinstieg in den Job als Webentwickler? Dann ist dieser Kurs perfekt für dich!
Compare to Other CSS Courses
Curriculum For This Course
123 Lectures
16:05:50
+
Hier starten
2 Lectures 05:56

Installation der benötigten Tools
00:19
+
Erste Schritte mit CSS
10 Lectures 01:11:39
Einführung in CSS
10:51

Schrift & CSS
09:37

Farben in CSS
06:15

Das Box-Modell
13:31

Floats in CSS
04:33

#id und .class in CSS
05:00

Wir entwickeln ein Layout mit CSS
09:02

Layout zentrieren
06:30

Exkurs: CSS-Selektoren mit Komma
04:13

Exkurs: CSS-Selektoren mit Leertaste
02:07
+
Exkurs: Webdesign
8 Lectures 51:28
Einführung: Webdesign
02:07

Farben im Web
06:00

Schriften im Web
09:54

Bilder im Web
07:37

Icons im Web
02:00

Tipp: Verwende ein Grid!
03:53

Exkurs: Wir entwickeln unser eigenes Grid (1)
11:18

Exkurs: Wir entwickeln unser eigenes Grid (2)
08:39
+
Projekt: Wir setzen ein echtes Design mit HTML & CSS um!
55 Lectures 07:57:39
Lade dir das Projekt als Bild herunter
00:08

Was erwartet dich?
03:22

Wir erleichtern uns die Umsetzung mit Skeleton (CSS)
05:25

Ausblick: Header - Bereich
01:30

Hintergrundbild vom Header - Bereich
18:09

Navigation umsetzen (1)
14:40

Navigation umsetzen (2)
16:12

Header - Slogan
18:06

Exkurs: Hintergrundbild mit GIMP optimieren
05:01

Header finalisieren - wir sind mit dem Header fertig!
04:20

Services umsetzen
19:54

Icons & HTML
05:03

Icons einbauen + Aufgabe
12:38

Musterlösung: Icons einbauen
02:11

Services finalisieren
13:22

Ausblick: Icon-Auflistung (Feature) - Bereich
00:42

Icon - Auflistung (Features) bauen
14:01

Icon - Auflistung (Features) fertigstellen (1)
06:52

Icon - Auflistung (Features) fertigstellen (2)
06:27

Ausblick: Kundenmeinungen (Clients) - Bereich
02:47

Kundenmeinungen (Clients) umsetzen
18:56

Kundenmeinungen: Zitat
16:50

Hinweise zu den nächsten paar Lektionen
00:54

Exkurs: position:relative in CSS
04:44

Exkurs: position: absolute
09:57

Exkurs: position:relative in einem position:absolute
05:14

Pfeil korrekt positionieren
08:29

Pfeil erzeugen mit CSS
08:45

HTML aufräumen mit Pseudo-Elementen
15:20

Aufgabe: Kundenmeinungen
02:20

Musterlösung: Kundenmeinungen finalisieren
11:54

Ausblick: Team - Bereich
02:34

Display: inline-block
03:55

Team - Überschrift umsetzen
07:15

Team - Bilder umsetzen
13:30

Icons einbauen
19:56

Team - Bereich fertigstellen
03:38

Ausblick: Kontakt - Bereich + Aufgabe
02:23

Lösung: Kontakt - Bereich umsetzen + neue Aufgabe
09:27

Lösung: Icons vom Kontakt - Bereich umsetzen
17:08

Kontakt - Formular entwickeln
19:51

Exkurs: Spezifität von CSS - Selektoren
13:11

Fußbereich (Footer) entwickeln
09:24

Sprungmarken hinzufügen
12:16

Ausblick: Auf Ereignisse reagieren (:hover und :focus)
01:39

:hover und :focus + Aufgabe
10:45

:hover und :focus (Musterlösung)
07:39

Exkurs: Browserunterschiede bei CSS - Befehlen
01:59

Einführung: CSS - Animationen
06:26

Wir hübschen die Seite mit ein paar Animationen auf
03:36

Achtung! Verschiedene Browser zeigen Webseite unterschiedlich an
04:45

Beispiel: Internet Explorer, Seite dafür optimieren
11:17

Wie du einen Internet Explorer unter Mac / Linux ans Laufen bekommst
02:58

Tipp: Autoprefixer
13:17

Beispiel: Elemente rotieren
04:37
+
CSS optimieren mit SASS
5 Lectures 43:45
Einführung: SASS
11:13

Verschachteln von CSS optimieren mit SASS
04:47

Mixins mit Parametern (SASS)
11:03

SASS in unser Projekt einbauen (1)
07:25

SASS in unser Projekt einbauen (2)
09:17
+
Responsive Webdesign (Webdesign für Desktop, Smartphone, Tablet)
11 Lectures 01:43:03
Einführung: Response Webdesign
06:04

Erste Schritte mit @media - queries
05:16

Wir fangen an, unser Design responsive zu machen
10:33

Wir optimieren unsere @media - Queries mit SCSS
08:51

Responsive Design: Icon - Auflistung (Features)
07:51

Responsive Design: Kunden (Clients) - Bereich
17:35

Responsive Design: Team - Bereich
05:03

Responsive Design: Kontakt - Bereich
04:57

Responsive Navigation einbauen (1)
16:23

Responsive Navigation einbauen (2)
07:11

Responsive Navigation einbauen (3)
13:19
+
Ein letzter Feinschliff für unser Projekt :)
6 Lectures 48:35
Einbau von Modernizr
18:59

Responsive Meta-Tag und wozu du es brauchst
03:16

Internet Explorer Meta-Tag und warum du es brauchst
03:09

Wir optimieren die Ladezeit: Bilder komprimieren
13:40

Musterlösung: Bilder komprimieren
05:15

Ladezeit-Optimierung fertigstellen
04:16
+
JavaScript - Basics
7 Lectures 50:45
Ausblick: JavaScript - Basics
04:08

Variablen in JavaScript
07:54

Datentypen in JavaScript
06:22

Parameter übergeben (JavaScript)
11:07

Erste Schritte mit jQuery
06:59

jQuery - Plugins
10:17

Wir schauen uns nochmal unseren JavaScript - Code an
03:58
+
Basics in PHP
7 Lectures 44:23
Einführung
04:34

Installation von XAMPP unter Windows
07:31

Der require() - Befehl
03:09

Wir zerlegen unser Projekt in verschiedene Dateien
05:48

Navigation als wiederverwendbarer Baustein
05:07

Formulare auswerten mit PHP
07:49

Emails verschicken mit PHP
10:25
2 More Sections
About the Instructor
Jannis Seemann
4.5 Average rating
3,663 Reviews
20,008 Students
20 Courses
unterrichtet 21 Kurse auf Udemy

Online-Lehrer und erfahrener Webprogrammierer aus Überzeugung

Hi, ich bin Jannis! Mit 14 habe ich meine ersten Webseiten entwickelt. Programmierung ist seitdem meine absolute Leidenschaft.

Begeisterter Programmierer seit der Jugend
Nach dem Abitur und der Teilname an zwei Endrunden im Bundeswettbewerb Informatik habe ich als Volljähriger mein erstes Praktikum in einem großen IT-Konzern in den USA absolviert.

Eigene Firma für professionelle Webentwicklung
Als mittlerweile studierter Informatiker und selbstständiger Unternehmer setze ich erfolgreich Webprojekte für meinen Kunden um und teile mein Wissen und meine Erfahrung in aktuell zwölf Kursen.

Impressum

Um das Impressum aufzurufen, einfach auf mein Profil gehen, und dann unter meinem Bild auf die Erdkugel klicken - du wirst dann zum Impressum weitergeleitet.