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

  Рет қаралды 5,413

MaxGraph - cайты как страсть

MaxGraph - cайты как страсть

Ай бұрын

Привет. Этим видео начинаем новый марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом 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

Пікірлер: 49
@user-mu1ul8qj1x
@user-mu1ul8qj1x 4 күн бұрын
Чем дальше верстаю тем больше начинаю понимать как много ты сюда знаний выложил это большая редкость спасибо большое.
@user-mu1ul8qj1x
@user-mu1ul8qj1x 8 күн бұрын
очень хорошо объясняешь очень понятно. Я еще не пробовал верстать с препроцессорами, но думаю наличие такого большого разделения css файлов именно от туда.
@KrasavchikSelivan
@KrasavchikSelivan Ай бұрын
Как по мне, макет очень простой, в реальности к сожалению таких простых не встречается почти, по крайней мере мне, везде куча всяких разнообразных нюансов. Уже сам подумываю записывать видео о сложных моментах, которые мне встречались в ходе верстки. Автору мое уважение, учился в том числе и по его видео, до его уровня мне еще далеко, хотя казалось бы, что там сложного, это же просто верстка, но нюансов и правда много
@maxgraph
@maxgraph Ай бұрын
Я каждый день верстаю) Встречаются ещё как А насчёт сложных макетов - предлагайте)
@kerusdc8322
@kerusdc8322 Ай бұрын
@@maxgraph предлагаю на странице категории товаров реализовать фильтр не просто сверстав чекбоксы, а сделать его рабочим. например: в итемы товаров добавлять data-color="red/green/yellow и тд" для фильтрации по цвету. добавить подобные дата-атрибуты и под остальные чекбоксы в фильтре. связать это не при помощи php, а при помощи js. и чтоб по итогу при клике на чекбокс в фильтре, на странице отображались только товары, соответствующие нажатым чекбоксам в фильтре.
@user-vj7gs1je9s
@user-vj7gs1je9s Ай бұрын
Макс, спасибо за видео! Давай следующий макет когда будешь делать - сделай на некст js react js)))
@user-qy9yi1kc3r
@user-qy9yi1kc3r Ай бұрын
Максим ты просто подарок от Бога для тех кто учит фронтенд) спасибо огромное)
@maxgraph
@maxgraph Ай бұрын
Пожалуйста) рад, что это помогает
@user-yy2yb3pl5e
@user-yy2yb3pl5e Ай бұрын
Спасибо вам, очень крутой урок! Просто кайфую!
@slavaProg
@slavaProg Ай бұрын
Только заметил думаю будет интересно и познавательно!
@TeomunMete
@TeomunMete Ай бұрын
Большое спасибо мастер
@user-mu1ul8qj1x
@user-mu1ul8qj1x 8 күн бұрын
немного сложновато написано в том плане что много классов и пока я в начале, но вижу расхождение это оплошность или дизайнера или верстальщика header у нас по ширине в макете не входит в container он должен быть по макету за ним на всю ширину экрана просто нижний сделать header__botom{display:flex; justify-content: center;}.Но много нового узнал спасибо за урок например то что в flex можно gap использовать а то до этого лепил margin вместо него.
@alexdreamer11
@alexdreamer11 Ай бұрын
Благодарю за твой труд и новый сайт
@martinpokrovski9212
@martinpokrovski9212 Ай бұрын
Спасибо за обучающее видео
@user-xp5sk1sj7g
@user-xp5sk1sj7g Ай бұрын
Большое спасибо за видео!
@ksoar8994
@ksoar8994 Ай бұрын
спасибо, жду продолжение
@user-frond-end_dev
@user-frond-end_dev 10 күн бұрын
Круто
@user-wr3zw8zm6b
@user-wr3zw8zm6b Ай бұрын
Спасибо. Супер.
@marpusik1277
@marpusik1277 Ай бұрын
спасибо 😇
@hjetwd
@hjetwd Ай бұрын
1:31:00 у нет "дефекта", который оставляет пропуск под ними, это стандартное поведение картинки - так и должно быть. картинка это inline элемент, фактически картинка это текст. а раз в html это текстовый элемент, значит что бы убрать снизу пропуск, достаточно опустить картинку как текст вниз строки - vertical-align: middle; всё.
@maxgraph
@maxgraph Ай бұрын
Дисплеем проще исправить)
@user-br9tr5xn3y
@user-br9tr5xn3y Ай бұрын
столько полезных хаков спасибо. вместе с вёрсткой изучаю английский язык и кажется product читается как продакт или праадакт
@maxgraph
@maxgraph Ай бұрын
Да привычка уже называть определённые слова)
@246Dron
@246Dron Ай бұрын
Это всё конечно хорошо, но таких стримов с вёрсткой простых макетов в Ютубе очень много. А вот реально не стандартных почти нет. Я конечно понимаю, что такие ролики соберут больше просмотров, но , зная твой уровень, жду от тебя хотя бы средних по сложности макетов с вёрсткой, ведь столько нюансов ещё не освещено, а не эти вот все меню в строчку в хедере и адаптивные грид сеточки
@maxgraph
@maxgraph Ай бұрын
Предлагайте макет, посмотрю
@sergeykadantsev9217
@sergeykadantsev9217 Ай бұрын
А ты размер шрифта всего сайта всегда фиксируешь? Типо если в настройках браузера его увеличить, то на сайте не меняется. Или иногда делаешь через em, в зависимости от ТЗ.
@maxgraph
@maxgraph Ай бұрын
Если нужно изменить размер шрифта, всегда можно изменить масштаб сайта. Поэтому пикселей хватает за глаза
@kontorasb2754
@kontorasb2754 Ай бұрын
Добрый день! Подскажите по gulp 3.0.0 у вас еще не бвло обзорнрго видео?
@maxgraph
@maxgraph Ай бұрын
Добрый. Не было) а надо?)
@kontorasb2754
@kontorasb2754 Ай бұрын
@@maxgraph если ничего не изменилось, то нет, если да, то хотя бы кратко в части изменений)
@low_fage
@low_fage Ай бұрын
Тут будет только верстка или покажешь в лайве как доводишь сайт до самого конца, чтобы им можно пользоваться любому?
@maxgraph
@maxgraph Ай бұрын
Я делаю только вёрстку)
@low_fage
@low_fage Ай бұрын
@@maxgraph эх, хотелось бы увидеть как строится вся система сайта))) надеюсь, что выйдет у тебя что-то подобное когда-нибудь:)
@RomanB-od1qn
@RomanB-od1qn Ай бұрын
Давай с galp, припроцесором, сейчас без этого никуда.
@maxgraph
@maxgraph Ай бұрын
Это вообще необязательные вещи)
@RomanB-od1qn
@RomanB-od1qn Ай бұрын
привет , есть твои настройки vs code?) нравиться как плавно работает курсор когда пишешь код
@maxgraph
@maxgraph Ай бұрын
Привет. Ну наверное в редакторе есть) напиши в чатик телеги, тегая меня. Посмотрю
@greyneck812
@greyneck812 Ай бұрын
при верстке, когда верстаем блок .benefits в css даем padding 60px и 80px, но они не отрабатывают если класс .benefits добавить контейнеру (), тогда отрабатывает. Или я где то сам ошибся?
@maxgraph
@maxgraph Ай бұрын
Скорее всего да, где-то ошибка
@greyneck812
@greyneck812 Ай бұрын
@@maxgraphпопробую найти, вчера поиски не дали результатов 😊
@BMikel
@BMikel Ай бұрын
На реальных коммерческих проектах ну прям ооочень редко такие примитивные макеты. Взять хотя бы меню: в интернет магазинах оно обычно многоуровневое, мега-меню. Даже оно не меню называется, а каталог. Може будет когда-то такое?
@maxgraph
@maxgraph Ай бұрын
Про такое меню давно есть видео
@mirzoki
@mirzoki Ай бұрын
верстаем онлайн, твой сайт ?
@maxgraph
@maxgraph Ай бұрын
Да
@mirzoki
@mirzoki Ай бұрын
@@maxgraph ты лучший)
@C0MFR7
@C0MFR7 Ай бұрын
У Вас есть свое портфолио?
@maxgraph
@maxgraph Ай бұрын
Уже старое) MaxGraph.ru
@C0MFR7
@C0MFR7 Ай бұрын
@@maxgraph Вы сами макет придумывали или заказывали?
@maxgraph
@maxgraph Ай бұрын
Заказывал)
3 wheeler new bike fitting
00:19
Ruhul Shorts
Рет қаралды 50 МЛН
Жайдарман | Туған күн 2024 | Алматы
2:22:55
Jaidarman OFFICIAL / JCI
Рет қаралды 1,1 МЛН
Делаем адаптивное меню для сайта
47:26
MaxGraph - cайты как страсть
Рет қаралды 11 М.
Знакомство с Container Queries
29:32
MaxGraph - cайты как страсть
Рет қаралды 1,5 М.
CSS Units in Tamil | Front End Dev Series | Episode 09
36:46
Advanced  UIKit - ШМР iOS 2024
Young&&Yandex
Рет қаралды 8
3 wheeler new bike fitting
00:19
Ruhul Shorts
Рет қаралды 50 МЛН