HTML верстка сайта каталога интернет магазина на Gulp сборке

Сверстаем сайт интернет магазина. Главная страница с каталогом товаров. Верстка на Gulp сборке. HTML, SCSS, JS. Мобильная адаптация.
Макет и готовый код со стрима в Telegram канале: t.me/+friZxyBu...
Второй стрим. Продолжение верстки: www.youtube.co...
Урок по Gulp сборке: • Gulp сборка - полная и...
Чат верстальщиков ВебКадеми: t.me/+QAxmsKj2...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/ht...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/h...
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 09 Сентября 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/j...
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 16 Сентября 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/p...
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademy...
ТАЙМ КОДЫ:
00:00 Начало стрима.
03:14 Макет. Где взять, как скопировать
05:27 Gulp сборка. Где взять, как запустить
13:55 Чат
15:25 Figma и платный dev mode. Плагин inspect styles
19:30 Чат
21:55 Начало верстки
23:28 Структура файлов в сборке
26:27 Подключение шрифтов
32:38 Верстка рекламного блока. Tagline
1:01:15 Чат
1:13:20 Курс по верстке
1:14:40 Чат
1:17:45 Верстка навигации
1:41:02 Чат
1:42:05 Верстка секции hero
1:49:25 Правка фоновой картинки
1:56:45 Контейнер для hero блока
2:03:10 Контент для hero блока
2:19:55 Чат
2:23:45 Секция New Arrivals
2:40:20 Верстка карточки
3:18:50 Чат
3:24:30 Данные и цикл для вывода карточек
3:42:00 Swiper
3:53:50 Чат
3:57:10 Настройка Swiper
4:46:15 Верстка секции Shop Collection
5:02:35 Чат
5:05:15 Retina для Shop Collection
5:07:35 Секция Best Seller
5:20:35 Чат
5:26:44 Секция Promotion
5:51:45 Верстка таймера
6:02:05 Организация скриптов
6:05:55 Скрипты для таймера
6:25:00 Чат
6:26:50 Действия по завершению таймера
6:35:00 Чат
6:37:00 Верстка с Chat GPT
6:46:00 Верстка секции Values
7:00:50 Верстка Newsletter
7:20:30 Верстка Footer
7:42:00 Завершение. Проверка макета. Чат

[@olgan.5072]

Прекрасная подача материала, масса полезной информации, спасибо Юрий за ваш труд!

[@user-gj9mn2yt6m]

Смотрю в записи, но так хочется ставить ❤❤ и огонёчки. Заряжает позитивом) спасибо огромное!

[@user-mw4um7vo4q]

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

[@user-frond-end_dev]

очень круто! низкий поклон за вашу выдержку и терпение))))..... от души благодарю

[@anatoliikotenko5924]

Благодарю, Юрий! Продолжаю смотреть в записи,- супер!

[@user-tc9ju1wi8f]

Юра, здравствуйте! Спасибо Вам за проделанную работу и за стрим!

[@user-nl2qw1su9y]

Очень крутые мастер-классы! Спасибо!

[@elkazmakaz5870]

1:41:02 - такой угарный момент, особенно когда я сам заметил пару минут назад, что новых комментариев вообще нет :D. Юрий, очень крутой стрим, я с удовольствием конспектирую многие приемы и наработки. Долгий будет просмотр)

[@user-cq1ds5un5g]

Ура,я Герой(по номинации просмотр в записи)!Спасибо вам за отличный материал, сборка классная=)

[@SuperCRUSH007]

в фигме центр блока можно увидеть через паддинги.... кликаем на широкий блок(от края до края), и зажимаем альт, что бы увидеть растояние до др блока... Красная линия выходит ровно из центра.

[@sergekashin8527]

Нашел довольно простой способ замены путей к картинкам в галп сборке. Устанавливается плагин gulp-replace В файлах HTML пишется путь к картинкам В файле-задаче обработки html-файлов пишется код .pipe(replace(/@img\//g, 'img/')) - "img/" это путь к картинкам который будет у вас в build'e И каким то магическим образом уже при введении пути @img VS Code подсказывает путь к картинкам в рабочей папке SRC, а при компиляции заменяет его на путь в build, не нужно писать длинного регулярного выражения.

[@WebCademy]

Надо проверить лично, но если работает - то это отличное решение, без регулярных выражений.

[@user-rw5gn7ub9e]

Если учиться то только с ВебКадеми!!! Супер контент!!!

[@mikhailzvorygin1841]

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

[@autlady]

Смотрю в записи, спасибо огромное за стрим, Юрий 👍

[@user-cq1ds5un5g]

Очень хорошая сборка, ничего не разваливается и не виснет. Второй раз ее использую.

[@ViverMan]

Привет. В начале видео говорил про плагин Inspect Styles, а сам им не пользовался, прописывал стили к текстам руками, искал всё это в фигме, хотя можно было просто скопировать из плагина, что сэкономило бы время. И еще, затрагивал идею писать блоки без пояснений, а я считаю, что твои видео супер интересны именно из-за твоих пояснений, а не просто сидеть и молча писать код. Это же рассчитано для новичков , а сухой код без подробностей можно много где найти. Спасибо за верстку с пояснениями! Лайк, подписка и т.д. )

[@WebCademy]

Спасибо за комментарий, комментарии принимаются, учту на следующих стримах. 👍

[@deyvidasb1769]

Я со swaiper провозился долго (никак не получалось...) в итоге, самое лучшее как по мне, так это в header подключить сначала swiper стили (по урлу), затем свои стили (на одну строчку ниже), так переопределять отдельные атрибуты классов вообще не сложно... и копировать ничего не надо из исходников...

[@BryanskyM]

Очень много полезного. Спасибо

[@SuperCRUSH007]

Здравствуйте смотрю ваши видео постоянно... по поводу Swiper и его пагинации... При обьявлении пагинации в JS, после el:...., также можно обьявить и bulletClass, bulletActiveClass... У меня все сработало...

[@user-xj1oq7bu3y]

огонь🥰 новый выпуск топ

[@pavelglushkov8778]

Смотрю стрим этот уже неделю и верстаю вместе с тобой. Было бы круто посмотреть что-то на Reacte + TS или Next.js

[@Venitch.]

спасибо за урок, сверстал за несколько дней, заменил всех негров на девок, получилось неплохо...;)

[@EvgeniyNext]

Спасибо вам большое

[@deyvidasb1769]

Для тех кто в VSCode есть классное расширение для подсказки переменных из .*css файлов (CSS Variable Autocomplete)

[@mmosow]

Юра привет, можешь записать тутор по HTMX библиотечке, инфы на русском 0 в гугле, больше общие статьи.

[@user-wo4mw5yk7h]

объясните пожалуйста как margin-bottom: 50% у блока plate задал такую высоту, которая указана в макете

[@Rapaport2012]

звездочки наверное для оценки пользователем товара, а не рейтинг товара.

[@WebCademy]

Оценка происходит после заказа, на специальной странице. А на главной просто выводим рейтинг.

[@zakirov.a.e]

Почему вместо переменных :root {--} и var(--) в SCSS не используете через $?

[@NivaiZRUS]

Заметил такой баг. Автопрефиксер не работает в файлах с нижним подчеркиваем (это же в варианте для прода, в папке docs). Такая же фигня с картой кода на стилях. В main.css идут из файлов scss. Как поправить эти баги?

[@helloeveryone147]

а почему не используешь амперсанды и вложенность? =\

[@deyvidasb1769]

А зачем для расчета line-height использовать калькулятор? можно-же просто сделать calc(lh / fs) так даже более явно! ))

[@WebCademy]

Можно, мне удобнее посчитать и записать 1.5 чем писать calc для него.

[@Prorok1987]

Где взять макет для верстки?

[@anka10101010]

Похоже, что галп - это для маленьких проектов, как раз для фриланса небольшого. Посмотрела на кворке, пишут что их фрилансеры в среднем зарабатывают 30к в месяц. В общем, верстка - это база и ее нужно знать 100%, но лучше наверное не тратить время на галп, а сразу разбирать вебпак какой-нибудь, вит, чтобы учить стек для больших проектов и офисной работы. Не вижу особых перспектив в ру-фрилансе с такими ставками. Хотя кто-то наверняка зарабатывает и стони тысяч, но сколько лет надо такой аккаунт раскручивать:)

[@whiteltd5970]

webpac тоже староват для текущих реалий ) vite выход из ситуации )

[@kerusdc8322]

где взять сборку gulp? по ссылке в телегу сборки нету от 28 августа 2023г

[@WebCademy]

Первая ссылка в описании, t.me/+friZxyBulgNmYjE6 смотрите в этом канале. 28 Июня 2023

[@kerusdc8322]

@@WebCademy спасибо! почему-то в августе искал😅

[@romanzinchuk681]

сколько приблизительно стоимость такой верстки?!

[@WebCademy]

От 6 до 12 тыс. рублей, на сколько договоритесь.

[@xaosland]

высота 349, ширина 262. В своем уме?

[@whiteltd5970]

Автор уважаю вас, но зачем gulp если есть vite ? Gulp не является актуальным в 2024м году, я считаю что стыдно использовать старые технологии по типу PHP, JQery, Gupl - это мое мнение и вы можете с ним не согласиться что является нормальным! Лишь хочу вам сказать что есть что-то новое и проверенное временем, надеюсь вы задумаетесь о более современных технологиях и что бы вы учили людей тоже современному. Вам и вашим окружающим добра!

[@WebCademy]

Стрим был по верстке. Если бы frontend приложение тогда vite. Вас услышал, спасибо за комментарий.

[@user-kf5yx3jm2o]

@@WebCademyон написал что php не актуален в 2024 году

[@vadok111]

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

[@WebCademy]

Приветствую. Спасибо за комментарий. Если взять видео на канале - то их я готовлю с пошаговыми объяснениями без изменений по ходу повествования. Рекомендую посмотреть их, например kzbin.info/www/bejne/nqCXq4mIlrZphdk Стримы - это live, и не всегда с первого раза пишется лучшее решение. Понимаю запрос Урок для уверенных верстальщиков. Для тех кто уже бегло верстает, и в этом стриме вижу ценность именно в применении сборки и точечных фишках.