HTML CSS верстка сайта главной страницы интернет-магазина Panto. Swiper, retina, CSS clamp, табы

[@ВладаВирыч]

Делал в записи все получилось. Узнал много нового! Благодарю вас Юрий за интереснейший мастер-класс и полученные знания!

[@neleaonila2191]

Юрий, не могу выразить в полной мере благодарность словами, чувства переполняют, всё очень доходчиво и понятно. Мега-насыщенные, 8 часов полезной информации. Сверхчеловеческое спасибо за то, что учите работать умно, а не усердно.

[@yuriykolomytsyn2352]

Юрий, я очень вам благодарен, за то, что вы беретесь показывать нам лучшию практику верстки сложных страниц! очень рад присутствовать на стриме

[@WebCademy]

Юрий, спасибо за комментарий!)

[@eoylka9368]

страница вполне простая)

[@yuriykolomytsyn2352]

@@eoylka9368 клева тебе! Будешь моим ментором?

[@Vladimir-lx7fv]

Юрий, как всегда супер класс. Много интересного и нового. Очень интересно и познавательно, не возможно оторваться от экрана. Спасибо огромное!!!👍

[@stasmelnik]

спасибо огромное за этот урок. многое что узнал нового из современной вёрстки)

[@andreyzimin88]

Очень хорошее объяснение, без воды! Благодарю вас добрый человек

[@_Fantom_.]

Огромное спасибо Юрий за очень интересную и познавательную практику по верстке! Единственное что, ты забыл обратно отобразить и адаптировать табы в блоке со слайдером, но там в принципе можно обойтись и простым добавлением "flex-wrap: wrap;"

[@meowmeowmeowmeow000]

Спасибо за хороший урок, вы вообще голова

[@_Fantom_.]

А еще он туловище, руки и ноги.. )

[@ZenithDreamscape]

@@_Fantom_.так сказать

[@MaksAnkh]

Спасибо огромное за интенсив! Я совсем новичок, позанимался несколько занятий по HTML и CSS с ментором и начал этот мастер класс, что позволило сразу узнать очень много информации и дойти до многих вещей. Пока на 3ем часу. Единственное не понял, в хэдере, зачем на вазе, диване, фигурке на столе и на горшке располагать точки путём сложных расчётов, а не просто задать любой процент (не пиксель) и выставить их через инспектор как надо? Вероятно, я не понимаю. Тут люди пишут про ошибки - ошибки это шикарно! Ты их исправляешь в видео позже, а до этого у меня не клеится и приходится самому ломать голову или искать инфу. Это очень полезно. Спасибо за проделанную работу!

[@sam_starikov]

Юрец машина! 8 часов без остановки с качественным объяснением. Мощь…

[@mmosow]

Ждем с нетерпением!!! надеюсь стрим будет до победы, с JS и всем интерактивом!!!

[@WebCademy]

Будет до победного)

[@cosmospubgm4765]

По больше таких видос 🔥

[@SergDes-j2w]

Юра, спасибо Вам за мастер-класс! Заметил нюанс в работе слайдера. После манипуляций с товарами, когда фильтруем товары, отображая их по нажатию на разные табы, кнопки Next и Prev начинают сбоить. Они как бы отображаются, но не перелистывают товар. Как будто нажатие по ним не проходит. Если нажимаем на таб All - все восстанавливается.

[@ВячеславСидоров-н5п]

Добрый день, 5:50:00 при верстке выпадающего меню навигации в шапке использовать opacity 0 не совсем корректно. Если мы будем проходить сайт с помощью таба, то обводка пропадет на некоторое время (в зависимости от кол-во пунктов подменю). Что для пользовательского опыта не очень. Как один из вариантов: opacity: 0 на visibility: hidden и opacity: 1 на visibility: visible; тогда специальные программы озвучивать подменю не будут. (этот вариант подойдет тогда, когда не обязательно озвучивать элементы подменю)

[@baytszy]

спасибо)

[@biscvie]

Спасибо!)

[@АннаФилиппова-ж7т]

Ждем с нетерпением!

[@rollersinpubg1168]

Вот начал научится очень благодарен за видео, спасибо. Но я замел что забыли адаптировать таба его приписали none чтобы не мешала и таким же остался. 👍👍👍 НЕ ОБРАШАЙТЕ ВНИМАНИЯ НА МОИ ГРАМАТИЧЕМКИЕ ОШИБКИ!!!

[@_Fantom_.]

Задаем блоку "nav", свойство: align-items: center; и избавляемся от рутинного добавления свойства: " align-self: center;" каждому отдельному элементу..

[@AkromQulmatov]

❤🎉😮😢😢😢😢😢❤❤❤🎉😂🎉😢😢😢😂😂😂😮😢

[@volk5855]

Ты крут

[@dilmuratidrisov5978]

Юрий, Приветствую, спасибо большое тебе за видео урок. Ты забыл на products__tabs сделать адаптивку.

[@WebCademy]

Привет. Точно, я ее скрыл, и после вообще забыл про неё. Бывает. Ну там несложно в принципе. Задать ей max-width и overflow-x: auto; на мобилках, чтобы скролл появился.

[@umaralifayzullayev]

Очень хорошее видео и много чего об css узнал. Теперь приступим к многостраничным сайтам?

[@rahim6821]

Красавчик

[@BryanskyM]

Спасибо за видео. Вы забыли адаптировать табы после того как их скрыли, кстати

[@dmitry5905]

@WebCademy Добрый день! Спасибо за мегаполезное видео! Вопрос: а как можно реализовать чтобы цвет дивана менялся при выборе цвета?

[@ЕгорОсипчук]

Где взять ссылку на codesand box для info-dot?

[@DS_av]

У меня почему-то не исчезают стрелки в слайдере, когда товаров становится меньше. .swiper-button-lock { display: none; } Перебивают мои стили из ".slider__btn", а именно свойство display: flex

[@СергейМурин-ь8х]

Было бы круто сверстать многостраничный сайт)))

[@ИванТуманов-е2ш]

Привет, спасибо за видео. А как использовать кастомные свойства в scss? Посмотрел несколько ваших уроков с scss и вы везде используете только переменные scss. По какой причине вы не используете кастомные свойства? Дело в том, что я столкнулся с проблемой что vs code в автокомплиде подхватывает только scss переменные из других файлов, а обычные css переменные нет. Вот теперь болит голова, как это победить)

[@WebCademy]

Иван, приветствую. Не понял что такое "кастомные свойства в scss". Насчет того что я везде использую только scss переменные, поспорил бы. CSS переменные я тоже использую. Имею ввиду не только этот проект, но и другие. А если по вопросу, то я бы посмотрел плагины под VS Code которые будут подсказывать нужные переменные CSS или SCSS.

[@ИванТуманов-е2ш]

@@WebCademy Юрий, большое спасибо за ответ. Под кастомными свойствами я имею ввиду переменные css. Которые можно прописать в root и использовать с var() для значений свойств.

[@ИванТуманов-е2ш]

@@WebCademy Да, все верно. Эта проблема решается именно дополнительными плагином. Спасибо за направление поиска.🙌

[@veraveramona979]

Добрый день🌞!

[@alexlitvin1297]

Хороший урок. Единственное "но", это как реализован slider. Я сделал около 30 слайдов и когда отображены все слайды, то все работает перфект. Когда же выбираю отдельную категорию, то loop не работает на клике слайдера вправо, отображает продукты до конца и как бы останавливается. Попробуем исправить баг самостоятельно )

[@secondname_lastmane]

4:35 а зачем еще и правую экспортировать, если можно одну иконку и потом просто стилями повернуть ее в обратную сторону

[@umaralifayzullayev]

можно ли в 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([e-mail]) 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([e-mail]); } }

[@WebCademy]

Можно. Тот вариант который использован в уроке вполне достаточный.

[@umaralifayzullayev]

А можно добавить 3x?@@WebCademy

[@WebCademy]

@@umaralifayzullayev можно

[@СветланаГруздева-л7ю]

Юрий, а почему в шапке не сделать общему контейнеру align-items: center, вместо того чтобы каждому элементу прописывать align-self: center?

[@WebCademy]

Не понял про какие элементы имеете ввиду, но конечно, если в ряд выстроили или в колонку, то можно сразу всем элементам задать выравнивание по поперечной оси.

[@СергейАлмазный]

Хотел бы задать вопрос, я тоже верстаю на макбуке и почему картинка на макбуке отличная, а как только открываю на мониторе 1920 x 1080 все точки начинают плыть в другие места и вообще становится чуть по другому

[@WebCademy]

Надо смотреть на сколько расхождение. Если в пределах одного пикселя, то можно списать на ретину, если больше то надо разбираться.

[@Vasilii_Shtyrov]

Почему предпочитаете scss а не sass? У scss есть какие то преимущества или дело вкуса?

[@WebCademy]

Дело вкуса. SCSS использует синтаксис со скобками, как и CSS и можно легко копировать из CSS в SCSS, не надо удалять скобки. Ну и не нравится вложенность без скобок у SASS. В функционале одинаково.

[@Gargadeshi]

4:20:50 почему указано по 50px, а на странице отображается вытянутым по вертикали 50х45.132px ?

[@WebCademy]

Не понял о каком элементе вы говорите. И вроде ничего не вытягивается, все отображается согласно нужным пропорциям.

[@Gargadeshi]

У вас slider__btn сразу получился круглым, у меня почему то ширина в браузере (гугл хром и фаир фокс) стала 45px ? Просто интересно, нагуглить не получилось.

[@_Fantom_.]

Я извиняюсь Юрий, что засыпаю вас вопросами, но не кажется ли вам, что будет гораздо проще обернуть символ доллара цены в карточке, в тег "sup", чем прописывать его псевдоэлементом в стилях?

[@WebCademy]

Как удобно. Можно и в разметке прописать. С точки зрения SEO так наверное будет даже лучше. ЧТобы была не просто цифра, а цифра с указанием валюты. Но для такого тонкого SEO - определения цены, лучше использовать специальную микро разметку. А вот для accessebility - однозначно плюс.

[@АлександрКим-л2щ]

а будет запись этого стрима ?

[@WebCademy]

Будет

[@Vasilii_Shtyrov]

Считаете пора в верстке переходить на rem или остаемся на пикселях? На чем лучше привыкать верстать?

[@WebCademy]

Можно добавить scss миксин переводящий px в rem и использовать его. Я это не использую. Вручную калькулировать каждый раз px в rem не считаю нужным. Верстаю на px.

[@ЮрийБарабаш-г4д]

55:15 На этом уровне нет папки img. Как Вам удалось ее подключить?

[@WebCademy]

Как нет, если есть. Путь пишем относительно готового CSS файла, в который компилируется SCSS.

[@ЮрийБарабаш-г4д]

@@WebCademy В vscode если переходим дважды вверх .. /.. / можно выбрать img с помощью emmet. У Вас . /.. / на один уровень вверх и emmet подсказывает папки этого уровня. Если вписать путь вручную, то картинка подключается. Но! Без помощи emmet это делать проблематично. Я перепроверил всю структуру. Устранил все ошибки подключения файлов и папок. Всё работает отлично. Конечно я МНОООГОГО ещё не знаю. Только начал изучать вёрстку. Смотрю Ваши уроки с большим уважением.

[@WebCademy]

@@ЮрийБарабаш-г4д у меня там была другая подсказка, не папки img.

[@АннаМешковская-е3б]

Какое расширение позволяет смотреть, как выглядит сайт на разных устройствах?

[@WebCademy]

Инструменты веб-разработчика в браузере. F12.

[@typhoonx04]

Подскажите, а запись будет этого стрима?

[@СергейАлмазный]

Почему на разрешение больше чем на макбуке начинают плыть точки???😊

[@WebCademy]

Вообще не должно.

[@СергейАлмазный]

@@WebCademy Если открывать данный сайт на браузере макбука все точки стоят ровно в том месте, в котором указаны в коде. Если открываешь сайт через ПК на мониторе 1920:1080 то точки прыгают наверх на пикселей 50. И даже если на макбуке расшираяешь браузер через экран разработчика и ставишь 1920 на 1080, то точки тоже улетают наверх.

[@СергейАлмазный]

@@WebCademy не знаете как исправить?

[@WebCademy]

@@СергейАлмазный Не имея возможности воспроизвести баг, не могу подсказать как его решить. Проверьте масштаб в браузере. Также может влиять использование относительных единиц измерения, которые зависят от размеров окна/экрана.

[@vrogislav5638]

Подскажите пожалуйста как убрать волнистые линии, подчеркивания, я на русском комментарии пишу и у меня везде волнистые синии линии

[@Mascentfrost]

43:00 (для себя)

[@irt4040]

Можете подсказать, почему у меня свайпер не скрывает стрелки навигации, когда карточек меньше, чем нужно для прокрутки? (Когда даже 1 карточка в bed/chair и тд, то стрелки видны) Код 1 в 1 с видео

[@hpbulbasaur8946]

ага,тоже стрелки не пропали

[@dimanigay8182]

Ребята подскажите какие он плагины он использует в Visual Studio Code при вёрстке 😅

[@sartjhon3300]

Почему можно использовать только EOT шрифты? А все, поправился )

[@WebCademy]

Оговорка. Достаточно woff формата.

[@sargisdavtyan6676]

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'); }); });

[@КаринаЧ-н5е]

Здравствуйте. У меня почему-то scss не компилируется в css. Вернее, в проекте 2 папки css: одна в корне - где не происходит никаких изменений и, соответственно, в браузере тоже. Вторая находится в папке scss. Я её удаляю, она всё равно появляется с изменениями, но в браузере ничего не меняется. Урок про sass я смотрела и делала всё, как там. В чём может быть проблема?

[@WebCademy]

Как раз хотел отправить к уроку. А как вы закидываете проект в редактор, папку с проектом, или у вас одна папка в другой. То есть файловая структура такая же как у меня, проект сразу в корне? И настройки плагина Live Saas Compiler посмотрите внимательнее. У меня ы JSON настройках: "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/css/" } ],

[@WebCademy]

Еще у меня настройка liveSassCompile - settings - rootIsWorkspace не прожата, может вы включили галочку, он тогда по другому читает пути, но вроде не должно влиять. Проверьте.

[@WebCademy]

Ну и сам урок kzbin.info/www/bejne/naDSgH19ecugqpY

[@КаринаЧ-н5е]

@@WebCademy Делаю всё, как Вы. Только в том уроке немного по-другому написано: "savePath": "~/.. /css/" (14:04)

[@WebCademy]

@@КаринаЧ-н5еПоставьте так как я в комментариях подсказал

[@ketr2157]

Столкнулся с проблемой, что картинка background-image не отображается. Качал в разных форматах. Закидывал в разные папки. Пробовал различные пути к этой картинке, полный прям с диска "c" и через /, ./, ../. Если делать через style в body тоже 0 реакции. Стили с style.css работают. Обычные img src отображаются. В чем проблема , может поможет кто ? Уже качаю open server. Когда-то сталкивался с этой проблемой и не помню как решил, вроде через open. Но все же кто-то что-то может знает ?

[@WebCademy]

Откройте инспектор и посмотрите как в итоге прописан путь, и сверьте его с корректным. Посмотрите в консоли на ошибки при загрузке ресурсов (в данном случае картинки с фоном). Вы привели пример пути с запятыми, их там быть не должно. Только точки. ./../img/и т.д.

[@WebCademy]

Скачайте готовый код, сверьте со своим. Если и в готовом коде у вас не отображается фон, попробуйте в разных браузерах. Возможно в вашем рабочем браузере картинку блокирует какой-то плагин.

[@HareKrishnaJayDamodara]

Добрый день, будет запись?🙏♥️

[@ЕвгенийТаранюк-ц3в]

Табы не вернули

[@baytszy]

Не поняла чтото, если по sass то почему выглядит как в обычной css...

[@WebCademy]

SCSS, у него синтаксис с { } и ;

[@whiteltd5970]

Добрый день, почему не используете Vite? Наиболее популярный сборщик.

[@txresaaa]

извините, но я не нашел файл резет css, подскажите где его можно найти

[@WebCademy]

webcademy.ru/blog/739/

[@txresaaa]

@@WebCademy большое спасибо

[@saivengo]

А макет предварительно нельзя посмотреть?

[@K0mariki]

для чего указывать одиночную точку в пути к файлу?

[@WebCademy]

./ = текущая директория чтобы точно визуально обозначить что путь указываем от текущей директории

[@azamatmussauatov7533]

я пробовал джаваскрипт не получается у меня не работает. Забиваю кароче фронтэнд не мое это

[@WebCademy]

Посмотрите это видео kzbin.info/www/bejne/i3fQi5SEn5uqr6Msi=vAmtFhjMLkrO1Wfo или это kzbin.info/www/bejne/o5Kzg4WVn8-shacsi=seOdHgunHQlUGDa8

[@azamatmussauatov7533]

@@WebCademy С новым годом! Спасибо за ссылку как совет для изучения. Я это уже сто раз видео похожие тоже на вашу смотрел на УДЭМИ и на русском и английском, все похожая теория одно и тоже, +- х+у , - это я видел. Проблема в том, что я хочу создать сайт, есть у меня макетик сделанный из CSS, HTML, но не получается в практике мне оживить Javascript???

[@ringnull]

Это читается как Фонт Фасция (пучек шрифтов)

[@ТвойСоветчик]

5:12:10