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

Поділитися
Вставка
  • Опубліковано 29 гру 2024

КОМЕНТАРІ • 114

  • @ВладаВирыч
    @ВладаВирыч 9 місяців тому +4

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

  • @neleaonila2191
    @neleaonila2191 Рік тому +11

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

  • @yuriykolomytsyn2352
    @yuriykolomytsyn2352 Рік тому +5

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

    • @WebCademy
      @WebCademy  Рік тому +1

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

    • @eoylka9368
      @eoylka9368 Рік тому +1

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

    • @yuriykolomytsyn2352
      @yuriykolomytsyn2352 Рік тому

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

  • @Vladimir-lx7fv
    @Vladimir-lx7fv Рік тому +4

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

  • @_Fantom_.
    @_Fantom_. 10 місяців тому

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

  • @stasmelnik
    @stasmelnik 6 місяців тому

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

  • @andreyzimin88
    @andreyzimin88 Рік тому

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

  • @sam_starikov
    @sam_starikov 6 місяців тому

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

  • @meowmeowmeowmeow000
    @meowmeowmeowmeow000 Рік тому +1

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

    • @_Fantom_.
      @_Fantom_. 11 місяців тому +1

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

    • @ZenithDreamscape
      @ZenithDreamscape 2 місяці тому

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

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

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

  • @MaksAnkh
    @MaksAnkh 7 місяців тому

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

  • @SergDes-j2w
    @SergDes-j2w 10 місяців тому +2

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

  • @cosmospubgm4765
    @cosmospubgm4765 Рік тому

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

  • @mmosow
    @mmosow Рік тому +4

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

    • @WebCademy
      @WebCademy  Рік тому +7

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

  • @_Fantom_.
    @_Fantom_. 11 місяців тому +5

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

    • @AkromQulmatov
      @AkromQulmatov 2 місяці тому

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

  • @rollersinpubg1168
    @rollersinpubg1168 11 місяців тому

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

  • @biscvie
    @biscvie Рік тому +1

    Спасибо!)

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

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

  • @dilmuratidrisov5978
    @dilmuratidrisov5978 Рік тому +3

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

    • @WebCademy
      @WebCademy  Рік тому +2

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

  • @baytszy
    @baytszy 11 місяців тому +1

    спасибо)

  • @BryanskyM
    @BryanskyM 11 місяців тому +2

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

  • @secondname_lastmane
    @secondname_lastmane 6 місяців тому +1

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

  • @volk5855
    @volk5855 Рік тому +1

    Ты крут

  • @СергейМурин-ь8х
    @СергейМурин-ь8х Рік тому +2

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

  • @veraveramona979
    @veraveramona979 Рік тому

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

  • @umaralifayzullayev
    @umaralifayzullayev Рік тому

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

  • @rahim6821
    @rahim6821 8 місяців тому

    Красавчик

  • @DS_av
    @DS_av 10 місяців тому

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

  • @umaralifayzullayev
    @umaralifayzullayev 11 місяців тому

    можно ли в 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
      @WebCademy  11 місяців тому

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

    • @umaralifayzullayev
      @umaralifayzullayev 11 місяців тому

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

    • @WebCademy
      @WebCademy  11 місяців тому

      @@umaralifayzullayev можно

  • @dmitry5905
    @dmitry5905 11 місяців тому

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

  • @sargisdavtyan6676
    @sargisdavtyan6676 10 місяців тому +1

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

  • @Gargadeshi
    @Gargadeshi Рік тому

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

    • @WebCademy
      @WebCademy  Рік тому

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

    • @Gargadeshi
      @Gargadeshi Рік тому

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

  • @alexlitvin1297
    @alexlitvin1297 6 місяців тому

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

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

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

    • @WebCademy
      @WebCademy  Рік тому +1

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

  • @ЕгорОсипчук
    @ЕгорОсипчук 8 місяців тому

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

  • @Mascentfrost
    @Mascentfrost 5 місяців тому

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

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

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

    • @WebCademy
      @WebCademy  Рік тому

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

    • @ЮрийБарабаш-г4д
      @ЮрийБарабаш-г4д Рік тому +1

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

    • @WebCademy
      @WebCademy  Рік тому

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

  • @dimanigay8182
    @dimanigay8182 11 місяців тому

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

  • @vrogislav5638
    @vrogislav5638 Рік тому

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

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

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

  • @ЕвгенийТаранюк-ц3в
    @ЕвгенийТаранюк-ц3в 11 місяців тому +1

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

  • @_Fantom_.
    @_Fantom_. 11 місяців тому

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

    • @WebCademy
      @WebCademy  11 місяців тому

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

  • @Vasilii_Shtyrov
    @Vasilii_Shtyrov 10 місяців тому +2

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

    • @WebCademy
      @WebCademy  10 місяців тому +2

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

  • @ИванТуманов-е2ш
    @ИванТуманов-е2ш 6 місяців тому +1

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

    • @WebCademy
      @WebCademy  6 місяців тому

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

    • @ИванТуманов-е2ш
      @ИванТуманов-е2ш 6 місяців тому +1

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

    • @ИванТуманов-е2ш
      @ИванТуманов-е2ш 6 місяців тому +1

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

  • @СергейАлмазный
    @СергейАлмазный 2 місяці тому

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

    • @WebCademy
      @WebCademy  2 місяці тому

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

  • @typhoonx04
    @typhoonx04 Рік тому

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

  • @whiteltd5970
    @whiteltd5970 Рік тому +1

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

  • @Vasilii_Shtyrov
    @Vasilii_Shtyrov 10 місяців тому

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

    • @WebCademy
      @WebCademy  10 місяців тому +1

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

  • @sartjhon3300
    @sartjhon3300 Рік тому

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

    • @WebCademy
      @WebCademy  Рік тому

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

  • @saivengo
    @saivengo Рік тому

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

  • @ringnull
    @ringnull 11 місяців тому

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

  • @HareKrishnaJayDamodara
    @HareKrishnaJayDamodara Рік тому

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

  • @АннаМешковская-е3б
    @АннаМешковская-е3б 8 місяців тому

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

    • @WebCademy
      @WebCademy  8 місяців тому

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

  • @irt4040
    @irt4040 Рік тому

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

    • @hpbulbasaur8946
      @hpbulbasaur8946 Рік тому

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

  • @ketr2157
    @ketr2157 Рік тому

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

    • @WebCademy
      @WebCademy  Рік тому

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

    • @WebCademy
      @WebCademy  Рік тому

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

  • @baytszy
    @baytszy 11 місяців тому

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

    • @WebCademy
      @WebCademy  11 місяців тому

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

  • @СергейАлмазный
    @СергейАлмазный 2 місяці тому

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

    • @WebCademy
      @WebCademy  2 місяці тому

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

    • @СергейАлмазный
      @СергейАлмазный 2 місяці тому

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

    • @СергейАлмазный
      @СергейАлмазный 2 місяці тому

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

    • @WebCademy
      @WebCademy  2 місяці тому

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

  • @КаринаЧ-н5е
    @КаринаЧ-н5е Рік тому

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

    • @WebCademy
      @WebCademy  Рік тому +1

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

    • @WebCademy
      @WebCademy  Рік тому +1

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

    • @WebCademy
      @WebCademy  Рік тому +1

      Ну и сам урок ua-cam.com/video/gooOJGDfmt4/v-deo.html

    • @КаринаЧ-н5е
      @КаринаЧ-н5е Рік тому

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

    • @WebCademy
      @WebCademy  Рік тому +1

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

  • @txresaaa
    @txresaaa 9 місяців тому

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

    • @WebCademy
      @WebCademy  9 місяців тому

      webcademy.ru/blog/739/

    • @txresaaa
      @txresaaa 9 місяців тому

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

  • @K0mariki
    @K0mariki 11 місяців тому

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

    • @WebCademy
      @WebCademy  11 місяців тому +1

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

  • @azamatmussauatov7533
    @azamatmussauatov7533 Рік тому

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

    • @WebCademy
      @WebCademy  Рік тому +1

      Посмотрите это видео ua-cam.com/video/UFmZaNj6wyA/v-deo.htmlsi=vAmtFhjMLkrO1Wfo
      или это ua-cam.com/video/maPRR_jjyOE/v-deo.htmlsi=seOdHgunHQlUGDa8

    • @azamatmussauatov7533
      @azamatmussauatov7533 Рік тому

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

  • @ТвойСоветчик
    @ТвойСоветчик Рік тому

    5:12:10