Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!
Vložit
- čas přidán 8. 02. 2021
- Исходный код тут: t.me/js_by_vladilen/329
Получить профессию Frontend разработчика - bit.ly/3Oyo3TQ
Подробнее узнать об обучении в Result School -
bit.ly/3AfYPp2
Бесплатный курс HTML & CSS - bit.ly/3AjDzyy
Сделать 5 проектов на JavaScript - bit.ly/3NrsfU0
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Решил выложить в открытый доступ курс по созданию конструктора сайтов на чистом JavaScript за 2 часа.
Что внутри курса?
🔹 Ты напишешь с нуля приложение, которое сможешь положить себе в портфолио.
🔹 C нуля настроим рабочее окружение.
🔹 Будет много практического применения ООП (ты наконец-то поймешь, зачем на самом деле нужны классы в JavaScript).
🔹 Разберем как принципы SOLID помогают писать расширяемый и поддерживаемый код.
🔹 Оптимизация работы приложения.
🔹 Деплой приложения на хостинг.
🔹 И куча дополнительных бонусов, которые ты найдешь в процессе прохождения курса.
Исходный код тут: t.me/js_by_vladilen/329
Текстовые редакторы:
WebStorm - www.jetbrains.com/ru-ru/webst...
VSCode - code.visualstudio.com/
Инструменты из курса:
NodeJS - nodejs.org/en/
Parcel - parceljs.org/
Документация:
developer.mozilla.org/ru/docs...
Исходный код тут: t.me/js_by_vladilen/329
Получить профессию Frontend разработчика - bit.ly/3Oyo3TQ
Здравствуйте! Вы не могли бы помочь разобраться в проблеме? На этапе установки parcel терминал выдает кучу ошибок типа npm ERR.
npm WARN deprecated core-js@2.6.12: core-js@
Здравствуйте! У меня сейчас точно такая же проблема возникла, подскажите, пожалуйста, как Вы ее решили?
@@fArshmach1ne
Решил выложить в открытый доступ курс по созданию конструктора сайтов на чистом JavaScript за 2 часа, который раньше было доступен у меня на платформе.
Что изучите во время ролика я написал в описании к видео
Приятного обучения)
Какое мужское хобби Вы выбрали, Владилен?
Каааааааеф) не смотрел ещё видос, но рад, что он вышел)
Спасибо тебе, дружище) я купил, почти, все твои курсы на udemy и жду от тебя видео про кастомный видеопроигрыватель, как делать графики на canvas и можно ещё курс (пусть даже платный) простой crm, только уже на react)
Хочу сказать, что видел обзор на твой курс у одного ютуб блогера (ну, ты понял), и все равно хочу сказать, что ты делаешь, все же, вещи) Для уровней типа junior и middle они весьма полезны) пусть сеньоры и тимлиды обязуется знать все тонкости какой либо технологий, так что, выдохни и продолжай нас радовать дальше)
Благодарю
Могу смотреть если я только начал только учить JS??
@@ivanmikhailovich1963 одним глазом
Грамотная и доступная подача материалов. Спасибо за работу!!! 👍🏻👍🏻👍🏻 Всё просматриваю, не зависимо от уровня знаний.
Классный контент, проходил пару месяцев назад - многое понятно о классах стало, сейчас еще раз посмотрю.
Спасибо большое, обязательно пройду этот курс!!! Мне с ООП очень надо подружиться))) Спасибо, Владилен. Ты лучший.
Спасибо за урок, заценил, просто круто и познавательно! Очень нравится повествование от простого к сложному, что код всегда можно улучшить и сделать лаконичнее (главное потом не запутаться в структуре, хаха).
Спасибо за курс! Интересно и доходчиво объясняете.
Просто о сложном, Владилен, спасибо за видео!!!
Владилен спасибо тебе, что делишься своим опытом, очень мотивируешь!
Привет, есть к тебе предложение напиши мне в телеграмм @vladik10x
Владилен вы молодец! Очень рад что увидел это видео! Нет слов одни эмоции
Это просто пушка контент! Открывает новые горизонте в видении написания кода. Спасибо большое за него!
Спасибо! С удовольствием посмотрю ещё раз на досуге!
Супер качественный контент, спасибо за работу. Ждём новые уроки от вас
Чудо-видео))) Спасибо большое Владилен!)
Как обычно лайк!!! Все очень понятно и на высшем уровне!! Ты лучший
Ого, вот это контент, спасибо огромное)
Огромное тебе спасибо, добрый человек.
Только качественный контент +
спасибо за работу, проект просто супер, удачи в делах и побольше таких пректов )
Контент растет пропорционально качеству, продолжайте в том же духе.
Круче твоего контента по JS на просторах Ютуба я ещё не встречал.
Спасибо огромное за такое качественные и доступные видео!
ulbi tv тоже хорош
Благодарю за доступ к этому курсу! Практика очень обогатила. По ходу видео старался останавливать и решать самостоятельно задачи. Хотя не всегда так как вы.
Спасибо за то что обеспечиваете нас с бесплатными курсами)
Владилен, спасибо. Скачал "не глядя", заранее понимаю что мне это пригодится.
Ооооочень круто! Столько всего вкурил, огромное спасибо.
Благодарю! Очень хороший курс, масса полезного, по крайней мере для меня. Автору - респект!
Благодарю. Многое из JS после просмотра ролика стало намного понятней
Спасибо за столь полезный контент, да еще и вот так даром!
Ну всё разжевал, отлично и очень доходчиво объяснил, спасибо большое, смотрел с огромным интересом.
Владилен красавчик, что бы не говорили хейтеры, он делает вещи.
Полность согласен и поддерживаю.
Как может быть у такого человека - хейтеры?
Такую информацию пускать на бесплатную среду это золото.
Собаки лают, караван идет.
@@victormog ты видимо вообще не в теме
Хейтеры - неотъемлемая часть успеха :)
Будем разбираться, изучать. Автору благодарность
Спасибо, Владилен, шикарно 👏
курс афигенен! всем советую пройти!) я в платном варианте прошел, еще раз посмотрю, лишним не будет.)
Спасибо! Было интересно. Отдельный лайк за файрбазу.
Как всегда лучшее!!! Спасибо
Владилен, подсел на ваше обучение, как на наркоту! Самый лучший контент, что я видел! Спасибо вам огромное! Просто знайте, что благодаря вам, я меняю свою жизнь!
Красота, теперь обязательно возьмусь. Все руки никак не доходили. За труды спасибо.
Очень сомневаюсь, что возьмёшься. Если бы и правда хотел, пришел бы ко всему самостоятельно
@@user-bn2qp6sh8r Не понимаю, что заставляет людей писать тексты такого содержания. У меня в проф плане всё ок уже давно, коммент был оставлен для поддержки Владилена
пс. Этот коммент тоже
Спасибо большое, было очень интересно и познавательно!))
Шикарно объясняешь, спасибо!
Круто, мужик !!! Боби дальше, здорово !!!
Спасибо за видео! Очень интересная тема!!
Большое спасибо за урок! Отличная практика. Подписка
хороший курс. с удовольствием можно и два раза посмотреть )
Благодарю тебя, Владилен!!!
Владилен, спасибо!👍
Новеллы в сентябре 2022:
30:37, 33:11, 33:30 parcel-bundler теперь просто parcel
38:20 чтобы parcel не ругался на import, надо добавить type="module" в тег script в index.html:
41:44 parcel не признает "main": "/src/index.js", поэтому просто удаляем эту строку.
Спасибо
Почему при добавлении type все нормально работает?
И не в курсе почему автоматическое обновление на странице может не идти в parcel?
@@YourPlayGamer Согласно объяснению разработчика:
Parcel 1 изолирует область верхнего уровня каждого js-файла от другого файла.
В Parcel 2 - 1 скрипт подгружается 1 раз для всех импортеров и его изменение влияет на этих импортеров. Для этого используется атрибут type="module".
Если Parcel не обновляет страницу, проверь:
1) запущен клиент - npm run serve
В package.json должно быть так:
"serve": "parcel ./src/index.html -p 4200 --open",
2) Скрипт помещен в теге body.
@@sergeybure8795 "1) запущен клиент - npm run serve
В package.json должно быть так:
"serve": "parcel ./src/index.html -p 4200 --open",
2) Скрипт помещен в теге body."
Да это все есть Браундмауэр думаю мозги делает, но вроде бы все разрешения поставил.
Спасибо ✊
Спасибо, что-то помучился на импортах
1000 поклонов за твой труд!!!Долгожданный и очень в тему. Изучу и оставлю отзыв.
Отличный курс получился, спасибо!
Таааак, вот это круть подъехала)))
Отличный ролик! Все понятно и без воды
Полезный контент, я на него еще с тележного челенджа попал)
Спасибо! Отличное видео, очень познавательное и полезное.
Владилен, спасибо, смотрю уроки JS, и некоторые моменты и концепции пригодились мне и в Python. В частности у меня возникала ошибка в GUI-приложении. Если бы не твои усилия то даже в голову не пришло про мутирование состояния приложения (state)
По моему это один из лучших твоих видосов получился! Красава
Спасибо, за то что тратишь свое свободное время на нас)))!!!!
Огромное спасибо за качественный вклад в it-образовательный ютуб-контент ! Изначально о тебе узнал благодаря Михаилу с канала Django school. Сейчас абсолютно очевидно что ты - топ среди всех блогеров, создающих контент посвященный ЯП JS на русском.
Благодарю, приятно)
Каждый раз понимаешь что .... Такие вещи не сложные (Только требуют усилия и усидчивости на пару часов, а иногда и больше =)). Спасибо тебе еще раз
ага, а ещё подготовка
СУПЕР спасибо за контент годный =)
Спасибо большое, Владилен !!!
Спасибо за обучающие видео!
Спасибо тебе, добрый человек! Очень вовремя) Уже хотела повторно покупать, чтобы еще раз пройти его.
Мужик, я рад, что нашел тебя! Спасибо за материалы, обучение! Изучил курс по JS, NodeJS, сразу видно уровень передачи информации и материала. Просто кладезь. Большое спасибо и успехов!
Рад, что помогло)
Красота, все никак руки не доходили. Теперь обязательно возьмусь. Спасибо за труды.
Огромное спасибо! Раньше на пайтоне был, но щас перешёл сюда, деньги тратить не охото на учёбу, за то тут всё подробно и понятно! Спасибо!
За видос респект! Спасибо)
А вот качество, по возможности, улучшить бы :) Но с учетом бесплатности вообще не критично
Спасибо автору планирую скоро изучить этот курс
круто! после курса по "excel на JS", совсем не страшно )
Топ, спасибо за видео!
Спасибо за твою работу 👏👏👏👏👏👏👏
Супер, премного благодарен автору!
Очень круто, спасибо!
Wow, spasibo tibe ogromnoe!
Топ контент просто, спасибо, что делишься знаниями))
BRONY?
Огромное спасибо, будем изучать
Вот это подгончик!😲😁 Спасибо, Владилен!!
Привет из Махачкалы. От души Владилен ✊👋
отличный курс, спасибо!
Спасибо за такой контент!
Огромное спасибо автору, ждём новых видео! Например лендинг салона красоты с кнопкой мы вам сразу перезвоним. (Слайдер с причёсками юзеры и сами вставят)
Сужу по предоставленному материалу, мне понятен. Видно что автор уделил внимание подаче материала спвсибо.
Очень интересная тема. Круто!
Отличный курс! Классика JavaScript! На все времена! ) Какое то время назад прошёл этот курс. Скажу, что курс произвёл на меня очень позитивное впечатление. Наглядно показано, как с помощью JavaScript создать структуру сайта и управлять контентом.
Покатит, покатит, покаааатииит )) Классный контент! Спасибо
Лучший курс на CZcams !
Спасибо! Ты лучший ютубер в этой сфере.
Выглядит неплохо)
Спасибо за труды!
Вообщем контент бомба, лайк.
Единственное что я бы чуток поменял так это: Я бы не вызывал init() внутри конструктора.
Имхо, конструктор нужен для инициализации полей/данных, а выполнение действий(отрисовка), уже задача отдельного метода(render). Таким образом можно, если захотеть, сделать декорацию объекта Sidebar.
Но спорить не стану)))
Вообщем я у себя сделал так:
export class Sidebar {
constructor(selector, callback) {
this.$el = document.querySelector(selector)
this.callback = callback
this.$el.addEventListener('submit', this.onAdd.bind(this))
}
render() {
this.$el.insertAdjacentHTML('afterbegin', this.template)
}
Ну и в App.js вызываю так:
export class App {
constructor(model) {
this.model = model
}
init() {
const site = new Site('#site')
site.render(this.model)
const sidebar = new Sidebar('#panel', block => {
this.model.push(block)
site.render(this.model)
})
sidebar.render()
}
}
спасибо !нужен еще курс "победи ленивую жопу"
Для начала необходимо пристрелить "диван"
Стреляй диван через пузо
@@user-vu6hn4ul2i игра где нельзя сохраняться )
@@user-vu6hn4ul2i у меня был такой квест. Его можно было характеризовать так. - снял деньги в банкомате где зп и передать в другой кредитный банкомат. Было весело!!!
@@user-vu6hn4ul2i и доп квест "полет головой вниз из окна 15 этажа ипотечной квартирки "
Повезло, подгон от Владилена спасибо!
Ты крутой) спасибо тебе!)
Спасибо большое. Комментарий в поддержку канала и продвижение ролика.
Уже на достойном уровне могу разрабатывать на JS, благодаря твоим курсам, спасибо)
Буду признателен за чуть более развёрнутый отзыв)
@@VladilenMinin раньше смотря твоё одно из самых популярных видео на канале про основы JS я еле улавливал суть и понимание языка. Сейчас же, я хоть и не так быстро, но способен решить поставленные задачи, понимаю ход твоих мыслей в видео и часто действую на опережение. Меня очень радует, что я сам уже смог решить большое количество задач на чистом JavaScript`e.
*оффтоп* : допустим видео про авторизацию где можно было задавать вопросы, после его просмотра я решил его чуть доработать, поставил себе задачи - 1. Добавить проверку с firebase и localstorage т.е., если вопроса уже нет в базе, то он удаляется из localstorage. 2. Добавить функцию удаления вопроса локально (на клиенте, удалится только из localstorage) и глобально (удалится из базы, но функция доступна только с авторизацией). Вроде не сложные задачи, но я сам трудился над их решением около двух дней, в итоге всё получилось и я очень рад.
ещё один случай с ролика про загрузку файлов, тоже после просмотра решил немного улучшить его и чтобы он был полезен - 1. После загрузки файлов текст с процентами загрузки меняется на ссылку "поделиться" по нажатию которой ссылка с фото сохраняется в буфер обмена. Вроде не сложная задача и я также подумал, решил её за пару минут, но как оказалась если загрузить большое количество файлов ссылки будут некорректно вести на нужное фото, т.е. на сайте картинка одна, копируешь ссылку, открываешь, а фото другое. Как я понял это из-за того, что на итерации массива сейчас один какой-то DIV, а фото загружаются же не поочередно, а все сразу, поэтому ссылка может на другое фото прийти раньше. Но я нашел решение и это меня тоже очень сильно порадовало, что я сам смог решить эту задачу.
Извиняюсь за такой длинный оффтоп))
@@hom00x Так, я пожалуй сделаю всё тоже самое ^~^
33:00 самый сок начало
37:19 настройка - меняем порт
37:35 nom run ____ запускаем с настройкой
40:00 подключаем css через import
40:40 про режимы сборки Parcel ..build..
41:42 npm run build .. запуск сборки проекта
42:45 no source maps .. уберём лишнее из папки
1:12:25 про классы подробней
Спасибо за видео!
Посмотрю позже, но лайк поставлю. 100% пушка контент, спасибо
Огонь! Владилен - ты супер!
Владилен, благодарю!
Respect из Армении
Спасибо за труд за бесплатные и прекрасные курсы
Просто офигенно здорово! Каждые пару минут останавливаю ролик и пишу сам по своему пониманию - первый раз такое, после всех курсов! Лучший в мире курс, имхо.
Автору низкий поклон за нереально эффективный учебный материал!
Супер👍👍👍, благодарю!
Очень круто!)))