Как стать программистом
Как стать программистом
  • Видео 19
  • Просмотров 378 903
🍿 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...
Просмотров: 5 820

Видео

#9 ПРИЛОЖЕНИЕ С ЗАМЕТКАМИ на Javascript (NotesApp JS)
Просмотров 9 тыс.2 года назад
Проект на Javascript - Заметки js / NotesApp js ⭐️ Инфо для проекта: cdnjs.com/libraries/font-awesome ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
#8 Github API поисковик на Javascript
Просмотров 6 тыс.2 года назад
Проект на 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,8 тыс.2 года назад
Проект на 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)
Просмотров 24 тыс.2 года назад
Проект на Javascript - Пагинация js / Pagination js ⭐️ Инфо для проекта: jsonplaceholder.typicode.com/ ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
#5 МОДАЛЬНОЕ ОКНО на Javascript
Просмотров 12 тыс.2 года назад
В этом видео мы напишем учебный проект на 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
Просмотров 66 тыс.3 года назад
В этом видео мы напишем учебный проект на 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
Просмотров 30 тыс.4 года назад
Напишем учебный проект на Javascript, в котором разберемся, что такое API и Fetch на примере котиков. Этот видео урок подойдет новичкам, которые уже познакомились с Html, Css, Javascript и знают, что такое Document Object Model (Dom). ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
#2 Счетчик на Javascript
Просмотров 8 тыс.4 года назад
Напишем учебный проект на Javascript, на котором будет счетчик. Этот видео урок подойдет новичкам, которые уже познакомились с Html, Css, Javascript и знают, что такое Document Object Model (Dom). ⭐️ Видео про DOM на моем канале по ссылке: ruclips.net/video/4nq-0QUY1ZA/видео.html ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ⭐️ Мои соц. сети Инстаграм: adam_ba...
#1 Меняем фон на сайте Javascript
Просмотров 24 тыс.4 года назад
Напишем учебный проект на Javascript, который изменяет Background на страницу при клике на кнопку. Этот видео урок подойдет новичкам, которые уже познакомились с Html, Css, Javascript и знают, что такое Document Object Model (Dom). ⭐️ Видео про DOM на моем канале по ссылке: ruclips.net/video/4nq-0QUY1ZA/видео.html ⭐️ Код из видео: github.com/balkoev/10-javascript-vanilla-projects ruclips.net/vi...
Fullstack за 3 месяца. Реальный кейс от выпускника школы программирования Elbrus BootCamp.
Просмотров 4,4 тыс.4 года назад
В этом видео мы пообщаемся с основателем elbrusboot.camp Поговорим с HR коучем, который даст советы для Junior разработчиков. Так же пообщаемся с выпускником, который после трёх месяцев обучения нашел работу на позицию Junior Frontend разработчика. Приятного просмотра! ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
Школа 21. Школа программирования. Глазами студента.
Просмотров 15 тыс.4 года назад
В этом видео я взял интервью у своего друга и студента школы программирования 21. Как стать программистом? Это один из путей. Он учится больше года в школе и ему есть, что рассказать! ⭐️ Ссылки Школа Elbrus: elbrusboot.camp/ Иснтаграм Далер: dalerlive Скриншоты: ibb.co/Fqz6cb3 ibb.co/d2J9LcM ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
Парсим сайт с помощью NodeJS, Cheerio
Просмотров 22 тыс.4 года назад
В этом видео мы рассмотрим библиотеку Node.js, Cheerio, которая является jQuery-подобным инструментом для сервера, используемого в веб-парсинге. ⭐️Подпишись и поделись видео с друзьями! ruclips.net/channel/UC4mIMZhNbSFzl38eE_xGJcA ⭐️ Ссылки Github: github.com/balkoev/cheerio-js-example ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
УЧИМ CSS ЗА 20 МИНУТ! [2020]
Просмотров 7 тыс.4 года назад
Хочешь научиться работать с CSS (Каскадные Таблицы Стилей)? Тогда смотри видео до конца! ⭐️Подпишись и поделись видео с друзьями! ruclips.net/channel/UC4mIMZhNbSFzl38eE_xGJcA CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. ⭐️ Мои соц. сети Инстаграм: adam_balkoev Вконтакте: adam_balkoev
Что такое DOM? На примере реальной задачи JS!
Просмотров 22 тыс.4 года назад
Хочешь научиться работать с DOM (Document Object Model)? Тогда смотри видео до конца! ⭐️Подпишись и поделись видео с друзьями! ruclips.net/channel/UC4mIMZhNbSFzl38eE_xGJcA DOM или Объектная Модель Документа, предосталяет возможность взаимодействовать программисту с веб страница при помощи JavaScript. Видео рассчитано для новичков в программировании. ⭐️ Ссылки Код из видео: github.com/balkoev/js...
6 практических советов по JS коду! [2020]
Просмотров 5 тыс.4 года назад
6 практических советов по JS коду! [2020]
ПИШЕМ TELEGRAM БОТА НА JAVASCRIPT!
Просмотров 29 тыс.4 года назад
ПИШЕМ TELEGRAM БОТА НА JAVASCRIPT!
Учим JavaScript за 1 час! Как стать программистом. [2020]
Просмотров 43 тыс.4 года назад
Учим JavaScript за 1 час! Как стать программистом. [2020]
Какой язык программирования учить новичку в 2020?
Просмотров 43 тыс.4 года назад
Какой язык программирования учить новичку в 2020?

Комментарии

  • @oz5826
    @oz5826 10 дней назад

    19:12 , 26:52 , 33:12 , 56:51 , 1:07:13 , 1:15:18 , 1:45:14 , 1:56:30 , 2:05:53 , 2:09:01 , 2:10:30 , 2:27:17

  • @ИгорьПлыс-д5х
    @ИгорьПлыс-д5х 22 дня назад

    После того как создал хук.Пришла такая ошибка.Cannot destructure property 'countries' of 'useSelector(...)' as it is undefined.Что только не делал.Проверил все.Безуспешно

  • @ilyailya8363
    @ilyailya8363 Месяц назад

    Спасибо! А то что картинки к фильмам разных размеров это нормально?) ну типо с бэка картинки одной высоты должны быть или тут в верстке опустили этот момент? Ломаю голову как сделать верстку. Карточке задать ширину 215px картинке width/maxwidth 100%. А высоту как в этом случаи задавать, фиксированное значение? И названию фильма поставить flex grow 1 на случай если название длинное чтоб расширялся элемент.

  • @antonvoshchinskiy5361
    @antonvoshchinskiy5361 Месяц назад

    после 2 часов 16 минут после вкладки комиксы фильмы не отображаются. Везде request url правильный и response 200, но после комиксов сам response пустой ({"total":0,"totalPages":0,"items":[]}). Подскажи, пожалуйста, в чем может быть дело. Спасибо

    • @ilyailya8363
      @ilyailya8363 Месяц назад

      Вы нашли в чем проблема? У меня так же, но я думаю это проблема самого сервера, раз он присылает пустой массив.

    • @antonvoshchinskiy5361
      @antonvoshchinskiy5361 Месяц назад

      @@ilyailya8363 Там дальше правда ничего нету. Видимо API изменился. Если его код скачать, то тоже не показывает

  • @goshan3170
    @goshan3170 Месяц назад

    3:08:57 "Cannot destructure property 'countries' of 'useSelector(...)' as it is undefined." не видит данные из стора, уже все перепробовал. До этого работало все... И вторая проблема не ниже вампиров не появляются карточки. Перепроверил, все данные на сервере актуальные, в нетворк все приходит. Просто не рисует.

  • @huiixwa2570
    @huiixwa2570 2 месяца назад

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

    • @balkoev
      @balkoev 2 месяца назад

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

    • @huiixwa2570
      @huiixwa2570 2 месяца назад

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

  • @bulmenk1
    @bulmenk1 2 месяца назад

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

    • @balkoev
      @balkoev 2 месяца назад

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

  • @akr781
    @akr781 2 месяца назад

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

  • @victoriaco1262
    @victoriaco1262 3 месяца назад

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

  • @fobianka2131
    @fobianka2131 3 месяца назад

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

  • @aticus5771
    @aticus5771 4 месяца назад

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

  • @EasyCode-24
    @EasyCode-24 5 месяцев назад

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

  • @Deferenseo
    @Deferenseo 5 месяцев назад

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

  • @ProgVipe
    @ProgVipe 5 месяцев назад

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

  • @qqqqqqqq8581
    @qqqqqqqq8581 5 месяцев назад

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

    • @balkoev
      @balkoev 5 месяцев назад

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

    • @qqqqqqqq8581
      @qqqqqqqq8581 5 месяцев назад

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

  • @Anastasia-if3bi
    @Anastasia-if3bi 5 месяцев назад

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

  • @TheAurumsan1
    @TheAurumsan1 5 месяцев назад

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

  • @ИгорьПлыс-д5х
    @ИгорьПлыс-д5х 5 месяцев назад

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

    • @balkoev
      @balkoev 5 месяцев назад

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

    • @ИгорьПлыс-д5х
      @ИгорьПлыс-д5х 5 месяцев назад

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

  • @PieceOfInternet
    @PieceOfInternet 5 месяцев назад

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

    • @balkoev
      @balkoev 5 месяцев назад

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

  • @COMABAR
    @COMABAR 5 месяцев назад

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

  • @kepplerfilms
    @kepplerfilms 5 месяцев назад

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

    • @kepplerfilms
      @kepplerfilms 5 месяцев назад

      <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 5 месяцев назад

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

  • @Max-ed4yd
    @Max-ed4yd 5 месяцев назад

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

  • @sharipovgaming6347
    @sharipovgaming6347 5 месяцев назад

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

  • @sharipovgaming6347
    @sharipovgaming6347 5 месяцев назад

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

  • @ICELINK_S
    @ICELINK_S 5 месяцев назад

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

  • @yappix
    @yappix 5 месяцев назад

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

  • @samano4619
    @samano4619 6 месяцев назад

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

  • @marpusik1277
    @marpusik1277 6 месяцев назад

    спасибо 🙏

  • @arthur_478
    @arthur_478 6 месяцев назад

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

    • @balkoev
      @balkoev 6 месяцев назад

      Ва

    • @arthur_478
      @arthur_478 6 месяцев назад

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

  • @sergeykhmelnitsky5307
    @sergeykhmelnitsky5307 6 месяцев назад

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

  • @ГлебПаингу
    @ГлебПаингу 6 месяцев назад

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

  • @НесторБаландович-д6р
    @НесторБаландович-д6р 8 месяцев назад

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

  • @tolmax3744
    @tolmax3744 8 месяцев назад

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

    • @pietasty3364
      @pietasty3364 2 месяца назад

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

  • @tolmax3744
    @tolmax3744 8 месяцев назад

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

    • @marine_888
      @marine_888 6 месяцев назад

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

  • @paral1ne
    @paral1ne 8 месяцев назад

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

  • @CleverForYou
    @CleverForYou 8 месяцев назад

    .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 8 месяцев назад

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

  • @InvestitsionnaZhuchka
    @InvestitsionnaZhuchka 9 месяцев назад

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

  • @SergeyKelme
    @SergeyKelme 9 месяцев назад

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

  • @БантикиКосички-в1н
    @БантикиКосички-в1н 10 месяцев назад

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

  • @НиколайГроза-е9н
    @НиколайГроза-е9н 10 месяцев назад

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

  • @erlanabdraimov3432
    @erlanabdraimov3432 10 месяцев назад

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

  • @kURSOR-zt9pm
    @kURSOR-zt9pm 11 месяцев назад

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

  • @blackwood8816
    @blackwood8816 11 месяцев назад

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

  • @youops387
    @youops387 11 месяцев назад

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

  • @DmitryGrid
    @DmitryGrid 11 месяцев назад

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

  • @ДмитрийУдача-о9л

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

  • @indo-usue
    @indo-usue Год назад

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