Build Mini Projects in JavaScript

Holen Sie sich eines unserer besten Angebote und erweitern Sie Ihre Fähigkeiten mit 50% Rabatt auf Coursera Plus. Jetzt sparen.

kurs ist nicht verfügbar in Deutsch (Deutschland)

Wir übersetzen es in weitere Sprachen. Sehen Sie sich die Sprachen an, die wir anbieten.

Build Mini Projects in JavaScript

Dieser Kurs ist Teil mehrerer Programme.

Dozent: Tom Chant

Bei enthalten

Mehr erfahren

4 Module

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

Stufe Mittel

Empfohlene Erfahrung

1 Woche zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

4 Module

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

Stufe Mittel

Empfohlene Erfahrung

1 Woche zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

Was Sie lernen werden

Create efficient functions using arrow syntax and expressions.
Apply array methods like .map() and .reduce() to process data.
Debug JavaScript applications using common error-handling techniques.

Kompetenzen, die Sie erwerben

Kategorie: Interactive Design
Kategorie: Data Validation
Kategorie: Data Management
Kategorie: Data Mapping
Kategorie: Web Development
Kategorie: Javascript
Kategorie: Event-Driven Programming
Kategorie: Computational Logic
Kategorie: Web Content Accessibility Guidelines
Kategorie: Data Import/Export
Kategorie: User Interface (UI)

Werkzeuge, die Sie lernen werden

Kategorie: Web Applications

Wichtige Details

Zertifikat zur Vorlage

Zu Ihrem LinkedIn-Profil hinzufügen

Bewertungen

4 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 4 Module

Are you ready to elevate your JavaScript skills with a project-based approach? This course is designed to guide you through fundamental and advanced JavaScript concepts using practical, real-world challenges.

Through hands-on projects, you'll explore functional methods such as .map() and .reduce(), key logical operations such as the ternary operator and short-circuiting, form submission, and much more. Next up, you'll explore increasingly advanced JavaScript concepts including loops, filter(), imports, and object destructuring by building three full projects; A meme picker, a cookie consent banner and an X/Twitter clone. You’ll learn to write cleaner, more efficient code and tackle challenges that solidify your understanding of JavaScript. By the end of this course, you'll have a solid understanding of powerful JavaScript methods and techniques ready to apply directly to your coding projects and in your coding career.

Build your JavaScript skills with practical challenges that cover methods, arrays, destructuring, and more.

Das ist alles enthalten

1 Aufgabe49 Plug-ins

1 AufgabeInsgesamt 30 Minuten

JavaScript Essentials Quiz30 Minuten

49 Plug-insInsgesamt 201 Minuten

Intro to Mini Projects1 Minute
Welcome to interactive lessons!1 Minute
Object Destructuring3 Minuten
Object Destructuring Challenge2 Minuten
The .map() Method7 Minuten
The .map() Method Challenge4 Minuten
The .join() Method3 Minuten
The .join() Method Challenge2 Minuten
.map() vs .forEach()5 Minuten
For loop Break and Continue5 Minuten
The dangers of innerHTML5 Minuten
Beyond Function Declarations 1: Function Expressions3 Minuten
Beyond Function Declarations 2: Function Expression Challenge2 Minuten
Beyond Function Declarations 3: Arrow Functions6 Minuten
Arrow Functions Challenge4 Minuten
Inline Arrow Functions Challenge2 Minuten
Import Export (named)4 Minuten
Import Export (default)4 Minuten
The .reduce() Method6 Minuten
The .reduce() Method Challenge4 Minuten
The .reduce() Method with Objects8 Minuten
The .reduce() Method with Objects Challenge3 Minuten
Default Parameters3 Minuten
Super Challenge Set-up3 Minuten
Super Challenge Solution9 Minuten
The Ternary Operator4 Minuten
The Ternary Operator for Complex Conditionals3 Minuten
Ternary Operator Challenge4 Minuten
Twimba Ternary Refactor5 Minuten
The Rest Parameter5 Minuten
The Rest Parameter Challenge7 Minuten
Spread Syntax (...)4 Minuten
Spread Syntax (...) Challenge5 Minuten
Short-circuiting with OR (||)5 Minuten
Short-circuiting with OR (||) Challenge2 Minuten
Short-circuiting with AND (&&)3 Minuten
Short-circuiting with AND (&&) Challenge4 Minuten
Switch Statements5 Minuten
Constructors: Date()5 Minuten
The Error() Constructor3 Minuten
Objects with Methods and 'this'5 Minuten
Objects to Constructor Functions5 Minuten
Constructor Function Challenge5 Minuten
Constructor Functions to Classes5 Minuten
Constructor Functions to Classes Challenge2 Minuten
Debugging: Errors (new)7 Minuten
Debugging: console.error2 Minuten
Debugging: try...catch5 Minuten
Recap2 Minuten

This section teaches you how to build an interactive cookie consent modal using JavaScript, covering timed display, styling, forms, validation, accessibility, and user interaction handling.

Das ist alles enthalten

1 Aufgabe31 Plug-ins

1 AufgabeInsgesamt 80 Minuten

Build an Annoying Cookie Consent Graded Assignment80 Minuten

31 Plug-insInsgesamt 111 Minuten

Cookie Consent Intro3 Minuten
Position the modal3 Minuten
Aside: setTimeout4 Minuten
Set the timer2 Minuten
Aside: element.style6 Minuten
Make the modal reappear2 Minuten
Close the modal3 Minuten
Aside: Forms7 Minuten
Add a form 12 Minuten
Aside: Forms - submitting5 Minuten
Aside: Forms - challenge3 Minuten
Aside: Validation Attributes8 Minuten
Submit the form3 Minuten
Aside: preventDefault4 Minuten
preventDefault Challenge3 Minuten
Buttons in forms - weird behaviour3 Minuten
Add modal message2 Minuten
Add modal messages 26 Minuten
Add modal messages 33 Minuten
Aside: FormData4 Minuten
Form Data 12 Minuten
Aside: FormData methods3 Minuten
Form Data 23 Minuten
Aside: Disabling elements6 Minuten
Disable the close button3 Minuten
There is no choice 14 Minuten
Aside: classlist.toggle4 Minuten
Aside: Classlist Toggle Challenge3 Minuten
There is no choice 23 Minuten
Accessibility Issues2 Minuten
Recap2 Minuten

This section guides you through looping, data handling, DOM manipulation, and event-driven programming in JavaScript, culminating in building an interactive feature that filters and displays cats based on user-selected emotions.

Das ist alles enthalten

1 Aufgabe37 Plug-ins

1 AufgabeInsgesamt 30 Minuten

Build a Meme Picker Graded Assignment30 Minuten

37 Plug-insInsgesamt 166 Minuten

Intro4 Minuten
What a horrible for loop3 Minuten
Aside: for of5 Minuten
Use a for of2 Minuten
Nest the for of5 Minuten
Render out the emotions 14 Minuten
Render out emotions 26 Minuten
Aside: import the data6 Minuten
Import the data2 Minuten
Aside: Radio Inputs6 Minuten
Render the radios inputs6 Minuten
Aside: .includes()6 Minuten
remove duplicates3 Minuten
Aside: e.target6 Minuten
Get the id of the clicked option3 Minuten
Aside: parentElement3 Minuten
Aside: classlist add/remove7 Minuten
Add colour to the selected emotion6 Minuten
Aside: getElementsByClassName5 Minuten
Remove the highlight class2 Minuten
Aside: querySelector and why it's useful5 Minuten
Connect the button5 Minuten
Has an emotion been chosen?3 Minuten
Aside: checkbox6 Minuten
isGif4 Minuten
Aside: filter()6 Minuten
Aside: filter() 25 Minuten
Find matches with .filter()4 Minuten
Animated GIFs Only4 Minuten
Introducing two important functions5 Minuten
If there's only one cat...5 Minuten
If there's more than one cat...4 Minuten
renderCat()5 Minuten
Close the modal2 Minuten
The order of things3 Minuten
Aside: Select Element7 Minuten
Recap3 Minuten

In this module, you’ll learn how to build a fully interactive Twitter clone (“Twimba”) by working with DOM manipulation, event handling, data attributes, and conditional rendering in JavaScript.

Das ist alles enthalten

1 Aufgabe36 Plug-ins

1 AufgabeInsgesamt 30 Minuten

Build an X Clone Graded Assignment30 Minuten

36 Plug-insInsgesamt 143 Minuten

Intro5 Minuten
Import the data4 Minuten
Aside: TextArea3 Minuten
Add TextArea4 Minuten
Tweet Boilerplate3 Minuten
Tweet Boilerplate Challenge4 Minuten
Aside: forEach()5 Minuten
Use forEach to build the html2 Minuten
Render the tweets to the feed4 Minuten
Aside: CDN Font Awesome6 Minuten
Add some awesome icons5 Minuten
Like a tweet part 1: explanation2 Minuten
Aside: Data attributes4 Minuten
Aside: Data Attr JS and Challenge6 Minuten
Aside: Data Attribute Naming Issues3 Minuten
Like a tweet part 2: data attributes2 Minuten
Like a tweet part 3: eventListener0 Minuten
Like a tweet part 4: handleLikeClick()4 Minuten
Like a tweet part 5: find the tweet object6 Minuten
Aside: Copying objects and arrays4 Minuten
Like a tweet part 6: render the increment1 Minute
Unlike a tweet3 Minuten
Flip a boolean2 Minuten
Retweet a tweet8 Minuten
Aside: Conditionally render CSS class7 Minuten
Color the icons6 Minuten
Replies 1: get uuids of tweets with replies3 Minuten
Replies 2: HTML string for replies and add to parent div6 Minuten
Replies 3: toggle hidden5 Minuten
Refactor the tweet btn4 Minuten
Aside: UUID7 Minuten
Build the new Tweet object4 Minuten
Render a new tweet2 Minuten
UX fixes5 Minuten
Recap3 Minuten
Deploy Twimba1 Minute

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

Tom Chant

Scrimba

11 Kurse461.220 Lernende

von

Scrimba

Mehr von Software Development entdecken

Status: Kostenloser Testzeitraum
Packt
Modern JavaScript Tooling, Modules, and Backend Integration
Kurs
Status: Kostenloser Testzeitraum
Scrimba
Advanced JavaScript 3: Objects, Collections, Functions
Kurs
Status: Kostenloser Testzeitraum
Packt
Introduction to AJAX and Mini-Projects
Kurs
Status: Kostenloser Testzeitraum
EDUCBA
Unity Game Development: Fun Mini-Game Projects
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.“

Häufig gestellte Fragen

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.