Верстка сайта HTML SCSS из Figma на Gulp сборке. Проект Modimal. Адаптивная верстка. 4K
Верстка сайта интернет магазина по макету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. Swiper слайдер. Мобильная навигация. Аккордеон.
Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается.
Макет, материалы и готовый код будут в этом канале 16 Апреля: 9XtDDNBdHAk4Yjhi
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс “Создай свой первый сайт на HTML5 и CSS3“
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов:
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
💻 Курс “Frontend разработчик. JavaScript React“:
Обучение с наставником, 3 месяца, результат, гарантия.
💻 Курс “Разработка сайтов на PHP MySQL“:
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми:
💈 Вступайте в группу Вконтакте:
💈 Подписывайтесь на Telegram:
Тайм коды:
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 Описание для репозитория
4:37:26 Загрузка всего проекта с исходниками
4:41:46 Завершение
#HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js
2 views
1
0
4 months ago 00:06:32 1
Форма авторизации и регистрации для сайта на HTML, CSS и JavaScript
4 months ago 05:05:31 1
Адаптивная верстка сайта с SCSS и JS. Объясняю по шагам. CSS Grid, БЭМ. Макет LoftHouse
4 months ago 00:16:13 1
Интенсивный курс адаптивная верстка сайта за 15 минут! html css
4 months ago 00:06:12 1
#1 Вводный урок [Курс по Верстке от AROKEN]
4 months ago 00:41:17 1
CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике.
4 months ago 00:08:54 1
Уроки Bootstrap 5 - Введение и установка
4 months ago 00:12:06 1
Junior фронтенд-разработчик: 11 идей проектов для резюме
4 months ago 00:03:34 1
«ВЕРА ВЕЧНА» – МУЖСКОЙ ХОР «РУССКИЙ ФОРМАТ» & АРХИДИАКОН КОНСТАНТИН БАРГАН & АРТЕМ ВАСИЛЕВИЧ
4 months ago 06:41:57 1
Курс по верстке и созданию сайтов с нуля. Все основы HTML / CSS на практике.
4 months ago 00:00:35 1
Интерактивный каталог с перелистыванием страниц
4 months ago 00:17:27 1
6.Создаем крутой слайдер с заменой фона используя HTML,CSS #webdevelopment #web #slider #HTML #CSS
4 months ago 04:29:35 1
Адаптивная верстка интернет магазина с НУЛЯ. Выполняю реальный заказ. Верстка сайта за $150
4 months ago 00:26:50 1
Как сделать профессиональный макет визитки? Как сделать визитку для типографии?
4 months ago 00:12:28 1
Создаём и подключаем базу данных MySQL + PHP | Урок 2
4 months ago 00:11:41 1
Анализируем новый макет в #Figma глазами разработчика
4 months ago 00:35:13 1
Создание потрясающей галереи на HTML, CSS и JavaScript (CSS-анимация, Blur, Parallax, Gradient)
4 months ago 00:07:30 1
Прижать футер к низу сайта (flex, grid). #Типичные задачи