Wenn Sie sich für diesen Kurs anmelden, werden Sie auch für diese Spezialisierung angemeldet.
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 5 Module
Das Web ist heute kaum wiederzuerkennen von den frühen Tagen der weißen Seiten mit Listen blauer Links. Heute werden Websites mit komplexen Layouts, einzigartigen Schriftarten und individuellen Farbschemata gestaltet. In diesem Kurs lernen Sie die Grundlagen der Cascading Style Sheets (CSS3) kennen. Der Schwerpunkt liegt auf dem Erlernen des Schreibens von CSS-Regeln, dem Testen von Code und der Einführung guter Programmiergewohnheiten.
Wenn es richtig gemacht wird, kann das Styling einer Webseite Ihre Seite aufwerten. Wenn sie falsch gemacht wird, kann das Ergebnis schlimmer sein als gar kein Styling. Um sicherzustellen, dass Ihre Seiten keine Barrieren für Menschen mit kognitiven und/oder körperlichen Behinderungen darstellen, lernen Sie, wie Sie Seiten anhand der standardisierten POUR-Richtlinien für Barrierefreiheit bewerten können. Nach Abschluss des Kurses werden die Teilnehmer in der Lage sein, ein Design für eine bestimmte HTML-Seite zu skizzieren. Anhand dieses Entwurfs werden sie CSS verwenden, um den Entwurf durch Hinzufügen von Schriftarten, Farben und Layouts umzusetzen.
Dies ist der zweite Kurs der Spezialisierung Web Design For Everybody. Die nachfolgenden Kurse konzentrieren sich auf das Hinzufügen von Interaktion mit JavaScript und das Verbessern des Designs mit Responsive Design. Es wird schwierig sein, diesen Kurs zu absolvieren, wenn Sie keinen Zugang zu einem Laptop oder Desktop-Computer für die Hausaufgaben haben.
Willkommen bei Einführung in CSS3! In diesem Kurs lernen Sie, wie Sie Ihre Seiten gestalten können, indem Sie die Möglichkeiten von CSS3 nutzen. Wir werden uns sowohl auf die richtige Syntax (wie Sie Ihre Gestaltungsregeln schreiben) als auch auf die Bedeutung der Barrierefreiheit konzentrieren (damit Ihr Stil Ihre Website verbessert und nicht die Navigation erschwert). Es ist sehr wichtig, dass Sie in diesem Kurs bereit sind, Fehler und Tippfehler zu machen. Sie werden den Stoff nur dann wirklich verstehen, wenn Sie ihn so oft wie möglich selbst eintippen.
Herunter- und Hochladen von Code mit VSCode und Github•4 Minuten
Kopieren von Code mit GitHub Codespaces•4 Minuten
Hochladen auf GitHub-Seiten•8 Minuten
Rückblick: Veröffentlichung Ihrer Website•5 Minuten
Cascading Style Sheets•8 Minuten
Überprüfung der "Kaskadierung" von CSS•8 Minuten
Farben•9 Minuten
Gestalten Sie Ihren Text•12 Minuten
Code Together: Stil anwenden•11 Minuten
Anzeige und Sichtbarkeit - Teil 1•12 Minuten
Anzeige und Sichtbarkeit - Teil 2•8 Minuten
Gemeinsamer Code: Die Eigenschaft Display•5 Minuten
Hausaufgabe Eins Beschreibung•13 Minuten
8 Lektüren•Insgesamt 56 Minuten
Kurs-Lehrplan•10 Minuten
Umfrage vor dem Kurs•5 Minuten
Ressourcen•5 Minuten
Erstellen Ihrer ersten Webseite•10 Minuten
Frühe Kodierung•3 Minuten
Code-Platzierung•5 Minuten
Hausaufgabe Eins Beschreibung•15 Minuten
Einführung in die Gamut-Galerie•3 Minuten
1 Aufgabe•Insgesamt 30 Minuten
Syntax und Theorie der Gestaltung•30 Minuten
1 peer review•Insgesamt 120 Minuten
Hausaufgabe Eins: Gestalten Sie Ihre erste Seite•120 Minuten
1 App-Element•Insgesamt 10 Minuten
Hausaufgabe Eins: Optionale Einreichung der Galerie•10 Minuten
Zweite Woche: Erweiterte Selektoren, Anzeige und Design für Barrierefreiheit
Modul 2•5 Stunden abzuschließen
Moduldetails
Farben und Schriftarten sind nur der Anfang für die Gestaltung Ihrer Seite. Das Schöne daran, mit diesen Eigenschaften zu beginnen, ist, dass sie normalerweise sehr einfach zu implementieren sind. Sie wählen eine Farbe aus und schon haben Sie das erwartete Ergebnis. Diese Woche werden Sie mehr über die Eigenschaft display erfahren. Wenn Sie den HTML-Kurs bei uns besucht haben, wissen Sie, dass einige Elemente (wie Bilder) nebeneinander auf dem Bildschirm angezeigt werden können, während andere (wie Absätze) untereinander angeordnet werden. Ich zeige den Kursteilnehmern gerne die Eigenschaften Raster und Flex, um ihnen ein wenig mehr Macht darüber zu geben, wo die Dinge auf dem Bildschirm platziert werden können. Nachdem wir gelernt haben, wie man Links und Listen gestaltet, werden wir über fortgeschrittenere Selektoren sprechen. Ist Ihnen auf einer Webseite schon einmal aufgefallen, dass einige Links blau und andere lila sind, je nachdem, ob Sie auf die Links geklickt haben? Wie ist es möglich, einige Anker-Tags zu gestalten und andere nicht?
Code Together: Hintergrundbilder und Deckkraft•7 Minuten
Design für Barrierefreiheit•7 Minuten
Hausaufgabe Zwei Beschreibung•7 Minuten
10 Lektüren•Insgesamt 92 Minuten
Ressourcen•1 Minute
Anzeige: Raster•20 Minuten
Anzeige: Flex•20 Minuten
Rückblick auf das DOM•5 Minuten
Regeln für die Kurzschrift•5 Minuten
Browser-Standardeinstellungen•10 Minuten
Browsers•1 Minute
Hintergrundbilder und Deckkraft•5 Minuten
Zusätzliche Ressourcen•10 Minuten
Hausaufgabe Zwei Beschreibung•15 Minuten
1 Aufgabe•Insgesamt 35 Minuten
Quiz für fortgeschrittene Selektoren•35 Minuten
1 peer review•Insgesamt 75 Minuten
Hausaufgabe zwei: Erweiterte Selektoren und Anzeige•75 Minuten
1 App-Element•Insgesamt 10 Minuten
Hausaufgabe Zwei: Optionale Einreichung der Galerie•10 Minuten
Woche 3: Das Box-Modell und die Positionierung
Modul 3•2 Stunden abzuschließen
Moduldetails
Diese Woche geht es um mein Lieblingsstyling - das Box-Modell. Wenn Sie lernen, wie Sie Ränder, Auffüllungen und Seitenränder hinzufügen, können Sie Ihre Seite wirklich attraktiv gestalten. Zum Abschluss dieser Woche befassen wir uns mit dem Thema Positionierung - wie man Elemente dazu bringt, an einem bestimmten Teil Ihrer Seite zu bleiben. Denken Sie an lästige Popup-Werbung. Wie schaffen es die Programmierer, dass sie GERADE IN DER MITTE DES BILDSCHIRMS bleiben, obwohl Sie immer wieder versuchen, sie wegzuscrollen.
Das ist alles enthalten
3 Videos7 Lektüren1 Aufgabe
Infos zu Modulinhalt anzeigen
3 Videos•Insgesamt 29 Minuten
Box Modell•14 Minuten
Code Together: Box-Modell•5 Minuten
Positionierung•10 Minuten
7 Lektüren•Insgesamt 53 Minuten
Ressourcen•1 Minute
Rahmen•20 Minuten
Rand und Auffüllung•10 Minuten
Code Together: Box-Modell•10 Minuten
Positionierung•1 Minute
Zusätzliche Ressourcen•10 Minuten
Warum nicht diese Woche ein Peer Assignment?•1 Minute
1 Aufgabe•Insgesamt 30 Minuten
Abschluss-Quiz•30 Minuten
Vierte Woche: Pseudo-Klassen, Pseudo-Elemente und ein Abschlussprojekt
Modul 4•5 Stunden abzuschließen
Moduldetails
In dieser Woche werden wir uns vor allem mit Demos beschäftigen. Sie werden lernen, wie Sie Pseudoklassen (z.B. ein Link, der besucht wurde, ein Element, über dem die Maus schwebt) und Pseudoelemente (z.B. der erste Buchstabe einer Überschrift, die erste Zeile eines Absatzes) gestalten können. Diese Elemente sind nicht schwer zu gestalten, erfordern aber eine sorgfältige Kodierung.
Der letzte Schritt zur Beendigung dieses Kurses ist die Fertigstellung des von den Teilnehmern bewerteten Projekts. Hier können Sie zeigen, dass Sie in der Lage sind, die Gestaltungsrichtlinien zu befolgen und dem Projekt dennoch Ihre persönliche Note zu geben. Denken Sie daran, dass Sie Ihre Arbeit auf korrekte Syntax und Zugänglichkeit überprüfen müssen
Das ist alles enthalten
7 Videos3 Lektüren1 peer review1 App-Element
Infos zu Modulinhalt anzeigen
7 Videos•Insgesamt 42 Minuten
Pseudoklassen und Elemente•3 Minuten
Gemeinsam kodieren: Bilder mit Pseudo-Klassen stylen•10 Minuten
Übergänge•6 Minuten
Transformiert•5 Minuten
Barrierefreie Navigation•7 Minuten
Endgültige Projektbeschreibung•7 Minuten
Abschluss•3 Minuten
3 Lektüren•Insgesamt 21 Minuten
Ressourcen•1 Minute
Zusätzliche Ressourcen•10 Minuten
Endgültige Projektbeschreibung•10 Minuten
1 peer review•Insgesamt 210 Minuten
Abschlussprojekt: Erstellen Sie Ihre Website!•210 Minuten
1 App-Element•Insgesamt 10 Minuten
Abschlussprojekt: Optionale Einreichung in der Galerie•10 Minuten
Fünfte Woche: Wie geht es jetzt weiter?
Modul 5•11 Minuten abzuschließen
Moduldetails
Wenn Sie jetzt, nachdem Sie diesen Kurs abgeschlossen haben, mehr tun möchten, habe ich ein paar Empfehlungen. Das Wichtigste ist, dass Sie Ihre Fähigkeiten weiter üben und immer "etwas" haben, woran Sie arbeiten.
Das ist alles enthalten
2 Lektüren
Infos zu Modulinhalt anzeigen
2 Lektüren•Insgesamt 11 Minuten
Coursera Optionen•1 Minute
Umfrage nach dem Kurs•10 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.
Dozenten
Lehrkraftbewertungen
Lehrkraftbewertungen
Wir haben alle Lernenden um Feedback zu unseren Dozenten gebeten, ausgehend von der Qualität ihres Unterrichtsstils.
Die Aufgabe der University of Michigan ist es, den Menschen in Michigan und der Welt zu dienen, indem sie bei der Schaffung, Vermittlung, Bewahrung und Anwendung von Wissen, Kunst und akademischen Werten sowie bei der Entwicklung von Führungskräften und Bürgern, die die Gegenwart herausfordern und die Zukunft bereichern, eine herausragende Stellung einnimmt.
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
4.8
9.654 Bewertungen
5 stars
82,47 %
4 stars
15,13 %
3 stars
1,85 %
2 stars
0,17 %
1 star
0,35 %
Zeigt 3 von 9654 an
M
MZ
5·
Geprüft am 2. Mai 2020
Great course. It puts you on track for the styling part of a site and helps you understand what you are actually doing. The professor give a lot of additional resources for further development.
P
PB
4·
Geprüft am 26. Mai 2020
I expected more content on transform and transitions. Nevertheless, it was a beginners course so i couldn't expect that but it would have been really nice to grasp all that in just one course
M
MW
5·
Geprüft am 6. Dez. 2016
Excellent for learning how to learn about styling webpages. I'm not very artistic when it comes to using pen and paper, but I've really learned how to express myself creatively through this course.
Wann werde ich Zugang zu den Vorlesungen und Aufgaben haben?
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.
Was bekomme ich, wenn ich mich für diese Specialization einschreibe?
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.
Ist finanzielle Hilfe verfügbar?
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.