Адаптивная верстка сайта с нуля для новичков. Полезные советы по верстке сайта
Vložit
- čas přidán 1. 06. 2024
- Привет! Это уже четвертый марафон на канале, и его я хочу выделить отдельно, так как постарался сделать его для новичков, максимально рассказывая все нюансы. Возможно, я где-то поспешил - напишите об этом в комментариях.
Содержание:
00:00 - Вступление
00:45 - Старт работы (разметка сайта)
32:13 - Работа с CSS (стилизация сайта)
01:49:28 - Адаптив сайта
02:00:33 - Заключение
Ссылка на верстку: github.com/maxdenaro/maxgraph...
Ссылка на макет: www.figma.com/file/2rdy1qjBTl...
В макете две страницы, вам нужна Page 2, где укороченная версия макета.
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
#ityoutubersru #марафонверстки #для_новичков
Привет! Обновил на github блок get started, спасибо подписчикам, указавшим на неточность. Блок был сделан неровно, не по контейнеру - исправил с помощью calc.
.get-started {
padding-left: calc((100% - 1110px) / 2);
padding-right: 15px;
margin-right: calc((100% - 1110px) / 2);
}
@media (max-width: 1140px) {
.get-started {
padding-left: 15px;
margin: 0;
}
}
А так не будет больше соответствия макету? Тогда этот блок ограничится справа по одной линии с основным контейнером .container, как в макете (надеюсь, меня поняли). И свойство width: 89% для .get-started тоже не нужно будет.
Самый лучший видос по вёрстке) Минимум воды, максимум содержания, всё понятно и доступно. Благодарю от души)
Пожалуйста)
Очень благодарен за ценный курс! 3 дня разбирал ролик и писал структуру и оформление, на базовом уровне теперь легко ориентируюсь. Спасибо!
Пожалуйста)
Отличный урок! Мне кажется, таких мало. Обычно мало кто объясняет почему делается так или эдак, просто повторять за кем-то не вариант для новичков. Я хоть и не очень новичок, но с удовольствием смотрела и верстала. Спасибо
Случайно наткнулся на этот канал!!! Автор спасибо что делитесь со своим опытом и знанием. Все четко и понятно!!! Удачи вам!!! И побольше таких видео про верстку)))
Спасибо))
Спасибо, очень сильно помог понять вёрстку ещё лучше!
Сколько видосов смотрел уже у других авторов, вы реально талант)) максимально четко, доходчиво, с правильным темпом без воды и лишних слов. Бывает включаешь кого-то кто курсы продаёт и ощущение что они учат тех кто всё и так знает, ибо чтобы понимать жаргон гореучителей, нужно наверное родиться в системном блоке))) а тут я не могу остановить видосы, очень интересно и понятно
Здорово)
Большое спасибо, сидел под впечатлением весь ролик, узнал много нового, большое спасибо!
Спасибо автору за марафон, практиковал html css, вторая верстка, узнал для себя много нового, удачи!
Отличный урок! Все доступно и понятно! Благодарю!
Спасибо)
Про burger было всё понятно. Оно того стоило, спасибо)
Круто! Прошел за 3 захода. Отдельное спасибо автору за объяснения и внесения чего-то необычного по типу переменных. Пройдя урок, я нашел много ответов на мои вопросы.
Пожалуйста)
Хороший урок, отличная подача материала 👍Спасибо!
Пожалуйста)
Отличный выпуск, без воды и все очень ясно 👍
Спасибо)
Отличное видео и объяснения супер!!! Максим, сделайте такого же формата для новичков по JS чтобы понять что кака работает в кухне JS, какие элементы за что отвечают, где разные методы смотреть и т.д. )))
Да будет когда нибудь, но это большой и сложный материал)
Макс! Это супер видео для начинающих! Просто лучше не найти. Я попробовал 6 уроков для новичков и только на твоем я дошел до самого конца и у меня все получилось! Спасибо тебе за потрясающий контент. Я посмотрю все твои видео и всячески буду тебя поддерживать! Огонь мужик!
Круто)) спасибо!
Спасибо;) все четко, без воды.
Пожалуйста))
Отличное видео, все работает прекрасно! Объяснения очень четкие и подробные. Спасибо!
Пожалуйста)
Автору огромный респект! Всё суперпонятно, жду новых марафонов
Спасибо)) пока что комп в ремонте, но будут
@@maxgraph Тогда ждём. Пока что Вы - единственный человек, кто показал от нуля до адаптации. Хотелось бы ещё поверстать вместе с Вами и набить руку. Ждём)
Огромное спасибо за видео! Супер полезно! Все понятно
Пожалуйста)
балдежный материал, автору спасибо, понял как делать адаптив) это 5 или 6 ролик по адаптиву, тут хоть и вкратце объяснил, но я понял! подписался!
Спасибо))
Спасибо за видео. Я очень мало знаю про верстку, но твое видео точно было полезным. Удачи
Пожалуйста)
Было бы отлично увидеть решение с разной шириной блоков в футере. За работу огромное Спасибо!
Нажал на видос, за полминуты подписался и поставил лайк, это талант)
Как раз то что мне и нужно)
Спасибо))
Благодарю за труд!
То что доктор прописал, спасибо большое за полезный контент
Пожалуйста)
Для footer-column:last-child:before left можно вычислять вместо " calc( ( -1 * (-var(--grid-gap) ) ) " с помощью более лаконичной записи " calc( var(--grid-gap) * -1) ".
Если вы пишите стили, используя препроцессор SCSS, и у вас при использовании переменных в calc() они подсвечиваются как ошибки, то надо использовать: calc(#{$offset-vertical} + 6px)
Спасибо, все просто замечательно), все получилось)
Отлично))
Объяснение лучшее! Спасибо
Пожалуйста)
одно из лучших видео на канале столько полезных фишек если еще бэм там был лучшее видео
Спасибо за видео, очень нравится что нет всякой надстроечной хрени вроде БЭМ, препроцессоров и тд, если людей учат верстке, то сначала нужно пройти именно эти азы
Пожалуйста)
Спасибо вам огромное за то что выкладываете такие полезные ролики в этом видео ролике я научился многому спасибо еще раз с меня подписка и лайк вы очень крутой ютубер не заканчиваете снимать такоц контент так как это сильно заходит и помогает другим людям продвегаться в сфере программирования удачи вам в видео роликах буду следить за каналом вашим))))
Спасибо!)
привет! сделай пожалуйста разбор полного лендинга этого макета) очень интересно как остальные блоки верстаются, спасибо!
Шикарно. Спасибо огромное!
Пожалуйста)
Спасибо большое. Все предельно ясно!
Пожалуйста)
Это что у нас за палочка - непонятно 41:20 посмеялся от души ))
А есть ли у вас на канале еще подобное видео для новичков? Здесь вы очень подробно рассказываете о таких моментах в верстке, которые в обычных видео и уроках/курсах просто не говорят. Хотелось бы продолжить вместе с вами обучение и практику. И огромное спасибо за ваш труд. Для таких новичков, как я, это абсолютная ценность.
Ещё будут, пока нет)
Спасибо за видео, хорошо получилось!
Пожалуйста)
Все круто помогло. Спасибо за урок
Пожалуйста)
Бро, спасибо за контент. понял очень многое, однозначно лайк! :D
+subscription :)
Спасибо)
Однозначно подписка за такое видео.
Спасибо)
Максим привет, В футере я так и не понял зачем эта вертикальная полоса ?? и как ты ее рассчитал можешь пояснить ???
спасибо огромное за урок!
Пожалуйста)
Спасибо за помощь!
Пожалуйста =
Автор, у тебя бургер без абсолюта тоже получается, просто нужно чуть отступ сверху убрать
.burger{
padding: 7px 11px 14px 11px;
line-height: 4px;
спасибо! хорошо объясняете!
Пожалуйста)
Вы лучший!
Максим здравствуйте, подскажите пожалуйста, как сделать сделать блок с логотипами под "hero", который есть в полном макете?
Благодарю!👍
Хорошо объясняешь,всё понятно . Грызем гранит.
Спасибо)
Ну наконец-то, вот тебе мой царский лайк🤴🏻
Вопрос:
Как сборку gulp можно интегрировать в например Laravel ну или как можно его связывать с PHP ?! Было бы круто увеличить это с версткой интернет-магазина😁
Полюбому можно, но я не занимаюсь бэкендом))
Не зря потраченное время на просмотр, интересно)
Спасибо)
Вообще все очень понравилось спасибо! Но вот сначала, не будем усложнять говорил, все шло хорошо, вникал. Но как только бургер начался все. Мозг вскипел сразу. Это все конечно замечательно. Но для начинающих, кто учится, это было лишним.
Но в целом благодарю конечно! Материал очень полезен )
Поддерживаю!) про бургер - это уже не про новичков...
Привет! Спасибо ) Узнал несколько интересных решений. Только смутил момент с display: grid , недавно пользовался этим свойством, пока не открыл верстку в explorer и все накрылось женским органом)) и safari тоже не хочет с ним дружить
В сафари все окей)
А ie я не поддерживаю
@@maxgraph Пардон , с сафари все ок , это Opera Mini не хочет видеть. В общем, очень крутое и удобное свойство , и когда для себя его открыл радовался как ребенок. Конечно IE, это пережиток прошлого , но , возможно какие-то староверы пользуются. Мне как ветерану верстки с 3 месячным стажем сложно , не согласится . При проверки верстки заказчиками , это может как-то сыграть роль?
Все от заказа зависит) если им очень нужен ie - придется без гридов
очень крутой обзор!
Спасибо))
спасибо, всё отлично!!!!!
Пожалуйста)
Я уже прошла весь урок и мне показалось слишком быстро, и только в конце ты сказал, что можно было поставить на 0.75, хахах)а получилось очень круто, лучший урок по верстке
Спасибо)
Посмотрел марафон. Очень интересно, но не понятно почему так мало просмотров)
увы) спасибо)
Да куда уж детальней объяснять? Спасибо Макс, ты лучший. Канал смотрю подрос, меня не было долго.
Как никому другому желаю успехов в развитии канала.
Спасибо!))
Спасибо большое, только с Вами у меня получилось сверстать свой первый лендинг без каких-либо ошибок. До этого забрасывала сайты из-за того, что где-то что-то не так объяснили, допустила ошибку, а как исправить не знаю, т.к я только учусь. С Вами дошла до конца, все работает, супер, очень рада. У меня есть еще такой вопрос, когда я начну работать с клиентами, как после окончания верстки передавать клиенту готовый результат?
Можно собрать все в архив и скинуть)
я думал в конце сделаешь бургер меню рабочий и адаптируешь его
я делал макет но у меня с адаптацией бургер-меню вышла проблема и поэтому решил посмотреть этот видос может найду ответ на свои вопросы .Жаль но а так видео класс все четко понятно обьяснил автор.
Ещё будут подобные уроки))
Привет. Отдельно большое спасибо, что дал именно ссылку на макет. Я только начал изучать фронтенд, и у меня пока нет рабочего компьютера или ноутбука, поэтому я хочу устроиться на работу в этой области и заработать на него. К чему я веду? Я программирую на телефоне и не могу использовать фигму. А если перейти по ссылке и включить режим отображения в браузере, как на компьютере, то я смогу её использовать.
Спасибо
Ты крут, продолжай в том же духе.Сделай,если тебе не трудно с скриптами
Спасибо)
Спасибо, 😉!
Пожалуйста)
Как думаете, в css лучше использовать метод ресет-по-классу (36:38) или прописать отдельный файл reset.css?
лучше ресет по классу)
Спасибо, всё супер, но остались вопросы. Если не трудно ответь пожалуйста.
1. Почему ты используешь паддинги, а не марджины для отступов сверху? Это принципиально или вопрос вкуса?
2. Зачем элементам давать марджин 0, если он прописан в обнуляющем стиле?
3. Не слышал про нормалайз. Работаю в SCSS в VScode. Он компилит уже с префиксами. Что лучше? Или использовать и то и то?
Привет!
1. потому что существуют правила организации отступов, по ним так правильно. Видос на канале имеется)
2. Где написано?
3. префиксы с нормалайзом никак не связаны) нужно и то, и другое. Нормалайз приводит стили в разных браузерах к одному виду
Подскажите, пожалуйста, как вы печатаете текст сразу на нескольких строках (например, 29:33)? Какое это сочетание клавиш?
Альт зажать надо)
Ребят, можете сказать кто разбирается, на 1:22:36, вот мы применили свойство align-items: flex-start и оно применилось как я понял только к первым двум элементам, а как flexbox понимает что вот первые два элемента отности так сказать к start, а вот последний 3 элемент его не нужно касаться? Получается если задаем align-items: flex-start а элемента 3, то оно применится только к первым двум?
применилось оно ко всем четырем карточкам)
По поводу списка с гридом, разве не должен быть внутри этого элемента (services__item) внутренний padding, который как раз бы выставил элементы как в макете, или же это плохая практика задавать padding внутри item'a списка?
Да как удобно) нет запрета
Спасибо за видео. Что у вас за клавиатура? Звук кайфовый. А то моя слишком громкая
Моя тоже не очень тихая)) но шумодав микрофона работает
Anne pro 2
Максим, здравствуйте, а можно ли этот бургер сделать через display:flex, flex-direction:column, и через псевдокласс задать margin?
Можно что угодно)
Однозначно подписка
\
Спасибо)
Добрый день. Возник такой вопрос: мы поставили в .services-subtitle =max-width: 183px, а если потом заголовок увеличится не в количестве слов а увеличится длина первого слова,
например, будет не product в заголовке первой колонки, а какой-нибудь productoinson (слово только для примера) и также хотелось бы уточнить нужно ли ставить max-width для services-descr ?
Добрый день! Если слово увеличится - оно переполнит блок, да. Но вряд ли что-то сломается.
для services-descr не обязательно.
Вы поставили в фигме режим View only.
Там нельзя проводить никакие дополнительные линии итд.
Не могу понять,как мне,к примеру,узнать расстояние слева от заголовка к контейнеру?
Или же там есть возможность включить сетку?
Нажмите на название макета и duplicate to drafts - макет скопируется вам с нужными правами.
Вынужден делать view only, иначе люди могут сломать макет, случайно или намеренно)
@@maxgraph спасибо)
от души :)
Ее)
Лайк подписка комментарий
Позвольте поинтересоваться, в связи с чем были предприняты столь замороченные действия с кнопкой “бургер”? Почему нельзя было использовать SVG элемент?
Нравится так)
Встречались ли вам макеты с выходящими за container элементами, типа фонового изображения? Как их верстать для широкоформатных мониторов? Делать еще один здоровенный контейнер?
Через позишн абсолют и калк, думаю)
вы чудо
спасибо)
подскажите пожалуйста, на 24:42 вы когда выделяете link сразу выделяется на 2х строках. Это какая то встроенная функция вашего редактора или плагин? если плагин - подскажите пожалуйста название или может вы знаете, как загуглить, чтобы такое для саблайма найти? я даже не могу придумать, как запрос сформулировать))0
Здравствуйте, это встроенная фича всех редакторов кода) в вс коде на альт работает
@@maxgraph спасибо за ответ!))
1:12:40 Почему мы пишем inline-block для подзаголовка, но не делаем то же самое для самого заголовка, когда переопределяем их margin ? Изначально было сказано, что так как hero-subtitle - строчный элемент, то он не понимает ни размеров, ни отступов, поэтому мы делаем его inline-block. Но затем, когда нам нужны отступы у самого заголовка hero-title, мы не делаем его inline-block'ом. Почему ?
Заголовок блочный, он то умеет в маргины)
@@maxgraph Благодарю
Максим! Приветствую вас) не проще сделать бургер с помощью флекса? И битвин?) Как по мне в три строчки решается) P.S. Обожаю ваши ролики!)
Здравствуйте, может и проще))
Макс, вот ты чувак с бургером заморочился. Отдельное видео сними по бургеру на пару минут! По факту не проще svg воткнуть? Спасибо за контент, полезно!
еще автосейв поставь на 1 секунду и ненадо сохранять каждый раз при изменении html (управление-параметры-в параметре поиска написать "auto save" и поставить Files:auto save в параметр afterDelay и ниже задержку в миллисекундах оставить 1000), теперь можно писать код и переключаться на страницу без сохранения и без обновления страницы что удобно, особенно если на двух мониторах делать, на одном пишешь код, на втором страничка строится
Не, мне удобнее самому)
Отличное видео, будут ещё уроки для новичков?
Здравствуйте, да
Привет, а в какой программе ты открываешь psd файлы? Заранее спасибо)))))
Привет, Avocode)
о, вот это мне нада.
Пажилой адаптив
Здравствуйте)
Можно вопросы.
1.Вы используете сетки в крупных проектах?? Я вот дошел до степени когда они не нужны, но бывают такие замечания где клиент прям яро хочет этого (в коде он не разбирается)
2. Вот на ваших примерах да, все просто. а мне вот рисуют дизайн сайта 1920 - 1200 - 979 - 768 - 320 (появляются доп элементы и прочая лабуда) Это нормально?? или мне втык сделать дизайнеру?
3. Используете ли вы изолированные стили по БЭМ или у вас свой подход?
Здравствуйте!
1. Не использую, все можно сделать руками
2. Ваш пример ничем не отличается от моего по факту. Доп элементы - ничего страшного, это норма
3. Использую
Привет. Все круто, но остались вопросы. Почему logo img очень большая?
Надо смотреть, так не знаю
Максим здравствуйте. В готовом макете сайта при выделении самого "Webovio" не выделяется точка и логотип, что делать?
Не очень понял, что не так? (
@@maxgraph Просто когда я хотел в начале и в конце добавить "Webobio" и логотип, у меня выделилось только слово. А как сделать сам лого я не знаю. Надеюсь поняли)
@@user-gx8xj6kc3z ++++++++
Там есть группа слоев, так и называется "webovio.". В ней и текст, и точка
@@maxgraph Спасибо
Привет, а у тебя есть svg-карта без федеральных округов а с краями, областями?
нет такого)
Ребят, а подскажите в каких случаях лучше использовать тег span, а в каких p? Если прям абзац то p, верно?
Если у вас там одно или больше предложений - параграф
Если пару слов - спан
@@maxgraph Спасибо)
Привет. Возникла проблема, когда ставил соц.сети через css то блок не отображается и картинки не видно. подскажите что может быть не так?
Тут смотреть надо, напиши в тг чат (
Где можно посмотреть требования Code Style CSS? Пытался найти после одного из твоих уроков по верстке, но безуспешно
codeguide.maxgraph.ru
100000 liks!!!!!
Спасибо большое, это было очень полезным, а я ненавижу видео!
Пожалуйста)
Ctrl + shift + вверх/вниз, чтоб продублировать выделенный код)
неудобно)
А еще нюанс. Когда задается transition у элемента, при подгрузке css например в конкретном проекте мигают ссылки) Как от этого избавиться? Забить?))
скорее всего транзишн задан неверно
@@maxgraph ну у вас в видео оно так же мигает. Там ведь суть - загрузился стиль, включается транзишн и плавно меняет со стандартной синей на жёлтую в вашем случае. Может там порядок объявлений важен?