VOOZH about

URL: https://www.coursera.org/learn/packt-javascript-in-modern-web-development-rdobb

⇱ JavaScript in Modern Web Development | Coursera


JavaScript in Modern Web Development

Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

JavaScript in Modern Web Development

Included with

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

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

  • 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.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

17 assignments

Taught in English

Build your subject-matter expertise

This course is part of the JavaScript from Beginner to Expert 2.0 Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • 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 videosTotal 31 minutes
  • What is a component?6 minutes
  • React fundamentals - the most important lecture for learning React25 minutes
2 readingsTotal 20 minutes
  • Introduction to the Course 'JavaScript in Modern Web Development'10 minutes
  • Full Specialization Resources10 minutes
1 assignmentTotal 15 minutes
  • EXTRA CONTENT: React Basics - Assessment15 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 videosTotal 37 minutes
  • What is Node.js and npm?7 minutes
  • Installing Vite and React structure10 minutes
  • Single file app to multiple files app - analyzing structure of React project11 minutes
  • How to create a component and connect it to App.jsx9 minutes
1 assignmentTotal 15 minutes
  • EXTRA CONTENT: Node.js & Vite - React Template - Assessment15 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 videoTotal 13 minutes
  • What are props and how to use them?13 minutes
1 assignmentTotal 15 minutes
  • EXTRA CONTENT: React Props - Assessment15 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 videosTotal 45 minutes
  • Intro: What are we gonna create?3 minutes
  • Ex. Create GoldMiner Main comp2 minutes
  • Gold Miner Power Upgrade6 minutes
  • Updater Functions in React Hooks15 minutes
  • [EXERCISE] Auto Clicker GUI and hooks4 minutes
  • useEffect on practical example: AutoClicker11 minutes
  • Conditionally Disabling a Button in React Using the 'disabled' Attribute4 minutes
1 assignmentTotal 15 minutes
  • Game in React: AutoClicker Mining Game - PART 1 - Assessment15 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 videosTotal 17 minutes
  • Installing lucide-react - let's apply icons to our game6 minutes
  • How to apply CSS to components - className6 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 app4 minutes
1 assignmentTotal 15 minutes
  • Game in React | External Packages: lucide, framer, lodash - PART 2 - Assessment15 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 videosTotal 36 minutes
  • ...animationProps - let's use object destructuring to improve animation work6 minutes
  • lodash.merge package - how to merge props on a practical example9 minutes
  • Creating functional components - let's refactor our code4 minutes
  • util folder with animations.jsx settings for entire app6 minutes
  • AnimatePresence - how to make 'exit' animation5 minutes
  • CSS modules - let's apply scope to our CSS6 minutes
1 assignmentTotal 15 minutes
  • Game in React | Refactoring Code | PART 3 - Assessment15 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 videosTotal 47 minutes
  • Create ThemeToggleButton11 minutes
  • Conditional text - Dark to Light, Light to Dark2 minutes
  • [EXERCISE] Button from external package - change theme with SVG animation9 minutes
  • Separate buttons and see what's happening with 'shared' state7 minutes
  • How to create Context Provider? - Let's create ThemeProvider13 minutes
  • use-state-local-storage - how to implement SAVE system in our game in 5 min?6 minutes
1 assignmentTotal 15 minutes
  • Game in React | Context Provider | Local Storage | PART 4 - Assessment15 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 videoTotal 4 minutes
  • How to build your React app into a static page?4 minutes
1 assignmentTotal 15 minutes
  • Deployment - Assessment15 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 videosTotal 12 minutes
  • What is Electron and how to make it run our React app?7 minutes
  • How to build Electron EXE from our React app5 minutes
1 assignmentTotal 15 minutes
  • Electron in React & Vite - Assessment15 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 videosTotal 20 minutes
  • What is PWA?6 minutes
  • Transform your HTML/CSS/JS app into a PWA7 minutes
  • NPX - executing package to generate required icons7 minutes
1 assignmentTotal 15 minutes
  • PWA (Progressive Web Apps) - Assessment15 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 videosTotal 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 assignmentTotal 15 minutes
  • PWA & React - PWAInstallButton - Catching Events in React - Assessment15 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 videosTotal 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 server2 minutes
  • Fetching data from a React component from Express11 minutes
  • "Loading" message while fetching data2 minutes
  • React Spinner - let's 'spin' the loading message3 minutes
  • [EXERCISE] React Toastify - notifying user like a pro6 minutes
1 assignmentTotal 15 minutes
  • Express - Backend for React - Assessment15 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 videosTotal 65 minutes
  • Map - displaying items from lists7 minutes
  • key - how to generate unique keys using uuid7 minutes
  • filter - filtering and removing elements from a list9 minutes
  • New task item - accessing forms using DOM - uncontrolled forms6 minutes
  • useRef - accessing/referencing DOM7 minutes
  • - controlled inputs in React6 minutes
  • - how to create forms in React?6 minutes
  • [EXERCISE] useRef - practical example - refocus4 minutes
  • sort() - how to sort a list?7 minutes
  • [EXERCISE] How to create a toggle asc/desc sorting button6 minutes
1 assignmentTotal 15 minutes
  • React - Displaying Lists & Forms in React - Assessment15 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 videosTotal 26 minutes
  • Why do we refactor the code? How to do it? A trick to do it faster9 minutes
  • [EXERCISE] - Refactor Task Item Component4 minutes
  • REFACTOR: TaskForm13 minutes
1 assignmentTotal 15 minutes
  • Refactoring Code - Splitting Big Components - Assessment15 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 videosTotal 43 minutes
  • What Is Database?2 minutes
  • Installing MySQL Using XAMPP1 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 Values2 minutes
  • WHERE – Filtering – Narrowing Down the Result2 minutes
  • WHERE – AND – Conjunction – Comparison Operator1 minute
  • WHERE – OR2 minutes
  • IS NOT NULL – Reviews1 minute
  • BETWEEN1 minute
  • LIKE – Looking for Similarities Inside a Text3 minutes
1 readingTotal 10 minutes
  • Conclusion to the Course 'JavaScript in Modern Web Development'10 minutes
3 assignmentsTotal 90 minutes
  • MySQL Basics for JavaScript Developers[GN4.1] - Assessment15 minutes
  • Full Course Assessment60 minutes
  • Full Course Practice Assessment15 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

Offered by

Explore more from Software Development

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

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.

To get the most out of this course, a basic understanding of HTML, CSS, and JavaScript is recommended. Familiarity with fundamental programming concepts such as variables, loops, and functions will be helpful. However, the course is structured in a way that allows beginners to learn as they go, so if you have basic knowledge of JavaScript, you should be able to follow along.

This course is designed for individuals interested in becoming proficient in modern web development. Whether you’re a beginner looking to learn JavaScript and React from scratch or an experienced developer seeking to update your skills with the latest web technologies, this course offers valuable insights and practical skills. It's ideal for anyone looking to pursue a career as a front-end developer or full-stack developer.

The course consists of approximately 7 hours of video content. Depending on your learning pace, it can take anywhere from a few days to a couple of weeks to complete the entire course, allowing time for practice and exercises.

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

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.

Financial aid available,