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

Привет. Этим видео начинаем новый марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали)

Доп. контент и поддержка канала:

Полезные ссылки:

👋 Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет

#верстка #html #css

[muulqjx]

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

[KrasavchikSelivan]

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

[vjgsjes]

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

[qyyikcr]

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

[yyybple]

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

[slavaProg]

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

[muulqjx]

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

[muulqjx]

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

[Dron]

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

[hjetwd]

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

[RomanB-odqn]

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

[sergeykadantsev]

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

[kontorasb]

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

[RomanB-odqn]

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

[brtrxny]

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

[low_fage]

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

[BMikel]

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