Верстка сайта с нуля. Агрегатор онлайн курсов. Часть 1
Рет қаралды 1,302
Күн бұрынВсем привет. Верстаем большой адаптивный сайт - агрегатор онлайн курсов с нуля и до финальной выгрузки. Используемый стек технологий - Pug, SCSS, HTML, JavaScript, Gulp.
Приятного просмотра.
Github проекта github.com/FARCER/frontcoder-... (папка agregator)
Ссылка на макет www.figma.com/file/2CxseSo54r...
Содержание:
00:00 - Вступление
05:35 - Начинаем делать свою gulp сборку
43:10 - Начинаем работу над проектом
02:09:00 - Итоги
-----------------------------------------------------------------------------------
Плейлисты моего канала, которые также могут быть вам интересны
Верстка сайта #10. PSD 2 HTML . Верстка сайта по продаже строительных материалов - bit.ly/2kIF3Ov
Chrome DevTools - bit.ly/33IfApM
Учим программирование через игры - bit.ly/2CEGkvq
Верстка интернет - магазина - bit.ly/2CvE75h
Собери свою сборку на gulp4 - bit.ly/32IwCTa
Секреты Frontend Разработчика - bit.ly/2X7a3X6
Практикум JavaScript - bit.ly/2DPk3LK
Основы JavaScript - bit.ly/2Rr7rT4
-----------------------------------------------------------------------------------
✅ ВК - frontcoder
✅ Чат Telegram - t.me/frontcoder
✅ Boosty - boosty.to/frontcoder
✅ Поддержать канал - boosty.to/frontcoder/donate
-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)
@vetero4eg 2 ай бұрын
С возвращением, будет опять кого новичкам советовать:)
@Frontcoder 2 ай бұрын
Спасибо! Рад, что вам нравится!
@Frontcoder 3 ай бұрын
Всем привет друзья. Рад представить вам новое видео на канале. Надеюсь оно вам понравится. Прошу прощения за звук во второй части урока. В следующих видео такого не повторится. Приятного вам просмотра
@xMurieLLx 3 ай бұрын
Да он и в первой части не шикарный, к слову, как и в видео до этого
@Frontcoder 3 ай бұрын
@@xMurieLLx Как только стану миллионером, сразу смогу позволить себе хорошее оборудование для записи. Пока что увы, прошу меня извинить(
@xMurieLLx 3 ай бұрын
@@Frontcoder Нормальные наушники steelseries с микрофоном, который качественно пишет звук, стоят 3-5 т.руб. И качество звука в разы лучше, чем яблочные
@TsA1ex 3 ай бұрын
Даже какой-нибудь Fifine а Алика за 1000 будет в разы лучше даже steel series
@Frontcoder 3 ай бұрын
Спасибо за совет. К следующему видео попробую на озоне найти его и опробовать.
@user-vm2cn9dy1v 2 ай бұрын
Привет, почему не используешь Dev Mode в Figma?
@Frontcoder 2 ай бұрын
Привет. Так он же вроде платный стал, но я про него узнал только когда он платным стал. Не вижу смысла зачем он нужен
@rightball1629 Ай бұрын
Привет,сталкивался ли ты с проблемой обработки изображений gulp”ом.После сборки фотографии ломаются,неотображающихся на html и в целом через винду не открываются, пишет -неизвестный формат изображения и вес ровно в 2 раза больше этого изображен я становится
@Frontcoder Ай бұрын
Привет. Нет, такого не было
@rightball1629 Ай бұрын
@@Frontcoder разобрался,Это gulp 5 тупит, откатил до 4 и всё ок
@user-tw1ov9bg6v 3 ай бұрын
Просмотрел для ознакомления, что нужно изучать. На мой взгляд полезно забегать в перед и на примере таких проектов видеть план дальнейших действий. Теперь начну смотреть базовые урок по angular, так как имею опыт в верстке и в js . Благодарю за практическую информацию как раз для развитие моего проекта очень полезно. Жду следующих уроков.
@lxb24 3 ай бұрын
Не могли бы вы прикрепить ссылку на сам макет?
@Frontcoder 3 ай бұрын
Конечно, прошу прощения что забыл про нее. Ссылка добавлена в описание
@andyanatolich 3 ай бұрын
У меня пишет: code: 'ERR_REQUIRE_ESM' и сборка не работает. Подскажите, пожалуйста, как исправить?
@Frontcoder 3 ай бұрын
Ответил под другим комментом
@andyanatolich 3 ай бұрын
А как откатить del до старой версии?
@Frontcoder 3 ай бұрын
В файле package.json просто исправьте версию. Я в видео показывал. Иши скачайте сборку с гитхаб. Там посмотрите версию
@user-jm1wj5nn3u 3 ай бұрын
А когда продолжение?
@Frontcoder 3 ай бұрын
Добрый день. Вторая часть уже есть на канале. Третья в самое ближайшее время
@TsA1ex 3 ай бұрын
Gulp еще жив? Или это реинкарнация старого видео? Уже даже webpack умер. Vite сейчас В чём связь с фреймворком. Мы же сейчас за сборщик говорим
@Frontcoder 3 ай бұрын
Gulp более чем жив. Больше млн скачиваний в неделю. Иногда бывают ситуации, когда нужна просто вёрстка. И нам нужно только оптимизировать некоторые процессы. Pug => html, scss=>css и др. Для этого gulp более чем достаточно. В любом случае данноый курс нацелен не на обучение gulp, а на верстку. Gulp лишь вспомогательный инструмент
@mushnikov35 3 ай бұрын
Если скинешь адекватную сборку на vite которая покрывает все вопросы с svg спрайтами, оптимизацией картинок, настроенным pug, и прочими моментами что умеет делать gulp и его плагины, то буду очень благодарен !
@TsA1ex 3 ай бұрын
@@mushnikov35 разве там нужна сборка? Вроде как всё из коробки автоматом работает и оптимизирует. Там не сборки, а плагины. vite-plugin-pug например
@user-ke4cy3cl2s 3 ай бұрын
я б не стал использовать предпроцессор pug
@Frontcoder 3 ай бұрын
А почему? Чем он плох?
@user-ke4cy3cl2s 3 ай бұрын
@@Frontcoder ну во первых постоянно соблюдать вложенность. не удобно во вторых проигрывает удобству gulp-file-include, ну или на крайняк panini
@vetero4eg 2 ай бұрын
@@user-ke4cy3cl2sпанини сильно уступает по возможностям. В pug нет ничего сложного.
@andyanatolich 3 ай бұрын
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\My_projects\Online_Course Aggregator ode_modules\del\index.js from D:\My_projects\Online_Course Aggregator\gulpfile.js not supported. Instead change the require of index.js in D:\My_projects\Online_Course Aggregator\gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object. (D:\My_projects\Online_Course Aggregator\gulpfile.js:5:13) { code: 'ERR_REQUIRE_ESM' } Вот что пишет после исправления версии del. Как это исправить, подскажите, пожалуйста?
@Frontcoder 3 ай бұрын
Могу предложить попробовать 3 варианта 1. Удалить node_modules Папку и установить npm i заного 2. Взять проект с гитхаба и если он запуститься корректно то сравнить со своим и найти ошибку 3. Попробовать найти решение в гугле самостоятелно
KOTELOV
Рет қаралды 12 М.
Типичный Веб Разработчик
Рет қаралды 8 М.
Фрілансер по життю
Рет қаралды 1,2 МЛН