- 19
- 368 966
Как стать программистом
Russia
เข้าร่วมเมื่อ 4 ก.พ. 2020
Всем привет. Меня зовут Адам Балкоев. И на этом канале я рассказываю как стать программистом. Обязательно подпишись на канал!
🍿 Betflix / Разработка ОНЛАЙН кинотеатра (2024) [REACT, REDUX, MUI]
⭐️ Подпишись на Телеграм канал: t.me/balkoev_blog
💜 Поддержать донатом: boosty.to/balkoev
👨💻 Ссылка на репозиторий: t.me/balkoev_blog/25
🎥 В этом длинном видео уроке мы напишем на React кинотеатр с возможностью онлайн просмотра фильмов.
➡️ Ссылки из видео:
kinopoiskapiunofficial.tech/
pleer.videoplayers.club/
⏳ Таймкоды:
00:00:00 Введение
00:06:07 Настройка окружения
00:10:57 Eslint + Prettier
00:17:54 Eslint sort imports
00:20:57 Routing + MUI
00:26:00 Navbar
01:05:14 Footer
01:14:38 Обзор API
01:23:33 Redux toolkit
01:49:45 Переменные окружения (ENV)
01:56:27 Страница с коллекциями фильмов
02:32:04 Пагинация
02:39:04 Главная страница - api
02:59:01 Главная страница - карусель
03:26:31 Компонент ErrorMessage
03:31:06 Скелетоны
03:51:37 Страницы "Фильмы", "Сериалы", "Мультфильмы"
04:02:43 Фильтрация
04:53:03 Кнопка сброса фильтров
04:55:33 Фикс скелетона
05:06:04 Страница с фильмом
05:53:53 Сиквелы и приквелы
05:58:54 Небольшие фиксы
06:02:18 Смотреть онлайн
06:22:02 Поиск
06:45:40 Loader при поиске
06:56:24 Страница с актером
07:30:06 Темная тема
07:48:36 Деплой netlify
⭐️ Мои соц. сети
- Телеграм канал: t.me/balkoev_blog
- Поддержать донатом: boosty.to/balkoev
- Github: github.com/balkoev
💜 Поддержать донатом: boosty.to/balkoev
👨💻 Ссылка на репозиторий: t.me/balkoev_blog/25
🎥 В этом длинном видео уроке мы напишем на React кинотеатр с возможностью онлайн просмотра фильмов.
➡️ Ссылки из видео:
kinopoiskapiunofficial.tech/
pleer.videoplayers.club/
⏳ Таймкоды:
00:00:00 Введение
00:06:07 Настройка окружения
00:10:57 Eslint + Prettier
00:17:54 Eslint sort imports
00:20:57 Routing + MUI
00:26:00 Navbar
01:05:14 Footer
01:14:38 Обзор API
01:23:33 Redux toolkit
01:49:45 Переменные окружения (ENV)
01:56:27 Страница с коллекциями фильмов
02:32:04 Пагинация
02:39:04 Главная страница - api
02:59:01 Главная страница - карусель
03:26:31 Компонент ErrorMessage
03:31:06 Скелетоны
03:51:37 Страницы "Фильмы", "Сериалы", "Мультфильмы"
04:02:43 Фильтрация
04:53:03 Кнопка сброса фильтров
04:55:33 Фикс скелетона
05:06:04 Страница с фильмом
05:53:53 Сиквелы и приквелы
05:58:54 Небольшие фиксы
06:02:18 Смотреть онлайн
06:22:02 Поиск
06:45:40 Loader при поиске
06:56:24 Страница с актером
07:30:06 Темная тема
07:48:36 Деплой netlify
⭐️ Мои соц. сети
- Телеграм канал: t.me/balkoev_blog
- Поддержать донатом: boosty.to/balkoev
- Github: github.com/balkoev
มุมมอง: 3 654
วีดีโอ
#9 ПРИЛОЖЕНИЕ С ЗАМЕТКАМИ на Javascript (NotesApp JS)
มุมมอง 8K2 ปีที่แล้ว
Проект на Javascript - Заметки js / NotesApp js ⭐️ Инфо для проекта: cdnjs.com/libraries/font-awesome ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
#8 Github API поисковик на Javascript
มุมมอง 6K2 ปีที่แล้ว
Проект на Javascript. Воспользуемся github api для получения данных о пользователях. ⭐️ Инфо для проекта: docs.github.com/en/rest/users/users#get-a-user ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
#7 ГЕНЕРАТОР ПАРОЛЕЙ на Javascript (Password Generator JS)
มุมมอง 4.6K2 ปีที่แล้ว
Проект на Javascript - Генератор паролей js / Password Generator js ⭐️ Инфо для проекта: www.w3schools.com/howto/howto_js_copy_clipboard.asp ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
#6 Пишем ПАГИНАЦИЮ на Javascript (PAGINATION JS)
มุมมอง 24K2 ปีที่แล้ว
Проект на Javascript - Пагинация js / Pagination js ⭐️ Инфо для проекта: jsonplaceholder.typicode.com/ ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
#5 МОДАЛЬНОЕ ОКНО на Javascript
มุมมอง 12K2 ปีที่แล้ว
В этом видео мы напишем учебный проект на Javascript - Модальное окно. По практикуем взаимодействие с API и Document Object Model. Поехали! Этот видео урок подойдет новичкам, которые уже познакомились с Html, Css, Javascript и знают, что такое Document Object Model (Dom). ⭐️ Инфо для проекта: kinopoiskapiunofficial.tech/ api key: 8c8e1a50-6322-4135-8875-5d40a5420d86 ⭐️ Код из видео: github.com/...
#4 Пишем КИНОСАЙТ на Javascript
มุมมอง 64K3 ปีที่แล้ว
В этом видео мы напишем учебный проект на Javascript - Киносайт или Movie App. По практикуем верстку, взаимодействие с API и Document Object Model. Поехали! Этот видео урок подойдет новичкам, которые уже познакомились с Html, Css, Javascript и знают, что такое Document Object Model (Dom). ⭐️ Инфо для проекта: kinopoiskapiunofficial.tech/ api key: 8c8e1a50-6322-4135-8875-5d40a5420d86 ⭐️ Код из в...
#3 Получаем картинки с помощью API Javascript
มุมมอง 29K3 ปีที่แล้ว
Напишем учебный проект на Javascript, в котором разберемся, что такое API и Fetch на примере котиков. Этот видео урок подойдет новичкам, которые уже познакомились с Html, Css, Javascript и знают, что такое Document Object Model (Dom). ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
#2 Счетчик на Javascript
มุมมอง 7K3 ปีที่แล้ว
Напишем учебный проект на Javascript, на котором будет счетчик. Этот видео урок подойдет новичкам, которые уже познакомились с Html, Css, Javascript и знают, что такое Document Object Model (Dom). ⭐️ Видео про DOM на моем канале по ссылке: th-cam.com/video/4nq-0QUY1ZA/w-d-xo.html ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_ba...
#1 Меняем фон на сайте Javascript
มุมมอง 22K3 ปีที่แล้ว
Напишем учебный проект на Javascript, который изменяет Background на страницу при клике на кнопку. Этот видео урок подойдет новичкам, которые уже познакомились с Html, Css, Javascript и знают, что такое Document Object Model (Dom). ⭐️ Видео про DOM на моем канале по ссылке: th-cam.com/video/4nq-0QUY1ZA/w-d-xo.html ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects th-cam.com/vid...
Fullstack за 3 месяца. Реальный кейс от выпускника школы программирования Elbrus BootCamp.
มุมมอง 4.3K3 ปีที่แล้ว
В этом видео мы пообщаемся с основателем elbrusboot.camp Поговорим с HR коучем, который даст советы для Junior разработчиков. Так же пообщаемся с выпускником, который после трёх месяцев обучения нашел работу на позицию Junior Frontend разработчика. Приятного просмотра! ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
Школа 21. Школа программирования. Глазами студента.
มุมมอง 14K4 ปีที่แล้ว
В этом видео я взял интервью у своего друга и студента школы программирования 21. Как стать программистом? Это один из путей. Он учится больше года в школе и ему есть, что рассказать! ⭐️ Ссылки Школа Elbrus: elbrusboot.camp/ Иснтаграм Далер: dalerlive Скриншоты: ibb.co/Fqz6cb3 ibb.co/d2J9LcM ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
Парсим сайт с помощью NodeJS, Cheerio
มุมมอง 21K4 ปีที่แล้ว
В этом видео мы рассмотрим библиотеку Node.js, Cheerio, которая является jQuery-подобным инструментом для сервера, используемого в веб-парсинге. ⭐️Подпишись и поделись видео с друзьями! th-cam.com/channels/4mIMZhNbSFzl38eE_xGJcA.html ⭐️ Ссылки Github: github.com/balkoev/cheerio-js-example ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
УЧИМ CSS ЗА 20 МИНУТ! [2020]
มุมมอง 7K4 ปีที่แล้ว
Хочешь научиться работать с CSS (Каскадные Таблицы Стилей)? Тогда смотри видео до конца! ⭐️Подпишись и поделись видео с друзьями! th-cam.com/channels/4mIMZhNbSFzl38eE_xGJcA.html CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
Что такое DOM? На примере реальной задачи JS!
มุมมอง 21K4 ปีที่แล้ว
Хочешь научиться работать с DOM (Document Object Model)? Тогда смотри видео до конца! ⭐️Подпишись и поделись видео с друзьями! th-cam.com/channels/4mIMZhNbSFzl38eE_xGJcA.html DOM или Объектная Модель Документа, предосталяет возможность взаимодействовать программисту с веб страница при помощи JavaScript. Видео рассчитано для новичков в программировании. ⭐️ Ссылки Код из видео: github.com/balkoev...
6 практических советов по JS коду! [2020]
มุมมอง 5K4 ปีที่แล้ว
6 практических советов по JS коду! [2020]
Учим JavaScript за 1 час! Как стать программистом. [2020]
มุมมอง 43K4 ปีที่แล้ว
Учим JavaScript за 1 час! Как стать программистом. [2020]
Какой язык программирования учить новичку в 2020?
มุมมอง 43K4 ปีที่แล้ว
Какой язык программирования учить новичку в 2020?
Спасибо большое за интервью, правда, мужчина с бородой постоянно перебивал Далера, не давая ему закончить важную мысль, но тем не менее спасибо!)
Хотелось бы больше объяснений, но и за такой труд большое спасибо, я наконец его закончила. Делайте ещё, часов на 20))
Супер . было бы круто сделать отдельный плейлист улучшений.У одного американского блогера есть такая рубрика . Он делает сайт так же чуть ли не 10 ч . А затем пару коротких роликов улучшений . Допиливал сайдбар , переделывал авторизацию
Спасибо за этот бесплатный курс. Продолжайте также дальше🥰🥰🤩
Спасибо тебе большое!
можете подсказать, хочу к нг разработать свой сайт для себя тоже мини кинотеатр, Суть вопроса: Я понимаю что не практично создавать каждую страницу с отдельным фильмом, но можете подсказать как сделать так, как у вас, т.е разные плееры которые не утратят много памяти на сервере и т.д
vscode перестал показывать ошибки. Например, когда только объявляем Navbar 27:53 у вас показывает ошибку, т.к. компонента такого еще нет. У меня нет ошибки, хотя компонента не существует
Попробуй выгрузить vscode и заново запустить, он иногда может подвисать.
Пофиксил. Вместо { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },, был ...parseOptions. Вдруг кому пригодится
Спасибо за доступное объяснение на примере! ❤🔥🔥
Спасибо! То что мне было надо, чтобы воткнуться для начала, без бла-бла-бла.
А если в файле джейсон вскода нету этих настроек?То как их туда добавить
Ctrl+Shift+P -> User settings Или ты про другое?
@@balkoev ,да за это,вот только в сетинг,не как не могу найти
Спасибо) а что лучше и лаконичней использовать RTK query или React query?
Хороший вопрос, мне не приходилось работать с React query. Мне кажется +\- одно и тоже получится.
У меня в консоли сайта нечего не пишет, по типу 22:31, и остальное. у меня показывает ошибку с app.js, не в коде а с файлом, я не понимаю что делаит
можно же сделать намного проще
<div class="btn-wrapper"> <button id="btn">Change background</button> <div class="title"> <p id="title"></p> </div> </div> <script> const btn = document.getElementById("btn") const background = document.body btn.addEventListener("click", function changebck() { let randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16) let title = document.getElementById("title") background.style.backgroundColor = randomColor title.textContent = `${randomColor}` }) </script>
сделай аналог рутуб, или ютуб)
Рад видеть вас снова. Смотрел ваши видео и по несколько раз - принесли много пользы) Буду смотреть и это конечно!
Ждём такой курс на typeScript
Автор просто топ, ЖГИ 🔥🔥🔥🔥
Чувак ты лучший ❤ , жду новых видео
😂😂😂 и всё ровно не получилось сделать копию. Топорно работает
ой как же рад видеть тебя, ты самый лучший мужик. Спасибо за крутой контент!
спасибо 🙏
Адам, гIалгIай ви хьо?
Ва
@@balkoev👍 я тебе в телегу написал
футболка классная, классика!
Реально круто и легко)
почему 21? Потому что очко.
Отличный пример, спасибо. Методом тыка понял, что месяца в countdownDate отсчитываются с нуля, те Январь === 0
Спасибо за труд и время. Прошел курс Яндекса, но именно таких практически работ не хватает!👍
В Яндексе же делают проекты для портфолио. Разве вы не делали?
Спасибо за урок
.btn { background-color: transparent; padding: 8px; border: 2px solid #222; border-radius: 5px; font-size: 16px; letter-spacing: 1.5px; color: #222;outline: none;cursor: pointer; transition: 0.275s ease-in} .btn:hover {background-color: #222; color: #fff;} и в hover белый цвет можно указать и не 6тьмия ffffff а всего 3 fff и не надо ставить transition (all) без all надо просто так как элемент один
А зачем ты вписал transition в .btn:hover если по факту его нужно вписать в .btn так как при входе мышке у тебя будет медленно а при выходе быстро но если transition вписать в btn то вход будет плавный и выход будет плавный то есть:
Это не благотворительность, а подбор и обучение персонала
А где же продолжение? Очень хорошо объясняешь :(
Спасибо большое. JS - это моя боль!
объяснение хорошее, видно что парень знает своё дело)))
Всем привет доброго времени суток, есть фигма этого проекта ?
Ошибаешься: твое решение как раз таки самое оптимальное из всех что я нашел на ютубе! И именно по этой причине я здесь!)
а где стрелочки и многоточие вместо большого количества страниц?
А если сделать end = rowPerPage * page start = end - rowPerPage Это же будет работать? По моему должно
спасибо за уроки 🤝
Спасибо за отличный урок!
Половина видео - настройка стилей(
Душнила просто нереально смотреть
Спасибо за объяснение с примером! Минимум воды. Круто!
спасибо за ролик, подскажите что делать когда мы вешаем тернарник на movie. runtime для того чтобы удалять строчку если нет инфы о продолжительности фильма у меня этот null пишется под карточкой, также с рейтингом, не могу понять ошибку
Спасибо очень понятно!
Очень круто, спасибо
Есть проблема с выводом большого количества записей, пагинация растягивается в браузере и ни чем не ограничивается, т.е может растянуться на 3 и более экранов. Этот момент не учтен. А так, контент ТОП.
Спасибо, лучший урок на эту тему!)
Видео начинается с 18:00