CSS Tutorial für Einsteiger - lerne die Grundlagen von CSS

In diesem Video zeige ich euch die Grundlagen von Cascading style sheets - kurz CSS. CSS wird genutzt um HTML Elemente zu stylen, wird also benötigt um Websites die Optik zu geben, die man sich wünscht. Hier lernst du die Grundlagen von CSS und am Ende machen wir ein kleines Projekt wo wir das gelernte nochmal konkret anwenden.

Timestamps
00:00:00 Einführung
00:00:56 Inline vs internal vs external CSS
00:05:05 CSS Selektoren
00:08:18 Text Styling
00:12:58 Farben
00:16:31 CSS Box-Model
00:22:00 Pseudo-Klassen
00:29:24 List-styling
00:32:12 Stylen von Formularen
00:40:32 Hintergrundbilder
00:43:00 Absolute und relative Positioning
00:47:31 Transitions
00:55:31 PROJEKT - Produktkarte stylen
01:14:37 EXKURS: Specificity

[yt]

Diesen Grundkurs überspringe ich wieder. Einen Like gab es trotzdem. 🙂
Schöne Woche!

[mnnefrd]

Danke, Markus 🤝 Top-Tutorial: Ratzfatz eine ganze Bruttoregistertonne Wissen herübergebracht.

Bei mir geht es im Moment um die Grundlagen zu Web-Applikationen für einen alten Desktop-/Mobile-Hasen. Dabei sind deine Videos eine immense Hilfe. Du hast hiermit einen der wenigen deutschsprachigen YT-Kanäle ins Leben gerufen, auf dem ich ausnahmsweise mal (mehr als nur) ein komplettes Video angesehen habe. Bei vielen „Kursen‟ gefällt mir vor allem die Präsentation nicht (schlechtes Audio, Diktion, visuelle Inhalte), während es bei anderen sogar schon am Konzept bzw. dem roten Faden mangelt. Englische Kurse in guter Qualität sind da schon etwas häufiger zu finden, wenn auch in der Flut des Angebots nicht unbedingt schnell.

Was ich speziell an diesem Video außerdem mag ist, dass es nicht mit Hintergrundmusik unterlegt ist. Ich hoffe, du wirst auch künftig darauf verzichten. Wenn ich überhaupt mal Musik zum Lernen möchte, dann würde ich meine Favoriten bevorzugen. Aber wenigstens ist die Untermalung ‒ sofern vorhanden ‒ sehr leise.

Nun gut, HTML ist schon auf mich „eingecrasht‟, in ES6+ habe ich hineingeschmeckt, also geht's jetzt ans Ausprobieren und dann weiter zu Tailwind. Weiter so und herzlichen Dank noch einmal 👍

Übrigens: Deinen FastAPI-Kurs habe ich schon auf meiner Ûdemy-Wunschliste. Ist zwar derzeit nicht so dringend, wäre aber eine nette Revanche für die vielen Gratis-Videos auf deinem YT-Kanal.

[K_Andreas]

Danke fürs Video. Schön zügig erklärt, sympathisch, locker und korrekt.
Zwei kurze Infos am Rande:
CMYK ist der Farbraum für Print-Produkte. RGB ist der Farbraum für digitale Arbeiten, hier also das Mittel der Wahl. 👍
Gegenüber dem Hexadezimal-Code lassen sich RGB-Angaben einfach durch den Alpha-Kanal erweitern. Man nimmt einen vierten Wert in die Klammer auf, regelt so die opacity und spart sich die zusätzliche Zeile Code. Auch gut gemacht. 👍
Habe auch etwas gelernt. Also Däumchen und Abo. 😊 Weiter so und vielen Dank. 👏

[gpi]

Gut erklärtes Video.

Gibt ein Like!

[kleckskeck]

Kommt noch was zu den JS & die dazugehörigen Frameworks?

[triggert.]

Hi,
bei mir funktioniert die Intellisence nicht. Z.B. gibt es keine Vorschläge zur font-family oder font-style. Es wird weder "style" noch dann "italic" vorgeschlagen. Welche Extension brauche ich dafür? Im Netz habe ich nicht die passende gefunden.