Overview

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. In this advanced JavaScript and full-stack development course, you will dive deep into complex JavaScript concepts such as asynchronous programming, Promises, and async/await. Learn how to leverage APIs and JSON data to build interactive, real-world applications. You will also gain hands-on experience with important full-stack tools such as Webpack, Babel, and Firebase. The course is designed around practical, project-based learning. You’ll begin by mastering asynchronous JavaScript with techniques like callbacks, promises, and the Fetch API. Then, you'll progress to more advanced topics such as Babel for code compilation, Webpack for bundling, and Firebase for real-time data storage. Each topic is followed by a project where you can apply what you've learned, such as building a news portal, bookmark manager, or even a dynamic note-taking application. This course is perfect for developers who want to level up their JavaScript skills and build powerful full-stack applications. Whether you're building web projects or creating sophisticated data-driven systems, you'll gain the skills necessary to excel in modern JavaScript development.

Syllabus

Asynchronous JavaScript

In this module, we will dive into the world of asynchronous JavaScript, focusing on handling delayed operations, making API requests, and dealing with promises. We will explore concepts like setTimeout, setInterval, callbacks, promises, async/await, and the Fetch API. By the end of this section, you will be able to efficiently manage asynchronous behavior in your JavaScript projects.

Project: News Portal

In this module, we will work on a hands-on project to build a News Portal. You will integrate an external API to fetch news articles, organize them into categories, and display them using custom HTML and CSS templates. This section covers data handling, project deployment, and will guide you through the process of deploying the project to GitHub and Netlify.

Babel

In this module, we will introduce Babel, a powerful JavaScript compiler that helps you write modern code and ensure compatibility across browsers. You will learn how to set up Babel, use the Babel CLI, and organize your project files efficiently to improve the workflow.

Webpack

In this module, we will explore Webpack, an essential tool for bundling and optimizing JavaScript applications. You will learn how to configure Webpack, use loaders to transform files, and set up a development server to test your code in real-time.

Firebase

In this module, we will dive into Firebase, a powerful backend platform for building real-time web applications. You will learn how to integrate Firebase into your projects, manage data with Firestore, and implement user authentication. This section provides essential skills for building dynamic, real-time web apps.

Project: Bookmark Manager

In this module, we will build a Bookmark Manager web application. You will create the user interface with HTML and CSS, connect Firebase for data management, and implement essential features like bookmark filtering and deletion. At the end, you'll deploy your project to GitHub and Netlify.

Project: notNotion

In this module, we will create a feature-rich application called "notNotion". You'll integrate external libraries, like a swipe library, and customize them for your needs. The section also covers UI elements such as navbars and modals, culminating in a project deployment to GitHub and Netlify.

Course Completion

In this module, we will wrap up the course by reviewing the key concepts and projects covered. This is your opportunity to assess your understanding of asynchronous JavaScript, Firebase, Webpack, and other advanced topics, setting the stage for your next steps in full-stack development.

(Optional) HTML and CSS Refresher

In this optional module, we will refresh your knowledge of HTML and CSS basics. From structure and semantics to styling techniques, this section ensures you have a solid foundation in HTML and CSS before diving deeper into advanced JavaScript and full-stack concepts.