Build Mini Projects in JavaScript

Obtenez l'une de nos meilleures offres avec Coursera Plus pour 199 $ (habituellement 399 $). Économisez maintenant.

Ce cours n'est pas disponible en Français (France)

Nous sommes actuellement en train de le traduire dans plus de langues. Consultez les langues disponibles.

Build Mini Projects in JavaScript

Ce cours fait partie de plusieurs programmes.

Instructeur : Tom Chant

Inclus avec

4 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

4 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

Ce que vous apprendrez

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.

Compétences que vous acquerrez

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

Outils que vous découvrirez

Catégorie : Web Applications

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Évaluations

4 devoirs

Enseigné en Anglais

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

En savoir plus sur Coursera pour les affaires

logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

Élaborez votre expertise du sujet

Ce cours est disponible dans le cadre de

Lorsque vous vous inscrivez à ce cours, vous devez également sélectionner un programme spécifique.

Apprenez de nouveaux concepts auprès d'experts du secteur
Acquérez une compréhension de base d'un sujet ou d'un outil
Développez des compétences professionnelles avec des projets pratiques
Obtenez un certificat professionnel partageable

Il y a 4 modules dans ce cours

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.

Inclus

1 devoir49 plugins

1 devoirTotal 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.

Inclus

1 devoir31 plugins

1 devoirTotal 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.

Inclus

1 devoir37 plugins

1 devoirTotal 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.

Inclus

1 devoir36 plugins

1 devoirTotal 30 minutes

Build an X Clone Graded Assignment30 minutes

36 pluginsTotal 143 minutes

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

Obtenez un certificat professionnel

Ajoutez ce titre à votre profil LinkedIn, à votre curriculum vitae ou à votre CV. Partagez-le sur les médias sociaux et dans votre évaluation des performances.

Instructeur

Tom Chant

Scrimba

11 Cours460 014 apprenants

Offert par

Scrimba

En savoir plus sur Software Development

Statut : Essai gratuit
Packt
Modern JavaScript Tooling, Modules, and Backend Integration
Cours
Statut : Essai gratuit
Scrimba
Advanced JavaScript 3: Objects, Collections, Functions
Cours
Statut : Essai gratuit
Packt
Introduction to AJAX and Mini-Projects
Cours
Statut : Essai gratuit
EDUCBA
Unity Game Development: Fun Mini-Game Projects
Spécialisation

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.

Étudiant(e) depuis 2018

’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’

Jennifer J.

Étudiant(e) depuis 2020

’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’

Larry W.

Étudiant(e) depuis 2021

’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’

Chaitanya A.

’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’

Foire Aux Questions

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.

Plus de questions

Visitez le Centre d'Aide pour les Étudiants

Aide financière disponible,