HTML CSS верстка сайта главной страницы интернет-магазина Panto. Swiper, retina, CSS clamp, табы
Рет қаралды 29,868
Күн бұрынМастер класс по HTML CSS/SCSS верстке главной страницы интернет магазина с JavaScript интерактивом, табами и Swiper слайдером, и мобильной адаптацией. Использование новых CSS функций clamp, свойства aspect-ration, CSS переменными и retina оптимизацией графики в HTML и CSS.
Макет: www.figma.com/file/2AS6R8XC1G...
Готовый код в ТГ канале. Пост за 26.11.2023: t.me/+9XtDDNBdHAk4Yjhi
Чат верстальщиков: t.me/+QAxmsKj2HyWfEKzz
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
ТАЙМ КОДЫ
00:00 Введение
01:53 Экспорт графики
09:05 Стартовые проект. CSS переменные
20:09 Шрифты
42:47 Шапка, навигация. HTML разметка
52:28 CSS cтилизация шапки
59:56 Медиазапрос для retina графики в CSS
1:02:12 SCSS миксин для retina медиазапроса
1:04:46 Container
1:06:13 CSS стили для навигации
1:18:04 Иконка с корзиной
1:23:23 Контент в шапку. HTML разметка
1:27:48 CSS стили для контента в шапке
1:35:26 CSS стили для поиска
1:43:09 Интерактивные элементы. Позиционирование первой точки
1:55:17 Интерактивные элементы. Позиционирование остальных
2:01:00 Анимация точек
2:08:04 Фикс позиционирования точек
2:14:52 Подсказки. HTML размекта
2:22:02 CSS стили для подсказок
2:30:44 Скрываем нативные радиокнопки
2:35:14 Иконка для радиокнопки
2:38:42 Позиционирование подсказки
2:41:00 JS. Интерактив для подсказок
2:59:39 Объявление. Курс по JS
3:00:43 Секция c текстом. Разметка и стили
3:11:38 Ссылка more info. CSS стили
3:17:00 Секция с Товарами. Структура
3:21:18 Блок для ссылки read more
3:25:12 Табы. HTML верстка и CSS стили
3:35:03 Карточка товара. Пересохранение графики
3:39:25 Карточка. HTML разметка
3:45:40 Карточка. CSS стили для картинки
3:48:31 Карточка. CSS стили для контента
4:07:04 Карточка. Ссылка на всю карточку
4:10:30 Контент для разных карточек
4:17:05 Верстка кнопок для слайдера
4:22:23 Swiper слайдер. Разметка и подключение
4:34:35 Swiper слайдер. Точки перелома
4:36:15 Подвал. Структура
4:47:29 Подвал. Контент
5:04:59 Фикс. Ширина инпута в поиске
5:06:49 Табы. Подготовка разметки
5:14:28 Табы. JS cкрипт переключения
5:30:31 Табы. Update для слайдера
5:35:55 Табы. Кнопка All для всех товаров
5:37:25 Навигация в шапке. Стрелка вниз
5:40:54 Навигация в шапке. Выпадающее меню
5:56:27 Мобильная адаптация. Навигация в шапке
6:05:08 Верстка мобильной навигации
6:10:57 CSS стили для мобильной навигации
6:28:28 JS код для мобильной навигации
6:33:48 Фикс с position relative для шапки и позиционированием точек
6:39:56 Адаптация контента в шапке
7:04:53 Мобильная адаптация. Секция с текстом
7:18:03 Мобилка. Секция с товарами и слайдером
7:21:45 Мобилка. Слайдер
7:32:55 Мобилка. Подвал
7:42:51 Проверка всего макета на адаптивность
7:45:43 Докрутка шапки на мобилках
7:49:28 Завершение
@stasmelnik 5 күн бұрын
спасибо огромное за этот урок. многое что узнал нового из современной вёрстки)
@neleaonila2191 6 ай бұрын
Юрий, не могу выразить в полной мере благодарность словами, чувства переполняют, всё очень доходчиво и понятно. Мега-насыщенные, 8 часов полезной информации. Сверхчеловеческое спасибо за то, что учите работать умно, а не усердно.
@user-rw5gn7ub9e 2 ай бұрын
Делал в записи все получилось. Узнал много нового! Благодарю вас Юрий за интереснейший мастер-класс и полученные знания!
@Vladimir-lx7fv 6 ай бұрын
Юрий, как всегда супер класс. Много интересного и нового. Очень интересно и познавательно, не возможно оторваться от экрана. Спасибо огромное!!!👍
@elmorimorti8538 15 күн бұрын
Спасибо огромное за интенсив! Я совсем новичок, позанимался несколько занятий по HTML и CSS с ментором и начал этот мастер класс, что позволило сразу узнать очень много информации и дойти до многих вещей. Пока на 3ем часу. Единственное не понял, в хэдере, зачем на вазе, диване, фигурке на столе и на горшке располагать точки путём сложных расчётов, а не просто задать любой процент (не пиксель) и выставить их через инспектор как надо? Вероятно, я не понимаю. Тут люди пишут про ошибки - ошибки это шикарно! Ты их исправляешь в видео позже, а до этого у меня не клеится и приходится самому ломать голову или искать инфу. Это очень полезно. Спасибо за проделанную работу!
@yuriykolomytsyn2352 6 ай бұрын
Юрий, я очень вам благодарен, за то, что вы беретесь показывать нам лучшию практику верстки сложных страниц! очень рад присутствовать на стриме
@WebCademy 6 ай бұрын
Юрий, спасибо за комментарий!)
@eoylka9368 6 ай бұрын
страница вполне простая)
@yuriykolomytsyn2352 6 ай бұрын
@@eoylka9368 клева тебе! Будешь моим ментором?
@andreyzimin88 5 ай бұрын
Очень хорошее объяснение, без воды! Благодарю вас добрый человек
@_Fantom_. 5 ай бұрын
Задаем блоку "nav", свойство: align-items: center; и избавляемся от рутинного добавления свойства: " align-self: center;" каждому отдельному элементу..
@rahim6821 Ай бұрын
Красавчик
@meowmeowmeowmeow000 5 ай бұрын
Спасибо за хороший урок, вы вообще голова
@_Fantom_. 4 ай бұрын
А еще он туловище, руки и ноги.. )
@user-vq1sw9dz5u 6 ай бұрын
Ждем с нетерпением!
@cosmospubgm4765 6 ай бұрын
По больше таких видос 🔥
@biscvie 6 ай бұрын
Спасибо!)
@_Fantom_. 3 ай бұрын
Огромное спасибо Юрий за очень интересную и познавательную практику по верстке! Единственное что, ты забыл обратно отобразить и адаптировать табы в блоке со слайдером, но там в принципе можно обойтись и простым добавлением "flex-wrap: wrap;"
@baytszy 4 ай бұрын
спасибо)
@veraveramona979 6 ай бұрын
Добрый день🌞!
@dmitry5905 4 ай бұрын
@WebCademy Добрый день! Спасибо за мегаполезное видео! Вопрос: а как можно реализовать чтобы цвет дивана менялся при выборе цвета?
@volk5855 6 ай бұрын
Ты крут
@dilmuratidrisov5978 6 ай бұрын
Юрий, Приветствую, спасибо большое тебе за видео урок. Ты забыл на products__tabs сделать адаптивку.
@WebCademy 6 ай бұрын
Привет. Точно, я ее скрыл, и после вообще забыл про неё. Бывает. Ну там несложно в принципе. Задать ей max-width и overflow-x: auto; на мобилках, чтобы скролл появился.
@mmosow 6 ай бұрын
Ждем с нетерпением!!! надеюсь стрим будет до победы, с JS и всем интерактивом!!!
@WebCademy 6 ай бұрын
Будет до победного)
@typhoonx04 6 ай бұрын
Подскажите, а запись будет этого стрима?
@user-vp6bu3fg1o 6 ай бұрын
Было бы круто сверстать многостраничный сайт)))
@umaralifayzullayev 5 ай бұрын
Очень хорошее видео и много чего об css узнал. Теперь приступим к многостраничным сайтам?
@rollersinpubg1168 5 ай бұрын
Вот начал научится очень благодарен за видео, спасибо. Но я замел что забыли адаптировать таба его приписали none чтобы не мешала и таким же остался. 👍👍👍 НЕ ОБРАШАЙТЕ ВНИМАНИЯ НА МОИ ГРАМАТИЧЕМКИЕ ОШИБКИ!!!
@user-sg1ys5hz7h 6 ай бұрын
Добрый день, 5:50:00 при верстке выпадающего меню навигации в шапке использовать opacity 0 не совсем корректно. Если мы будем проходить сайт с помощью таба, то обводка пропадет на некоторое время (в зависимости от кол-во пунктов подменю). Что для пользовательского опыта не очень. Как один из вариантов: opacity: 0 на visibility: hidden и opacity: 1 на visibility: visible; тогда специальные программы озвучивать подменю не будут. (этот вариант подойдет тогда, когда не обязательно озвучивать элементы подменю)
@user-tc9ju1wi8f 3 ай бұрын
Юра, спасибо Вам за мастер-класс! Заметил нюанс в работе слайдера. После манипуляций с товарами, когда фильтруем товары, отображая их по нажатию на разные табы, кнопки Next и Prev начинают сбоить. Они как бы отображаются, но не перелистывают товар. Как будто нажатие по ним не проходит. Если нажимаем на таб All - все восстанавливается.
@user-gs7xn9mk7j 6 ай бұрын
Юрий, а почему в шапке не сделать общему контейнеру align-items: center, вместо того чтобы каждому элементу прописывать align-self: center?
@WebCademy 6 ай бұрын
Не понял про какие элементы имеете ввиду, но конечно, если в ряд выстроили или в колонку, то можно сразу всем элементам задать выравнивание по поперечной оси.
@BryanskyM 5 ай бұрын
Спасибо за видео. Вы забыли адаптировать табы после того как их скрыли, кстати
@vrogislav5638 6 ай бұрын
Подскажите пожалуйста как убрать волнистые линии, подчеркивания, я на русском комментарии пишу и у меня везде волнистые синии линии
@foodreria7438 4 ай бұрын
У меня почему-то не исчезают стрелки в слайдере, когда товаров становится меньше. .swiper-button-lock { display: none; } Перебивают мои стили из ".slider__btn", а именно свойство display: flex
@dimanigay8182 5 ай бұрын
Ребята подскажите какие он плагины он использует в Visual Studio Code при вёрстке 😅
@user-pi7xs1jn6b 2 ай бұрын
Где взять ссылку на codesand box для info-dot?
@KYMF 6 ай бұрын
Добрый день, будет запись?🙏♥️
@saivengo 6 ай бұрын
А макет предварительно нельзя посмотреть?
@user-nh7se1rz4b 6 ай бұрын
а будет запись этого стрима ?
@WebCademy 6 ай бұрын
Будет
@sargisdavtyan6676 3 ай бұрын
5:20:00 Здесь можно вместо for использовать метод find, так как мы будем убирать класс только для активной кнопки const tabButtons = Array.from(document.querySelectorAll('[data-tab]')); tabButtons.forEach(btn => { btn.addEventListener('click', function () { const activeBtn = tabButtons.find(btn => btn.classList.contains('products__tabs-btn--active')); if(activeBtn) activeBtn.classList.remove('products__tabs-btn--active'); this.classList.add('products__tabs-btn--active'); }); });
@irt4040 6 ай бұрын
Можете подсказать, почему у меня свайпер не скрывает стрелки навигации, когда карточек меньше, чем нужно для прокрутки? (Когда даже 1 карточка в bed/chair и тд, то стрелки видны) Код 1 в 1 с видео
@hpbulbasaur8946 6 ай бұрын
ага,тоже стрелки не пропали
@Vasilii_Shtyrov 4 ай бұрын
Почему предпочитаете scss а не sass? У scss есть какие то преимущества или дело вкуса?
@WebCademy 4 ай бұрын
Дело вкуса. SCSS использует синтаксис со скобками, как и CSS и можно легко копировать из CSS в SCSS, не надо удалять скобки. Ну и не нравится вложенность без скобок у SASS. В функционале одинаково.
@Vasilii_Shtyrov 3 ай бұрын
Считаете пора в верстке переходить на rem или остаемся на пикселях? На чем лучше привыкать верстать?
@WebCademy 3 ай бұрын
Можно добавить scss миксин переводящий px в rem и использовать его. Я это не использую. Вручную калькулировать каждый раз px в rem не считаю нужным. Верстаю на px.
@user-yd6nc3zn3f 10 күн бұрын
Привет, спасибо за видео. А как использовать кастомные свойства в scss? Посмотрел несколько ваших уроков с scss и вы везде используете только переменные scss. По какой причине вы не используете кастомные свойства? Дело в том, что я столкнулся с проблемой что vs code в автокомплиде подхватывает только scss переменные из других файлов, а обычные css переменные нет. Вот теперь болит голова, как это победить)
@WebCademy 10 күн бұрын
Иван, приветствую. Не понял что такое "кастомные свойства в scss". Насчет того что я везде использую только scss переменные, поспорил бы. CSS переменные я тоже использую. Имею ввиду не только этот проект, но и другие. А если по вопросу, то я бы посмотрел плагины под VS Code которые будут подсказывать нужные переменные CSS или SCSS.
@user-yd6nc3zn3f 10 күн бұрын
@@WebCademy Юрий, большое спасибо за ответ. Под кастомными свойствами я имею ввиду переменные css. Которые можно прописать в root и использовать с var() для значений свойств.
@user-yd6nc3zn3f 10 күн бұрын
@@WebCademy Да, все верно. Эта проблема решается именно дополнительными плагином. Спасибо за направление поиска.🙌
@user-dg8ty4kg4i 2 ай бұрын
Какое расширение позволяет смотреть, как выглядит сайт на разных устройствах?
@WebCademy 2 ай бұрын
Инструменты веб-разработчика в браузере. F12.
@Gargadeshi 6 ай бұрын
4:20:50 почему указано по 50px, а на странице отображается вытянутым по вертикали 50х45.132px ?
@WebCademy 6 ай бұрын
Не понял о каком элементе вы говорите. И вроде ничего не вытягивается, все отображается согласно нужным пропорциям.
@Gargadeshi 6 ай бұрын
У вас slider__btn сразу получился круглым, у меня почему то ширина в браузере (гугл хром и фаир фокс) стала 45px ? Просто интересно, нагуглить не получилось.
@user-nn9qy1yh3s 6 ай бұрын
что за тема в редакторе ?
@sartjhon3300 6 ай бұрын
Почему можно использовать только EOT шрифты? А все, поправился )
@WebCademy 6 ай бұрын
Оговорка. Достаточно woff формата.
@user-yr6lv4vc7v 6 ай бұрын
55:15 На этом уровне нет папки img. Как Вам удалось ее подключить?
@WebCademy 6 ай бұрын
Как нет, если есть. Путь пишем относительно готового CSS файла, в который компилируется SCSS.
@user-yr6lv4vc7v 6 ай бұрын
@@WebCademy В vscode если переходим дважды вверх .. /.. / можно выбрать img с помощью emmet. У Вас . /.. / на один уровень вверх и emmet подсказывает папки этого уровня. Если вписать путь вручную, то картинка подключается. Но! Без помощи emmet это делать проблематично. Я перепроверил всю структуру. Устранил все ошибки подключения файлов и папок. Всё работает отлично. Конечно я МНОООГОГО ещё не знаю. Только начал изучать вёрстку. Смотрю Ваши уроки с большим уважением.
@WebCademy 6 ай бұрын
@@user-yr6lv4vc7v у меня там была другая подсказка, не папки img.
@_Fantom_. 4 ай бұрын
Я извиняюсь Юрий, что засыпаю вас вопросами, но не кажется ли вам, что будет гораздо проще обернуть символ доллара цены в карточке, в тег "sup", чем прописывать его псевдоэлементом в стилях?
@WebCademy 4 ай бұрын
Как удобно. Можно и в разметке прописать. С точки зрения SEO так наверное будет даже лучше. ЧТобы была не просто цифра, а цифра с указанием валюты. Но для такого тонкого SEO - определения цены, лучше использовать специальную микро разметку. А вот для accessebility - однозначно плюс.
@ketr2157 5 ай бұрын
Столкнулся с проблемой, что картинка background-image не отображается. Качал в разных форматах. Закидывал в разные папки. Пробовал различные пути к этой картинке, полный прям с диска "c" и через /, ./, ../. Если делать через style в body тоже 0 реакции. Стили с style.css работают. Обычные img src отображаются. В чем проблема , может поможет кто ? Уже качаю open server. Когда-то сталкивался с этой проблемой и не помню как решил, вроде через open. Но все же кто-то что-то может знает ?
@WebCademy 5 ай бұрын
Откройте инспектор и посмотрите как в итоге прописан путь, и сверьте его с корректным. Посмотрите в консоли на ошибки при загрузке ресурсов (в данном случае картинки с фоном). Вы привели пример пути с запятыми, их там быть не должно. Только точки. ./../img/и т.д.
@WebCademy 5 ай бұрын
Скачайте готовый код, сверьте со своим. Если и в готовом коде у вас не отображается фон, попробуйте в разных браузерах. Возможно в вашем рабочем браузере картинку блокирует какой-то плагин.
@whiteltd5970 6 ай бұрын
Добрый день, почему не используете Vite? Наиболее популярный сборщик.
@umaralifayzullayev 5 ай бұрын
можно ли в 1:00:20 для ретины использовать полную версию?: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { /* Retina-specific stuff here */ } она стояла внизу. А еще .block { background-image: image-set("some-image.png" 1x, "some-image-2x.png" 2x); } и .image { background-image: -Webkit-image-set(url(example.png) 1x, url(example@2x.png) 2x); background-size: 200px 300px; } и @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icon { background-image: url(example@2x.png); } }
@WebCademy 5 ай бұрын
Можно. Тот вариант который использован в уроке вполне достаточный.
@umaralifayzullayev 5 ай бұрын
А можно добавить 3x?@@WebCademy
@WebCademy 5 ай бұрын
@@umaralifayzullayev можно
@user-gk4ye4zh5x 6 ай бұрын
Здравствуйте. У меня почему-то scss не компилируется в css. Вернее, в проекте 2 папки css: одна в корне - где не происходит никаких изменений и, соответственно, в браузере тоже. Вторая находится в папке scss. Я её удаляю, она всё равно появляется с изменениями, но в браузере ничего не меняется. Урок про sass я смотрела и делала всё, как там. В чём может быть проблема?
@WebCademy 6 ай бұрын
Как раз хотел отправить к уроку. А как вы закидываете проект в редактор, папку с проектом, или у вас одна папка в другой. То есть файловая структура такая же как у меня, проект сразу в корне? И настройки плагина Live Saas Compiler посмотрите внимательнее. У меня ы JSON настройках: "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/css/" } ],
@WebCademy 6 ай бұрын
Еще у меня настройка liveSassCompile - settings - rootIsWorkspace не прожата, может вы включили галочку, он тогда по другому читает пути, но вроде не должно влиять. Проверьте.
@WebCademy 6 ай бұрын
Ну и сам урок kzfaq.info/get/bejne/ndWfgq14qczRpGg.html
@user-gk4ye4zh5x 6 ай бұрын
@@WebCademy Делаю всё, как Вы. Только в том уроке немного по-другому написано: "savePath": "~/.. /css/" (14:04)
@WebCademy 6 ай бұрын
@@user-gk4ye4zh5xПоставьте так как я в комментариях подсказал
@baytszy 4 ай бұрын
Не поняла чтото, если по sass то почему выглядит как в обычной css...
@WebCademy 4 ай бұрын
SCSS, у него синтаксис с { } и ;
@txresaaa 3 ай бұрын
извините, но я не нашел файл резет css, подскажите где его можно найти
@WebCademy 3 ай бұрын
webcademy.ru/blog/739/
@txresaaa 3 ай бұрын
@@WebCademy большое спасибо
@ringnull 5 ай бұрын
Это читается как Фонт Фасция (пучек шрифтов)
@user-vy2cp6us8g 4 ай бұрын
Табы не вернули
@user-of1cr8ce2c 6 ай бұрын
5:12:10
@K0mariki 5 ай бұрын
для чего указывать одиночную точку в пути к файлу?
@WebCademy 5 ай бұрын
./ = текущая директория чтобы точно визуально обозначить что путь указываем от текущей директории
@azamatmussauatov7533 5 ай бұрын
я пробовал джаваскрипт не получается у меня не работает. Забиваю кароче фронтэнд не мое это
@WebCademy 5 ай бұрын
Посмотрите это видео kzfaq.info/get/bejne/i6ydjcR_z5zbqXU.htmlsi=vAmtFhjMLkrO1Wfo или это kzfaq.info/get/bejne/o8eAhbWQz9Ddf3k.htmlsi=seOdHgunHQlUGDa8
@azamatmussauatov7533 5 ай бұрын
@@WebCademy С новым годом! Спасибо за ссылку как совет для изучения. Я это уже сто раз видео похожие тоже на вашу смотрел на УДЭМИ и на русском и английском, все похожая теория одно и тоже, +- х+у , - это я видел. Проблема в том, что я хочу создать сайт, есть у меня макетик сделанный из CSS, HTML, но не получается в практике мне оживить Javascript???
@user-nn9qy1yh3s 6 ай бұрын
без макета верстка ?
@WebCademy 6 ай бұрын
С макетом www.figma.com/file/2AS6R8XC1GPENt5LxwoRLJ
Marusya Outdoors
Рет қаралды 61 МЛН