HTML CSS верстка сайта главной страницы интернет-магазина Panto. Swiper, retina, CSS clamp, табы
Vložit
- čas přidán 7. 06. 2024
- Мастер класс по 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 месяца, результат, гарантия.
Старт обучения: 03 Июня 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 Завершение
спасибо огромное за этот урок. многое что узнал нового из современной вёрстки)
Юрий, не могу выразить в полной мере благодарность словами, чувства переполняют, всё очень доходчиво и понятно.
Мега-насыщенные, 8 часов полезной информации.
Сверхчеловеческое спасибо за то, что учите работать умно, а не усердно.
Делал в записи все получилось. Узнал много нового! Благодарю вас Юрий за интереснейший мастер-класс и полученные знания!
Спасибо огромное за интенсив! Я совсем новичок, позанимался несколько занятий по HTML и CSS с ментором и начал этот мастер класс, что позволило сразу узнать очень много информации и дойти до многих вещей. Пока на 3ем часу. Единственное не понял, в хэдере, зачем на вазе, диване, фигурке на столе и на горшке располагать точки путём сложных расчётов, а не просто задать любой процент (не пиксель) и выставить их через инспектор как надо? Вероятно, я не понимаю. Тут люди пишут про ошибки - ошибки это шикарно! Ты их исправляешь в видео позже, а до этого у меня не клеится и приходится самому ломать голову или искать инфу. Это очень полезно. Спасибо за проделанную работу!
Юрий, как всегда супер класс. Много интересного и нового. Очень интересно и познавательно, не возможно оторваться от экрана. Спасибо огромное!!!👍
Юрий, я очень вам благодарен, за то, что вы беретесь показывать нам лучшию практику верстки сложных страниц! очень рад присутствовать на стриме
Юрий, спасибо за комментарий!)
страница вполне простая)
@@eoylka9368 клева тебе! Будешь моим ментором?
Очень хорошее объяснение, без воды! Благодарю вас добрый человек
Задаем блоку "nav", свойство: align-items: center; и избавляемся от рутинного добавления свойства: " align-self: center;" каждому отдельному элементу..
Красавчик
Спасибо за хороший урок, вы вообще голова
А еще он туловище, руки и ноги.. )
Ждем с нетерпением!
По больше таких видос 🔥
Спасибо!)
Огромное спасибо Юрий за очень интересную и познавательную практику по верстке! Единственное что, ты забыл обратно отобразить и адаптировать табы в блоке со слайдером, но там в принципе можно обойтись и простым добавлением "flex-wrap: wrap;"
спасибо)
Добрый день🌞!
Ты крут
Юрий, Приветствую, спасибо большое тебе за видео урок. Ты забыл на products__tabs сделать адаптивку.
Привет. Точно, я ее скрыл, и после вообще забыл про неё. Бывает. Ну там несложно в принципе. Задать ей max-width и overflow-x: auto; на мобилках, чтобы скролл появился.
@WebCademy Добрый день! Спасибо за мегаполезное видео! Вопрос: а как можно реализовать чтобы цвет дивана менялся при выборе цвета?
Ждем с нетерпением!!! надеюсь стрим будет до победы, с JS и всем интерактивом!!!
Будет до победного)
Подскажите, а запись будет этого стрима?
Было бы круто сверстать многостраничный сайт)))
Очень хорошее видео и много чего об css узнал. Теперь приступим к многостраничным сайтам?
Вот начал научится очень благодарен за видео, спасибо. Но я замел что забыли адаптировать таба его приписали none чтобы не мешала и таким же остался. 👍👍👍 НЕ ОБРАШАЙТЕ ВНИМАНИЯ НА МОИ ГРАМАТИЧЕМКИЕ ОШИБКИ!!!
Добрый день,
5:50:00 при верстке выпадающего меню навигации в шапке использовать opacity 0 не совсем корректно. Если мы будем проходить сайт с помощью таба, то обводка пропадет на некоторое время (в зависимости от кол-во пунктов подменю). Что для пользовательского опыта не очень.
Как один из вариантов:
opacity: 0 на visibility: hidden
и
opacity: 1 на visibility: visible;
тогда специальные программы озвучивать подменю не будут. (этот вариант подойдет тогда, когда не обязательно озвучивать элементы подменю)
Юра, спасибо Вам за мастер-класс! Заметил нюанс в работе слайдера. После манипуляций с товарами, когда фильтруем товары, отображая их по нажатию на разные табы, кнопки Next и Prev начинают сбоить. Они как бы отображаются, но не перелистывают товар. Как будто нажатие по ним не проходит. Если нажимаем на таб All - все восстанавливается.
Юрий, а почему в шапке не сделать общему контейнеру align-items: center, вместо того чтобы каждому элементу прописывать align-self: center?
Не понял про какие элементы имеете ввиду, но конечно, если в ряд выстроили или в колонку, то можно сразу всем элементам задать выравнивание по поперечной оси.
Спасибо за видео. Вы забыли адаптировать табы после того как их скрыли, кстати
Подскажите пожалуйста как убрать волнистые линии, подчеркивания, я на русском комментарии пишу и у меня везде волнистые синии линии
У меня почему-то не исчезают стрелки в слайдере, когда товаров становится меньше.
.swiper-button-lock {
display: none;
}
Перебивают мои стили из ".slider__btn", а именно свойство display: flex
Где взять ссылку на codesand box для info-dot?
Ребята подскажите какие он плагины он использует в Visual Studio Code при вёрстке 😅
Добрый день, будет запись?🙏♥️
а будет запись этого стрима ?
Будет
А макет предварительно нельзя посмотреть?
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');
});
});
Можете подсказать, почему у меня свайпер не скрывает стрелки навигации, когда карточек меньше, чем нужно для прокрутки? (Когда даже 1 карточка в bed/chair и тд, то стрелки видны)
Код 1 в 1 с видео
ага,тоже стрелки не пропали
Почему предпочитаете scss а не sass? У scss есть какие то преимущества или дело вкуса?
Дело вкуса. SCSS использует синтаксис со скобками, как и CSS и можно легко копировать из CSS в SCSS, не надо удалять скобки. Ну и не нравится вложенность без скобок у SASS. В функционале одинаково.
Считаете пора в верстке переходить на rem или остаемся на пикселях? На чем лучше привыкать верстать?
Можно добавить scss миксин переводящий px в rem и использовать его. Я это не использую. Вручную калькулировать каждый раз px в rem не считаю нужным. Верстаю на px.
Привет, спасибо за видео. А как использовать кастомные свойства в scss? Посмотрел несколько ваших уроков с scss и вы везде используете только переменные scss. По какой причине вы не используете кастомные свойства? Дело в том, что я столкнулся с проблемой что vs code в автокомплиде подхватывает только scss переменные из других файлов, а обычные css переменные нет. Вот теперь болит голова, как это победить)
Иван, приветствую. Не понял что такое "кастомные свойства в scss". Насчет того что я везде использую только scss переменные, поспорил бы. CSS переменные я тоже использую. Имею ввиду не только этот проект, но и другие.
А если по вопросу, то я бы посмотрел плагины под VS Code которые будут подсказывать нужные переменные CSS или SCSS.
@@WebCademy Юрий, большое спасибо за ответ. Под кастомными свойствами я имею ввиду переменные css. Которые можно прописать в root и использовать с var() для значений свойств.
@@WebCademy Да, все верно. Эта проблема решается именно дополнительными плагином. Спасибо за направление поиска.🙌
Какое расширение позволяет смотреть, как выглядит сайт на разных устройствах?
Инструменты веб-разработчика в браузере. F12.
4:20:50 почему указано по 50px, а на странице отображается вытянутым по вертикали 50х45.132px ?
Не понял о каком элементе вы говорите. И вроде ничего не вытягивается, все отображается согласно нужным пропорциям.
У вас slider__btn сразу получился круглым, у меня почему то ширина в браузере (гугл хром и фаир фокс) стала 45px ? Просто интересно, нагуглить не получилось.
что за тема в редакторе ?
Почему можно использовать только EOT шрифты? А все, поправился )
Оговорка. Достаточно woff формата.
55:15 На этом уровне нет папки img. Как Вам удалось ее подключить?
Как нет, если есть. Путь пишем относительно готового CSS файла, в который компилируется SCSS.
@@WebCademy В vscode если переходим дважды вверх .. /.. / можно выбрать img с помощью emmet. У Вас . /.. / на один уровень вверх и emmet подсказывает папки этого уровня. Если вписать путь вручную, то картинка подключается. Но! Без помощи emmet это делать проблематично. Я перепроверил всю структуру. Устранил все ошибки подключения файлов и папок. Всё работает отлично. Конечно я МНОООГОГО ещё не знаю. Только начал изучать вёрстку. Смотрю Ваши уроки с большим уважением.
@@user-yr6lv4vc7v у меня там была другая подсказка, не папки img.
Я извиняюсь Юрий, что засыпаю вас вопросами, но не кажется ли вам, что будет гораздо проще обернуть символ доллара цены в карточке, в тег "sup", чем прописывать его псевдоэлементом в стилях?
Как удобно. Можно и в разметке прописать. С точки зрения SEO так наверное будет даже лучше. ЧТобы была не просто цифра, а цифра с указанием валюты. Но для такого тонкого SEO - определения цены, лучше использовать специальную микро разметку. А вот для accessebility - однозначно плюс.
Добрый день, почему не используете Vite? Наиболее популярный сборщик.
Столкнулся с проблемой, что картинка background-image не отображается. Качал в разных форматах. Закидывал в разные папки. Пробовал различные пути к этой картинке, полный прям с диска "c" и через /, ./, ../. Если делать через style в body тоже 0 реакции. Стили с style.css работают. Обычные img src отображаются. В чем проблема , может поможет кто ?
Уже качаю open server. Когда-то сталкивался с этой проблемой и не помню как решил, вроде через open. Но все же кто-то что-то может знает ?
Откройте инспектор и посмотрите как в итоге прописан путь, и сверьте его с корректным. Посмотрите в консоли на ошибки при загрузке ресурсов (в данном случае картинки с фоном). Вы привели пример пути с запятыми, их там быть не должно. Только точки. ./../img/и т.д.
Скачайте готовый код, сверьте со своим. Если и в готовом коде у вас не отображается фон, попробуйте в разных браузерах. Возможно в вашем рабочем браузере картинку блокирует какой-то плагин.
можно ли в 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);
}
}
Можно. Тот вариант который использован в уроке вполне достаточный.
А можно добавить 3x?@@WebCademy
@@umaralifayzullayev можно
Здравствуйте. У меня почему-то scss не компилируется в css. Вернее, в проекте 2 папки css: одна в корне - где не происходит никаких изменений и, соответственно, в браузере тоже. Вторая находится в папке scss. Я её удаляю, она всё равно появляется с изменениями, но в браузере ничего не меняется. Урок про sass я смотрела и делала всё, как там. В чём может быть проблема?
Как раз хотел отправить к уроку. А как вы закидываете проект в редактор, папку с проектом, или у вас одна папка в другой. То есть файловая структура такая же как у меня, проект сразу в корне?
И настройки плагина Live Saas Compiler посмотрите внимательнее. У меня ы JSON настройках:
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
}
],
Еще у меня настройка liveSassCompile - settings - rootIsWorkspace не прожата, может вы включили галочку, он тогда по другому читает пути, но вроде не должно влиять. Проверьте.
Ну и сам урок czcams.com/video/gooOJGDfmt4/video.html
@@WebCademy Делаю всё, как Вы. Только в том уроке немного по-другому написано: "savePath": "~/.. /css/" (14:04)
@@user-gk4ye4zh5xПоставьте так как я в комментариях подсказал
Не поняла чтото, если по sass то почему выглядит как в обычной css...
SCSS, у него синтаксис с { } и ;
извините, но я не нашел файл резет css, подскажите где его можно найти
webcademy.ru/blog/739/
@@WebCademy большое спасибо
Это читается как Фонт Фасция (пучек шрифтов)
Табы не вернули
5:12:10
для чего указывать одиночную точку в пути к файлу?
./ = текущая директория
чтобы точно визуально обозначить что путь указываем от текущей директории
я пробовал джаваскрипт не получается у меня не работает. Забиваю кароче фронтэнд не мое это
Посмотрите это видео czcams.com/video/UFmZaNj6wyA/video.htmlsi=vAmtFhjMLkrO1Wfo
или это czcams.com/video/maPRR_jjyOE/video.htmlsi=seOdHgunHQlUGDa8
@@WebCademy С новым годом! Спасибо за ссылку как совет для изучения. Я это уже сто раз видео похожие тоже на вашу смотрел на УДЭМИ и на русском и английском, все похожая теория одно и тоже, +- х+у , - это я видел. Проблема в том, что я хочу создать сайт, есть у меня макетик сделанный из CSS, HTML, но не получается в практике мне оживить Javascript???
без макета верстка ?
С макетом www.figma.com/file/2AS6R8XC1GPENt5LxwoRLJ