JavaScript in Modern Web Development
Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
JavaScript in Modern Web Development
This course is part of JavaScript from Beginner to Expert 2.0 Specialization
Included with
Recommended experience
Recommended experience
What you'll learn
Master JavaScript best practices to optimize performance and efficiency.
Learn how to manage modern JavaScript features like the nullish coalescing operator and arrow functions.
Build interactive React applications and handle state management effectively.
Set up back-end services with Node.js and integrate with React projects.
Skills you'll gain
Tools you'll learn
Details to know
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- 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 15 modules in this course
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 course, you will gain in-depth knowledge of JavaScript and its application in modern web development. You’ll learn everything from best practices, such as optimizing JavaScript performance and managing files efficiently, to the latest features of JavaScript, including the nullish coalescing operator and arrow functions. The course also dives into building projects with React and Node.js, focusing on component structures and integrating various external packages for enhanced functionality. As you progress, you will explore key web development tools like Vite, Electron, and Progressive Web Apps (PWA), while also covering the essential integration of back-end technologies with Express.js. This is not just about theory; the course will guide you through hands-on exercises like creating games in React, managing state, and deploying your applications. This course is designed for aspiring developers who want to build responsive, dynamic, and scalable applications using modern JavaScript technologies. Whether you’re looking to specialize in React or gain a broader understanding of web development, this course offers the tools and knowledge to get you there. By the end of the course, you will be able to efficiently use JavaScript to build modern web applications, master React for building components and managing state, integrate back-end services with Express.js, and deploy your projects for production.
In this module, we will explore the fundamentals of React, starting with components and their function in building user interfaces. You'll dive deeper into key concepts like state, props, and the virtual DOM, which form the core of React’s architecture.
What's included
2 videos2 readings1 assignment
2 videos•Total 31 minutes
- What is a component?•6 minutes
- React fundamentals - the most important lecture for learning React•25 minutes
2 readings•Total 20 minutes
- Introduction to the Course 'JavaScript in Modern Web Development'•10 minutes
- Full Specialization Resources•10 minutes
1 assignment•Total 15 minutes
- EXTRA CONTENT: React Basics - Assessment•15 minutes
In this module, we will guide you through the process of setting up a React development environment using Node.js, npm, and Vite. You will also learn how to scale your project from a single-file app to a more organized multi-component structure.
What's included
4 videos1 assignment
4 videos•Total 37 minutes
- What is Node.js and npm?•7 minutes
- Installing Vite and React structure•10 minutes
- Single file app to multiple files app - analyzing structure of React project•11 minutes
- How to create a component and connect it to App.jsx•9 minutes
1 assignment•Total 15 minutes
- EXTRA CONTENT: Node.js & Vite - React Template - Assessment•15 minutes
In this module, we will dive into props, a key feature of React. You'll learn how to use props to pass data and functions between components, making your React applications more dynamic and modular.
What's included
1 video1 assignment
1 video•Total 13 minutes
- What are props and how to use them?•13 minutes
1 assignment•Total 15 minutes
- EXTRA CONTENT: React Props - Assessment•15 minutes
In this module, we will guide you through the development of an AutoClicker Mining game in React. You’ll create key components, add game mechanics like power upgrades, and utilize React hooks to manage game state and side effects.
What's included
7 videos1 assignment
7 videos•Total 45 minutes
- Intro: What are we gonna create?•3 minutes
- Ex. Create GoldMiner Main comp•2 minutes
- Gold Miner Power Upgrade•6 minutes
- Updater Functions in React Hooks•15 minutes
- [EXERCISE] Auto Clicker GUI and hooks•4 minutes
- useEffect on practical example: AutoClicker•11 minutes
- Conditionally Disabling a Button in React Using the 'disabled' Attribute•4 minutes
1 assignment•Total 15 minutes
- Game in React: AutoClicker Mining Game - PART 1 - Assessment•15 minutes
In this module, we will enhance the AutoClicker Mining game by integrating external packages like lucide-react for icons, Framer Motion for animations, and lodash for better data manipulation, making the game more engaging and visually appealing.
What's included
4 videos1 assignment
4 videos•Total 17 minutes
- Installing lucide-react - let's apply icons to our game•6 minutes
- How to apply CSS to components - className•6 minutes
- Installing Framer Motion in React - let's bring animation to our project!•2 minutes
- Let's add simple animation using Framer Motion to our app•4 minutes
1 assignment•Total 15 minutes
- Game in React | External Packages: lucide, framer, lodash - PART 2 - Assessment•15 minutes
In this module, we will focus on refactoring your React game code to enhance maintainability. You’ll break down large components into smaller pieces, optimize your animation work with object destructuring, and apply lodash for better data handling.
What's included
6 videos1 assignment
6 videos•Total 36 minutes
- ...animationProps - let's use object destructuring to improve animation work•6 minutes
- lodash.merge package - how to merge props on a practical example•9 minutes
- Creating functional components - let's refactor our code•4 minutes
- util folder with animations.jsx settings for entire app•6 minutes
- AnimatePresence - how to make 'exit' animation•5 minutes
- CSS modules - let's apply scope to our CSS•6 minutes
1 assignment•Total 15 minutes
- Game in React | Refactoring Code | PART 3 - Assessment•15 minutes
In this module, we will explore the Context API and local storage to manage global state and persist data in your React game. You will also build a theme toggle button to switch between light and dark modes.
What's included
6 videos1 assignment
6 videos•Total 47 minutes
- Create ThemeToggleButton•11 minutes
- Conditional text - Dark to Light, Light to Dark•2 minutes
- [EXERCISE] Button from external package - change theme with SVG animation•9 minutes
- Separate buttons and see what's happening with 'shared' state•7 minutes
- How to create Context Provider? - Let's create ThemeProvider•13 minutes
- use-state-local-storage - how to implement SAVE system in our game in 5 min?•6 minutes
1 assignment•Total 15 minutes
- Game in React | Context Provider | Local Storage | PART 4 - Assessment•15 minutes
In this module, we will walk you through the process of deploying your React app. You will learn how to optimize your application for production, build it as a static page, and make it ready for deployment.
What's included
1 video1 assignment
1 video•Total 4 minutes
- How to build your React app into a static page?•4 minutes
1 assignment•Total 15 minutes
- Deployment - Assessment•15 minutes
In this module, we will introduce Electron and show you how to integrate it with React to build cross-platform desktop applications. You will also learn how to package your app into an executable file.
What's included
2 videos1 assignment
2 videos•Total 12 minutes
- What is Electron and how to make it run our React app?•7 minutes
- How to build Electron EXE from our React app•5 minutes
1 assignment•Total 15 minutes
- Electron in React & Vite - Assessment•15 minutes
In this module, we will dive into Progressive Web Apps and how they offer a native-like experience on the web. You’ll learn how to convert a traditional app into a PWA and generate the necessary icons for it using NPX.
What's included
3 videos1 assignment
3 videos•Total 20 minutes
- What is PWA?•6 minutes
- Transform your HTML/CSS/JS app into a PWA•7 minutes
- NPX - executing package to generate required icons•7 minutes
1 assignment•Total 15 minutes
- PWA (Progressive Web Apps) - Assessment•15 minutes
In this module, we will focus on creating a custom install button for your PWA and managing component visibility using React. You will also learn how to handle installation events and promises for better user control.
What's included
4 videos1 assignment
4 videos•Total 24 minutes
- Showcase of a problem - creating PWAInstallButton component (1)•2 minutes
- Controlling visibility of component in React from return statement (2)•6 minutes
- Catching and preventing event (3)•8 minutes
- How to resolve Promise from prompted user to install PWA app? (4)•8 minutes
1 assignment•Total 15 minutes
- PWA & React - PWAInstallButton - Catching Events in React - Assessment•15 minutes
In this module, we will teach you how to integrate Express with React to create a full-stack application. You will set up a backend, fetch data dynamically, and enhance the user experience with loading indicators.
What's included
6 videos1 assignment
6 videos•Total 34 minutes
- How to set up Express? How to set up the backend of your app?•10 minutes
- nodemon - how to automatically monitor changes on the server•2 minutes
- Fetching data from a React component from Express•11 minutes
- "Loading" message while fetching data•2 minutes
- React Spinner - let's 'spin' the loading message•3 minutes
- [EXERCISE] React Toastify - notifying user like a pro•6 minutes
1 assignment•Total 15 minutes
- Express - Backend for React - Assessment•15 minutes
In this module, we will guide you through rendering lists, handling forms, and managing user inputs in React. You’ll also learn how to dynamically sort and filter data within lists, making your app interactive and user-friendly.
What's included
10 videos1 assignment
10 videos•Total 65 minutes
- Map - displaying items from lists•7 minutes
- key - how to generate unique keys using uuid•7 minutes
- filter - filtering and removing elements from a list•9 minutes
- New task item - accessing forms using DOM - uncontrolled forms•6 minutes
- useRef - accessing/referencing DOM•7 minutes
- - controlled inputs in React•6 minutes
- - how to create forms in React?•6 minutes
- [EXERCISE] useRef - practical example - refocus•4 minutes
- sort() - how to sort a list?•7 minutes
- [EXERCISE] How to create a toggle asc/desc sorting button•6 minutes
1 assignment•Total 15 minutes
- React - Displaying Lists & Forms in React - Assessment•15 minutes
In this module, we will explore code refactoring techniques to optimize large React components. You will learn how to break down big components into smaller, reusable pieces and improve the overall structure of your app.
What's included
3 videos1 assignment
3 videos•Total 26 minutes
- Why do we refactor the code? How to do it? A trick to do it faster•9 minutes
- [EXERCISE] - Refactor Task Item Component•4 minutes
- REFACTOR: TaskForm•13 minutes
1 assignment•Total 15 minutes
- Refactoring Code - Splitting Big Components - Assessment•15 minutes
In this module, we will walk you through the basics of MySQL, starting with understanding its purpose and setting up a local database environment using XAMPP. You'll then learn essential SQL queries to create tables, insert records, and retrieve data effectively.
What's included
14 videos1 reading3 assignments
14 videos•Total 43 minutes
- What Is Database?•2 minutes
- Installing MySQL Using XAMPP•1 minute
- How to Create Your First Database Using SQL/phpMyAdmin or AI?•3 minutes
- What Is Table and How to Create It?•11 minutes
- How to Insert/Add a New Record to Table?•5 minutes
- How to SELECT Records From Table?•3 minutes
- LIMIT & ORDER BY in SELECT – How to Sort and Filter Data?•5 minutes
- DISTINCT – How to Select Unrepeatable Values•2 minutes
- WHERE – Filtering – Narrowing Down the Result•2 minutes
- WHERE – AND – Conjunction – Comparison Operator•1 minute
- WHERE – OR•2 minutes
- IS NOT NULL – Reviews•1 minute
- BETWEEN•1 minute
- LIKE – Looking for Similarities Inside a Text•3 minutes
1 reading•Total 10 minutes
- Conclusion to the Course 'JavaScript in Modern Web Development'•10 minutes
3 assignments•Total 90 minutes
- MySQL Basics for JavaScript Developers[GN4.1] - Assessment•15 minutes
- Full Course Assessment•60 minutes
- Full Course Practice Assessment•15 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Instructor
Explore more from Software Development
- Status: Free Trial
- Status: Free Trial
Course
- Status: Free Trial
- Status: Free Trial
Course
Why people choose Coursera for their career
Frequently asked questions
JavaScript in Modern Web Development focuses on teaching the core skills needed to develop interactive, high-performance websites and applications. JavaScript is one of the most widely used programming languages, and its relevance comes from its ability to enhance user experiences on the web, enabling dynamic content, animations, real-time updates, and more. This course dives into JavaScript best practices, React development, Node.js, and Progressive Web Apps, ensuring you're well-prepared for the modern web development landscape.
This course provides a comprehensive exploration of JavaScript and its application in modern web development. It covers fundamental JavaScript concepts such as code performance optimization, modularity, and React basics. Additionally, you will learn advanced techniques like using React with external packages, managing state with React hooks, building a game in React, and creating Progressive Web Apps (PWA). You'll also explore how to use backend technologies like Node.js and Express for full-stack development.
After completing this course, you will be able to create interactive, dynamic web applications using JavaScript and React. You'll understand how to optimize JavaScript code for performance, integrate various libraries for enhanced UI, manage state and local storage in React apps, and work with APIs and backend services using Express. Additionally, you’ll gain the skills to build Progressive Web Apps and even deploy your applications as desktop apps using Electron.
More questions
Financial aid available,
