To Do List на чистом JavaScript — без фреймворков и библиотек

Описание

✏️ Собираем полноценный To Do List на чистом JavaScript — без фреймворков и библиотек. Только HTML, CSS и JS. Пошагово верстаем структуру, стилизуем интерфейс и реализуем всю JS-логику: добавление, удаление, поиск задач, работа с DOM и анимации. Выстраиваем архитектуру, сохраняем состояние, организуем рендер и обрабатываем события. В конце — обсуждаем ограничения ванильного подхода и узнаем, почему следующим шагом логично выбрать React. Отличная практика, чтобы прокачать базу и лучше понять, зачем нужны фреймворки.

🔴 Timeline:
▶ 00:00 | Введение
▶ 00:29 | Описание проекта
▶ 01:43 | Как мы будем работать
▶ 03:02 | HTML-разметка
▶ 14:52 | CSS-стилизация
▶ 52:02 | JavaScript-логика
▶ 01:24:27 | Итоговое приложение
▶ 01:29:54 | Зачем React?

📚 Ссылки из видео:
➖ Код из урока: https://github.com/aleksanderlamkov/todo-vanilla
➖ CSS Normalize: https://github.com/aleksanderlamkov/css-normalize
➖ Google Fonts: https://fonts.google.com/

🧑💻 Основной телеграм-канал:
https://t.me/AleksanderLamkov

💬 Коммьюнити-чат в телеграме (помощь новичкам):
https://t.me/FriendlyFrontend

❤️ Boosty (поддержать автора):
https://boosty.to/friendly-frontend

🗂️ Бесплатные курсы на канале:
🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h
🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz
🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL
🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV
🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w
⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3
⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg
🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ: https://stepik.org/a/228315

📌 Автор:
➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/AleksanderLamkov
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksandr-lamkov-1480
➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315

#frontend #фронтенд #javascript