Как стать программистом
Как стать программистом
  • 19
  • 362 740
🍿 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
มุมมอง: 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]
ПИШЕМ TELEGRAM БОТА НА JAVASCRIPT!
มุมมอง 29K4 ปีที่แล้ว
ПИШЕМ TELEGRAM БОТА НА JAVASCRIPT!
Учим JavaScript за 1 час! Как стать программистом. [2020]
มุมมอง 43K4 ปีที่แล้ว
Учим JavaScript за 1 час! Как стать программистом. [2020]
Какой язык программирования учить новичку в 2020?
มุมมอง 43K4 ปีที่แล้ว
Какой язык программирования учить новичку в 2020?

ความคิดเห็น

  • @aticus5771
    @aticus5771 21 วันที่ผ่านมา

    Супер . было бы круто сделать отдельный плейлист улучшений.У одного американского блогера есть такая рубрика . Он делает сайт так же чуть ли не 10 ч . А затем пару коротких роликов улучшений . Допиливал сайдбар , переделывал авторизацию

  • @Zetfri
    @Zetfri 27 วันที่ผ่านมา

    Спасибо за этот бесплатный курс. Продолжайте также дальше🥰🥰🤩

  • @Deferenseo
    @Deferenseo หลายเดือนก่อน

    Спасибо тебе большое!

  • @ProgVipe
    @ProgVipe หลายเดือนก่อน

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

  • @qqqqqqqq8581
    @qqqqqqqq8581 หลายเดือนก่อน

    vscode перестал показывать ошибки. Например, когда только объявляем Navbar 27:53 у вас показывает ошибку, т.к. компонента такого еще нет. У меня нет ошибки, хотя компонента не существует

    • @balkoev
      @balkoev หลายเดือนก่อน

      Попробуй выгрузить vscode и заново запустить, он иногда может подвисать.

    • @qqqqqqqq8581
      @qqqqqqqq8581 หลายเดือนก่อน

      Пофиксил. Вместо { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },, был ...parseOptions. Вдруг кому пригодится

  • @Anastasia-if3bi
    @Anastasia-if3bi หลายเดือนก่อน

    Спасибо за доступное объяснение на примере! ❤‍🔥🔥

  • @TheAurumsan1
    @TheAurumsan1 หลายเดือนก่อน

    Спасибо! То что мне было надо, чтобы воткнуться для начала, без бла-бла-бла.

  • @ИгорьПлыс-д5х
    @ИгорьПлыс-д5х หลายเดือนก่อน

    А если в файле джейсон вскода нету этих настроек?То как их туда добавить

    • @balkoev
      @balkoev หลายเดือนก่อน

      Ctrl+Shift+P -> User settings Или ты про другое?

    • @ИгорьПлыс-д5х
      @ИгорьПлыс-д5х หลายเดือนก่อน

      @@balkoev ,да за это,вот только в сетинг,не как не могу найти

  • @PieceOfInternet
    @PieceOfInternet หลายเดือนก่อน

    Спасибо) а что лучше и лаконичней использовать RTK query или React query?

    • @balkoev
      @balkoev หลายเดือนก่อน

      Хороший вопрос, мне не приходилось работать с React query. Мне кажется +\- одно и тоже получится.

  • @COMABAR
    @COMABAR หลายเดือนก่อน

    У меня в консоли сайта нечего не пишет, по типу 22:31, и остальное. у меня показывает ошибку с app.js, не в коде а с файлом, я не понимаю что делаит

  • @VolodymyrSushanyn-mo3is
    @VolodymyrSushanyn-mo3is หลายเดือนก่อน

    можно же сделать намного проще

    • @VolodymyrSushanyn-mo3is
      @VolodymyrSushanyn-mo3is หลายเดือนก่อน

      <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>

  • @servera-center
    @servera-center หลายเดือนก่อน

    сделай аналог рутуб, или ютуб)

  • @Max-ed4yd
    @Max-ed4yd หลายเดือนก่อน

    Рад видеть вас снова. Смотрел ваши видео и по несколько раз - принесли много пользы) Буду смотреть и это конечно!

  • @sharipovgaming6347
    @sharipovgaming6347 หลายเดือนก่อน

    Ждём такой курс на typeScript

  • @sharipovgaming6347
    @sharipovgaming6347 หลายเดือนก่อน

    Автор просто топ, ЖГИ 🔥🔥🔥🔥

  • @ICELINK_S
    @ICELINK_S หลายเดือนก่อน

    Чувак ты лучший ❤ , жду новых видео

  • @yappix
    @yappix หลายเดือนก่อน

    😂😂😂 и всё ровно не получилось сделать копию. Топорно работает

  • @samano4619
    @samano4619 หลายเดือนก่อน

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

  • @marpusik1277
    @marpusik1277 หลายเดือนก่อน

    спасибо 🙏

  • @arthur_478
    @arthur_478 หลายเดือนก่อน

    Адам, гIалгIай ви хьо?

    • @balkoev
      @balkoev หลายเดือนก่อน

      Ва

    • @arthur_478
      @arthur_478 หลายเดือนก่อน

      ​@@balkoev👍 я тебе в телегу написал

  • @sergeykhmelnitsky5307
    @sergeykhmelnitsky5307 2 หลายเดือนก่อน

    футболка классная, классика!

  • @ГлебПаингу
    @ГлебПаингу 2 หลายเดือนก่อน

    Реально круто и легко)

  • @НесторБаландович-д6р
    @НесторБаландович-д6р 4 หลายเดือนก่อน

    почему 21? Потому что очко.

  • @tolmax3744
    @tolmax3744 4 หลายเดือนก่อน

    Отличный пример, спасибо. Методом тыка понял, что месяца в countdownDate отсчитываются с нуля, те Январь === 0

  • @tolmax3744
    @tolmax3744 4 หลายเดือนก่อน

    Спасибо за труд и время. Прошел курс Яндекса, но именно таких практически работ не хватает!👍

    • @marine_888
      @marine_888 2 หลายเดือนก่อน

      В Яндексе же делают проекты для портфолио. Разве вы не делали?

  • @paral1ne
    @paral1ne 4 หลายเดือนก่อน

    Спасибо за урок

  • @CleverForYou
    @CleverForYou 4 หลายเดือนก่อน

    .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 надо просто так как элемент один

  • @CleverForYou
    @CleverForYou 4 หลายเดือนก่อน

    А зачем ты вписал transition в .btn:hover если по факту его нужно вписать в .btn так как при входе мышке у тебя будет медленно а при выходе быстро но если transition вписать в btn то вход будет плавный и выход будет плавный то есть:

  • @InvestitsionnaZhuchka
    @InvestitsionnaZhuchka 5 หลายเดือนก่อน

    Это не благотворительность, а подбор и обучение персонала

  • @SergeyKelme
    @SergeyKelme 5 หลายเดือนก่อน

    А где же продолжение? Очень хорошо объясняешь :(

  • @БантикиКосички-в1н
    @БантикиКосички-в1н 5 หลายเดือนก่อน

    Спасибо большое. JS - это моя боль!

  • @НиколайГроза-е9н
    @НиколайГроза-е9н 6 หลายเดือนก่อน

    объяснение хорошее, видно что парень знает своё дело)))

  • @erlanabdraimov3432
    @erlanabdraimov3432 6 หลายเดือนก่อน

    Всем привет доброго времени суток, есть фигма этого проекта ?

  • @kURSOR-zt9pm
    @kURSOR-zt9pm 7 หลายเดือนก่อน

    Ошибаешься: твое решение как раз таки самое оптимальное из всех что я нашел на ютубе! И именно по этой причине я здесь!)

  • @blackwood8816
    @blackwood8816 7 หลายเดือนก่อน

    а где стрелочки и многоточие вместо большого количества страниц?

  • @youops387
    @youops387 7 หลายเดือนก่อน

    А если сделать end = rowPerPage * page start = end - rowPerPage Это же будет работать? По моему должно

  • @DmitryGrid
    @DmitryGrid 7 หลายเดือนก่อน

    спасибо за уроки 🤝

  • @ДмитрийУдача-о9л
    @ДмитрийУдача-о9л 8 หลายเดือนก่อน

    Спасибо за отличный урок!

  • @indo-usue
    @indo-usue 8 หลายเดือนก่อน

    Половина видео - настройка стилей(

  • @_blaind_8476
    @_blaind_8476 9 หลายเดือนก่อน

    Душнила просто нереально смотреть

  • @vvks9901
    @vvks9901 9 หลายเดือนก่อน

    Спасибо за объяснение с примером! Минимум воды. Круто!

  • @littlespoon9270
    @littlespoon9270 10 หลายเดือนก่อน

    спасибо за ролик, подскажите что делать когда мы вешаем тернарник на movie. runtime для того чтобы удалять строчку если нет инфы о продолжительности фильма у меня этот null пишется под карточкой, также с рейтингом, не могу понять ошибку

  • @БатлБоксов-у1л
    @БатлБоксов-у1л 10 หลายเดือนก่อน

    Спасибо очень понятно!

  • @alexeymatveev9031
    @alexeymatveev9031 10 หลายเดือนก่อน

    Очень круто, спасибо

  • @user-wt1hc4hm3t
    @user-wt1hc4hm3t 11 หลายเดือนก่อน

    Есть проблема с выводом большого количества записей, пагинация растягивается в браузере и ни чем не ограничивается, т.е может растянуться на 3 и более экранов. Этот момент не учтен. А так, контент ТОП.

  • @АндрейМакаревич-ч2я
    @АндрейМакаревич-ч2я ปีที่แล้ว

    Спасибо, лучший урок на эту тему!)

  • @vadimsays
    @vadimsays ปีที่แล้ว

    Видео начинается с 18:00

  • @sony1939
    @sony1939 ปีที่แล้ว

    бесит когда так видео пишут, без микрофона. Как будто не для людей, выставляя себя напоказ, чото бубня себе под нос. Блэээээээээээ как fetch запрос написал одному себе только понятно, наверное Минин, хотя бы готовится!

  • @mike-aaa
    @mike-aaa ปีที่แล้ว

    скоскано и не живо