HTML CSS верстка сайта главной страницы интернет-магазина Panto. Swiper, retina, CSS clamp. Часть 2
Мастер класс по HTML CSS/SCSS верстке главной страницы интернет магазина с JavaScript интерактивом, табами и Swiper слайдером, и мобильной адаптацией. Использование новых CSS функций clamp, свойства aspect-ration, CSS переменными и retina оптимизацией графики в HTML и CSS. Макет: https://www.figma.com/file/2AS6R8XC1GPENt5LxwoRLJ Готовый код в ТГ канале. Пост за 26.11.2023: https://t.me/+9XtDDNBdHAk4Yjhi Чат верстальщиков: https://t.me/+QAxmsKj2HyWfEKzz :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на 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:00 Контент для разных карточек 00:06:35 Верстка кнопок для слайдера 00:11:53 Swiper слайдер. Разметка и подключение 00:24:05 Swiper слайдер. Точки перелома 00:25:45 Подвал. Структура 00:36:59 Подвал. Контент 00:54:29 Фикс. Ширина инпута в поиске 00:56:19 Табы. Подготовка разметки 01:03:58 Табы. JS cкрипт переключения 01:20:01 Табы. Update для слайдера 01:25:25 Табы. Кнопка All для всех товаров 01:26:55 Навигация в шапке. Стрелка вниз 01:30:24 Навигация в шапке. Выпадающее меню 01:45:57 Мобильная адаптация. Навигация в шапке 01:54:38 Верстка мобильной навигации 02:00:27 CSS стили для мобильной навигации 02:17:58 JS код для мобильной навигации 02:23:18 Фикс с position relative для шапки и позиционированием точек 02:29:26 Адаптация контента в шапке 02:54:23 Мобильная адаптация. Секция с текстом 03:07:33 Мобилка. Секция с товарами и слайдером 03:11:15 Мобилка. Слайдер 03:22:25 Мобилка. Подвал 03:32:21 Проверка всего макета на адаптивность 03:35:13 Докрутка шапки на мобилках 03:38:58 Завершение #HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js #уроки #бесплатно #курс #rutube #Rutube #RUTUBE #рутуб #Рутуб #РУТУБ #ЮрийКлючевский #jquery #jQuery #JS #JAVASCRIPT #JavaScript
Мастер класс по HTML CSS/SCSS верстке главной страницы интернет магазина с JavaScript интерактивом, табами и Swiper слайдером, и мобильной адаптацией. Использование новых CSS функций clamp, свойства aspect-ration, CSS переменными и retina оптимизацией графики в HTML и CSS. Макет: https://www.figma.com/file/2AS6R8XC1GPENt5LxwoRLJ Готовый код в ТГ канале. Пост за 26.11.2023: https://t.me/+9XtDDNBdHAk4Yjhi Чат верстальщиков: https://t.me/+QAxmsKj2HyWfEKzz :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на 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:00 Контент для разных карточек 00:06:35 Верстка кнопок для слайдера 00:11:53 Swiper слайдер. Разметка и подключение 00:24:05 Swiper слайдер. Точки перелома 00:25:45 Подвал. Структура 00:36:59 Подвал. Контент 00:54:29 Фикс. Ширина инпута в поиске 00:56:19 Табы. Подготовка разметки 01:03:58 Табы. JS cкрипт переключения 01:20:01 Табы. Update для слайдера 01:25:25 Табы. Кнопка All для всех товаров 01:26:55 Навигация в шапке. Стрелка вниз 01:30:24 Навигация в шапке. Выпадающее меню 01:45:57 Мобильная адаптация. Навигация в шапке 01:54:38 Верстка мобильной навигации 02:00:27 CSS стили для мобильной навигации 02:17:58 JS код для мобильной навигации 02:23:18 Фикс с position relative для шапки и позиционированием точек 02:29:26 Адаптация контента в шапке 02:54:23 Мобильная адаптация. Секция с текстом 03:07:33 Мобилка. Секция с товарами и слайдером 03:11:15 Мобилка. Слайдер 03:22:25 Мобилка. Подвал 03:32:21 Проверка всего макета на адаптивность 03:35:13 Докрутка шапки на мобилках 03:38:58 Завершение #HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js #уроки #бесплатно #курс #rutube #Rutube #RUTUBE #рутуб #Рутуб #РУТУБ #ЮрийКлючевский #jquery #jQuery #JS #JAVASCRIPT #JavaScript