Главная страницаКатегория javascript20 веб-проектов с использованием Vanilla JavaScript

20 веб-проектов с использованием Vanilla JavaScript

Name: 20 веб-проектов с использованием Vanilla JavaScript
Rating: 4.9 (137 reviews)

20 Web Projects With Vanilla JavaScript

udemy

Brad Traversy

★4.9 (всего оценок - 137)

Продолжительность

16 ч 8 мин

Категория

JavaScript

Количество уроков

120 Видео

Дата добавления

29 янв. 2020 г., 17:20

Язык

Английский

Дата выхода

28 янв. 2020 г., 19:05

Дата обновления

29 апр. 2026 г., 06:30

«20 веб‑проектов на Vanilla JavaScript» — это практический курс, который поможет вам уверенно создавать интерактивные веб‑приложения без использования фреймворков. Курс сфокусирован на реальных мини‑проектах, что делает обучение максимально наглядным и эффективным.

О курсе

Курс построен вокруг выполнения двадцати небольших, но ценных проектов. Каждый проект создаётся с нуля и демонстрирует работу ключевых инструментов веб‑разработки: HTML5, современного CSS и JavaScript. Вы шаг за шагом освоите создание интерфейсов и внедрение динамической логики, используя только нативный JavaScript.

Практический подход

Несмотря на то что курс проектный, все концепции объясняются доступно и последовательно. Проекты рассчитаны так, чтобы вы могли выполнить каждый из них за несколько часов, получая быстрый результат и закрепляя новые навыки.

Базовые требования

Для комфортного прохождения курса желательно иметь начальные знания HTML, CSS и JavaScript. Если вы новичок, рекомендуются вводные курсы:

Этот курс представляет собой логичное продолжение и сочетание обоих направлений.

Чему вы научитесь

Осваивая каждый мини‑проект, вы получите опыт работы с широким спектром инструментов и возможностей JavaScript.

Ключевые навыки

Создание адаптивных макетов и UI с нуля на HTML и CSS
Использование CSS‑анимаций: переходы, keyframes, триггеры через JS
Укрепление базовых знаний JavaScript
Работа с DOM и его манипуляциями
Обработка событий (формы, клики, прокрутка и другие)
Использование API и JSON‑данных
Работа с HTML5 Canvas
Использование аудио‑ и видео‑API
Реализация drag & drop механик
Веб‑речь: синтез и распознавание
Использование localStorage для сохранения данных
Методы массивов высшего порядка: forEach, map, filter, reduce, sort
Таймеры: setTimeout и setInterval
Стрелочные функции и современные возможности JS

Какие проекты вас ждут

Каждый проект нацелен на практическое применение навыков. Вы создадите:

Мини‑игры на чистом JavaScript
Приложения для работы с данными (например, трекер расходов)
Интерактивные виджеты
Приложение для дыхательных упражнений
И множество других полезных инструментов

Кому подходит курс

Курс будет полезен:

начинающим разработчикам, желающим перейти от теории к практике;
самоучкам, которым не хватает структурированных практических задач;
frontend‑разработчикам, желающим прокачать навыки чистого JavaScript;
тем, кто хочет уверенно чувствовать себя без фреймворков и лучше понимать основы.

Итог

После прохождения курса вы будете уверенно создавать интерактивные веб‑страницы и мини‑приложения, лучше понимать работу JavaScript и освоите десятки практических инструментов, которые пригодятся в реальной разработке.

Урок 1.00:02:26
Welcome To The Course
Урок 2.00:06:35
Getting Setup
Урок 3.00:01:58
Project Intro
Урок 4.00:06:21
Project HTML
Урок 5.00:13:48
Project CSS
Урок 6.00:14:44
Adding Simple Validation
Урок 7.00:09:16
Check Required & Refactor
Урок 8.00:09:14
Check Length, Email & Password Match
Урок 9.00:01:24
Project Intro
Урок 10.00:05:47
Project HTML
Урок 11.00:16:07
Project CSS
Урок 12.00:15:14
Selecting Movie & Seats From UI
Урок 13.00:12:44
Save Data To Local Storage
Урок 14.00:08:14
Populate UI With Saved Data
Урок 15.00:02:07
Project Intro
Урок 16.00:08:22
Project HTML
Урок 17.00:09:53
Project CSS
Урок 18.00:09:25
Play, Pause & Stop
Урок 19.00:06:42
Video Progress Bar & Timestamp
Урок 20.00:01:49
Project Intro
Урок 21.00:04:30
Project HTML
Урок 22.00:10:13
Project CSS
Урок 23.00:09:20
A Look at JSON & Fetch
Урок 24.00:12:58
Fetch Rates & Update DOM
Урок 25.00:02:08
Project Intro
Урок 26.00:09:20
Project UI
Урок 27.00:07:46
Generate Random Users - Fetch w/ Async/Await
Урок 28.00:10:28
Output Users - forEach() & DOM Methods
Урок 29.00:06:01
Double Money - map()
Урок 30.00:05:01
Sort By Richest - sort()
Урок 31.00:04:27
Show Millionaires - filter()
Урок 32.00:06:17
Calculate Wealth - reduce()
Урок 33.00:01:06
Project Intro
Урок 34.00:10:12
Project HTML
Урок 35.00:07:33
Navbar Styling
Урок 36.00:12:09
Header & Modal Styling
Урок 37.00:10:01
Menu & Modal Toggle
Урок 38.00:01:50
Project Intro
Урок 39.00:11:36
Draw Hangman With SVG
Урок 40.00:10:56
Main Styling
Урок 41.00:08:36
Popup & Notification Styling
Урок 42.00:11:23
Display Words Function
Урок 43.00:08:39
Letter Press Event Handler
Урок 44.00:09:55
Wrong Letters & Play Again
Урок 45.00:01:25
Project Intro
Урок 46.00:10:19
Project HTML & Base CSS
Урок 47.00:20:10
Search & Display Meals From API
Урок 48.00:15:29
Show Single Meal Page
Урок 49.00:10:21
Display Random Meal & Single Meal CSS
Урок 50.00:01:34
Project Intro
Урок 51.00:05:11
Project HTML
Урок 52.00:14:01
Project CSS
Урок 53.00:08:51
Show Transaction Items
Урок 54.00:08:20
Display Balance, Income & Expense
Урок 55.00:08:54
Add & Delete Transactions
Урок 56.00:05:41
Persist To Local Storage
Урок 57.00:01:57
Project Intro
Урок 58.00:05:41
Project HTML
Урок 59.00:10:10
Music Container & Rotate Animation
Урок 60.00:09:22
Music Info Styling & Animation
Урок 61.00:08:47
Load, Play & Pause Song
Урок 62.00:12:21
Next, Prev Song & Progress
Урок 63.00:02:31
Project Intro
Урок 64.00:03:06
Project HTML
Урок 65.00:09:53
Project CSS & Loader Animation
Урок 66.00:07:27
Get Initial Posts From API
Урок 67.00:06:10
Add Infinite Scrolling
Урок 68.00:05:16
Filter Fetched Posts
Урок 69.00:01:46
Project Intro
Урок 70.00:04:40
Project HTML
Урок 71.00:12:23
Project CSS
Урок 72.00:08:16
Word Match & Score
Урок 73.00:09:21
Adding The Timer
Урок 74.00:08:09
Difficulty Setting
Урок 75.00:01:58
Project Intro
Урок 76.00:12:18
HTML & Output Speech Boxes
Урок 77.00:17:19
Project CSS
Урок 78.00:07:29
Get Speech Voices
Урок 79.00:04:59
Speech Buttons
Урок 80.00:05:05
Change Voice & Custom Text Box
Урок 81.00:02:12
Project Intro
Урок 82.00:07:17
Project HTML
Урок 83.00:10:36
Basic Card Styling
Урок 84.00:11:04
Card Rotation & Slide Effect
Урок 85.00:06:28
Add Card Container & Form Styling
Урок 86.00:10:24
Create Cards & Flip Effect With JS
Урок 87.00:06:24
Prev & Next Button Functionality
Урок 88.00:13:18
Set & Get Card Data From Local Storage
Урок 89.00:01:30
Project Intro
Урок 90.00:09:47
Project HTML & Header Stying
Урок 91.00:07:16
Form Styling
Урок 92.00:09:50
Fetching Songs & Artists
Урок 93.00:15:08
Update DOM & Add Pagination
Урок 94.00:10:09
Get & Display Song Lyrics
Урок 95.00:00:52
Project Intro
Урок 96.00:10:02
Creating The Large Circle
Урок 97.00:04:38
Creating & Animating The Pointer
Урок 98.00:09:41
Breath Animation With JS Trigger
Урок 99.00:01:02
Project Intro
Урок 100.00:11:16
Creating & Styling The Page
Урок 101.00:06:04
Canvas Plan Outline
Урок 102.00:11:02
Draw Ball, Paddle & Score
Урок 103.00:09:28
Creating The Bricks
Урок 104.00:12:52
Move Paddle
Урок 105.00:10:30
Move Ball & Break Bricks
Урок 106.00:05:00
Lose & Reset Game
Урок 107.00:01:09
Project Intro
Урок 108.00:11:08
Landing Page HTML & Styling
Урок 109.00:12:00
Create The Countdown
Урок 110.00:07:12
Dynamic Year & Spinner
Урок 111.00:01:40
Project Intro
Урок 112.00:09:35
Insert List Items Into DOM
Урок 113.00:06:43
Scramble List Items
Урок 114.00:12:23
Core CSS
Урок 115.00:14:58
Drag & Drop Functionality
Урок 116.00:05:38
Check Order
Урок 117.00:01:31
Project Intro
Урок 118.00:08:52
Project UI
Урок 119.00:08:10
Capture Mic Input
Урок 120.00:12:51
Check Guessed Number

Авторы - Brad Traversy, udemy

Brad Traversy

Я начал программировать в 2007 году в возрасте 26 лет. В 2016 году я стал штатным преподавателем и создателем контента. Я показываю людям, что им не обязательно быть отличником или гением, чтобы научиться программировать. Я разбиваю сложные концепции, показывая вам, как их реализовать в курсах и учебных пособиях на основе проектов.

+201

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198

Комментарии

inna.cherkashina.1979
16 авг. 2022 г., 08:07
Боже, какая прелесть. Хочу все эти проекты пройти!
vlacrat
22 февр. 2022 г., 08:01
Если изучать новый материал, то только на практике!
festa
18 нояб. 2021 г., 14:49
приятно объясняет, советую начинающим
Anonymous
26 авг. 2020 г., 12:23
Great course!!!