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

Рет қаралды 10,601

Күн бұрын

Верстка сайта интернет магазина по макету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. Swiper слайдер. Мобильная навигация. Аккордеон.
Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается.
Макет, материалы и готовый код будут в этом канале 16 Апреля: t.me/+9XtDDNBdHAk4Yjhi
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Тайм коды:
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:34:06 Описание для репозитория readme.md
4:37:26 Загрузка всего проекта с исходниками
4:41:46 Завершение

Пікірлер: 46

@curious001 Ай бұрын

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

@WebCademy Ай бұрын

Илья, благодарю за развернутый комментарий. Да, давно не было именно роликов. Были два больших стрима, но понимаю что пересматривать их (даже с тайм кодами) не так удобно как смотреть видео. Вот пришла пора) Сборка сейчас действительно очень крутая, многое на автомате, в сочетании с сниппетами и миксинами, а еще и Inspect Styles - верстать становится гараздо удобнее.

@ViverMan Ай бұрын

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

@user-xj9nc8nk7n Ай бұрын

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

@aaronmakepeace8126 Ай бұрын

Надеюсь стрим останется в записи

@mykytav Ай бұрын

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

@vbvb2805 Ай бұрын

Привет Юр. Спасибо за хороший макет

@ikn7968 26 күн бұрын

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

@Inno4ka777 2 ай бұрын

Ждем

@albertrockalfredo8250 Ай бұрын

Круть

@aleksandrprokudin4715 Ай бұрын

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

@user-nn9qy1yh3s Ай бұрын

запись будет стрима ?

@MrRevCrew Ай бұрын

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

@line_delay Ай бұрын

это стрим записи?

@user-wo4mw5yk7h Ай бұрын

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

@WebCademy Ай бұрын

Оставлять на уровне index.html. Там же на старте и так 2 страницы, index.html и docs.html. И все собирается отлично. Секции и другие составные части сохранять в папку blocks.

@gtaplayer4145 Ай бұрын

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

@WebCademy Ай бұрын

У меня Caramba на MacOS, для Windows есть PuntoSwitcher.

@gtaplayer4145 Ай бұрын

@@WebCademy , спасибо вам за ответ, пользовался раньше, установлю его снова

@stasclear 20 күн бұрын

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

@user-oj4oc4dw4w 4 күн бұрын

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

@denis_web_dev Ай бұрын

Это запись?

@qwerty-jc7ix Ай бұрын

всем привет

@user-oj4oc4dw4w 3 күн бұрын

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

@shavor1000 Ай бұрын

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

@WebCademy Ай бұрын

Напишите в наш чат или в комментарии в канал в Телеге. Со скриншотом ошибки.

@shavor1000 Ай бұрын

@@WebCademyСпасибо за ответ на мой комментарий. Но сборка собралась и gulp не подвел) Заработал как надо. Скорее всего я где-то накосячил!!!

@jesterjester3836 Ай бұрын

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

@WebCademy Ай бұрын

Добрый день. Я просто игнорирую его.

@jesterjester3836 Ай бұрын

@@WebCademy Юрий, тогда я не понимаю, почему VC не видит цвета в : @@for(var i = 0; i < context.colors.length; i++) { } так как в products img, title и другие видит...а "colors" нет... как вы думаете в чём может быть ошибка у меня((??? заранее спасибо Вам за ответ.

@igoryavchenko3973 Ай бұрын

Участвую

@user-my9mu5md8s 2 ай бұрын

дарова ребят

@narotash6721 Ай бұрын

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

@WebCademy Ай бұрын

webcademy.ru/blog/1097/

@user-wq3po9si9i Ай бұрын

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

@WebCademy Ай бұрын

Опечатка. В Заметки по сборке.md увидели? Там должно было быть 05.03.2023

@user-fh8qr4td6x Ай бұрын

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

@WebCademy Ай бұрын

1. Это для тех кто учит верстку, чтобы после использовать её в своей работе. 2. Вы ошибаетесь.

@SurprisedBloomingFlower-us2qd Ай бұрын

Вы что идиот? Вы что не знаете что такое Amazon или Aliexpress?

@t.i.i8608 Ай бұрын

Мне нужно, так как я работаю с gulp, и я уверен, что оно будет полезным не только для меня, но и для всех, кто использует gulp для верстки сайтов.

@afummatodigia1194 Ай бұрын

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

@WebCademy Ай бұрын

Сравните с готовым кодом.

@afummatodigia1194 Ай бұрын

@@WebCademy спасибо

@18_cm Ай бұрын

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

@user-yb5bx2ki4q Ай бұрын

А где сборку найти?

@WebCademy Ай бұрын

В ТГ канале. Ссылка в описании.