Web Design und User Experience Engineering Teil 1 a) bitte umschreiben b) falls Umschreibung nicht möglich: Nutzererfahrung c) für Cloud Marketing auch: User Experience
Web Design und User Experience Engineering Teil 1 a) bitte umschreiben b) falls Umschreibung nicht möglich: Nutzererfahrung c) für Cloud Marketing auch: User Experience
Einführung in die Grundlagen der Entwicklung von Web-Benutzerschnittstellen/Benutzererfahrungen (UI/UX). Dieser Kurs konzentriert sich auf Kernkonzepte und bewährte Verfahren bei der Entwicklung von Webanwendungen, die nicht an bestimmte Bibliotheken oder Frameworks gebunden sind. Die Themen umfassen HTML, CSS, JavaScript und grundlegende Barrierefreiheit (a11y).
In dieser Woche wird die Bedeutung von semantischem HTML hervorgehoben und die Definition und der WERT, den semantisches HTML bietet, erforscht. Wir werden uns mit der Nutzung von Ressourcen wie MDN und den Browser-Entwickler-Tools (DevTools) befassen, wobei KI-Tools wie ChatGPT mit Vorsicht zu genießen sind. Es folgt eine Untersuchung der Rollen von HTML, CSS und JavaScript, einschließlich HTML-Syntax, Struktur und semantische Elemente.
Das ist alles enthalten
24 Lektüren3 Aufgaben1 Diskussionsthema
Infos zu Modulinhalt anzeigen
24 Lektüren•Insgesamt 335 Minuten
Einführung in den Kurs•2 Minuten
Northeastern University - Bewertung von Vorkenntnissen•5 Minuten
Lehrplan - Web Design und Benutzererfahrung Teil 1•10 Minuten
Treffen Sie Ihre Fakultät•1 Minute
Überblick über den Kursinhalt•2 Minuten
Kurssoftware und Tools•2 Minuten
CORE Kurs-Konzepte•5 Minuten
Grundlagen des Kurses•4 Minuten
Akademische Integrität•1 Minute
Woche 1 Überblick: HTML-Grundlagen•1 Minute
Entwicklung des Webs•15 Minuten
Was ist das Web?•15 Minuten
Server und Browser•15 Minuten
Allgemeine und HTML-Schreibweisen und Einrückung•20 Minuten
Einführung in die Befehlszeile•110 Minuten
"serve" Webserver•4 Minuten
Gute Quellen finden•35 Minuten
Die Risiken von ChatGPT, Copilot und anderen LLMs beim Lernen•20 Minuten
MDN verwenden•5 Minuten
Die Rolle von HTML/CSS/JS auf einer Webseite•7 Minuten
Grundlagen der HTML-Syntax•30 Minuten
Was und Warum von semantischem HTML•10 Minuten
Häufigste Elemente•15 Minuten
Schritte zur Ausführung des Codes auf Ihrem Laptop•1 Minute
3 Aufgaben•Insgesamt 95 Minuten
Bewerten Sie Ihr Lernen: Allgemeine und HTML-Schreibweisen•50 Minuten
Bewerten Sie Ihr Lernen: Webserver•25 Minuten
Bewerten Sie Ihr Lernen: Semantisches HTML•20 Minuten
1 Diskussionsthema•Insgesamt 10 Minuten
Treffen Sie Ihre Mitschüler!•10 Minuten
CSS-Grundlagen
Modul 2•8 Stunden abzuschließen
Moduldetails
Diese Woche befassen wir uns mit der CSS-Syntax, der Spezifität und den semantischen Klassennamen. Wir besprechen das Laden von CSS, das CSS Box-Modell und die damit verbundenen Eigenschaften sowie die Unterschiede zwischen Inline-, Block- und Inline-Block-Elementen im Flow-Layout. In dieser Woche geht es auch um das Debugging von CSS mit den DevTools des Browsers und die Anwendung des Box-Modells zur Erstellung verschiedener gängiger Layouts. Die Hauptaufgabe in dieser Woche besteht darin, CSS für eine bestehende HTML-Seite zu erstellen, um ein gewünschtes Aussehen zu erreichen.
Das ist alles enthalten
5 Videos10 Lektüren7 Aufgaben
Infos zu Modulinhalt anzeigen
5 Videos•Insgesamt 68 Minuten
Demo: Styling anwenden•9 Minuten
Die 4 Teile des CSS Box Modells•4 Minuten
Demo: Anwendung des Box-Modells - Horizontales Menü•22 Minuten
Demo: Anwendung des Box-Modells - Vertikales Menü•15 Minuten
Demo: Entwicklungswerkzeuge und CSS•18 Minuten
10 Lektüren•Insgesamt 287 Minuten
Woche 2 Überblick: CSS-Grundlagen•1 Minute
Grundlegende CSS-Syntax•35 Minuten
Erweiterte CSS-Syntax•25 Minuten
CSS laden•45 Minuten
Fluss-Layout•8 Minuten
CSS-Box-Modell•105 Minuten
Zusätzliche Ressourcen•25 Minuten
CSS Vorrang und Spezifität•25 Minuten
CSS-Klassennamen•17 Minuten
Schritte zur Ausführung des Codes auf Ihrem Laptop•1 Minute
7 Aufgaben•Insgesamt 98 Minuten
Bewerten Sie Ihr Lernen: CSS Syntax Selektoren•10 Minuten
Bewerten Sie Ihr Lernen: Absolute Pfade vs. Relative Pfade•20 Minuten
Bewerten Sie Ihr Lernen: CSS-Laden•3 Minuten
Bewerten Sie Ihr Lernen: Box-Modell•15 Minuten
Bewerten Sie Ihr Lernen: Styling der Box•15 Minuten
Bewerten Sie Ihr Lernen: Vorrangigkeit und Spezifität•20 Minuten
Bewerten Sie Ihr Lernen: Semantische vs. Utility-Klassennamen•15 Minuten
Seitenlayout mit CSS
Modul 3•11 Stunden abzuschließen
Moduldetails
In dieser Woche befassen wir uns mit einigen gängigen Webdesign-Konzepten wie Platzhaltertexten und -bildern, den Aspekten, die die Auswahl von Schriftarten beeinflussen und erschweren, und wichtigen Fragen der Barrierefreiheit wie der Einhaltung von Textgröße und Alt-Text. Wir untersuchen einige häufige Missverständnisse in Bezug auf das Urheberrecht und wie sich dies auf die Arbeit als Webentwickler auswirkt. Wir erkunden weitere Layout-Optionen mit CSS und lernen Flexbox, Rasterflächen und Mehrspalten-Layouts kennen. Wir besprechen die Bedeutung und Umsetzung von Responsive Design und adaptivem Design in Webseiten. Die Hauptaufgabe für diese Woche bietet ein ungefähres Layout mit Änderungen zwischen Desktop- und Mobilgrößen und fordert Sie auf, HTML und CSS zu schreiben, um eine Lösung zu erstellen.
Das ist alles enthalten
7 Videos16 Lektüren6 Aufgaben
Infos zu Modulinhalt anzeigen
7 Videos•Insgesamt 96 Minuten
Demo: Flexbox•12 Minuten
Demo: Flexbox Teil 2•14 Minuten
Demo: Rasterflächen•16 Minuten
Demo: Rasterflächen Teil 2•9 Minuten
Demo: Reaktionsfähig und anpassungsfähig•16 Minuten
12-Spalten-Raster•9 Minuten
Demo: 12-Spalten-Raster•20 Minuten
16 Lektüren•Insgesamt 404 Minuten
Woche 3 Überblick: Seitenlayout mit CSS•1 Minute
Lorem Ipsum•5 Minuten
Emmet•20 Minuten
Grundlagen der Schrift•55 Minuten
Bilder im Vordergrund•5 Minuten
Bilder im Hintergrund•35 Minuten
Praktisches Urheberrecht für Webentwickler•20 Minuten
Flexbox•105 Minuten
Rasterflächen•5 Minuten
Reaktionsfähig und anpassungsfähig•7 Minuten
Überlegungen zum mobilen Viewport•1 Minute
Mobile First Design•3 Minuten
Mobile First Implementierung•3 Minuten
Gittersäulen und Spannweiten•105 Minuten
Die Wahl zwischen Flexbox und Grid•33 Minuten
Schritte zur Ausführung des Codes auf Ihrem Laptop•1 Minute
6 Aufgaben•Insgesamt 165 Minuten
Bewerten Sie Ihr Lernen: Identifizierung semantischer Klassennamen•15 Minuten
Bewerten Sie Ihr Lernen: Bilder•10 Minuten
Bewerten Sie Ihr Lernen: Praktisches Urheberrecht•15 Minuten
Bewerten Sie Ihr Lernen: Flexbox vs. Raster•65 Minuten
Bewerten Sie Ihr Lernen: Mobile Überlegungen•30 Minuten
Bewerten Sie Ihr Lernen: 12-Spalten-Raster•30 Minuten
HTML-Formulare und Positionierung
Modul 4•8 Stunden abzuschließen
Moduldetails
Diese Woche konzentrieren wir uns auf die Struktur und das Layout von HTML-Formularen und behandeln die Syntax verschiedener formularbezogener Elemente und die damit verbundenen grundlegenden Anforderungen und Fehler in Bezug auf die Barrierefreiheit sowie die begrenzte HTML-basierte Validierung, die für Formulare verfügbar ist. Ich stelle gängige Layouts für Formularbeschriftungen und -felder vor, einschließlich Ausnahmen, und erörtere, inwiefern diese Layouts für Ihre Benutzererfahrung von Vorteil sind oder nicht. Wir behandeln auch die verschiedenen Optionen für die Eigenschaft Position und wie diese Optionen verwendet werden, um gängige Webdesign-Wünsche zu erfüllen, einschließlich der Erstellung eines "Dropdown"-Navigationsmenüs. Die Hauptaufgabe in dieser Woche besteht darin, ein gewünschtes Layout für ein Formular zu erstellen, das Daten an einen bereitgestellten Server übermittelt.
Das ist alles enthalten
3 Videos11 Lektüren4 Aufgaben
Infos zu Modulinhalt anzeigen
3 Videos•Insgesamt 50 Minuten
Demo: Angewandte Positionierung•11 Minuten
Demo: Angewandte Positionierung Teil 2•19 Minuten
Demo: Dropdown-Navigation•20 Minuten
11 Lektüren•Insgesamt 302 Minuten
Woche 4: Überblick: HTML-Formulare und Positionierung•1 Minute
HTML Formular Syntax•12 Minuten
Tastatur-Navigation•20 Minuten
CSS zurücksetzen•13 Minuten
Pufferzeit•7 Minuten
HTML-Formular-Layout•27 Minuten
Regex-Muster•12 Minuten
HTML-basierte Formularvalidierung•70 Minuten
Serverbasierte Formularvalidierung•75 Minuten
Richtig positionieren•55 Minuten
Woche 4 Ressourcen•10 Minuten
4 Aufgaben•Insgesamt 145 Minuten
Bewerten Sie Ihr Lernen: HTML-Formular-Elemente•45 Minuten
Bewerten Sie Ihren Lernprozess: 1-Spalten-Formular-Layouts vs. 2-Spalten-Formular-Layouts•20 Minuten
Bewerten Sie Ihr Lernen: Positionierung•40 Minuten
Bewerten Sie Ihr Lernen: Dropdown-Navigation•40 Minuten
CSS-Übergänge und Animationen
Modul 5•7 Stunden abzuschließen
Moduldetails
In dieser Woche stellen wir die Namenskonventionen für BEM-Klassen (Block, Element, Modifier) vor und untersuchen ihre Verwendung, ihre Argumente und ihre potenziellen Vorteile. Wir behandeln gängige UI/UX-Konzepte wie Hero-Bilder, Call to Action (CTAs), das Konzept des "Fold", Panels, Karten und Breadcrumb-Navigation und beschäftigen uns mit der Syntax und der praktischen Anwendung von CSS-Transformationen, -Übergängen und -Animationen. Schließlich lernen wir, Animationen so einzuschränken, dass sie die Benutzereinstellungen für reduzierte Bewegungen berücksichtigen, und fügen Bewegungen zu unserem Dropdown-Navigationsbeispiel hinzu.
Das ist alles enthalten
1 Video7 Lektüren4 Aufgaben
Infos zu Modulinhalt anzeigen
1 Video•Insgesamt 15 Minuten
Demo: Nur CSS-Übergang Dropdown-Navigation•15 Minuten
7 Lektüren•Insgesamt 304 Minuten
Woche 5 Überblick: CSS-Übergänge und Animationen•1 Minute
BEM: Warum und wie•35 Minuten
Einfache UI/UX-Konzepte•20 Minuten
Zusätzliche Ressourcen•175 Minuten
Transformer Konzept und Syntax•28 Minuten
Übergangskonzept und -syntax•25 Minuten
CSS Animation Konzept und Syntax•20 Minuten
4 Aufgaben•Insgesamt 110 Minuten
Bewerten Sie Ihr Lernen: BEM•20 Minuten
Bewerten Sie Ihr Lernen: Gemeinsame UI/UX-Konzepte•35 Minuten
Bewerten Sie Ihr Lernen: Transformiert•20 Minuten
Bewerten Sie Ihr Lernen: Übergänge und Animationen•35 Minuten
Einführung in Javascript
Modul 6•6 Stunden abzuschließen
Moduldetails
Diese Woche bietet eine Einführung in JavaScript, die sich auf die wichtigsten Konzepte und praktischen Anwendungen konzentriert. Sie werden erkunden, wie man JavaScript lädt und seine grundlegende Syntax anhand der Lektüre und der Quizfragen dieser Woche verstehen. Themen wie Variablen, Funktionen, Arrays, Objekte, Konditionale, Schleifen und lexikalischer Bereich werden besprochen, zusammen mit einigen Videoanimationen zur Veranschaulichung komplexerer Konzepte. Wir werden uns auch mit dem Document Object Model (DOM) befassen, einer Methode zur dynamischen Bearbeitung von Webseiten mit JavaScript. Schließlich werden wir uns mit Debugging-Techniken beschäftigen, um Fehler zu erkennen und zu beheben.
Um das Gelernte zu festigen, werden Sie eine Aufgabe lösen, bei der Sie ein "Stein-Papier-Schere"-Spiel entwickeln, das Schaltflächen und Konsoleninteraktionen integriert und so die oben genannten Kernkompetenzen demonstriert.
Das ist alles enthalten
3 Videos13 Lektüren5 Aufgaben
Infos zu Modulinhalt anzeigen
3 Videos•Insgesamt 28 Minuten
Objekt vs. Array Lookup•6 Minuten
Lexikalischer Umfang•4 Minuten
Demo: Debugging von JS•18 Minuten
13 Lektüren•Insgesamt 256 Minuten
Woche 6 Überblick: Einführung in JavaScript•1 Minute
JavaScript (JS) Überblick•7 Minuten
Laden und Ausführen von JS•6 Minuten
JS-Linting und grundlegende Syntax•11 Minuten
JS-Variablen und Primitive•15 Minuten
JS-Funktionen und Rückrufe•13 Minuten
JS-Arrays und -Objekte•30 Minuten
Konditionale und Vergleich•11 Minuten
Mutation und Scoping•6 Minuten
JS-Schleifen•80 Minuten
Was ist das DOM•6 Minuten
Aktion bei Klick auf eine Schaltfläche•20 Minuten
Debugging-Konzepte und -Ansatz•50 Minuten
5 Aufgaben•Insgesamt 105 Minuten
Bewerten Sie Ihr Lernen: JS laden•10 Minuten
Bewerten Sie Ihr Lernen: Laufender JS•22 Minuten
Bewerten Sie Ihr Lernen: DOM•20 Minuten
Bewerten Sie Ihr Lernen: Grundlegende JS-Syntax•35 Minuten
Bewerten Sie Ihr Lernen: Debugging von JS•18 Minuten
Angewandtes JavaScript
Modul 7•3 Stunden abzuschließen
Moduldetails
Diese Woche vertiefen wir Ihr Verständnis von JavaScript, indem wir fortgeschrittene Syntax-Konzepte vorstellen, darunter Spread- und Rest-Operatoren, Destrukturierung, JSON und Reguläre Ausdrücke. Sie lernen, wie Sie mit dem DOM interagieren, indem Sie den Inhalt von Knoten manipulieren und JavaScript-Ereignisse behandeln, verstärkt durch Quizfragen, um Ihr Verständnis zu überprüfen. In dieser Woche wird auch die JavaScript-basierte Formularvalidierung behandelt, wobei bewährte Praktiken, häufige Fallstricke und die Bedeutung eines ausgewogenen Verhältnisses zwischen Front-End-Komfort und Backend-Sicherheit hervorgehoben werden. Die Woche gipfelt in einer Aufgabe, bei der Sie ein Merkmal für die Übermittlung von Formularen mit integrierter JavaScript-Validierung erstellen und dabei wichtige Konzepte aus den Lektionen anwenden, um die Funktionalität von Webanwendungen sicherzustellen.
Northeastern wurde 1898 gegründet und ist eine globale Forschungsuniversität mit einem unverwechselbaren, erfahrungsorientierten Ansatz für Bildung und Entdeckung. Die Universität ist führend im Bereich des erfahrungsbasierten Lernens und verfügt über das weltweit umfassendste Programm für kooperative Ausbildung. Der Geist der Zusammenarbeit leitet ein vom Nutzen inspiriertes Forschungsunternehmen, das sich auf die Lösung globaler Herausforderungen in den Bereichen Gesundheit, Sicherheit und Nachhaltigkeit konzentriert.
OK
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.“
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 erhalte ich, wenn ich das Zertifikat kaufe?
Wenn Sie ein Zertifikat erwerben, erhalten Sie Zugang zu allen Kursmaterialien, einschließlich der benoteten Aufgaben. Nach Abschluss des Kurses wird Ihr elektronisches Zertifikat zu Ihrer Erfolgsseite hinzugefügt - von dort aus können Sie Ihr Zertifikat ausdrucken oder zu 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.