MaxGraph - cайты как страсть
MaxGraph - cайты как страсть
  • 377
  • 2 717 649
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 5. Доработки и адаптив
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали)
Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119%3A3664&mode=design&t=YxFJ0k5MlBxQecIS-1
Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=sharing
Типограф: www.artlebedev.ru/typograf/
Библиотека перемещения элементов: github.com/SineYlo/transfer-elements/blob/main/readme-ru.md
Готовый код доступен по подписке: boosty.to/maxgraph
Доп. контент и поддержка канала:
❤️ boosty.to/maxgraph
❤️ www.donationalerts.com/r/maxdenaro
Полезные ссылки:
🤌 Макеты для верстки: verstaem.online/projects/
🤌 Задачки по верстке с решениями: verstaem.online/tasks/
🤌 Курс по верстке html-писем: verstaem.online/courses/html-emails/
🤌 Канал с полезностями в телеграм: t.me/maxgraph
🤌 Чат для верстальщиков: t.me/maxgraph_chat
🤙 ВК Видео: video/@maxgraph
👋 Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет
Подписывайся: www.youtube.com/@maxgraph?sub_confirmation=1
#верстка #html #css
Переглядів: 1 536

Відео

Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 4. Страницы Product и Cart
Переглядів 1 тис.Місяць тому
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали) Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119:3664&mode=design&t=YxFJ0k5MlBxQecIS-1 Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=sharing Типогра...
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 3. Страница Catalog
Переглядів 776Місяць тому
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали) Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119:3664&mode=design&t=YxFJ0k5MlBxQecIS-1 Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=sharing Типогра...
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 2. Страница About
Переглядів 1 тис.Місяць тому
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали) Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119:3664&mode=design&t=YxFJ0k5MlBxQecIS-1 Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=sharing Типогра...
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 1. Главная страница
Переглядів 5 тис.Місяць тому
Привет. Этим видео начинаем новый марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали) Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119:3664&mode=design&t=YxFJ0k5MlBxQecIS-1 Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=...
Знакомство с Container Queries
Переглядів 1,5 тис.2 місяці тому
Привет! В этом видео расскажу, что такое Container Queries, для чего он нужен. Также напишем небольшую страницу с использованием container queries. Содержание: 00:00 - Интро 00:16 - Что это такое 01:36 - Базовый пример 07:15 - Реальный пример 24:48 - Поддержка свойства 25:30 - Немного о единицах измерения контейнера 28:42 - Аутро Готовый код: github.com/maxdenaro/maxgraph-youtube-source/tree/ma...
CSS-Задачи №1. Починка дома. Задача на отработку свойства display для начинающих
Переглядів 1,5 тис.3 місяці тому
Привет! В этом видео (и последующих видео плейлиста) я буду разбирать различные задачки или верстать небольшие макеты с какими-то интересными элементами внутри. Предлагайте свои варианты для видео сюда) t.me/maxgraph_chat verstaem.online/tasks/pochinka-doma/ - задание Доп. контент и поддержка канала: ❤️ boosty.to/maxgraph ❤️ www.donationalerts.com/r/maxdenaro Полезные ссылки: 🤌 Макеты для верст...
Figma Dev Mode стал платным. Что делать? Плагин Inspect Styles
Переглядів 9 тис.4 місяці тому
В этом видео рассказываю о плагине Inspect Styles, который начал разрабатывать еще в самом начале существования Dev Mode. Показываю, почему это лучшее решение из имеющихся. Содержание: 00:00 - Интро 00:35 - Иные решения (inspect в Figma или Pixso) 04:14 - Как установить плагин 05:37 - Вкладка "основное" 08:07 - Вкладка "стили" 09:45 - Вкладка "настройки" 13:23 - Ресайз плагина 14:00 - Вывод SVG...
JS-плагины №16. Перемещение элементов в разметке на разной ширине экрана
Переглядів 1,8 тис.5 місяців тому
В этом видео посмотрим плагин, позволяющий перемещать элементы на странице с помощью JS. Очень полезно при создании адаптивных версий сайта. 👉 Плагин: github.com/SineYlo/transfer-elements/blob/main/readme-ru.md 👉 Готовый код: t.me/maxgraph_chat/167143/282768 Содержание: 00:00 - Интро 00:35 - Разбор плагина 07:03 - Аутро Доп. контент и поддержка канала: ❤️ boosty.to/maxgraph ❤️ www.donationalert...
UI-компоненты №20. Показ акций на сайте в зависимости от даты
Переглядів 1,2 тис.5 місяців тому
В этом видео посмотрим, как можно сделать акции на сайте, которые будут выводиться из JSON в зависимости от текущей даты. В том числе добавим вывод серверной даты. 👉 Готовый код: t.me/maxgraph_chat/167143/278499 Содержание: 00:00 - Интро 01:06 - Верстаем карточку 02:22 - Пишем стили 04:01 - Пишем скрипт 18:28 - Используем серверную дату 22:29 - Аутро Доп. контент и поддержка канала: ❤️ boosty.t...
Итоги 2023 года. Планы на 2024. Поздравления
Переглядів 8955 місяців тому
Итоги 2023 года. Планы на 2024. Поздравления
JS-решения №26. Создаем свой плагин видеоплеера
Переглядів 2,8 тис.6 місяців тому
JS-решения №26. Создаем свой плагин видеоплеера
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 1. Верстка
Переглядів 10 тис.7 місяців тому
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 1. Верстка
UI-компоненты №19. Блок характеристик в интернет-магазинах
Переглядів 2,2 тис.8 місяців тому
UI-компоненты №19. Блок характеристик в интернет-магазинах
№6. Создание Яндекс.карты на сайте. Фильтрация меток на карте
Переглядів 3,5 тис.9 місяців тому
№6. Создание Яндекс.карты на сайте. Фильтрация меток на карте
JS-решения №25. Простое переключение страниц без перезагрузки (Ajax)
Переглядів 7 тис.9 місяців тому
JS-решения №25. Простое переключение страниц без перезагрузки (Ajax)
JS-решения №24. Превращение блоков в слайдер (swiper.js) при ресайзе. Универсальная функция
Переглядів 8 тис.10 місяців тому
JS-решения №24. Превращение блоков в слайдер (swiper.js) при ресайзе. Универсальная функция
Селекторы is, where
Переглядів 1,5 тис.10 місяців тому
Селекторы is, where
Вложенность в чистом CSS. CSS Nesting
Переглядів 2,1 тис.10 місяців тому
Вложенность в чистом CSS. CSS Nesting
Кому нужна платная фигма, когда есть это? Плагин Inspect Styles
Переглядів 7 тис.11 місяців тому
Кому нужна платная фигма, когда есть это? Плагин Inspect Styles
Figma Dev Mode. Новые фишки, мое мнение, и что нам делать дальше
Переглядів 7 тис.Рік тому
Figma Dev Mode. Новые фишки, мое мнение, и что нам делать дальше
Правильный порядок состояний (focus, hover, active) для элементов
Переглядів 3,5 тис.Рік тому
Правильный порядок состояний (focus, hover, active) для элементов
Как сверстать сайт по макету. Пошаговый план
Переглядів 5 тис.Рік тому
Как сверстать сайт по макету. Пошаговый план
Единицы измерения CSS. Px, em или rem - что использовать?
Переглядів 5 тис.Рік тому
Единицы измерения CSS. Px, em или rem - что использовать?
Назначение HTML-тегов в верстке №5. Теги картинок, ссылок, списков и интерактива
Переглядів 1,5 тис.Рік тому
Назначение HTML-тегов в верстке №5. Теги картинок, ссылок, списков и интерактива
Мой новый проект для развития навыков верстки - verstaem.online
Переглядів 5 тис.Рік тому
Мой новый проект для развития навыков верстки - verstaem.online
Назначение HTML-тегов в верстке №4. Теги форм
Переглядів 1,4 тис.Рік тому
Назначение HTML-тегов в верстке №4. Теги форм
Адаптивная верстка сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Макет Recidiviz
Переглядів 25 тис.Рік тому
Адаптивная верстка сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Макет Recidiviz
Назначение HTML-тегов в верстке №3. Семантические теги
Переглядів 2,7 тис.Рік тому
Назначение HTML-тегов в верстке №3. Семантические теги
Разбор тега picture. Для чего нужен, синтаксис, примеры
Переглядів 4,4 тис.Рік тому
Разбор тега picture. Для чего нужен, синтаксис, примеры

КОМЕНТАРІ

  • @user-jb4qb8cb5h
    @user-jb4qb8cb5h 9 годин тому

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

  • @user-mu1ul8qj1x
    @user-mu1ul8qj1x 19 годин тому

    Чем дальше верстаю тем больше начинаю понимать как много ты сюда знаний выложил это большая редкость спасибо большое.

  • @user-hy7ct2mp1g
    @user-hy7ct2mp1g 3 дні тому

    Прекрасные и полезные уроки ! Спасибо вам за контент

  • @user-mu1ul8qj1x
    @user-mu1ul8qj1x 4 дні тому

    очень хорошо объясняешь очень понятно. Я еще не пробовал верстать с препроцессорами, но думаю наличие такого большого разделения css файлов именно от туда.

  • @user-mu1ul8qj1x
    @user-mu1ul8qj1x 4 дні тому

    немного сложновато написано в том плане что много классов и пока я в начале, но вижу расхождение это оплошность или дизайнера или верстальщика header у нас по ширине в макете не входит в container он должен быть по макету за ним на всю ширину экрана просто нижний сделать header__botom{display:flex; justify-content: center;}.Но много нового узнал спасибо за урок например то что в flex можно gap использовать а то до этого лепил margin вместо него.

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 5 днів тому

    25 минута - начало верстки страницы- карточка

  • @Oleg_zabiv
    @Oleg_zabiv 5 днів тому

    Большое спасибо

  • @lDonKaban
    @lDonKaban 7 днів тому

    Будут ли яндекс карты на react?)

  • @user-frond-end_dev
    @user-frond-end_dev 7 днів тому

    Круто

  • @user-bf8mj1ln8l
    @user-bf8mj1ln8l 7 днів тому

    Стрелками удобнее по всему сайту ходить так-то. И вообще у nvda очень много элементов навигации. Самое удобное - заголовки. Также можно ходить по кнопкам, редакторам, ориентирам и т.п. но нужно знать сайт, чтобы ходить по всем элементам навигации, кроме заголовков. Самое удобная навигация на незнакомом сайте - по заголовкам. Когда сайт уже знаком, извратиться можно любым способом. Особенно удобен поиск по экрану. Его открываешь, пишешь туда то, что хочешь найти, иищутся все объекты, на которых есть текст. Конечно, на странице должна быть определённая разметка. Бывает, что разметкинет, и тогда спасают только стрелочки и поиск по экрану.

  • @evgeny-fk1fj
    @evgeny-fk1fj 8 днів тому

    кайф

  • @user-pm3ms3kd9h
    @user-pm3ms3kd9h 8 днів тому

    Спасибо, полезный ролик. вопрос а можно ли всей карточке в той же "cart" задавать шрифты -weight, height,size,color - а потом отдельные значения заменять для title, descr, и тд

  • @BEKS705
    @BEKS705 10 днів тому

    Чувак!!! Огромнейшее спасибо за видос!!

  • @yuritian8830
    @yuritian8830 11 днів тому

    Кайф. Было бы круто, если в разделе "Шрифты в макете" можно было тыкать по названиям шрифта и он бы подсвечивал или там выделял блоки, где используется данный шрифт на макете.

    • @maxgraph
      @maxgraph 4 дні тому

      Плагин и так нагружен,поэтому не делал это

  • @Alexs82286
    @Alexs82286 12 днів тому

    здравствуйте! для данных уроков нужно знать php?

    • @maxgraph
      @maxgraph 11 днів тому

      Здравствуйте. Немного) но необязательно

  • @NightBos
    @NightBos 12 днів тому

    Thank you very much ❤😊

  • @intex.c1
    @intex.c1 12 днів тому

    Спасибо мастер

  • @vinumanno8897
    @vinumanno8897 14 днів тому

    СПА-СИ-БО!

  • @user-tf1zk1yv7j
    @user-tf1zk1yv7j 15 днів тому

    Так а эта карта будет масштабироваться на сайте? Обычно же масштабируются, чтобы человек мог посмотреть ближайшие ориентиры

  • @mugivargames
    @mugivargames 15 днів тому

    Прям круто писать программу ну мен я заебла то что все время в лядыватьс я нудно чес слово ибыстро говоришь. А так норм спасибо 0:00

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 15 днів тому

    11:30 Burger

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 15 днів тому

    модальное окно 1:30:00

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 15 днів тому

    smooth-scroll 1:20:00 =)

  • @user-nd6cs1kz9c
    @user-nd6cs1kz9c 16 днів тому

    Привет Макс, не могу понять это только у меня не работает твой плагин в Фигме "Inspect Styles" или его у всех заблокировали?

    • @maxgraph
      @maxgraph 15 днів тому

      Ничего не блокировали)

    • @user-nd6cs1kz9c
      @user-nd6cs1kz9c 15 днів тому

      @@maxgraph уже заработало, а то какую то ошибку выдавало, перепугался, думал заблочили, спасибо за крутой плагин 🤝

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 16 днів тому

    Максим лучший блогер, спасибо - раз два и вставил видео на сайт - ты лучший чел в ютуб блогерах и что уж там в вёрстке тоже

  • @lololowkarar
    @lololowkarar 17 днів тому

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

  • @user-dr1dk4no9q
    @user-dr1dk4no9q 20 днів тому

    Отличное объяснение, спасибо за урок. Понравился пример

  • @user-ou6yd3vp7e
    @user-ou6yd3vp7e 22 дні тому

    а если мне надо по вертикали сделать

    • @maxgraph
      @maxgraph 22 дні тому

      Поменять трансформ надо)

    • @user-ou6yd3vp7e
      @user-ou6yd3vp7e 22 дні тому

      @@maxgraph хорошо, если у меня разные объекты, в моей ситуации SVG изображения разного размера, данный метод уже не сработает?

  • @NightBos
    @NightBos 24 дні тому

    Спасибо. ❤❤❤

  • @dai_mne_skazat
    @dai_mne_skazat 26 днів тому

    СПАСИБО

  • @witalion
    @witalion 26 днів тому

    сборка после обновления ошибку выдает, [ERR_REQUIRE_ESM]: require() of ES Module. как минимум нужно npm install del@6.1.1 (откатить).

  • @ksoar8994
    @ksoar8994 26 днів тому

    Сделал несколько своих проектов и хотел понять, что я делаю не так, как могу улучшить, да и вообще сравнить с работой опытного верстальщика. Спасибо, за труд, подметил много нюансов для себя, теперь буду делать значительно лучше)

  • @velessn
    @velessn 27 днів тому

    на 47:14 если мы вводим в инпут число равное максимальному, + должен быть disabled, следовательно нужно добавить проверку на равенство введенного числа в инпут, максимальному. А по коду у нас 2 условия, либо больше, либо меньше, тобишь еще одно условие if (stepperInputEl.value == stepperMax) { stepperInputEl.value = stepperMax; stepperBtnPlusEl.classList.add('stepper__btn--disabled'); }

  • @TeomunMete
    @TeomunMete 27 днів тому

    Я из Стамбула не могу платить за boosty . Есть другой вариант за донатит и смотреть на ваш код ?

    • @maxgraph
      @maxgraph 26 днів тому

      Здравствуйте. Другого варианта сейчас увы нет

    • @TeomunMete
      @TeomunMete 25 днів тому

      Спасибо за контент.

  • @Krylowandrey
    @Krylowandrey 28 днів тому

    Что за редактор?

  • @user-alexeev_ad
    @user-alexeev_ad 28 днів тому

    А почему substring а не slice?)

    • @maxgraph
      @maxgraph 28 днів тому

      Да просто)

  • @user-mu1ul8qj1x
    @user-mu1ul8qj1x 29 днів тому

    🤩🤩🤩

  • @hjetwd
    @hjetwd 29 днів тому

    1:31:00 у <img> нет "дефекта", который оставляет пропуск под ними, это стандартное поведение картинки - так и должно быть. картинка это inline элемент, фактически картинка это текст. а раз в html это текстовый элемент, значит что бы убрать снизу пропуск, достаточно опустить картинку как текст вниз строки - vertical-align: middle; всё.

    • @maxgraph
      @maxgraph 29 днів тому

      Дисплеем проще исправить)

  • @user-if5nm9iu5z
    @user-if5nm9iu5z Місяць тому

    Подскажите, почему при отправке данных, у меня не приходит данные в телеграм бот, а открывается страница в браузере с php кодом?

    • @maxgraph
      @maxgraph 29 днів тому

      Где-то ошиблись в коде, так догадаться сложно

  • @tatsumasa6659
    @tatsumasa6659 Місяць тому

    Зашел на сайт но у меня не анимируются разные команды и надпись вообще никак не меняется. Что делать, кто сталкивался ?

  • @greyneck812
    @greyneck812 Місяць тому

    соседи ремонт делают? звук перфоратора слышен🙃

    • @maxgraph
      @maxgraph 29 днів тому

      Ага) есть такое

  • @olegkuntsevich5501
    @olegkuntsevich5501 Місяць тому

    Добрый день! Всё замечательно, но у меня при вставке в DOM 3-го селектора возникает ошибка: "Trying to initialise Choices on element already initialised".

    • @maxgraph
      @maxgraph 29 днів тому

      Значит ошибка в коде, уже инициализирован данный элемент

    • @olegkuntsevich5501
      @olegkuntsevich5501 26 днів тому

      @@maxgraph Решил проблему через добавления уникального класса с помощью счётчика

  • @user-yy2yb3pl5e
    @user-yy2yb3pl5e Місяць тому

    отличная серия уроков 👌👌👌