К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
JavaScript in Modern Web Development · LearnSpace
Назад в каталог
courseraПрограммирование

JavaScript in Modern Web Development

Курс от Packt
Средний≈ 16.3 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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.

Навыки, которые вы освоите

Frontend PerformanceDevelopment EnvironmentVideo Game DevelopmentFrontend IntegrationJavaScript Frameworks

Программа курса

15 модулей · 106 учебных материалов

01EXTRA CONTENT: React Basics6 материалов

EXTRA CONTENT: React Basics

Introduction to the Course 'JavaScript in Modern Web Development'ЧтениеFull Specialization ResourcesЧтениеWhat is a component?ВидеоReact fundamentals - the most important lecture for learning ReactВидео

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

JavaScript in Modern Web Development
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 16.3 ч

15 модулей

Язык: Английский

Субтитры: Арабский, Французский, Итальянский, Бразильский португальский, Корейский, Немецкий, Индонезийский, Испанский, Японский, Казахский

Часть программы вашего университета
Understanding React Components and HooksDIALOGUE
EXTRA CONTENT: React Basics - AssessmentЗадание
02EXTRA CONTENT: Node.js & Vite - React Template6 материалов

EXTRA CONTENT: Node.js & Vite - React Template

What is Node.js and npm?ВидеоInstalling Vite and React structureВидеоSingle file app to multiple files app - analyzing structure of React projectВидеоHow to create a component and connect it to App.jsxВидеоIntroduction to Node.js and NPMDIALOGUEEXTRA CONTENT: Node.js & Vite - React Template - AssessmentЗадание
03EXTRA CONTENT: React Props3 материалов

EXTRA CONTENT: React Props

What are props and how to use them?ВидеоCustomizing React Components with PropsDIALOGUEEXTRA CONTENT: React Props - AssessmentЗадание
04Game in React: AutoClicker Mining Game - PART 19 материалов

Game in React: AutoClicker Mining Game - PART 1

Intro: What are we gonna create?ВидеоEx. Create GoldMiner Main compВидеоGold Miner Power UpgradeВидеоUpdater Functions in React HooksВидео[EXERCISE] Auto Clicker GUI and hooksВидеоuseEffect on practical example: AutoClickerВидеоConditionally Disabling a Button in React Using the 'disabled' AttributeВидеоUnderstanding Clicker Game Dynamics in ReactDIALOGUEGame in React: AutoClicker Mining Game - PART 1 - AssessmentЗадание
05Game in React | External Packages: lucide, framer, lodash - PART 26 материалов

Game in React | External Packages: lucide, framer, lodash - PART 2

Installing lucide-react - let's apply icons to our gameВидеоHow to apply CSS to components - classNameВидеоInstalling Framer Motion in React - let's bring animation to our project!ВидеоLet's add simple animation using Framer Motion to our appВидеоUsing the Lucid Icon Package in ReactDIALOGUEGame in React | External Packages: lucide, framer, lodash - PART 2 - AssessmentЗадание
06Game in React | Refactoring Code | PART 38 материалов

Game in React | Refactoring Code | PART 3

...animationProps - let's use object destructuring to improve animation workВидеоlodash.merge package - how to merge props on a practical exampleВидеоCreating functional components - let's refactor our codeВидеоutil folder with animations.jsx settings for entire appВидеоAnimatePresence - how to make 'exit' animationВидеоCSS modules - let's apply scope to our CSSВидеоUnderstanding JavaScript Object StructuresDIALOGUEGame in React | Refactoring Code | PART 3 - AssessmentЗадание
07Game in React | Context Provider | Local Storage | PART 48 материалов

Game in React | Context Provider | Local Storage | PART 4

Create ThemeToggleButtonВидеоConditional text - Dark to Light, Light to DarkВидео[EXERCISE] Button from external package - change theme with SVG animationВидеоSeparate buttons and see what's happening with 'shared' stateВидеоHow to create Context Provider? - Let's create ThemeProviderВидеоuse-state-local-storage - how to implement SAVE system in our game in 5 min?ВидеоImplementing Theme Toggle in React with ContextDIALOGUEGame in React | Context Provider | Local Storage | PART 4 - AssessmentЗадание
08Deployment3 материалов

Deployment

How to build your React app into a static page?ВидеоBuilding and Deploying a Static Web ApplicationDIALOGUEDeployment - AssessmentЗадание
09Electron in React & Vite4 материалов

Electron in React & Vite

What is Electron and how to make it run our React app?ВидеоHow to build Electron EXE from our React appВидеоCreating a Cross-Platform Desktop App with ElectronDIALOGUEElectron in React & Vite - AssessmentЗадание
10PWA (Progressive Web Apps)5 материалов

PWA (Progressive Web Apps)

What is PWA?ВидеоTransform your HTML/CSS/JS app into a PWAВидеоNPX - executing package to generate required iconsВидеоUnderstanding Progressive Web Apps (PWAs)DIALOGUEPWA (Progressive Web Apps) - AssessmentЗадание
11PWA & React - PWAInstallButton - Catching Events in React6 материалов

PWA & React - PWAInstallButton - Catching Events in React

Showcase of a problem - creating PWAInstallButton component (1)ВидеоControlling visibility of component in React from return statement (2)ВидеоCatching and preventing event (3)ВидеоHow to resolve Promise from prompted user to install PWA app? (4)ВидеоDetecting and Showing Install Buttons in ReactDIALOGUEPWA & React - PWAInstallButton - Catching Events in React - AssessmentЗадание
12Express - Backend for React8 материалов

Express - Backend for React

How to set up Express? How to set up the backend of your app?Видеоnodemon - how to automatically monitor changes on the serverВидеоFetching data from a React component from ExpressВидео"Loading" message while fetching dataВидеоReact Spinner - let's 'spin' the loading messageВидео[EXERCISE] React Toastify - notifying user like a proВидеоSetting Up an Express Server with Node.jsDIALOGUEExpress - Backend for React - AssessmentЗадание
13React - Displaying Lists & Forms in React12 материалов

React - Displaying Lists & Forms in React

Map - displaying items from listsВидеоkey - how to generate unique keys using uuidВидеоfilter - filtering and removing elements from a listВидеоNew task item - accessing forms using DOM - uncontrolled formsВидеоuseRef - accessing/referencing DOMВидео- controlled inputs in ReactВидео- how to create forms in React?Видео[EXERCISE] useRef - practical example - refocusВидеоsort() - how to sort a list?Видео[EXERCISE] How to create a toggle asc/desc sorting buttonВидеоDisplaying Tasks with JavaScript Map MethodDIALOGUEReact - Displaying Lists & Forms in React - AssessmentЗадание
14Refactoring Code - Splitting Big Components4 материалов

Refactoring Code - Splitting Big Components

Why do we refactor the code? How to do it? A trick to do it fasterВидео[EXERCISE] - Refactor Task Item ComponentВидеоREFACTOR: TaskFormВидеоRefactoring Code - Splitting Big Components - AssessmentЗадание
15MySQL Basics for JavaScript Developers[GN4.1]18 материалов
What Is Database?ВидеоInstalling MySQL Using XAMPPВидеоHow to Create Your First Database Using SQL/phpMyAdmin or AI?ВидеоWhat Is Table and How to Create It?ВидеоHow to Insert/Add a New Record to Table?ВидеоHow to SELECT Records From Table?ВидеоLIMIT & ORDER BY in SELECT – How to Sort and Filter Data?ВидеоDISTINCT – How to Select Unrepeatable ValuesВидеоWHERE – Filtering – Narrowing Down the ResultВидеоWHERE – AND – Conjunction – Comparison OperatorВидеоWHERE – ORВидеоIS NOT NULL – ReviewsВидеоBETWEENВидеоLIKE – Looking for Similarities Inside a TextВидеоConclusion to the Course 'JavaScript in Modern Web Development'ЧтениеMySQL Basics for JavaScript Developers[GN4.1] - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание