Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 1. Главная страница

Привет. Этим видео начинаем новый марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали)
Макет: www.figma.com/file/RArY7BvPfH...
Стартовая папка: drive.google.com/drive/folder...
Типограф: www.artlebedev.ru/typograf/
Библиотека перемещения элементов: github.com/SineYlo/transfer-e...
Готовый код доступен по подписке: boosty.to/maxgraph
Доп. контент и поддержка канала:
❤️ boosty.to/maxgraph
❤️ www.donationalerts.com/r/maxd...
Полезные ссылки:
🤌 Макеты для верстки: verstaem.online/projects/
🤌 Задачки по верстке с решениями: verstaem.online/tasks/
🤌 Курс по верстке html-писем: verstaem.online/courses/html-...
🤌 Канал с полезностями в телеграм: t.me/maxgraph
🤌 Чат для верстальщиков: t.me/maxgraph_chat
🤙 ВК Видео: video/@maxgraph
👋 Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет
Подписывайся: / @maxgraph
#верстка #html #css

Пікірлер: 45

  • @user-qy9yi1kc3r
    @user-qy9yi1kc3r23 күн бұрын

    Максим ты просто подарок от Бога для тех кто учит фронтенд) спасибо огромное)

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Пожалуйста) рад, что это помогает

  • @KrasavchikSelivan
    @KrasavchikSelivan23 күн бұрын

    Как по мне, макет очень простой, в реальности к сожалению таких простых не встречается почти, по крайней мере мне, везде куча всяких разнообразных нюансов. Уже сам подумываю записывать видео о сложных моментах, которые мне встречались в ходе верстки. Автору мое уважение, учился в том числе и по его видео, до его уровня мне еще далеко, хотя казалось бы, что там сложного, это же просто верстка, но нюансов и правда много

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Я каждый день верстаю) Встречаются ещё как А насчёт сложных макетов - предлагайте)

  • @kerusdc8322

    @kerusdc8322

    19 күн бұрын

    @@maxgraph предлагаю на странице категории товаров реализовать фильтр не просто сверстав чекбоксы, а сделать его рабочим. например: в итемы товаров добавлять data-color="red/green/yellow и тд" для фильтрации по цвету. добавить подобные дата-атрибуты и под остальные чекбоксы в фильтре. связать это не при помощи php, а при помощи js. и чтоб по итогу при клике на чекбокс в фильтре, на странице отображались только товары, соответствующие нажатым чекбоксам в фильтре.

  • @user-vj7gs1je9s
    @user-vj7gs1je9s22 күн бұрын

    Макс, спасибо за видео! Давай следующий макет когда будешь делать - сделай на некст js react js)))

  • @slavaProg
    @slavaProg23 күн бұрын

    Только заметил думаю будет интересно и познавательно!

  • @user-yy2yb3pl5e
    @user-yy2yb3pl5e13 күн бұрын

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

  • @TeomunMete
    @TeomunMete24 күн бұрын

    Большое спасибо мастер

  • @alexdreamer11
    @alexdreamer1119 күн бұрын

    Благодарю за твой труд и новый сайт

  • @martinpokrovski9212
    @martinpokrovski921223 күн бұрын

    Спасибо за обучающее видео

  • @user-xp5sk1sj7g
    @user-xp5sk1sj7g15 күн бұрын

    Большое спасибо за видео!

  • @hjetwd
    @hjetwd9 күн бұрын

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

  • @maxgraph

    @maxgraph

    9 күн бұрын

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

  • @ksoar8994
    @ksoar899422 күн бұрын

    спасибо, жду продолжение

  • @user-wr3zw8zm6b
    @user-wr3zw8zm6b23 күн бұрын

    Спасибо. Супер.

  • @marpusik1277
    @marpusik127722 күн бұрын

    спасибо 😇

  • @246Dron
    @246Dron23 күн бұрын

    Это всё конечно хорошо, но таких стримов с вёрсткой простых макетов в Ютубе очень много. А вот реально не стандартных почти нет. Я конечно понимаю, что такие ролики соберут больше просмотров, но , зная твой уровень, жду от тебя хотя бы средних по сложности макетов с вёрсткой, ведь столько нюансов ещё не освещено, а не эти вот все меню в строчку в хедере и адаптивные грид сеточки

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Предлагайте макет, посмотрю

  • @sergeykadantsev9217
    @sergeykadantsev921723 күн бұрын

    А ты размер шрифта всего сайта всегда фиксируешь? Типо если в настройках браузера его увеличить, то на сайте не меняется. Или иногда делаешь через em, в зависимости от ТЗ.

  • @maxgraph

    @maxgraph

    23 күн бұрын

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

  • @kontorasb2754
    @kontorasb275423 күн бұрын

    Добрый день! Подскажите по gulp 3.0.0 у вас еще не бвло обзорнрго видео?

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Добрый. Не было) а надо?)

  • @kontorasb2754

    @kontorasb2754

    21 күн бұрын

    @@maxgraph если ничего не изменилось, то нет, если да, то хотя бы кратко в части изменений)

  • @RomanB-od1qn
    @RomanB-od1qn21 күн бұрын

    привет , есть твои настройки vs code?) нравиться как плавно работает курсор когда пишешь код

  • @maxgraph

    @maxgraph

    19 күн бұрын

    Привет. Ну наверное в редакторе есть) напиши в чатик телеги, тегая меня. Посмотрю

  • @low_fage
    @low_fage23 күн бұрын

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

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Я делаю только вёрстку)

  • @low_fage

    @low_fage

    23 күн бұрын

    @@maxgraph эх, хотелось бы увидеть как строится вся система сайта))) надеюсь, что выйдет у тебя что-то подобное когда-нибудь:)

  • @greyneck812
    @greyneck81219 күн бұрын

    при верстке, когда верстаем блок .benefits в css даем padding 60px и 80px, но они не отрабатывают если класс .benefits добавить контейнеру (), тогда отрабатывает. Или я где то сам ошибся?

  • @maxgraph

    @maxgraph

    19 күн бұрын

    Скорее всего да, где-то ошибка

  • @greyneck812

    @greyneck812

    19 күн бұрын

    @@maxgraphпопробую найти, вчера поиски не дали результатов 😊

  • @user-br9tr5xn3y
    @user-br9tr5xn3y12 күн бұрын

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

  • @maxgraph

    @maxgraph

    12 күн бұрын

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

  • @RomanB-od1qn
    @RomanB-od1qn23 күн бұрын

    Давай с galp, припроцесором, сейчас без этого никуда.

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Это вообще необязательные вещи)

  • @BMikel
    @BMikel23 күн бұрын

    На реальных коммерческих проектах ну прям ооочень редко такие примитивные макеты. Взять хотя бы меню: в интернет магазинах оно обычно многоуровневое, мега-меню. Даже оно не меню называется, а каталог. Може будет когда-то такое?

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Про такое меню давно есть видео

  • @C0MFR7
    @C0MFR723 күн бұрын

    У Вас есть свое портфолио?

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Уже старое) MaxGraph.ru

  • @C0MFR7

    @C0MFR7

    23 күн бұрын

    @@maxgraph Вы сами макет придумывали или заказывали?

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Заказывал)

  • @mirzoki
    @mirzoki23 күн бұрын

    верстаем онлайн, твой сайт ?

  • @maxgraph

    @maxgraph

    23 күн бұрын

    Да

  • @mirzoki

    @mirzoki

    23 күн бұрын

    @@maxgraph ты лучший)

Келесі