Befassen Sie sich mit reaktivem Webdesign

Befassen Sie sich mit reaktivem Webdesign

Dieser Kurs ist Teil mehrerer Programme.

Dozent: Kevin Powell

Bei Mehr erfahren enthalten

Fragen Sie Coursera

6 Module

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

16 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.

16 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: HTML und CSS
Kategorie: Web-Design
Kategorie: Reaktionsfähiges Web-Design
Kategorie: Front-End-Webentwicklung
Kategorie: Web-Entwicklung
Kategorie: Typografie
Kategorie: Design-Strategien

Werkzeuge, die Sie lernen werden

Kategorie: UI-Komponenten
Kategorie: Cascading Style Sheets (CSS)
Kategorie: Hypertext Markup Language (HTML)

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 AufgabeInsgesamt 30 Minuten

CSS-Grundlagen Benotete Aufgabenstellung30 Minuten

26 Plug-insInsgesamt 176 Minuten

Willkommen zum interaktiven Unterricht!1 Minute
Willkommen auf dem Kurs!4 Minuten
Ein wichtiger Hinweis, bevor wir beginnen1 Minute
Einführung in das Modul CSS-Grundlagen3 Minuten
Ränder und Abstände - Ränder und Abstände im Text5 Minuten
Ränder und Auffüllungen - Ränder verkleinern7 Minuten
Ränder und Abstände - Konsistenz und eine neue Art von Selektor5 Minuten
Inline- und Block-Elemente6 Minuten
Das span-Element4 Minuten
Styling-Links12 Minuten
Zeit zum Üben!22 Minuten
Inline-Block5 Minuten
Tasten für die Gestaltung9 Minuten
Grundlagen der Spezifität5 Minuten
Spezifität - zwei Selektoren mit gleichem Wert2 Minuten
Zusammengesetzte Selektoren15 Minuten
Selektoren und Spezifität von Verbindungen7 Minuten
Eine bessere Möglichkeit, unsere CSS-Klassen zu benennen9 Minuten
Die Texteigenschaften3 Minuten
Schriftfamilie und Stacks für Schriften6 Minuten
So verwenden Sie Google-Schriftarten9 Minuten
Erbschaft2 Minuten
Mit Vererbung arbeiten, überschreiben und anwenden4 Minuten
Alles zusammenfügen8 Minuten
Alles zusammenfügen - das CSS18 Minuten
Lösung der Aufgabe und Abschluss des Moduls4 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 AufgabeInsgesamt 30 Minuten

Beginn des verantwortlichen Denkens Benotete Aufgabe30 Minuten

45 Plug-insInsgesamt 246 Minuten

Beginn des reaktionsfähigen Denkens3 Minuten
CSS-Einheiten3 Minuten
CSS Einheiten - Prozentsatz6 Minuten
Kontrolle der Breite von Bildern5 Minuten
mIN-BEWEGUNG und MAX-BEWEGUNG3 Minuten
CSS Einheiten - Die Einheit em5 Minuten
Das Problem mit ems2 Minuten
CSS Einheiten - rems5 Minuten
Auswahl der zu verwendenden Einheit4 Minuten
ems und rems - ein Beispiel8 Minuten
Auffrischung von Flexbox und Einrichtung von HTML8 Minuten
Grundlegende Stile und Einrichten der Spalten7 Minuten
Hinzufügen der Hintergrundfarbe4 Minuten
Einstellung der Spaltenbreiten4 Minuten
Abstand zwischen den Spalten4 Minuten
Steuerung der vertikalen Position von Flexelementen5 Minuten
Grundlagen der Medienabfrage10 Minuten
Unser Layout mit Flex-Direction responsiv machen7 Minuten
flex-direction erklärt3 Minuten
Erstellen einer Navigation5 Minuten
Flexbox für die Gestaltung der Navigation verwenden8 Minuten
Unsere Navigation soll gut aussehen7 Minuten
Hinzufügen des Unterstrichs4 Minuten
Eine kompliziertere Navigation7 Minuten
Die Navigation responsiv gestalten7 Minuten
Ein Blick auf den Rest des Projekts4 Minuten
Aufbau der Struktur8 Minuten
Merkmale der Artikelstruktur5 Minuten
Die Startseite - HTML für die neuesten Artikel2 Minuten
home page - html für die Seite6 Minuten
Starten Sie das CSS für unsere Seite15 Minuten
Mit dem Layout beginnen - das große Ganze im Blick9 Minuten
Erstmals mobil denken3 Minuten
Gestaltung der Merkmale des Artikels6 Minuten
Ändern der visuellen Reihenfolge mit Flexbox5 Minuten
Das Spiel mit der Position des Titels und die Nachteile negativer Ränder5 Minuten
Gestaltung aktueller Artikel für große Bildschirme8 Minuten
Ändern von Bildgrößen mit object-fit4 Minuten
Einrichten der Widgets und Sprechen von Haltepunkten7 Minuten
Verwendung einer neuen Pseudoklasse zum Einpacken der Homepage7 Minuten
Erstellen der Seite mit den letzten Beiträgen3 Minuten
Einrichten der Seite Über mich4 Minuten
Erledigung einiger unerledigter Aufgaben4 Minuten
Wichtiger Hinweis: Der Viewport-Meta-Tag4 Minuten
Modul-Abschluss3 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 AufgabeInsgesamt 25 Minuten

Unseren Stil verbessern Benotete Aufgabe25 Minuten

38 Plug-insInsgesamt 172 Minuten

Es ist an der Zeit, unseren Stil zu verbessern3 Minuten
Ein Blick auf die Zeilenhöhe5 Minuten
text-transform: Großbuchstaben4 Minuten
Leichtere Lesbarkeit durch Buchstabenabstände4 Minuten
Ein schöner Farbtrick mit rgba()5 Minuten
hintergrund-Bilder4 Minuten
Hintergrundbilder und der Dateipfad (sehr wichtiger Hinweis)2 Minuten
Steuerung unserer Hintergrundbilder8 Minuten
BBQ Splash Page - Projektvorstellung3 Minuten
Schreiben des HTML für die BBQ-Splash-Seite7 Minuten
Beginn der Umgestaltung - BBQ Splash Page11 Minuten
Hinzufügen des Hintergrundbildes - BBQ Splash Page4 Minuten
Ändern der Reihenfolge - BBQ Splash Page4 Minuten
Gestaltung des Hauptinhaltsbereichs - BBQ Splash page3 Minuten
Hinzufügen der Medienabfrage - BBQ Splash Page4 Minuten
Einrichten der Typografie für große Bildschirme - BBQ Splash Page2 Minuten
Beginn der Vorbereitungen für große Bildschirme - BBQ Splash Page3 Minuten
Viewport-Einheiten7 Minuten
Hinzufügen von Viewport-Einheiten auf der BBQ-Splash-Seite2 Minuten
Box-Größe eingeben: border-box7 Minuten
Flexbox verwenden, um den Hauptinhalt vertikal zu zentrieren - BBQ Splash Page3 Minuten
Fixierung des Intro-Abschnitts auf kleinen und großen Bildschirmen - BBQ Splash Page3 Minuten
Umgang mit sehr großen Bildschirmen Lösung #14 Minuten
Umgang mit sehr großen Bildschirmen Lösung #25 Minuten
Die Grundlagen der Formulare11 Minuten
Grundlagen des Formulars - Attribute des Formulars4 Minuten
Die Grundlagen der Formgestaltung5 Minuten
Hinzufügen des Formulars - BBQ Splash Page4 Minuten
Beginn der Gestaltung des Formulars - BBQ Splash Page4 Minuten
Damit die Eingaben gut aussehen - BBQ Splash Page4 Minuten
CSS Farbverläufe6 Minuten
Gestaltung der Schaltfläche - BBQ Splash Page5 Minuten
Grundlegende Übergänge5 Minuten
Einführung in Transformationen (und ein kurzes Wort zur Leistung)3 Minuten
Wir können mehr als :hover3 Minuten
Farbverläufe am Rand5 Minuten
Überblenden von Bildern, Farben und Farbverläufen mit dem Hintergrundüberblendungsmodus4 Minuten
Einpacken2 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 AufgabeInsgesamt 15 Minuten

Flexbox auf die nächste Stufe bringen Benotete Aufgabe15 Minuten

17 Plug-insInsgesamt 76 Minuten

Flexbox auf die nächste Stufe heben2 Minuten
flex-direction, flex-wrap und flex-flow5 Minuten
justify-content und align-items und ihre Beziehung zu flex-direction7 Minuten
Align-content erkunden4 Minuten
flex-grow und flex-shrink erklärt5 Minuten
flex-Basis4 Minuten
Die Kurzzeichen-Eigenschaft flex4 Minuten
Ausrichten einzelner Elemente mit align-self2 Minuten
Ränder auto und Flexbox4 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Einführung3 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Das Markup5 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Typografie6 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Mobiles Layout11 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Große Bildschirme Teil eins5 Minuten
Erstellen einer Kartenkomponente mit Flexbox - Große Bildschirme Teil zwei5 Minuten
Zentrieren eines Objekts auf dem Bildschirm mit Flexbox2 Minuten
Modul Nachbereitung2 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 AufgabeInsgesamt 25 Minuten

CSS-Raster: Das ultimative Layout-Tool Benotete Aufgabe25 Minuten

19 Plug-insInsgesamt 96 Minuten

Einführung in CSS Grid3 Minuten
Einrichten eines Grundrasters5 Minuten
Elemente auf dem Gitter platzieren4 Minuten
grid-row und grid-column Abkürzungen5 Minuten
Spannende Spalten2 Minuten
Einige Ähnlichkeiten mit Flexbox5 Minuten
Verwendung des Rasters für unsere Kartenkomponente13 Minuten
Die Eigenschaft grid-gap3 Minuten
Hinzufügen der Lücke zu unserer Karte3 Minuten
Das implizite und explizite Gitter6 Minuten
Erkundung von Netzgebieten8 Minuten
grid-Flächen und Media-Queries6 Minuten
minmax()4 Minuten
das Gerät fr3 Minuten
minmax() und die Einheit fr2 Minuten
Die Nutzung des Rasters - Teil 112 Minuten
Die Nutzung des Rasters - Teil 24 Minuten
repeater()3 Minuten
auto-Fit und Auto-Fill5 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 AufgabeInsgesamt 20 Minuten

Die nächste Stufe erreichen Benotete Zuweisung20 Minuten

29 Plug-insInsgesamt 121 Minuten

Auf die nächste Stufe bringen2 Minuten
Analysieren der Layouts3 Minuten
Beginn der Arbeiten an der Homepage3 Minuten
Das HTML für die Homepage4 Minuten
Die ersten Zeilen von CSS sollten Sie immer schreiben4 Minuten
Unser Raster für kleine Bildschirme einrichten3 Minuten
Fortsetzung des Heldenbereichs5 Minuten
Die Rubrik "Info"4 Minuten
Einrichten der Fußzeile3 Minuten
Verwendung von Font Awesome für unsere Icons5 Minuten
Abschluss der Fußzeile2 Minuten
Einrichten des Rasters und des Helden für größere Bildschirme5 Minuten
Einrichten des Rests der Seite für größere Bildschirme6 Minuten
Beginn der Gestaltung unserer Navigation3 Minuten
Einrichten unserer Navigation für kleine Bildschirme mit Positionierung5 Minuten
Schließen der Schaltfläche3 Minuten
Hinzufügen der Schaltfläche "Öffnen" zu unserer Navigation4 Minuten
Gestaltung der Navigation für große Bildschirme2 Minuten
Überarbeitung der Navigation und des Heldenbereichs6 Minuten
Erstellen der zweiten Seite2 Minuten
Gestaltung der Info-Seite9 Minuten
Box-Shadows erforschen, um den Effekt auf unsere Bilder zu bekommen5 Minuten
Verwendung von Pseudo-Elementen zum Hinzufügen der gelben Linien5 Minuten
Hinzufügen des gelben Balkens zu unseren Titeln3 Minuten
Erstellen der Kontaktseite4 Minuten
Gestaltung des Kontaktformulars7 Minuten
Gestaltung des Kontaktformulars für größere Bildschirme6 Minuten
Die losen Enden5 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 Kurse10.504 Lernende

von

Scrimba

Mehr von Mobile und Web-Entwicklung entdecken

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

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
75 %
4 stars
12,50 %
3 stars
6,25 %
2 stars
0 %
1 star
6,25 %

Zeigt 3 von 16 an

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

Schalten Sie den Zugang zu mehr als 10.000 Kursen mit einem Abonnement frei
Bringen Sie Ihre Karriere mit einem Online-Abschluss voran.
Erwerben Sie einen Abschluss von erstklassigen Universitäten – 100 % online
Schließen Sie sich den über 4.700 globalen Unternehmen an, die Coursera for Business wählen

Häufig gestellte Fragen

Um auf Kursmaterialien und Aufgaben zugreifen zu können und ein Zertifikat zu erwerben, müssen Sie bei der Anmeldung zu einem Kurs die Option „Zertifikat“ erwerben. Berechtigte Lernende haben möglicherweise auch die Möglichkeit, mit einer kostenlosen Testphase zu beginnen. Bei einigen Kursen wird möglicherweise auch die Option „Vollständiger Kurs, kein Zertifikat“ angeboten. Damit haben Sie Zugriff auf die Kursmaterialien, können die erforderlichen Prüfungen einreichen und erhalten eine Abschlussnote, können jedoch kein Zertifikat erwerben oder erhalten.

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 finanzielle Unterstützung oder ein Stipendium beantragen, wenn Sie die Einschreibegebü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 zur Beantragung.