Befassen Sie sich mit reaktivem Webdesign

Befassen Sie sich mit reaktivem Webdesign

Dieser Kurs ist Teil mehrerer Programme.

Dozent: Kevin Powell

Bei enthalten

Mehr erfahren

6 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

15 Bewertungen

Stufe Mittel

Empfohlene Erfahrung

2 Wochen zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

6 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

15 Bewertungen

Stufe Mittel

Empfohlene Erfahrung

2 Wochen zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

Was Sie lernen werden

Responsive Webdesign, CSS, HTML

Kompetenzen, die Sie erwerben

Kategorie: Responsive Web Design
Kategorie: Web Development
Kategorie: Web Design and Development
Kategorie: Web Design
Kategorie: Typography
Kategorie: HTML and CSS
Kategorie: Usability

Werkzeuge, die Sie lernen werden

Kategorie: Cascading Style Sheets (CSS)
Kategorie: UI Components

Wichtige Details

Zertifikat zur Vorlage

Zu Ihrem LinkedIn-Profil hinzufügen

Bewertungen

6 Aufgaben

Unterrichtet in Englisch

Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

Weitere Informationen zu Coursera für Unternehmen

Logos von Petrobras, TATA, Danone, Capgemini, P&G und L'Oreal

Erweitern Sie Ihre Fachkenntnisse

Dieser Kurs ist als Teil verfügbar

Wenn Sie sich für diesen Kurs anmelden, müssen Sie auch ein bestimmtes Programm auswählen.

Lernen Sie neue Konzepte von Branchenexperten
Gewinnen Sie ein Grundverständnis bestimmter Themen oder Tools
Erwerben Sie berufsrelevante Kompetenzen durch praktische Projekte
Erwerben Sie ein Berufszertifikat zur Vorlage

In diesem Kurs gibt es 6 Module

Dieser Kurs wird Sie auf ein professionelles Niveau im responsiven Webdesign bringen. Sie werden lernen, fortgeschrittene Layouts zu erstellen und dabei lustige Programmieraufgaben zu lösen. Lassen Sie mich Ihnen ein paar Fragen stellen: Möchten Sie lernen, responsive Websites zu erstellen, die 100% professionell aussehen? Möchten Sie sicher sein, dass Ihre Website auf allen Geräten gut funktioniert? Sind Sie es leid, das Gefühl zu haben, dass Ihr CSS ein Chaos ist? Wenn Ihre Antwort JA ist, dann ist dies der perfekte Kurs für Sie!

Er vermittelt Ihnen ein tiefes Verständnis von CSS und responsivem Design und lässt Sie dabei voll und ganz bei der Sache sein. Sie werden lernen, vier verschiedene Layouts zu erstellen: einen Blog, eine Landing Page, ein Banner und eine Unternehmenswebsite. Jedes dieser Layouts wird Ihre Fähigkeiten auf ein neues Niveau heben. Um sicherzustellen, dass das Wissen bei Ihnen bleibt, erhalten Sie interaktive Programmieraufgaben, während Sie Fortschritte machen. Es ist so, als ob Sie und der Lehrer gemeinsam programmieren würden! Diese Art von schneller Interaktivität ist mit keiner anderen Plattform als Scrimba möglich!

Das Modul taucht in die CSS-Grundlagen ein und vermittelt den Lernenden ein solides Fundament an CSS-Syntax, Selektoren, Eigenschaften und Layouttechniken, um Webseiten mit Kreativität und Präzision effektiv zu gestalten und zu strukturieren.

Das ist alles enthalten

1 Aufgabe26 Plug-ins

1 Aufgabe Insgesamt 30 Minuten

CSS-Grundlagen Benotete Aufgabenstellung 30 Minuten

26 Plug-ins Insgesamt 176 Minuten

Willkommen zum interaktiven Unterricht! 1 Minute
Willkommen auf dem Kurs! 4 Minuten
Ein wichtiger Hinweis, bevor wir beginnen 1 Minute
Einführung in das Modul CSS-Grundlagen 3 Minuten
Ränder und Abstände - Ränder und Abstände im Text 5 Minuten
Ränder und Auffüllungen - Ränder verkleinern 7 Minuten
Ränder und Abstände - Konsistenz und eine neue Art von Selektor 5 Minuten
Inline- und Block-Elemente 6 Minuten
Das span-Element 4 Minuten
Styling-Links 12 Minuten
Zeit zum Üben! 22 Minuten
Inline-Block 5 Minuten
Tasten für die Gestaltung 9 Minuten
Grundlagen der Spezifität 5 Minuten
Spezifität - zwei Selektoren mit gleichem Wert 2 Minuten
Zusammengesetzte Selektoren 15 Minuten
Selektoren und Spezifität von Verbindungen 7 Minuten
Eine bessere Möglichkeit, unsere CSS-Klassen zu benennen 9 Minuten
Die Texteigenschaften 3 Minuten
Schriftfamilie und Stacks für Schriften 6 Minuten
So verwenden Sie Google-Schriftarten 9 Minuten
Vererbung 2 Minuten
Mit Vererbung arbeiten, überschreiben und anwenden 4 Minuten
Alles zusammenfügen 8 Minuten
Alles zusammenfügen - das CSS 18 Minuten
Lösung der Aufgabe und Abschluss des Moduls 4 Minuten

Das Modul schult Entwickler darin, bei der Erstellung von Websites und Anwendungen in HTML und CSS eine reaktionsfähige Denkweise anzunehmen.

Das ist alles enthalten

1 Aufgabe45 Plug-ins

1 Aufgabe Insgesamt 30 Minuten

Beginn des verantwortlichen Denkens Benotete Aufgabe 30 Minuten

45 Plug-ins Insgesamt 246 Minuten

Beginn des reaktionsfähigen Denkens 3 Minuten
CSS-Einheiten 3 Minuten
CSS Einheiten - Prozentsatz 6 Minuten
Kontrolle der Breite von Bildern 5 Minuten
mIN-BEWEGUNG und MAX-BEWEGUNG 3 Minuten
CSS Einheiten - Die Einheit em 5 Minuten
Das Problem mit ems 2 Minuten
CSS Einheiten - rems 5 Minuten
Auswahl der zu verwendenden Einheit 4 Minuten
ems und rems - ein Beispiel 8 Minuten
Auffrischung von Flexbox und Einrichtung von HTML 8 Minuten
Grundlegende Stile und Einrichten der Spalten 7 Minuten
Hinzufügen der Hintergrundfarbe 4 Minuten
Einstellung der Spaltenbreiten 4 Minuten
Abstand zwischen den Spalten 4 Minuten
Steuerung der vertikalen Position von Flexelementen 5 Minuten
Grundlagen der Medienabfrage 10 Minuten
Unser Layout mit Flex-Direction responsiv machen 7 Minuten
flex-direction erklärt 3 Minuten
Erstellen einer Navigation 5 Minuten
Flexbox für die Gestaltung der Navigation verwenden 8 Minuten
Unsere Navigation soll gut aussehen 7 Minuten
Hinzufügen des Unterstrichs 4 Minuten
Eine kompliziertere Navigation 7 Minuten
Die Navigation responsiv gestalten 7 Minuten
Ein Blick auf den Rest des Projekts 4 Minuten
Aufbau der Struktur 8 Minuten
Merkmale der Artikelstruktur 5 Minuten
Die Startseite - HTML für die neuesten Artikel 2 Minuten
home page - html für die Seite 6 Minuten
Starten Sie das CSS für unsere Seite 15 Minuten
Mit dem Layout beginnen - das große Ganze im Blick 9 Minuten
Erstmals mobil denken 3 Minuten
Gestaltung der Merkmale des Artikels 6 Minuten
Ändern der visuellen Reihenfolge mit Flexbox 5 Minuten
Das Spiel mit der Position des Titels und die Nachteile negativer Ränder 5 Minuten
Gestaltung aktueller Artikel für große Bildschirme 8 Minuten
Ändern von Bildgrößen mit object-fit 4 Minuten
Einrichten der Widgets und Sprechen von Haltepunkten 7 Minuten
Verwendung einer neuen Pseudoklasse zum Einpacken der Homepage 7 Minuten
Erstellen der Seite mit den letzten Beiträgen 3 Minuten
Einrichten der Seite Über mich 4 Minuten
Erledigung einiger unerledigter Aufgaben 4 Minuten
Wichtiger Hinweis: Der Viewport-Meta-Tag 4 Minuten
Modul-Abschluss 3 Minuten

Verbessern Sie Ihre Styling-Fähigkeiten in HTML und CSS und machen Sie sich mit fortgeschrittenen Techniken und Best Practices vertraut, um visuell beeindruckende und ausgefeilte Webdesigns zu erstellen.

Das ist alles enthalten

1 Aufgabe38 Plug-ins

1 Aufgabe Insgesamt 25 Minuten

Unseren Stil verbessern Benotete Aufgabe 25 Minuten

38 Plug-ins Insgesamt 172 Minuten

Es ist an der Zeit, unseren Stil zu verbessern 3 Minuten
Ein Blick auf die Zeilenhöhe 5 Minuten
text-transform: Großbuchstaben 4 Minuten
Leichtere Lesbarkeit durch Buchstabenabstände 4 Minuten
Ein schöner Farbtrick mit rgba() 5 Minuten
hintergrund-Bilder 4 Minuten
Hintergrundbilder und der Dateipfad (sehr wichtiger Hinweis) 2 Minuten
Steuerung unserer Hintergrundbilder 8 Minuten
BBQ Splash Page - Projektvorstellung 3 Minuten
Schreiben des HTML für die BBQ-Splash-Seite 7 Minuten
Beginn der Umgestaltung - BBQ Splash Page 11 Minuten
Hinzufügen des Hintergrundbildes - BBQ Splash Page 4 Minuten
Ändern der Reihenfolge - BBQ Splash Page 4 Minuten
Gestaltung des Hauptinhaltsbereichs - BBQ Splash page 3 Minuten
Hinzufügen der Medienabfrage - BBQ Splash Page 4 Minuten
Einrichten der Typografie für große Bildschirme - BBQ Splash Page 2 Minuten
Beginn der Vorbereitungen für große Bildschirme - BBQ Splash Page 3 Minuten
Viewport-Einheiten 7 Minuten
Hinzufügen von Viewport-Einheiten auf der BBQ-Splash-Seite 2 Minuten
Box-Größe eingeben: border-box 7 Minuten
Flexbox verwenden, um den Hauptinhalt vertikal zu zentrieren - BBQ Splash Page 3 Minuten
Fixierung des Intro-Abschnitts auf kleinen und großen Bildschirmen - BBQ Splash Page 3 Minuten
Umgang mit sehr großen Bildschirmen Lösung #1 4 Minuten
Umgang mit sehr großen Bildschirmen Lösung #2 5 Minuten
Die Grundlagen der Formulare 11 Minuten
Grundlagen des Formulars - Attribute des Formulars 4 Minuten
Die Grundlagen der Formgestaltung 5 Minuten
Hinzufügen des Formulars - BBQ Splash Page 4 Minuten
Beginn der Gestaltung des Formulars - BBQ Splash Page 4 Minuten
Damit die Eingaben gut aussehen - BBQ Splash Page 4 Minuten
CSS Farbverläufe 6 Minuten
Gestaltung der Schaltfläche - BBQ Splash Page 5 Minuten
Grundlegende Übergänge 5 Minuten
Einführung in Transformationen (und ein kurzes Wort zur Leistung) 3 Minuten
Wir können mehr als :hover 3 Minuten
Farbverläufe am Rand 5 Minuten
Überblenden von Bildern, Farben und Farbverläufen mit dem Hintergrundüberblendungsmodus 4 Minuten
Einpacken 2 Minuten

Dieses Modul hebt Ihr Verständnis von Flexbox auf ein neues Niveau und erforscht fortgeschrittene Konzepte und Techniken, die die Leistungsfähigkeit von Flexbox für die Erstellung komplexer und responsiver Layouts maximieren

Das ist alles enthalten

1 Aufgabe17 Plug-ins

1 Aufgabe Insgesamt 15 Minuten

Flexbox auf die nächste Stufe bringen Benotete Aufgabe 15 Minuten

17 Plug-ins Insgesamt 76 Minuten

Flexbox auf die nächste Stufe heben 2 Minuten
flex-direction, flex-wrap und flex-flow 5 Minuten
justify-content und align-items und ihre Beziehung zu flex-direction 7 Minuten
Align-content erkunden 4 Minuten
flex-grow und flex-shrink erklärt 5 Minuten
flex-Basis 4 Minuten
Die Kurzzeichen-Eigenschaft flex 4 Minuten
Ausrichten einzelner Elemente mit align-self 2 Minuten
Ränder auto und Flexbox 4 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Einführung 3 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Das Markup 5 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Typografie 6 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Mobiles Layout 11 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Große Bildschirme Teil eins 5 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Große Bildschirme Teil zwei 5 Minuten
Zentrieren eines Objekts auf dem Bildschirm mit Flexbox 2 Minuten
Modul Nachbereitung 2 Minuten

Nutzen Sie die Möglichkeiten von CSS-Raster, um vielseitige und komplizierte Seitenlayouts mit Leichtigkeit, Präzision und Reaktionsfähigkeit zu erstellen.

Das ist alles enthalten

1 Aufgabe19 Plug-ins

1 Aufgabe Insgesamt 25 Minuten

CSS-Raster: Das ultimative Layout-Tool Benotete Aufgabe 25 Minuten

19 Plug-ins Insgesamt 96 Minuten

Einführung in CSS Grid 3 Minuten
Einrichten eines Grundrasters 5 Minuten
Elemente auf dem Gitter platzieren 4 Minuten
grid-row und grid-column Abkürzungen 5 Minuten
Spannende Spalten 2 Minuten
Einige Ähnlichkeiten mit Flexbox 5 Minuten
Verwendung des Rasters für unsere Kartenkomponente 13 Minuten
Die Eigenschaft grid-gap 3 Minuten
Hinzufügen der Lücke zu unserer Karte 3 Minuten
Das implizite und explizite Gitter 6 Minuten
Erkundung von Netzgebieten 8 Minuten
grid-Flächen und Media-Queries 6 Minuten
minmax() 4 Minuten
das Gerät fr 3 Minuten
minmax() und die Einheit fr 2 Minuten
Die Nutzung des Rasters - Teil 1 12 Minuten
Die Nutzung des Rasters - Teil 2 4 Minuten
repeater() 3 Minuten
auto-Fit und Auto-Fill 5 Minuten

Entdecken Sie, wie Sie atemberaubende und mit vielen Merkmalen versehene Webdesigns mit außergewöhnlicher Funktionalität und ästhetischer Finesse erstellen können.

Das ist alles enthalten

1 Aufgabe29 Plug-ins

1 Aufgabe Insgesamt 20 Minuten

Die nächste Stufe erreichen Benotete Zuweisung 20 Minuten

29 Plug-ins Insgesamt 121 Minuten

Auf die nächste Stufe bringen 2 Minuten
Analysieren der Layouts 3 Minuten
Beginn der Arbeiten an der Homepage 3 Minuten
Das HTML für die Homepage 4 Minuten
Die ersten Zeilen von CSS sollten Sie immer schreiben 4 Minuten
Unser Raster für kleine Bildschirme einrichten 3 Minuten
Fortsetzung des Heldenbereichs 5 Minuten
Die Rubrik "Info" 4 Minuten
Einrichten der Fußzeile 3 Minuten
Verwendung von Font Awesome für unsere Icons 5 Minuten
Abschluss der Fußzeile 2 Minuten
Einrichten des Rasters und des Helden für größere Bildschirme 5 Minuten
Einrichten des Rests der Seite für größere Bildschirme 6 Minuten
Beginn der Gestaltung unserer Navigation 3 Minuten
Einrichten unserer Navigation für kleine Bildschirme mit Positionierung 5 Minuten
Schließen der Schaltfläche 3 Minuten
Hinzufügen der Schaltfläche "Öffnen" zu unserer Navigation 4 Minuten
Gestaltung der Navigation für große Bildschirme 2 Minuten
Überarbeitung der Navigation und des Heldenbereichs 6 Minuten
Erstellen der zweiten Seite 2 Minuten
Gestaltung der Info-Seite 9 Minuten
Box-Shadows erforschen, um den Effekt auf unsere Bilder zu bekommen 5 Minuten
Verwendung von Pseudo-Elementen zum Hinzufügen der gelben Linien 5 Minuten
Hinzufügen des gelben Balkens zu unseren Titeln 3 Minuten
Erstellen der Kontaktseite 4 Minuten
Gestaltung des Kontaktformulars 7 Minuten
Gestaltung des Kontaktformulars für größere Bildschirme 6 Minuten
Die losen Enden 5 Minuten
Sie haben es geschafft! 3 Minuten

Erwerben Sie ein Karrierezertifikat.

Fügen Sie dieses Zeugnis Ihrem LinkedIn-Profil, Lebenslauf oder CV hinzu. Teilen Sie sie in Social Media und in Ihrer Leistungsbeurteilung.

Dozent

Kevin Powell

Scrimba

5 Kurse 9.742 Lernende

von

Scrimba

Mehr von Mobile und Web-Entwicklung entdecken

Packt
CSS Modern Responsive Web Design – Build 5 Websites
Kurs
Status: Kostenloser Testzeitraum
Scrimba
Build a Responsive Website with HTML and CSS
Kurs
Status: Kostenloser Testzeitraum
Board Infinity
Mastering Responsive UI Design for Modern Web Development
Kurs
Status: Kostenloser Testzeitraum
Scrimba
Responsive Web Essentials: Design & Navigation
Kurs

Warum entscheiden sich Menschen für Coursera für ihre Karriere?

Felipe M.

Lernender seit 2018

„Es ist eine großartige Erfahrung, in meinem eigenen Tempo zu lernen. Ich kann lernen, wenn ich Zeit und Nerven dazu habe.“

Jennifer J.

Lernender seit 2020

„Bei einem spannenden neuen Projekt konnte ich die neuen Kenntnisse und Kompetenzen aus den Kursen direkt bei der Arbeit anwenden.“

Larry W.

Lernender seit 2021

„Wenn mir Kurse zu Themen fehlen, die meine Universität nicht anbietet, ist Coursera mit die beste Alternative.“

Chaitanya A.

„Man lernt nicht nur, um bei der Arbeit besser zu werden. Es geht noch um viel mehr. Bei Coursera kann ich ohne Grenzen lernen.“

Bewertungen von Lernenden

5 stars
73,33 %
4 stars
13,33 %
3 stars
6,66 %
2 stars
0 %
1 star
6,66 %

Zeigt 3 von 15 an

Geprüft am 30. Sep. 2023

Detailed, hands-on and fun. This course simplifies intimidating CSS concepts like Flex-box, CSS Grid and Media - Queries. The instructor is amazing. Thanks so much for this terrific course.

Geprüft am 23. Dez. 2023

I have been following Kevin from youtube, he really puts of the great content, I really like the way he teaches to make site responsive effortlessly

Weitere Bewertungen anzeigen

Neue Karrieremöglichkeiten mit Coursera Plus

Unbegrenzter Zugang zu 10,000+ Weltklasse-Kursen, praktischen Projekten und berufsqualifizierenden Zertifikatsprogrammen - alles in Ihrem Abonnement enthalten

Mehr erfahren

Bringen Sie Ihre Karriere mit einem Online-Abschluss voran.

Erwerben Sie einen Abschluss von erstklassigen Universitäten – 100 % online

Erkunden Sie die Abschlüsse

Schließen Sie sich mehr als 3.400 Unternehmen in aller Welt an, die sich für Coursera for Business entschieden haben.

Schulen Sie Ihre Mitarbeiter*innen, um sich in der digitalen Wirtschaft zu behaupten.

Mehr erfahren

Häufig gestellte Fragen

Um Zugang zu den Kursmaterialien und Aufgaben zu erhalten und um ein Zertifikat zu erwerben, müssen Sie die Zertifikatserfahrung erwerben, wenn Sie sich für einen Kurs anmelden. Sie können stattdessen eine kostenlose Testversion ausprobieren oder finanzielle Unterstützung beantragen. Der Kurs kann stattdessen die Option "Vollständiger Kurs, kein Zertifikat" anbieten. Mit dieser Option können Sie alle Kursmaterialien einsehen, die erforderlichen Bewertungen abgeben und eine Abschlussnote erhalten. Dies bedeutet auch, dass Sie kein Zertifikat erwerben können.

Wenn Sie sich für den Kurs einschreiben, erhalten Sie Zugang zu allen Kursen der Spezialisierung, und Sie erhalten ein Zertifikat, wenn Sie die Arbeit abgeschlossen haben. Ihr elektronisches Zertifikat wird Ihrer Seite "Leistungen" hinzugefügt - von dort aus können Sie Ihr Zertifikat ausdrucken oder Ihrem LinkedIn-Profil hinzufügen.

Ja. Für ausgewählte Lernprogramme können Sie eine finanzielle Unterstützung oder ein Stipendium beantragen, wenn Sie die Anmeldungsgebühr nicht aufbringen können. Wenn für das von Ihnen gewählte Lernprogramm eine finanzielle Unterstützung oder ein Stipendium verfügbar ist, finden Sie auf der Beschreibungsseite einen Link zum Antragsformular.