26.9 тыс
0
1.2 млн
Общество
ВебКадеми - веб-разработка, программирование и IT
Верстка сайта HTML SCSS из Figma на Gulp сборке. Проект Modimal. Адаптивная верстка. 4K
Верстка сайта интернет магазина по макету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. Swiper слайдер. Мобильная навигация. Аккордеон. Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается. Макет, материалы и готовый код будут в этом канале 16 Апреля:
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" Получить уроки прямо сейчас:
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс "Профессия HTML верстальщик":
Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс "Frontend разработчик. JavaScript + React":
Обучение с наставником, 3 месяца, результат, гарантия. 🏁 Обучение с нуля 💁♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Сайт:
Вконтакте: https://vk.com/webcademy
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 Описание для репозитория readme.md 4:37:26 Загрузка всего проекта с исходниками 4:41:46 Завершение
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" Получить уроки прямо сейчас:
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс "Профессия HTML верстальщик":
Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс "Frontend разработчик. JavaScript + React":
Обучение с наставником, 3 месяца, результат, гарантия. 🏁 Обучение с нуля 💁♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Сайт:
Вконтакте: https://vk.com/webcademy
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 Описание для репозитория readme.md 4:37:26 Загрузка всего проекта с исходниками 4:41:46 Завершение
