Build Mini Projects in JavaScript

Build Mini Projects in JavaScript

This course is part of multiple programs.

Instructor: Tom Chant

Access provided by Global Institute of Science & Technology

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

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.

Skills you'll gain

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

4 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is available as part of

When you enroll in this course, you'll also be asked to select a specific program.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 4 modules in this course

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.

What's included

1 assignment49 plugins

1 assignmentTotal 30 minutes

JavaScript Essentials Quiz30 minutes

49 pluginsTotal 201 minutes

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

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.

What's included

1 assignment31 plugins

1 assignmentTotal 80 minutes

Build an Annoying Cookie Consent Graded Assignment80 minutes

31 pluginsTotal 111 minutes

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

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.

What's included

1 assignment37 plugins

1 assignmentTotal 30 minutes

Build a Meme Picker Graded Assignment30 minutes

37 pluginsTotal 166 minutes

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

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.