Верстка сайта с нуля. Агрегатор онлайн курсов. Часть 1
HTML-код
- Опубликовано: 27 июн 2024
- Всем привет. Верстаем большой адаптивный сайт - агрегатор онлайн курсов с нуля и до финальной выгрузки. Используемый стек технологий - 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
-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)
С возвращением, будет опять кого новичкам советовать:)
Спасибо! Рад, что вам нравится!
Просмотрел для ознакомления, что нужно изучать. На мой взгляд полезно забегать в перед и на примере таких проектов видеть план дальнейших действий. Теперь начну смотреть базовые урок по angular, так как имею опыт в верстке и в js . Благодарю за практическую информацию как раз для развитие моего проекта очень полезно. Жду следующих уроков.
Всем привет друзья. Рад представить вам новое видео на канале. Надеюсь оно вам понравится. Прошу прощения за звук во второй части урока. В следующих видео такого не повторится. Приятного вам просмотра
Да он и в первой части не шикарный, к слову, как и в видео до этого
@@xMurieLLx Как только стану миллионером, сразу смогу позволить себе хорошее оборудование для записи. Пока что увы, прошу меня извинить(
@@Frontcoder Нормальные наушники steelseries с микрофоном, который качественно пишет звук, стоят 3-5 т.руб. И качество звука в разы лучше, чем яблочные
Даже какой-нибудь Fifine а Алика за 1000 будет в разы лучше даже steel series
Спасибо за совет. К следующему видео попробую на озоне найти его и опробовать.
Привет, почему не используешь Dev Mode в Figma?
Привет. Так он же вроде платный стал, но я про него узнал только когда он платным стал. Не вижу смысла зачем он нужен
Привет,сталкивался ли ты с проблемой обработки изображений gulp”ом.После сборки фотографии ломаются,неотображающихся на html и в целом через винду не открываются, пишет -неизвестный формат изображения и вес ровно в 2 раза больше этого изображен я становится
Привет. Нет, такого не было
@@Frontcoder разобрался,Это gulp 5 тупит, откатил до 4 и всё ок
Не могли бы вы прикрепить ссылку на сам макет?
Конечно, прошу прощения что забыл про нее. Ссылка добавлена в описание
А когда продолжение?
Добрый день. Вторая часть уже есть на канале. Третья в самое ближайшее время
У меня пишет: code: 'ERR_REQUIRE_ESM' и сборка не работает. Подскажите, пожалуйста, как исправить?
Ответил под другим комментом
А как откатить del до старой версии?
В файле package.json просто исправьте версию. Я в видео показывал. Иши скачайте сборку с гитхаб. Там посмотрите версию
Gulp еще жив? Или это реинкарнация старого видео? Уже даже webpack умер.
Vite сейчас
В чём связь с фреймворком. Мы же сейчас за сборщик говорим
Gulp более чем жив. Больше млн скачиваний в неделю. Иногда бывают ситуации, когда нужна просто вёрстка. И нам нужно только оптимизировать некоторые процессы. Pug => html, scss=>css и др. Для этого gulp более чем достаточно. В любом случае данноый курс нацелен не на обучение gulp, а на верстку. Gulp лишь вспомогательный инструмент
Если скинешь адекватную сборку на vite которая покрывает все вопросы с svg спрайтами, оптимизацией картинок, настроенным pug, и прочими моментами что умеет делать gulp и его плагины, то буду очень благодарен !
@@mushnikov35 разве там нужна сборка? Вроде как всё из коробки автоматом работает и оптимизирует. Там не сборки, а плагины. vite-plugin-pug например
я б не стал использовать предпроцессор pug
А почему? Чем он плох?
@@Frontcoder ну во первых постоянно соблюдать вложенность.
не удобно
во вторых проигрывает удобству gulp-file-include, ну или на крайняк panini
@@user-ke4cy3cl2sпанини сильно уступает по возможностям. В pug нет ничего сложного.
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. Как это исправить, подскажите, пожалуйста?
Могу предложить попробовать 3 варианта
1. Удалить node_modules Папку и установить npm i заного
2. Взять проект с гитхаба и если он запуститься корректно то сравнить со своим и найти ошибку
3. Попробовать найти решение в гугле самостоятелно