Как стать программистом
Как стать программистом
  • 19
  • 371 805
🍿 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
มุมมอง: 4 081

วีดีโอ

#9 ПРИЛОЖЕНИЕ С ЗАМЕТКАМИ на Javascript (NotesApp JS)
มุมมอง 9K2 ปีที่แล้ว
Проект на 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.7K2 ปีที่แล้ว
Проект на 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
มุมมอง 65K3 ปีที่แล้ว
В этом видео мы напишем учебный проект на 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
มุมมอง 30K3 ปีที่แล้ว
Напишем учебный проект на 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
มุมมอง 23K3 ปีที่แล้ว
Напишем учебный проект на 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.3K4 ปีที่แล้ว
В этом видео мы пообщаемся с основателем 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?

ความคิดเห็น

  • @huiixwa2570
    @huiixwa2570 2 วันที่ผ่านมา

    Здравствуйте, спасибо вам за этот урок. Но не могли бы вы помочь у меня проблемы с видео-плеером, сделала все в точности как у вас и в первый раз все отработало корректно. Открываю проект через пару дней и в консоли постоянно вылазит ошибка: Cannot read properties of null (reading '1') в Network показывает 307 статус и говорит что присходит переадресация. С чем это может быть связано?

    • @balkoev
      @balkoev 2 วันที่ผ่านมา

      У меня кажется тоже такое иногда бывает, скорее всего проблема в плеере. Сейчас работает?

    • @huiixwa2570
      @huiixwa2570 2 วันที่ผ่านมา

      @ нет, но может ли это быть из за того что бесплатный тариф у плеера и есть ограничения?

  • @bulmenk1
    @bulmenk1 7 วันที่ผ่านมา

    спасибо большое за это видео и за Ваш труд сам пишу на реакте, но до этого уровня мне ещё пыхтеть и пыхтеть

    • @balkoev
      @balkoev 7 วันที่ผ่านมา

      Если Вы осилили это видео, то я верю, что у Вас обязательно все получится!)

  • @akr781
    @akr781 18 วันที่ผ่านมา

    Он говорил, что изучал питон параллельно с си. Это просиходило в стенах школы или же вне?

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

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

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

    Хотелось бы больше объяснений, но и за такой труд большое спасибо, я наконец его закончила. Делайте ещё, часов на 20))

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      <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 3 หลายเดือนก่อน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    спасибо 🙏

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

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

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

      Ва

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

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

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

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

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

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

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

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

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

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

    • @pietasty3364
      @pietasty3364 3 วันที่ผ่านมา

      Я чуть истерить не начал

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

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

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

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

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

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

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

    .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 6 หลายเดือนก่อน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • @БатлБоксов-у1л
    @БатлБоксов-у1л ปีที่แล้ว

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

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

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