- 19
- 362 740
Как стать программистом
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
มุมมอง: 2 618
วีดีโอ
#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
มุมมอง 5K2 ปีที่แล้ว
Проект на 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.5K2 ปีที่แล้ว
Проект на 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)
มุมมอง 23K2 ปีที่แล้ว
Проект на Javascript - Пагинация js / Pagination js ⭐️ Инфо для проекта: jsonplaceholder.typicode.com/ ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
#5 МОДАЛЬНОЕ ОКНО на Javascript
มุมมอง 11K2 ปีที่แล้ว
В этом видео мы напишем учебный проект на 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
มุมมอง 63K3 ปีที่แล้ว
В этом видео мы напишем учебный проект на 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
มุมมอง 21K3 ปีที่แล้ว
Напишем учебный проект на 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?
Супер . было бы круто сделать отдельный плейлист улучшений.У одного американского блогера есть такая рубрика . Он делает сайт так же чуть ли не 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
бесит когда так видео пишут, без микрофона. Как будто не для людей, выставляя себя напоказ, чото бубня себе под нос. Блэээээээээээ как fetch запрос написал одному себе только понятно, наверное Минин, хотя бы готовится!
скоскано и не живо