Baue echte HTML5 & CSS3 - Webseiten: Vom Anfänger zum Profi!
4.7 (142 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.
846 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: Lerne modernes HTML5, CSS3, Webdesign am Beispiel, einfach erklärt.
4.7 (142 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.
846 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?
  • Entwickle eigenständig schicke, moderne Webseiten in HTML5 + CSS3
  • Beherrsche HTML & CSS, und verstehe die Zusammenhänge
  • Lerne alles strukturiert und aus einer Hand. Kein mühsames Zusammensuchen von zig Internetseiten mehr, mit Beispiele, die veraltet sind
  • Nach Abschluss des Kurses kannst du eigene Webseiten in HTML und CSS entwickeln
  • Starte deine Karriere als Webentwickler
  • Setze coole Funktionen mit jQuery um
  • Verstehe, wie HTML, CSS, JavaScript und PHP zusammenspielen
  • Lerne, wie du ein richtig schickes Praxisprojekt nach HTML und CSS umsetzt. Das hilft dir später massiv in deinem Job als Entwickler!
View Curriculum
Requirements
  • Es werden keine Programmier- oder Designkenntnisse vorausgesetzt
  • Du solltest einen Computer bedienen können, die Basics reichen locker aus
  • Zusätzliche, kostenpflichtige Software wird nicht benötigt, wir werden alle benötigten Tools im Laufe des Kurses installieren (kostenlos)
Description

Fange noch heute an auf deinem Weg zum Webentwickler.

Dieser Kurs macht dich fit in HTML5 & CSS3. Nach Abschluss des Kurses hast du eine fertige Webseite, auf die du stolz sein kannst. 

Dieser Kurs ist genau das richtige für dich, wenn du...

  • ... dich beruflich weiterentwickeln möchtest
  • ... dich noch nie mit HTML und CSS beschäftigt hast
  • ... schon ein paar Basics kannst, aber es noch nicht richtig "Klick" gemacht hat
  • ... schicke Webseiten entwickeln willst, egal ob für Computer, Tablet oder Smartphone


Zuerst bringe ich dir ein paar Grundlagen zum Thema HTML, CSS und Webdesign bei. Anschließend setzen wir gemeinsam ein richtig schickes Design nach HTML und CSS um. Dadurch beherrscht du nach Abschluss dieses Kurses nicht nur die Sprache HTML bzw. CSS, sondern hast genügend Erfahrung gesammelt, um eigene Projekte komplett selbstständig umzusetzen.

Warum solltest du diesen Kurs belegen?

1.: Anschauliche Praxis statt grauer Theorie: In vielen Tutorials werden dir ausschließlich die Grundlagen von HTML und CSS beigebracht. Klar, die sind wichtig, kommen auch in diesem Kurs vor. Aber was ja eigentlich für dich relevant ist: Wie kombinierst du all diese Befehle? Wie kriegst du es hin, dass am Ende eine schicke Webseite heraus kommt? 

Und genau deswegen habe ich diesen Kurs entwickelt, damit du nicht nur die Grundlagen lernst, sondern dein Wissen nach Abschluss dieses Kurses auch effektiv anwenden kannst. Dafür entwickeln wir Schritt für Schritt an einem Design, bis es letztendlich richtig schick ist. 

2.: Blick über den Tellerrand: Wenn du Webseiten entwickelst, ist es nicht nur wichtig, dass du HTML und CSS beherrscht, damit du ein gefragter Webentwickler wirst, solltest dich auch mit etwas "drumherum" beschäftigt haben. Nur so kannst du später souverän im Job auftreten. Unter anderem geht es um:

  • Was für Tricks musst du beachten, damit das Design richtig was her macht?
  • Wie kriegst du es hin, dass die Seite auch auf einem Smartphone richtig schnell lädt?
  • Grundlagen in JavaScript: Wie kannst du damit eine Webseite noch schicker machen? 
  • Grundlagen in PHP: Ob / Wozu du es brauchst, und wie du damit z.B. eine E-Mail verschicken kannst


3.: Spaßfaktor: 
Zu sehen, wie eine Webseite Schritt für Schritt entsteht, ist unglaublich schön zu sehen - keine langweilige Theorie, sondern anschauliche Praxis. Das festigt nicht nur dein Wissen, sondern macht auch sehr viel mehr Spaß!

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!
Students Who Viewed This Course Also Viewed
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,230 Reviews
17,970 Students
21 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.

Dozent mit breitem Verständnis
Ruhig, verständlich, gründlich und nachvollziehbar möchte ich erklären ich, was auf den ersten Blick sehr kompliziert erscheint. Ich lehre einsteigerfreundliche Sprachen wie Python, bekannte Frameworks wie jQuery und NodeJS für die Entwicklung komplexer, interaktiver Webseiten.

Tiefes Verständnis von Programmierkonzepten
Mir macht es Freude, euch Programmiersprachen beizubringen. Dabei ist mir wichtig, dass ihr die Konzepte dahinter versteht. Dann erklärt sich auch fast von selbst, warum an der einen oder anderen Stelle euer Programm so oder anders geschrieben wird.