Главная страницаКатегория css50 проектов за 50 дней - HTML, CSS и JavaScript

50 проектов за 50 дней - HTML, CSS и JavaScript

Name: 50 проектов за 50 дней - HTML, CSS и JavaScript
Price: 13 USD
Rating: 4.8 (119 reviews)

50 Projects In 50 Days - HTML, CSS & JavaScript

udemy

Brad Traversy

★4.8 (всего оценок - 119)

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

18 ч 13 мин

Категория

CSS

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

161 Видео

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

7 дек. 2020 г., 19:47

Язык

Английский

Дата выхода

1 дек. 2020 г., 02:00

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

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

Этот курс — ваш практический путь в веб‑разработку. За 50 дней вы создадите 50 полностью рабочих мини‑проектов на HTML, CSS и JavaScript, постепенно осваивая ключевые техники, принципы работы с DOM и современные подходы к созданию интерфейсов. Материал подойдёт как новичкам, так и тем, кто хочет прокачать навыки на практике и собрать впечатляющее портфолио.

Что вас ждёт в курсе

Вы шаг за шагом создадите 50 разнообразных проектов — от простых интерактивных элементов до полноценных мини‑приложений. Такой формат позволяет быстро закреплять знания и сразу видеть результат.

Проекты для начала работы с DOM

Expanding Cards
Progress Steps
Rotating Navigation Animation
Hidden Search Widget
Blurry Loading

Динамичная анимация и стилизация

Scroll Animation
Split Landing Page
Form Wave
Sound Board
Dad Jokes

Играем с интерактивностью

Event Keycodes
Faq Collapse
Random Choice Picker
Animated Navigation
Incrementing Counter

Развиваем практические навыки

Drink Water
Movie App
Background Slider
Theme Clock
Button Ripple Effect

Больше интерактивных и забавных проектов

Drag N Drop
Drawing App
Kinetic Loader
Content Placeholder
Sticky Navbar

Творческая работа с интерфейсами

Double Vertical Slider
Toast Notification
Github Profiles
Double Click Heart
Auto Text Effect

Полезные утилиты и приложения

Password Generator
Good Cheap Fast
Notes App
Animated Countdown
Image Carousel

Больше захватывающих проектов

Hoverboard
Pokedex
Mobile Tab Navigation
Password Strength Background
3d Background Boxes

Совершенствование пользовательского опыта

Verify Account UI
Live User Filter
Feedback UI Design
Custom Range Slider
Netflix Mobile Navigation

Финальные проекты для закрепления навыков

Quiz App
Testimonial Box Switcher
Random Image Feed
Todo List
Insect Catch Game

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

Уверенно работать с HTML, CSS и JavaScript
Манипулировать DOM и создавать интерактивные элементы
Использовать анимации, переходы и визуальные эффекты
Разрабатывать мини‑приложения и компоненты интерфейсов
Мыслить как разработчик: разбивать задачи, искать решения, оптимизировать код

Для кого подходит курс

Новичков, желающих быстро войти в веб‑разработку
Самоучек, которым не хватает структуры и практики
Разработчиков среднего уровня, желающих прокачать JavaScript и UI‑навыки
Тех, кто хочет собрать сильное портфолио из современных проектных работ

Результат прохождения

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

Почему этот курс эффективен

Каждый день вы получаете новый результат — никаких скучных лекций
Практика сразу после изучения материала
Понятная структура: от простого к сложному
Развитие навыков, востребованных работодателями

Начните свой путь в веб‑разработку уже сегодня. 50 дней — и ваши навыки будут расти вместе с каждым новым проектом.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:01:08
Welcome
Урок 2. 00:04:19
My Environment & Setup
Урок 3. 00:07:37
Project Starter Boilerplate
Урок 4. 00:00:44
Project Intro
Урок 5. 00:08:58
Initial Cards
Урок 6. 00:06:52
Expanding Effect
Урок 7. 00:01:00
Project Intro
Урок 8. 00:13:02
Creating The Steps
Урок 9. 00:11:12
Step Functionality
Урок 10. 00:01:06
Project Intro
Урок 11. 00:12:20
Content & Circle Styling
Урок 12. 00:11:03
Rotate & Slide Effect
Урок 13. 00:00:44
Project Intro
Урок 14. 00:09:07
Hidden Search Widget
Урок 15. 00:00:55
Project Intro
Урок 16. 00:04:32
Background Image & Loading Text
Урок 17. 00:07:42
Load Blur Effect
Урок 18. 00:01:03
Project Intro
Урок 19. 00:13:12
Scroll Animation
Урок 20. 00:00:56
Project Intro
Урок 21. 00:14:30
Split Landing Page HTML & CSS
Урок 22. 00:07:12
Adding The Hover Effect
Урок 23. 00:00:43
Project Intro
Урок 24. 00:08:37
Styling The Form
Урок 25. 00:09:38
Adding The Wave Effect
Урок 26. 00:01:11
Project Intro
Урок 27. 00:09:53
Sound Board Project
Урок 28. 00:01:15
Project Intro
Урок 29. 00:06:41
Jokes HTML & CSS
Урок 30. 00:06:12
Working With Fetch & HTTP Requests/Responses
Урок 31. 00:10:30
Fetching & Displaying Jokes
Урок 32. 00:01:35
Project Intro
Урок 33. 00:06:22
Key Boxes HTML & CSS
Урок 34. 00:06:01
Display Key Codes
Урок 35. 00:00:55
Project Intro
Урок 36. 00:12:53
FAQ Boxes
Урок 37. 00:07:12
Toggle Buttons
Урок 38. 00:00:53
Project Intro
Урок 39. 00:06:24
Choice Picker UI
Урок 40. 00:05:42
Create Tags
Урок 41. 00:07:25
Select Random Tag
Урок 42. 00:00:59
Project Intro
Урок 43. 00:10:50
Nav Styling
Урок 44. 00:07:01
Icon Styling & Active Toggle
Урок 45. 00:00:39
Project Intro
Урок 46. 00:05:29
Counters HTML & CSS
Урок 47. 00:06:47
Create & Display Increment
Урок 48. 00:00:53
Project Intro
Урок 49. 00:15:16
Create & Style The Cups
Урок 50. 00:06:33
Fill Small Cups
Урок 51. 00:08:40
Update Big Cup
Урок 52. 00:01:28
Project Intro
Урок 53. 00:14:03
Movies UI Layout
Урок 54. 00:11:17
Fetching Data From The API
Урок 55. 00:09:27
Adding Movies To The DOM
Урок 56. 00:00:43
Project Intro
Урок 57. 00:12:37
HTML & CSS
Урок 58. 00:08:22
Changing Slides
Урок 59. 00:00:35
Project Intro
Урок 60. 00:12:52
Starting The Clock
Урок 61. 00:05:48
Finish Clock Styling
Урок 62. 00:16:40
Mode & Clock Function
Урок 63. 00:00:35
Project Intro
Урок 64. 00:06:50
Button Style & Animation
Урок 65. 00:08:10
Button Click Effect
Урок 66. 00:00:59
Project Intro
Урок 67. 00:05:22
Create Drop Boxes
Урок 68. 00:13:48
Drag Drop Events
Урок 69. 00:01:18
Project Intro
Урок 70. 00:06:33
Drawing Pad UI
Урок 71. 00:07:07
Canvas Shapes
Урок 72. 00:06:44
Mouse Events & Drawing
Урок 73. 00:00:25
Project Intro
Урок 74. 00:07:26
Kinetic CSS Loader
Урок 75. 00:00:54
Project Intro
Урок 76. 00:05:34
Card HTML
Урок 77. 00:05:06
Card CSS
Урок 78. 00:00:49
Project Intro
Урок 79. 00:12:32
Website Content & Style
Урок 80. 00:10:22
Navbar CSS & JS
Урок 81. 00:01:02
Project Intro
Урок 82. 00:14:03
Vertical Slider UI
Урок 83. 00:10:48
Vertical Slider Function
Урок 84. 00:01:03
Project Intro
Урок 85. 00:15:00
Create Toast Notifications
Урок 86. 00:01:50
Project Intro
Урок 87. 00:14:49
Github Profile Card
Урок 88. 00:11:10
Fetching Profile Data With Axios
Урок 89. 00:08:03
Dynamic Profile Cards
Урок 90. 00:08:11
Adding Repos To Card
Урок 91. 00:01:28
Project Intro
Урок 92. 00:07:02
HTML & CSS
Урок 93. 00:13:26
Show Heart Based On Click Position
Урок 94. 00:00:55
Project Intro
Урок 95. 00:09:14
Auto Text Effect
Урок 96. 00:01:03
Project Intro
Урок 97. 00:13:46
Password Generator UI
Урок 98. 00:08:21
Random Functions
Урок 99. 00:16:01
Generate Password
Урок 100. 00:02:49
Copy Password To Clipboard
Урок 101. 00:01:01
Project Intro
Урок 102. 00:08:00
Style Checkboxes
Урок 103. 00:04:08
Check Ball Animation
Урок 104. 00:04:53
JavaScript Logic
Урок 105. 00:01:37
Project Intro
Урок 106. 00:09:29
Notes HTML & CSS
Урок 107. 00:10:06
Adding Notes To The DOM
Урок 108. 00:09:42
Save Notes To Local Storage
Урок 109. 00:01:15
Project Intro
Урок 110. 00:08:54
Counter & Final Sections
Урок 111. 00:07:40
In & Out Animations
Урок 112. 00:10:37
Dynamic Animation With JS
Урок 113. 00:00:31
Project Intro
Урок 114. 00:07:27
Carousel UI
Урок 115. 00:10:09
Carousel Functionality
Урок 116. 00:00:50
Project Intro
Урок 117. 00:05:06
Styling The Board Squares
Урок 118. 00:08:17
Hoverboard Effect
Урок 119. 00:01:09
Project Intro
Урок 120. 00:11:11
Pokedex UI & Styling
Урок 121. 00:05:05
Fetching Pokemon Data
Урок 122. 00:10:24
Creating The Pokemon Cards
Урок 123. 00:00:45
Project Intro
Урок 124. 00:10:26
Create & Style UI
Урок 125. 00:04:26
Navigation Effect
Урок 126. 00:01:14
Project Intro
Урок 127. 00:08:58
Creating The Form & Background
Урок 128. 00:04:42
Change Blur On Input
Урок 129. 00:01:28
Project Intro
Урок 130. 00:15:57
Creating The Button & Boxes
Урок 131. 00:10:11
Background Position & Rotate Event
Урок 132. 00:00:59
Project Intro
Урок 133. 00:13:51
Verify Account UI Project
Урок 134. 00:01:01
Project Intro
Урок 135. 00:12:29
User List UI
Урок 136. 00:13:38
Fetch & Filter Users
Урок 137. 00:01:27
Project Intro
Урок 138. 00:11:09
Feedback Boxes
Урок 139. 00:12:55
Select & Submit Feedback
Урок 140. 00:01:08
Project Intro
Урок 141. 00:12:08
Styling The Range
Урок 142. 00:11:06
Label Value & Movement
Урок 143. 00:01:06
Project Intro
Урок 144. 00:08:34
Netflix Nav - Part 1
Урок 145. 00:10:38
Netflix Nav - Part 2
Урок 146. 00:01:02
Project Intro
Урок 147. 00:09:45
Quiz UI
Урок 148. 00:11:32
Quiz Functionality
Урок 149. 00:00:40
Project Intro
Урок 150. 00:12:11
Create Box & Progress Bar
Урок 151. 00:07:45
Testimonial Switch
Урок 152. 00:01:05
Project Intro
Урок 153. 00:09:14
Random Image Feed Project
Урок 154. 00:00:54
Project Intro
Урок 155. 00:08:49
Todo List UI
Урок 156. 00:06:10
Add, Remove & Mark Complete
Урок 157. 00:08:08
Saving Todos to Local Storage
Урок 158. 00:01:23
Project Intro
Урок 159. 00:12:20
Game Styling - Part 1
Урок 160. 00:09:04
Game Styling - Part 2
Урок 161. 00:19:03
Insect Game Functionality

Авторы - Brad Traversy, udemy

Brad Traversy

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

+201

udemy

Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф

+198

Комментарии

vitalyalya
22 авг. 2022 г., 12:34
There should be a video between 77 and 78. There is no js part of the project.
anon
14 авг. 2022 г., 18:50
Годнота
courses
11 авг. 2021 г., 17:30
Why in web storm this code doesnt work? The exact part of code

.panel.active {
flex: 5;
}

Active pannel doesnt become biger.
chellisa
19 янв. 2021 г., 21:03
В проекте Content Placeholder то же самое, под номером 79 начинается следующий урок, хотя должно быть продолжение предыдущего
chellisa
19 янв. 2021 г., 20:19
В проекте Drawing App не хватает как минимум одного видео, под номером 73 начинается уже следующий урок :)
Ingrid
5 янв. 2021 г., 16:36
извините хотелось бы узнать почему в материалах к курсу пусто , нет никаких ни фото ничего , не поняла зачем скачивала
CourseHunter Team Ingrid
5 янв. 2021 г., 20:53
https://github.com/bradtraversy/50projects50days
vuthuypro2020
29 дек. 2020 г., 05:10
hi admin, I have not been learn this course. please fix!
my email is : vuthuycntt1996@gmail.com
thanks and best regards,

please fix caches issue in browser. I clear cache but it not work.
CourseHunter Team vuthuypro2020
29 дек. 2020 г., 15:36
info@coursehunter.net
TileMountain CourseHunter Team
22 апр. 2021 г., 21:54
Hello, The video player get stucks alot and is really slow to load. even udemy and players work really faster than this. can you please fix
vuthuypro2020 CourseHunter Team
31 дек. 2020 г., 10:16
please fix for my account. It have been 2 months.
vuthuypro2020
24 дек. 2020 г., 06:29
hi admin, I have not been learn this course. please fix!
my email is : vuthuycntt1996@gmail.com
thanks and best regards,
hazartilirot
8 дек. 2020 г., 13:46
Hey, fellows. Who can give me a hand at figuring out what the main difference is between this course and 20 Web Projects With Vanilla JavaScript - apart from names. Are those 20 projects included in 50 or are they completely independent courses? Thanks.
thatgirldorian hazartilirot
8 дек. 2020 г., 20:45
Hi there! I think they're completely different courses.
vuthuypro2020
8 дек. 2020 г., 12:48
hi admin, I have not been learn this course. please fix!
my email is : vuthuycntt1996@gmail.com
thanks and best regards,
restored
7 дек. 2020 г., 23:41
Code files zip no source code
sdooble restored
8 дек. 2020 г., 01:37
https://github.com/bradtraversy/50projects50days