filmov
tv
Верстка сайта 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 Завершение
Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на 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 Завершение
Комментарии