[DE] Die große HTML & CSS High-Level-Masterclass - Lerne HTML & CSS von Grund auf. Auch für Anfänger
BytersLab The Lab for Devs
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Herzlich willkommen
1:47
-
2.
Hole das beste aus dem Kurs
1:52
-
3.
Menschlichkeit
2:07
-
4.
Websites & Versionsnummern 2
1:08
-
5.
Was sind Desktopumgebungen
1:08
-
6.
Was ist Webentwicklung
1:33
-
7.
Fontend, Backend, Fullstack
1:44
-
8.
Die Anatomie einer URL
3:47
-
9.
Protokolle
2:07
-
10.
IP, DNS, Domain
2:46
-
11.
Einführung in VS Code
4:35
-
12.
Wichtige Erweiterungen
5:38
-
13.
Was ist HTML
2:45
-
14.
HTML, Browser, User
2:50
-
15.
Die Boilerplate
5:31
-
16.
Die Anatomie eines Elements
2:39
-
17.
Die wichtigsten HTML Elemente
24:19
-
18.
Anchortags und Buttons
8:02
-
19.
Kommentare in HTML
3:23
-
20.
Warum wir Code einrücken
4:00
-
21.
Aufgabe
1:43
-
22.
Lösung
16:00
-
23.
Emmet
7:13
-
24.
HTML Attribute
2:59
-
25.
Inline, Intern, Extern
7:17
-
26.
Der link Tag
4:00
-
27.
Die Anatomie einer CSS Deklaration
1:27
-
28.
Kommentare in CSS
1:17
-
29.
Trennung von Inhalt und Darstellung
3:45
-
30.
Targetieren über Klassen und IDs
12:00
-
31.
Der Descendant combinator
3:53
-
32.
Verständniss von Nesting
5:39
-
33.
Hyperlinks Der Anchortag im Detail
7:56
-
34.
Colors RGB, RGBA, Hex
14:34
-
35.
Transparenz und Opazität
3:47
-
36.
Mehrere Selektoren gleichzeitig
2:25
-
37.
Pseudoklassen CSS
11:48
-
38.
Teil 1 HTML
14:52
-
39.
Teil 2 Header
13:46
-
40.
Teil 3 HeroSection
19:42
-
41.
Userfeedback
4:35
-
42.
Links und Buttons für Userfeedback optimiere
8:26
-
43.
CSS Units
12:48
-
44.
Chrome Dev Tools
18:36
-
45.
Images der img Tag
5:23
-
46.
Images Der alt Tag
3:48
-
47.
Absolute Pfade und relative Pfade
8:50
-
48.
Images Borders & runde Ecken
10:25
-
49.
Imges Anpassen an den Container
6:25
-
50.
Text um Bilder fließen lassen
5:10
-
51.
Das aria label
2:01
-
52.
datalist & optgroup
2:13
-
53.
Cascade verstehen
13:47
-
54.
Vererbende & nicht vererbende Eigenschaften
2:53
-
55.
Box Model Einleitung
3:23
-
56.
Shrink Wrapping
10:29
-
57.
Die Höhe von Elementen und deren Content kon
4:46
-
58.
Block & Inline Elemente
7:32
-
59.
Margin & padding
2:00
-
60.
Margn, PAdding & width auf Inline Elemente
4:02
-
61.
Background Images
5:09
-
62.
Background Shortcut
1:59
-
63.
Gradients
5:41
-
64.
static, fixed, sticky
10:21
-
65.
absolute & relative
6:51
-
66.
Tabellen in HTML I
11:03
-
67.
Formulare in HTML I
10:52
-
68.
Eine Auswahl an Inputs
15:05
-
69.
Formulare clientseitig validieren
6:32
-
70.
Formspree
2:24
-
71.
Selektoren Deepdive
18:33
-
72.
Der Videotag
7:21
-
73.
Der source Tag
5:41
-
74.
Untertitel & Captions hinzufügen
5:13
-
75.
Was ist Flexbox
1:43
-
76.
Hauptachse & Querachse
4:34
-
77.
Flexbox auf Elternelemente
12:04
-
78.
Flexbox auf kinderelemente
8:38
-
79.
Bildergalerie mit Flexbox
17:31
-
80.
Footerlayout mit Flexbox
52:11
-
81.
Interface & Userinterface
1:34
-
82.
UX vs
1:49
-
83.
Gutes vs
10:36
-
84.
Die UX Pyrmide
6:52
-
85.
Tabelle stylen
9:17
-
86.
Formular stylen
38:23
-
87.
Only CSS Toggleswitch
11:24
-
88.
Fontfamily
9:47
-
89.
Fonts installieren
8:03
-
90.
Standard Fontsize
6:07
-
91.
Typescaling
9:16
-
92.
Direction & Alignment von Text
4:42
-
93.
Text stylen und transformieren
9:26
-
94.
Iconfonts
7:11
-
95.
Die Magie der Farben
22:32
-
96.
Boxshadows
7:25
-
97.
Was ist eine Mediaquery
1:17
-
98.
Mediaquery in der Praxis
4:47
-
99.
Was sind Breakpoints und gibt es Standardbre
3:20
-
100.
Fluid Sizing
10:47
-
101.
Spalten Raster Grundlagen
5:19
-
102.
Spaltenraster einbauen
24:56
-
103.
Responsive Images
4:35
-
104.
Was ist Grid
1:15
-
105.
Grid auf Elternelemente
19:17
-
106.
Grid auf Kinderelemente
6:04
-
107.
Abstände mit Gap
1:14
-
108.
Eingebaute Aniomationen in CSS
6:34
-
109.
Best Practices
9:58
-
110.
Eigene Animationen in CSS
11:49
-
111.
From to
3:08
-
112.
Animation Shortcut
3:22
-
113.
Vendor Prefixes
4:00
-
114.
Loadinganimation
19:23
-
115.
Was ist Figma
1:24
-
116.
Kleine Einführung
1:50
-
117.
Sketch erstellen
22:26
-
118.
Farbpalette erstellen
8:27
-
119.
Faben in Library speichern
1:55
-
120.
Typescaling
4:46
-
121.
Design Teil 1
32:01
-
122.
Design Teil 2
20:22
-
123.
Design Teil 3
13:01
-
124.
Design
30:51
-
125.
Bootstrap installieren
1:16
-
126.
Bootstrap Container Fluid Sizing
3:44
-
127.
Bootstrap Funktionsweise
1:56
-
128.
Projekt 1
11:25
-
129.
Projekt 2
14:27
-
130.
Projekt 3
11:28
-
131.
Sass installieren
5:50
-
132.
Erste Schritte mit Sass
6:44
-
133.
Automatisch kompilieren
10:51
-
134.
Variablen
3:03
-
135.
Maps
7:04
-
136.
Mixins
4:08
-
137.
Functions
5:19
-
138.
Partials und Imports
3:04
-
139.
Hinweis Github Repository
0:41
-
140.
Grundstruktur
12:14
-
141.
Reset CSS und Fonts einbinden
6:08
-
142.
Typescaling einbauen
3:14
-
143.
Containerklasse und responsive Fonts
8:59
-
144.
Variablen in CSS
5:54
-
145.
SVGs und Bilder exportieren und importieren
5:27
-
146.
Farben von SVGs ändern
6:11
-
147.
Navbar
8:20
-
148.
Navbar Bild als Link
4:52
-
149.
Hero Section & background blend mode
12:03
-
150.
Hero Section Button
12:39
-
151.
Hero Section Responsiveness
4:56
-
152.
Hero Section Boxshadow
1:15
-
153.
AboutMe Section
28:41
-
154.
Newsletter
47:29
-
155.
Die meta Tags (Vorschau)
11:28
-
156.
Favicon
1:48
-
157.
002 Auf Github hosten
2:38
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
31
Estudiantes
--
Proyecto
Acerca de esta clase
HTML5 & CSS High-Level-Masterclass: Vom Grundwissen zur Perfektion in über 40 Stunden
Entdecke die Kunst der modernen Webentwicklung
in unserer exklusiven High-Level-Masterclass auf Udemy. Dieser umfassende Kurs bringt dir alles bei, was du für eine erfolgreiche Karriere im Webdesign brauchst – von den Grundlagen bis hin zu fortgeschrittenen Techniken.
Stell dir vor, du kannst beeindruckende Websites von Grund auf erstellen und dabei die neuesten Technologien und Trends anwenden. In dieser High-Level-Masterclass wirst du nicht nur die technischen Fähigkeiten erlernen, sondern auch die kreativen Aspekte des Webdesigns meistern. Egal, ob du deine eigene Website erstellen, deine beruflichen Fähigkeiten erweitern oder in der Webentwicklungsbranche Fuß fassen möchtest – dieser Kurs ist der perfekte Startpunkt.
Warum dieser Kurs?
-
Über 300 Lektionen: Von den Basics bis hin zu komplexen Konzepten, alles in einem Kurs gebündelt.
-
40 Stunden geballtes Wissen: Ausführliche Videos mit klaren Erklärungen und detaillierten Anleitungen.
-
4 große Praxisprojekte: Setze dein Wissen praktisch um und erstelle beeindruckende Projekte.
-
CSS-Meisterschaft: Beherrsche moderne Layout-Techniken wie Flexbox und Grid und kreiere beeindruckende Animationen.
-
HTML-Expertenwissen: Erlerne HTML von Grund auf und tauche in fortgeschrittene Konzepte ein, die deine Websites lebendig machen.
-
JavaScript-Integration: Füge interaktive Elemente zu deinen Websites hinzu mit einer praxisorientierten Einführung in JavaScript.
-
Sass-Effizienz: Schreibe besser organisiertes und effizienteres CSS mit Sass.
-
Hosting-Know-how: Lerne, wie du deine Projekte mit GitHub und deinem eigenen Server hostest.
-
Figma-Grundlagen: Entwerfe deine Designs mit Figma und integriere sie nahtlos in deine Webprojekte.
-
Bootstrap-Framework: Erstelle schnell und effizient responsive Websites mit Bootstrap.
Deine Vorteile:
-
Lernen von Experten: Profitiere vom Wissen eines professionellen Webentwicklers, der dir Schritt für Schritt alles beibringt.
-
Flexibles Lernen: Greife rund um die Uhr auf die Kursinhalte zu – lerne, wann und wo es dir passt.
-
Lebenslanger Zugriff: Wiederhole den Kurs so oft du möchtest, um dein Wissen zu festigen.
-
Offizielles Zertifikat: Erhalte ein Zertifikat, das deine neu erworbenen Fähigkeiten bestätigt und deine beruflichen Chancen verbessert.
Melde dich jetzt an und transformiere deine Webentwicklungsfähigkeiten auf ein neues Level. Bist du bereit, die Welt des Webdesigns zu erobern?
Tauche ein in unsere HTML5 & CSS High-Level-Masterclass und starte deine Reise zur Perfektion.
Conoce a tu profesor(a)
Hallo und herzlich willkommen bei BytersLab, dem Hotspot fur angehende Webentwickler, die bereit sind, die digitale Welt zu erobern. Tauche direkt in die neuesten Webtechnologien ein und entwickle echte Fahigkeiten, die deine Karriere vorantreiben.
Tiefe Einblicke durch Experten
Unsere Kurse, entwickelt von einem Team aus erfahrenen Programmierern, bieten dir tiefgreifende Einblicke in HTML, CSS, JavaScript ES6, React, Node.js und vieles mehr. Bei BytersLab lernst du nicht nur Theorie, sondern auch praktische, marktrelevante Skills, die dich in der echten Welt erfolgreich machen.
Interaktives Lernen
Starte jetzt durch mit interaktiven Projekten und Herausforderungen aus der Praxis, die dein Konnen scharfen. Lerne in deinem eigenen Tempo und profitier... Ver perfil completo
Proyecto de clase práctica
In diesem Kurs wirst du ein vollständiges, modernes Portfolio von Grund auf mit HTML und CSS erstellen. Dieses Projekt bietet dir die Möglichkeit, die grundlegenden und fortgeschrittenen Techniken von HTML und CSS in einem praktischen, realen Szenario anzuwenden. Am Ende des Kurses wirst du ein ansprechendes und professionelles Portfolio besitzen, das deine Fähigkeiten, Projekte und Erfahrungen präsentiert. Dieses Portfolio kannst du nutzen, um deine Arbeit potentiellen Arbeitgebern, Kunden oder einfach nur Freunden und Familie zu zeigen.
Projektschritte:
-
Projektplanung: Struktur und Layout festlegen
- Bevor du mit dem Coding beginnst, solltest du dir überlegen, welche Inhalte in deinem Portfolio enthalten sein sollen. Erstelle eine grobe Skizze (Wireframe) des Layouts.
- Überlege dir, welche Seiten dein Portfolio haben soll. Typischerweise gehören dazu eine Startseite, eine Über-mich-Seite, eine Portfolio-Seite mit deinen Projekten und eine Kontaktseite.
-
Grundgerüst mit HTML erstellen:
- Starte mit der Erstellung des HTML-Grundgerüsts für dein Portfolio.
- Nutze semantische HTML5-Elemente wie
, - Achte darauf, dass alle wichtigen Inhalte wie dein Name, eine kurze Bio, deine Projekte und Kontaktinformationen klar in der HTML-Struktur zu finden sind.
-
Styling mit CSS:
- Beginne mit der Gestaltung deines Portfolios, indem du CSS einsetzt, um Farben, Typografie, Abstände und Layouts zu definieren.
- Lerne die verschiedenen CSS-Layout-Techniken wie Flexbox und Grid kennen, um ein responsives Design zu erstellen, das auf verschiedenen Bildschirmgrößen gut aussieht.
- Experimentiere mit CSS-Übergängen und Animationen, um deinem Portfolio eine moderne und dynamische Note zu verleihen.
-
Responsives Design:
- Optimiere dein Portfolio für verschiedene Endgeräte, indem du Media Queries verwendest.
- Stelle sicher, dass dein Portfolio sowohl auf Desktops als auch auf mobilen Geräten gut aussieht und benutzerfreundlich ist.
-
Feinschliff und Veröffentlichung:
- Gehe dein Portfolio durch und korrigiere eventuelle Fehler. Achte besonders auf Details wie Konsistenz im Design und korrekte Verlinkungen.
- Optional: Binde ein Kontaktformular ein oder nutze Webtechniken wie die Einbettung von Google Maps oder Social Media Feeds.
- Veröffentliche dein Portfolio auf GitHub Pages oder einem anderen Hosting-Service, sodass es online zugänglich ist.
Projektergebnis:
Am Ende dieses Projekts wirst du ein voll funktionsfähiges und optisch ansprechendes Portfolio haben, das du stolz präsentieren kannst. Es wird dir nicht nur als digitale Visitenkarte dienen, sondern auch als lebendiger Beweis deiner HTML- und CSS-Kenntnisse.
Projektdokumentation:
Bitte dokumentiere jeden Schritt deines Projekts. Halte deine Skizzen, Designentscheidungen und Code-Änderungen fest. Du kannst dies in einem separaten Dokument oder direkt in deinem GitHub-Repository tun. Diese Dokumentation wird dir helfen, deine Fortschritte nachzuvollziehen und zukünftige Anpassungen einfacher vorzunehmen.
Design
Für dieses Projekt sind dir keine Grenzen gesetzt. Du kannst deiner Kreativität, freien lauf lassen. Achte nur auf ein ansprechendes und modernes aussehen.
Leitfaden
Als Leitfaden dient dieser Kurs. Alles was du benötigst, um dieses Projekt zu bewältigen lernst du hier.
Projektpräsentation:
Lade dein fertiges Portfolio gerne in unserem Discord hoch und teile den Link zu deiner veröffentlichten Seite. Gebe deinen Mitschülern Feedback zu ihren Projekten und sammle auch selbst Feedback ein, um dein Portfolio weiter zu verbessern.
Viel Spaß beim Coden und Gestalten! Ich freue mich darauf, dein Portfolio zu sehen.
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
Clases relacionadas
