Верстка сайта HTML SCSS из Figma на Gulp сборке. Проект Modimal. Адаптивная верстка. 4K

Верстка сайта интернет магазина по макету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. Swiper слайдер. Мобильная навигация. Аккордеон.

Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается.

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

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

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

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

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

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

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

Тайм коды:

00:00 Начало ролика
01:26 Макет
03:06 Gulp cборка
14:07 Структура сборки
12:30 Стартовый шаблон. Фишка с retina
14:07 Структура сборки
17:07 Очистка стартового шаблона
19:33 Экспорт графики
28:53 Подключение шрифтов
31:54 Размер контейнера
33:28 Переменные

37:01 Секция Top Info
42:43 Курсы ВебКадеми
44:07 Шапка
1:07:10 Секция Hero
1:19:04 Секция Best Sellers
1:31:50 Карточка c товаром
1:53:20 JSON файл с данными и шаблон карточки

2:01:41 Swiper слайдер
2:22:52 Секция Collection
2:34:14 Секция Follow Us
2:41:09 Подвал

2:43:01 Мобильная адаптация
2:47:41 Фикс для Swiper слайдера
2:50:21 Адаптация навигации
2:53:39 Точка перелома для мобилки
2:54:19 Адаптация секции top-info
2:56:19 Мобильная адаптация шапки
3:06:16 Адаптация секции Hero
3:09:32 Фикс кнопки
3:12:23 Адаптация Best Sellers
3:14:41 Адаптация Swiper
3:18:21 Адаптация карточек
3:25:02 Адаптация Collection
3:32:43 Адаптация Follow Us

3:38:47 Мобильная навигация
3:41:51 Кнопка мобильной навигации
3:43:58 Отображение мобильной навигации
3:46:30 Верстка мобильной навигации
4:03:54 Аккордеон в мобильной навигации
4:16:06 Аккордеон закрытие блоков
4:21:44 Верстка кнопок в моб навигации
4:28:20 Публикация проекта на GitHub Pages.
4:37:26 Загрузка всего проекта с исходниками
4:41:46 Завершение

[hwouvcr]

Спасибо вам за прекрасную работу!!! С удовольствием посмотрел это видеою Объяснения все доступные и понятные, а также почти каждое действие сопроводили откуда, зачем и почему. Всё супер!

[curious]

Здравствуйте, Юрий! Я часто заглядываю на ваш канал, чтобы посмотреть новые видео с вёрсткой, и каждый раз расстраиваюсь, когда обнаруживаю, что видео не вышло. Последнее было выпущено 4 месяца назад.
Однако, когда я смотрю новое видео с вёрсткой, я вижу, что всё это время велась активная работа над обновлением сборки, созданием макета и подготовкой ролика. Кстати, изображение на рабочем столе и задний фон прекрасно сочетаются друг с другом! Сразу видно, что вы уделяете особое внимание качеству картинки!
Было очень приятно наблюдать за вашей работой и слушать вас. Огромное спасибо за ваш труд!

[ViverMan]

Благодарю за верстку с подробным объяснением!

[xjncnkn]

спасибо за шикарный мастер-класс! нашла ваш канал по запросу "настройка gulpfile", где ваше видео было первым, а тут ещё столько полезных материалов! большое спасибо, что делитесь опытом и знаниями =) успехов вам!

[mykytav]

Cпасибо вам Юра, отличный мастер-класс

[ikn]

Юрий, приветствую, будет ли ролик про то, как правильно натягивать на wp такую верстку?

[aleksandrprokudin]

Юрий, спасибо огромное за очередной мастер-класс! Есть вопрос: как вызвать в этой сборке режим разработчика, чтобы была возможность продебажить джс? По умолчанию все компиллируется только в бандл, dev с флагами и без не дали результата. У меня есть прописанный конфиг для этой задачи, который я добавил в вашу сборку, но может есть решение проще, а я не в курсе?)

[MrRevCrew]

Подскажите, вы работаете с натяжкой верски на wordpress? Если да, то хотелось бы узнать, как лучше поднастроить сборку, чтобы было удобно сажать верстку на wp в дальнейшем

[stasclear]

А если переключится в режим кода, то видно все стили же.

[ojocdww]

Привет, всем ! Фавиконки не подгружаются на странице .. Создаю сайт совместно с вами. Повторяю все за автором . Подскажите что надо еще сделать чтоб они отобразились ?

[gtaplayer]

Юрий, спасибо за видео. Какой программой вы автоматически меняете русские буквы на английские? Например, когда вы пишете по ошибке на русском вместо английского, вы переключаете написанные буквы на замену их английскими

[womwykh]

​​Подскажите пожалуйста, давно хотео у вас спросить. Как на вашей сборке галп верстать многостраничные сайты ? Создавать отдельную папку для других страниц или оставлять хтмл на уровне индекса? И как галп будет это компилировать ?

[shavor]

при запуске gulp выдает ошибку: Error in plugin "gulp-imagemin" И выбрасывает из запуска. Обидно.

[ojocdww]

А что за файл .DS_Store? Что он делает? его удалить можно?

[narotash]

У меня не получается добавить фавикон, в папку сборки в img добавляю картинки скаченные из фигмы, но они не встают на место

[jesterjester]

Юрий, здравствуйте!
на 1.58 - пишет В visual studio code: "special characters must be escaped : [ < ] (spec-char-escape"
есть варианты, как настроить этот знак? ((
скажите пожалуйста

[wqposii]

Я наверное чего-то не понял: # Обновленная версия от 05.08.2024. Это как?

[afummatodigia]

я повторил за вами и не понять в чем не работают стили top-info

[fhqrtdx]

Для чего всё это? Не пойму как это поможет в жизни? Онлайн магазины не кто не посещает. Или я ошибаюсь?

[_cm]

Супер! Все получилось отлично. Делаю второй проект на этой сборке. Как изменить цвет svg при ховере, если подключать svg по ссылке?