Верстка сайта интернет магазина по макету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. Swiper слайдер. Мобильная навигация. Аккордеон. Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается. Макет, материалы и готовый код будут в этом канале 16 Апреля: https://t.me/+9XtDDNBdHAk4Yjhi :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/ :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/ Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/ Обучение с наставником, 3 месяца, результат, гарантия. 💻 Курс "Разработка сайтов на PHP + MySQL": https://webcademy.ru/phpcourse/ Создание сайтов с системой управления. Присоединиться к курсу можно прямо сейчас. 🏁 Обучение с нуля 💁♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💈 Сайт школы ВебКадеми: https://webcademy.ru/ 💈 Вступайте в группу Вконтакте: https://vk.com/webcademy 💈 Подписывайтесь на Telegram: https://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 Завершение #HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js #уроки #бесплатно #курс #rutube #Rutube #RUTUBE #рутуб #Рутуб #РУТУБ #ЮрийКлючевский