MaxGraph - cайты как страсть
MaxGraph - cайты как страсть
  • Видео 377
  • Просмотров 2 710 539
Адаптивная верстка сайта с нуля с пояснениями. Макет 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
Полезные ссылки:
🤌 Макеты для верстк...
Просмотров: 1 401

Видео

Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 4. Страницы Product и Cart
Просмотров 96728 дней назад
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом 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
Просмотров 731Месяц назад
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом 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
Просмотров 981Месяц назад
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом 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. Главная страница
Просмотров 4,8 тыс.Месяц назад
Привет. Этим видео начинаем новый марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом 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 тыс.4 месяца назад
В этом видео посмотрим плагин, позволяющий перемещать элементы на странице с помощью 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 тыс.5 месяцев назад
JS-решения №26. Создаем свой плагин видеоплеера
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 1. Верстка
Просмотров 10 тыс.7 месяцев назад
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 1. Верстка
UI-компоненты №19. Блок характеристик в интернет-магазинах
Просмотров 2,2 тыс.8 месяцев назад
UI-компоненты №19. Блок характеристик в интернет-магазинах
№6. Создание Яндекс.карты на сайте. Фильтрация меток на карте
Просмотров 3,5 тыс.8 месяцев назад
№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 тыс.11 месяцев назад
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,3 тыс.Год назад
Разбор тега picture. Для чего нужен, синтаксис, примеры

Комментарии

  • @lDonKaban
    @lDonKaban 11 часов назад

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

  • @user-frond-end_dev
    @user-frond-end_dev 16 часов назад

    Круто

  • @user-bf8mj1ln8l
    @user-bf8mj1ln8l День назад

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

  • @evgeny-fk1fj
    @evgeny-fk1fj День назад

    кайф

  • @user-pm3ms3kd9h
    @user-pm3ms3kd9h 2 дня назад

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

  • @BEKS705
    @BEKS705 3 дня назад

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

  • @yuritian8830
    @yuritian8830 5 дней назад

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

  • @Alexs82286
    @Alexs82286 5 дней назад

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

    • @maxgraph
      @maxgraph 4 дня назад

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

  • @NightBos
    @NightBos 5 дней назад

    Thank you very much ❤😊

  • @intex.c1
    @intex.c1 5 дней назад

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

  • @vinumanno8897
    @vinumanno8897 8 дней назад

    СПА-СИ-БО!

  • @user-tf1zk1yv7j
    @user-tf1zk1yv7j 8 дней назад

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

  • @mugivargames
    @mugivargames 8 дней назад

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

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 9 дней назад

    11:30 Burger

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 9 дней назад

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

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 9 дней назад

    smooth-scroll 1:20:00 =)

  • @user-nd6cs1kz9c
    @user-nd6cs1kz9c 10 дней назад

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

    • @maxgraph
      @maxgraph 8 дней назад

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

    • @user-nd6cs1kz9c
      @user-nd6cs1kz9c 8 дней назад

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

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 10 дней назад

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

  • @lololowkarar
    @lololowkarar 10 дней назад

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

  • @user-dr1dk4no9q
    @user-dr1dk4no9q 13 дней назад

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

  • @user-ou6yd3vp7e
    @user-ou6yd3vp7e 16 дней назад

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

    • @maxgraph
      @maxgraph 15 дней назад

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

    • @user-ou6yd3vp7e
      @user-ou6yd3vp7e 15 дней назад

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

  • @NightBos
    @NightBos 17 дней назад

    Спасибо. ❤❤❤

  • @dai_mne_skazat
    @dai_mne_skazat 19 дней назад

    СПАСИБО

  • @witalion
    @witalion 19 дней назад

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

  • @ksoar8994
    @ksoar8994 20 дней назад

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

  • @velessn
    @velessn 20 дней назад

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

  • @TeomunMete
    @TeomunMete 21 день назад

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

    • @maxgraph
      @maxgraph 19 дней назад

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

    • @TeomunMete
      @TeomunMete 19 дней назад

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

  • @Krylowandrey
    @Krylowandrey 21 день назад

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

  • @user-alexeev_ad
    @user-alexeev_ad 22 дня назад

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

    • @maxgraph
      @maxgraph 22 дня назад

      Да просто)

  • @user-mu1ul8qj1x
    @user-mu1ul8qj1x 22 дня назад

    🤩🤩🤩

  • @hjetwd
    @hjetwd 23 дня назад

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

    • @maxgraph
      @maxgraph 23 дня назад

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

  • @user-if5nm9iu5z
    @user-if5nm9iu5z 23 дня назад

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

    • @maxgraph
      @maxgraph 23 дня назад

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

  • @tatsumasa6659
    @tatsumasa6659 23 дня назад

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

  • @greyneck812
    @greyneck812 24 дня назад

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

    • @maxgraph
      @maxgraph 23 дня назад

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

  • @olegkuntsevich5501
    @olegkuntsevich5501 25 дней назад

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

    • @maxgraph
      @maxgraph 23 дня назад

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

    • @olegkuntsevich5501
      @olegkuntsevich5501 20 дней назад

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

  • @user-yy2yb3pl5e
    @user-yy2yb3pl5e 25 дней назад

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

  • @user-wu2py9cj9p
    @user-wu2py9cj9p 25 дней назад

    Огромное спасибо!

  • @user-gg2ye5gw2h
    @user-gg2ye5gw2h 25 дней назад

    Отдельное спасибо за объяснение js реализации счётчика. Не знал как еого делать правильно

  • @greyneck812
    @greyneck812 26 дней назад

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

  • @user-br9tr5xn3y
    @user-br9tr5xn3y 26 дней назад

    столько полезных хаков спасибо. вместе с вёрсткой изучаю английский язык и кажется product читается как продакт или праадакт

    • @maxgraph
      @maxgraph 25 дней назад

      Да привычка уже называть определённые слова)

  • @tabalk
    @tabalk 26 дней назад

    отлично! ещё давай!

  • @user-yy2yb3pl5e
    @user-yy2yb3pl5e 26 дней назад

    Спасибо вам, очень крутой урок! Просто кайфую!

  • @user-fl5xp5xp8q
    @user-fl5xp5xp8q 26 дней назад

    Спасисбо большое за видео, Максим! свой путь во фронте начинал с курсов на Skillbox и ты там был ментором) сейчас я работаю фронтом на реакте, поступила задача сверстать экраны для email и тут твоё видео! Видео очень помогло и даже макет почти совпал) Спасибо