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

Сверстаем сайт интернет магазина. Главная страница с каталогом товаров. Верстка на Gulp сборке. HTML, SCSS, JS. Мобильная адаптация.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 16 Декабря 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 23 Декабря 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

ТАЙМ КОДЫ:

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.]

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

[anatol]

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

[ВераСуворова-зщ]

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

[SergDes-jw]

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

[mikhailzvorygin]

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

[ИгорьБражный]

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

[frond-end_dev]

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

[elkazmakaz]

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

[ВладаВирыч]

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

[autlady]

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

[ИгорьБражный]

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

[ViverMan]

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

[SuperCRUSH]

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

[deyvidasb]

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

[Venitch.]

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

[SuperCRUSH]

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

[pavelglushkov]

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

[sergekashin]

Нашел довольно простой способ замены путей к картинкам в галп сборке.
Устанавливается плагин gulp-replace
И каким то магическим образом уже при введении пути @img VS Code подсказывает путь к картинкам в рабочей папке SRC, а при компиляции заменяет его на путь в build, не нужно писать длинного регулярного выражения.

[bonafidesjo]

Еще не досмотрела до конца. Большое спасибо за такой обучающий ролик! Очень много фишек для себя взяла. Ранее не пользовалась переменными в верстке. Также ни разу еще не применяла json как шаблон. Очень круто и удобно, оказывается!

Вопрос только по swiper. Вот мы изменили файлы в node modules, удалив из свайпера переключатель, задав ему свой стиль, и оставив его в своих файлах. А вот, когда следующий верстальщик возьмет такую версию, установит все ноды по package, у него разве ноды не стандартные установятся? и не будет ли тогда опять, стандартный вид переключателя, с которым мы так долго боролись?