Тёмный

Адаптивная верстка сайта с нуля для новичков. Полезные советы по верстке сайта 

MaxGraph - cайты как страсть
Подписаться 30 тыс.
Просмотров 111 тыс.
50% 1

Привет! Это уже четвертый марафон на канале, и его я хочу выделить отдельно, так как постарался сделать его для новичков, максимально рассказывая все нюансы. Возможно, я где-то поспешил - напишите об этом в комментариях.
Содержание:
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 #марафонверстки #для_новичков

Опубликовано:

 

28 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 372   
@maxgraph
@maxgraph 3 года назад
Привет! Обновил на github блок get started, спасибо подписчикам, указавшим на неточность. Блок был сделан неровно, не по контейнеру - исправил с помощью calc.
@akw1d
@akw1d 2 года назад
.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 тоже не нужно будет.
@Shaikqkznxalalan
@Shaikqkznxalalan 2 года назад
Самый лучший видос по вёрстке) Минимум воды, максимум содержания, всё понятно и доступно. Благодарю от души)
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@user-bh4gy5lx7u
@user-bh4gy5lx7u 3 года назад
Очень благодарен за ценный курс! 3 дня разбирал ролик и писал структуру и оформление, на базовом уровне теперь легко ориентируюсь. Спасибо!
@maxgraph
@maxgraph 3 года назад
Пожалуйста)
@isok.atyrau
@isok.atyrau 3 года назад
Случайно наткнулся на этот канал!!! Автор спасибо что делитесь со своим опытом и знанием. Все четко и понятно!!! Удачи вам!!! И побольше таких видео про верстку)))
@maxgraph
@maxgraph 3 года назад
Спасибо))
@RuslanaRovdo
@RuslanaRovdo 5 месяцев назад
Отличный урок! Мне кажется, таких мало. Обычно мало кто объясняет почему делается так или эдак, просто повторять за кем-то не вариант для новичков. Я хоть и не очень новичок, но с удовольствием смотрела и верстала. Спасибо
@user-vy7hh8kz7p
@user-vy7hh8kz7p Год назад
Сколько видосов смотрел уже у других авторов, вы реально талант)) максимально четко, доходчиво, с правильным темпом без воды и лишних слов. Бывает включаешь кого-то кто курсы продаёт и ощущение что они учат тех кто всё и так знает, ибо чтобы понимать жаргон гореучителей, нужно наверное родиться в системном блоке))) а тут я не могу остановить видосы, очень интересно и понятно
@maxgraph
@maxgraph Год назад
Здорово)
@spacekraken67
@spacekraken67 Год назад
Спасибо, очень сильно помог понять вёрстку ещё лучше!
@dimazolotarenko
@dimazolotarenko Год назад
Большое спасибо, сидел под впечатлением весь ролик, узнал много нового, большое спасибо!
@anzhelikacherniavska2605
@anzhelikacherniavska2605 2 года назад
Отличный урок! Все доступно и понятно! Благодарю!
@maxgraph
@maxgraph 2 года назад
Спасибо)
@r4ns4ck17
@r4ns4ck17 Год назад
Круто! Прошел за 3 захода. Отдельное спасибо автору за объяснения и внесения чего-то необычного по типу переменных. Пройдя урок, я нашел много ответов на мои вопросы.
@maxgraph
@maxgraph Год назад
Пожалуйста)
@Expertdog
@Expertdog 2 года назад
Отличное видео и объяснения супер!!! Максим, сделайте такого же формата для новичков по JS чтобы понять что кака работает в кухне JS, какие элементы за что отвечают, где разные методы смотреть и т.д. )))
@maxgraph
@maxgraph 2 года назад
Да будет когда нибудь, но это большой и сложный материал)
@kirillhrynko6565
@kirillhrynko6565 3 года назад
Про burger было всё понятно. Оно того стоило, спасибо)
@ruinxr9
@ruinxr9 9 месяцев назад
Спасибо автору за марафон, практиковал html css, вторая верстка, узнал для себя много нового, удачи!
@user-lr5xn7it8r
@user-lr5xn7it8r 2 года назад
Хороший урок, отличная подача материала 👍Спасибо!
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@morandinielena3034
@morandinielena3034 Год назад
Отличное видео, все работает прекрасно! Объяснения очень четкие и подробные. Спасибо!
@maxgraph
@maxgraph Год назад
Пожалуйста)
@dela22
@dela22 2 года назад
Отличный выпуск, без воды и все очень ясно 👍
@maxgraph
@maxgraph 2 года назад
Спасибо)
@dzmitryk7546
@dzmitryk7546 3 года назад
Спасибо;) все четко, без воды.
@maxgraph
@maxgraph 3 года назад
Пожалуйста))
@alexeyschmidt93
@alexeyschmidt93 2 года назад
Автору огромный респект! Всё суперпонятно, жду новых марафонов
@maxgraph
@maxgraph 2 года назад
Спасибо)) пока что комп в ремонте, но будут
@alexeyschmidt93
@alexeyschmidt93 2 года назад
@@maxgraph Тогда ждём. Пока что Вы - единственный человек, кто показал от нуля до адаптации. Хотелось бы ещё поверстать вместе с Вами и набить руку. Ждём)
@user-hy5jj3mz7r
@user-hy5jj3mz7r 2 года назад
Макс! Это супер видео для начинающих! Просто лучше не найти. Я попробовал 6 уроков для новичков и только на твоем я дошел до самого конца и у меня все получилось! Спасибо тебе за потрясающий контент. Я посмотрю все твои видео и всячески буду тебя поддерживать! Огонь мужик!
@maxgraph
@maxgraph 2 года назад
Круто)) спасибо!
@Exigoll92
@Exigoll92 3 года назад
балдежный материал, автору спасибо, понял как делать адаптив) это 5 или 6 ролик по адаптиву, тут хоть и вкратце объяснил, но я понял! подписался!
@maxgraph
@maxgraph 3 года назад
Спасибо))
@user-pl8lt5bd1g
@user-pl8lt5bd1g Год назад
Было бы отлично увидеть решение с разной шириной блоков в футере. За работу огромное Спасибо!
@ynwa2290
@ynwa2290 2 года назад
Спасибо за видео. Я очень мало знаю про верстку, но твое видео точно было полезным. Удачи
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@bbnoWhat
@bbnoWhat 2 года назад
Нажал на видос, за полминуты подписался и поставил лайк, это талант) Как раз то что мне и нужно)
@maxgraph
@maxgraph 2 года назад
Спасибо))
@nataliealeksandrova8047
@nataliealeksandrova8047 2 года назад
А есть ли у вас на канале еще подобное видео для новичков? Здесь вы очень подробно рассказываете о таких моментах в верстке, которые в обычных видео и уроках/курсах просто не говорят. Хотелось бы продолжить вместе с вами обучение и практику. И огромное спасибо за ваш труд. Для таких новичков, как я, это абсолютная ценность.
@maxgraph
@maxgraph 2 года назад
Ещё будут, пока нет)
@elenapetrova4964
@elenapetrova4964 3 года назад
Огромное спасибо за видео! Супер полезно! Все понятно
@maxgraph
@maxgraph 3 года назад
Пожалуйста)
@drDOC-zw2nh
@drDOC-zw2nh 3 года назад
То что доктор прописал, спасибо большое за полезный контент
@maxgraph
@maxgraph 3 года назад
Пожалуйста)
@olegger7436
@olegger7436 3 года назад
Спасибо, все просто замечательно), все получилось)
@maxgraph
@maxgraph 3 года назад
Отлично))
@user-gh8dy5mt7q
@user-gh8dy5mt7q 2 года назад
Спасибо вам огромное за то что выкладываете такие полезные ролики в этом видео ролике я научился многому спасибо еще раз с меня подписка и лайк вы очень крутой ютубер не заканчиваете снимать такоц контент так как это сильно заходит и помогает другим людям продвегаться в сфере программирования удачи вам в видео роликах буду следить за каналом вашим))))
@maxgraph
@maxgraph 2 года назад
Спасибо!)
@yunggoatflexin8919
@yunggoatflexin8919 Год назад
привет! сделай пожалуйста разбор полного лендинга этого макета) очень интересно как остальные блоки верстаются, спасибо!
@vitali5715
@vitali5715 2 года назад
Спасибо за видео, очень нравится что нет всякой надстроечной хрени вроде БЭМ, препроцессоров и тд, если людей учат верстке, то сначала нужно пройти именно эти азы
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@Anatoli-bq1pe
@Anatoli-bq1pe Год назад
Благодарю за труд!
@user-ep1wl9zz4i
@user-ep1wl9zz4i 2 года назад
Бро, спасибо за контент. понял очень многое, однозначно лайк! :D
@user-ep1wl9zz4i
@user-ep1wl9zz4i 2 года назад
+subscription :)
@maxgraph
@maxgraph 2 года назад
Спасибо)
@elenapolat9228
@elenapolat9228 2 года назад
Объяснение лучшее! Спасибо
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@Sergio-gr6ro
@Sergio-gr6ro 2 года назад
Для footer-column:last-child:before left можно вычислять вместо " calc( ( -1 * (-var(--grid-gap) ) ) " с помощью более лаконичной записи " calc( var(--grid-gap) * -1) ".
@user-zc9kd2ci4q
@user-zc9kd2ci4q 3 года назад
Шикарно. Спасибо огромное!
@maxgraph
@maxgraph 3 года назад
Пожалуйста)
@katrinakatrina22
@katrinakatrina22 Год назад
Спасибо большое. Все предельно ясно!
@maxgraph
@maxgraph Год назад
Пожалуйста)
@user-hr8hx3hc5h
@user-hr8hx3hc5h 2 года назад
Спасибо за видео, хорошо получилось!
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@user-br9tr5xn3y
@user-br9tr5xn3y Месяц назад
одно из лучших видео на канале столько полезных фишек если еще бэм там был лучшее видео
@user-qy9gj1cx2w
@user-qy9gj1cx2w 2 года назад
Однозначно подписка за такое видео.
@maxgraph
@maxgraph 2 года назад
Спасибо)
@valerypobelenskiy1001
@valerypobelenskiy1001 3 года назад
Максим привет, В футере я так и не понял зачем эта вертикальная полоса ?? и как ты ее рассчитал можешь пояснить ???
@itga1qadam941
@itga1qadam941 Год назад
Все круто помогло. Спасибо за урок
@maxgraph
@maxgraph Год назад
Пожалуйста)
@user-km5vo2yf6x
@user-km5vo2yf6x 3 года назад
Это что у нас за палочка - непонятно 41:20 посмеялся от души ))
@hightommy7961
@hightommy7961 2 года назад
Хорошо объясняешь,всё понятно . Грызем гранит.
@maxgraph
@maxgraph 2 года назад
Спасибо)
@user-wt4ww5tt9o
@user-wt4ww5tt9o Год назад
Не зря потраченное время на просмотр, интересно)
@maxgraph
@maxgraph Год назад
Спасибо)
@dmitrysweetly1700
@dmitrysweetly1700 Год назад
Автор, у тебя бургер без абсолюта тоже получается, просто нужно чуть отступ сверху убрать .burger{ padding: 7px 11px 14px 11px; line-height: 4px;
@Pauchyyalapka
@Pauchyyalapka 2 года назад
спасибо огромное за урок!
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@dmitriylazarev1550
@dmitriylazarev1550 3 года назад
Привет! Спасибо ) Узнал несколько интересных решений. Только смутил момент с display: grid , недавно пользовался этим свойством, пока не открыл верстку в explorer и все накрылось женским органом)) и safari тоже не хочет с ним дружить
@maxgraph
@maxgraph 3 года назад
В сафари все окей) А ie я не поддерживаю
@dmitriylazarev1550
@dmitriylazarev1550 3 года назад
@@maxgraph Пардон , с сафари все ок , это Opera Mini не хочет видеть. В общем, очень крутое и удобное свойство , и когда для себя его открыл радовался как ребенок. Конечно IE, это пережиток прошлого , но , возможно какие-то староверы пользуются. Мне как ветерану верстки с 3 месячным стажем сложно , не согласится . При проверки верстки заказчиками , это может как-то сыграть роль?
@maxgraph
@maxgraph 3 года назад
Все от заказа зависит) если им очень нужен ie - придется без гридов
@user-ct6qd1og7x
@user-ct6qd1og7x 3 года назад
Ну наконец-то, вот тебе мой царский лайк🤴🏻 Вопрос: Как сборку gulp можно интегрировать в например Laravel ну или как можно его связывать с PHP ?! Было бы круто увеличить это с версткой интернет-магазина😁
@maxgraph
@maxgraph 3 года назад
Полюбому можно, но я не занимаюсь бэкендом))
@yardcsgo2428
@yardcsgo2428 3 года назад
Максим здравствуйте, подскажите пожалуйста, как сделать сделать блок с логотипами под "hero", который есть в полном макете?
@artemshishkov9711
@artemshishkov9711 2 года назад
Если вы пишите стили, используя препроцессор SCSS, и у вас при использовании переменных в calc() они подсвечиваются как ошибки, то надо использовать: calc(#{$offset-vertical} + 6px)
@olor777
@olor777 9 месяцев назад
Вы лучший!
@user-gw2dw5qs5w
@user-gw2dw5qs5w Год назад
спасибо! хорошо объясняете!
@maxgraph
@maxgraph Год назад
Пожалуйста)
@niceman5890
@niceman5890 2 года назад
Спасибо за помощь!
@maxgraph
@maxgraph 2 года назад
Пожалуйста =
@denisly6109
@denisly6109 Год назад
Вообще все очень понравилось спасибо! Но вот сначала, не будем усложнять говорил, все шло хорошо, вникал. Но как только бургер начался все. Мозг вскипел сразу. Это все конечно замечательно. Но для начинающих, кто учится, это было лишним. Но в целом благодарю конечно! Материал очень полезен )
@user-vw1jj3mn3g
@user-vw1jj3mn3g Год назад
Поддерживаю!) про бургер - это уже не про новичков...
@user-dm2pk3vu8w
@user-dm2pk3vu8w Год назад
Спасибо большое, только с Вами у меня получилось сверстать свой первый лендинг без каких-либо ошибок. До этого забрасывала сайты из-за того, что где-то что-то не так объяснили, допустила ошибку, а как исправить не знаю, т.к я только учусь. С Вами дошла до конца, все работает, супер, очень рада. У меня есть еще такой вопрос, когда я начну работать с клиентами, как после окончания верстки передавать клиенту готовый результат?
@maxgraph
@maxgraph Год назад
Можно собрать все в архив и скинуть)
@fly9345
@fly9345 2 года назад
Я уже прошла весь урок и мне показалось слишком быстро, и только в конце ты сказал, что можно было поставить на 0.75, хахах)а получилось очень круто, лучший урок по верстке
@maxgraph
@maxgraph 2 года назад
Спасибо)
@burmst9653
@burmst9653 2 года назад
Посмотрел марафон. Очень интересно, но не понятно почему так мало просмотров)
@maxgraph
@maxgraph 2 года назад
увы) спасибо)
@gulnur_m7803
@gulnur_m7803 2 года назад
Благодарю!👍
@s.shimoro.x8141
@s.shimoro.x8141 2 года назад
я думал в конце сделаешь бургер меню рабочий и адаптируешь его я делал макет но у меня с адаптацией бургер-меню вышла проблема и поэтому решил посмотреть этот видос может найду ответ на свои вопросы .Жаль но а так видео класс все четко понятно обьяснил автор.
@maxgraph
@maxgraph 2 года назад
Ещё будут подобные уроки))
@Bekey13
@Bekey13 Год назад
Привет. Отдельно большое спасибо, что дал именно ссылку на макет. Я только начал изучать фронтенд, и у меня пока нет рабочего компьютера или ноутбука, поэтому я хочу устроиться на работу в этой области и заработать на него. К чему я веду? Я программирую на телефоне и не могу использовать фигму. А если перейти по ссылке и включить режим отображения в браузере, как на компьютере, то я смогу её использовать.
@greatn3s
@greatn3s 3 года назад
очень крутой обзор!
@maxgraph
@maxgraph 3 года назад
Спасибо))
@alexandr8151
@alexandr8151 2 года назад
спасибо, всё отлично!!!!!
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@Brunopt893
@Brunopt893 3 года назад
Максим! Приветствую вас) не проще сделать бургер с помощью флекса? И битвин?) Как по мне в три строчки решается) P.S. Обожаю ваши ролики!)
@maxgraph
@maxgraph 3 года назад
Здравствуйте, может и проще))
@spacenomoe
@spacenomoe 3 года назад
Спасибо, всё супер, но остались вопросы. Если не трудно ответь пожалуйста. 1. Почему ты используешь паддинги, а не марджины для отступов сверху? Это принципиально или вопрос вкуса? 2. Зачем элементам давать марджин 0, если он прописан в обнуляющем стиле? 3. Не слышал про нормалайз. Работаю в SCSS в VScode. Он компилит уже с префиксами. Что лучше? Или использовать и то и то?
@maxgraph
@maxgraph 3 года назад
Привет! 1. потому что существуют правила организации отступов, по ним так правильно. Видос на канале имеется) 2. Где написано? 3. префиксы с нормалайзом никак не связаны) нужно и то, и другое. Нормалайз приводит стили в разных браузерах к одному виду
@user-zj9ti4pw4x
@user-zj9ti4pw4x 2 года назад
Подскажите, пожалуйста, как вы печатаете текст сразу на нескольких строках (например, 29:33)? Какое это сочетание клавиш?
@maxgraph
@maxgraph 2 года назад
Альт зажать надо)
@alexandy1344
@alexandy1344 3 года назад
Да куда уж детальней объяснять? Спасибо Макс, ты лучший. Канал смотрю подрос, меня не было долго. Как никому другому желаю успехов в развитии канала.
@maxgraph
@maxgraph 3 года назад
Спасибо!))
@whicencer8819
@whicencer8819 2 года назад
Спасибо за видео. Что у вас за клавиатура? Звук кайфовый. А то моя слишком громкая
@maxgraph
@maxgraph 2 года назад
Моя тоже не очень тихая)) но шумодав микрофона работает Anne pro 2
@jozefvinsent6138
@jozefvinsent6138 2 года назад
еще автосейв поставь на 1 секунду и ненадо сохранять каждый раз при изменении html (управление-параметры-в параметре поиска написать "auto save" и поставить Files:auto save в параметр afterDelay и ниже задержку в миллисекундах оставить 1000), теперь можно писать код и переключаться на страницу без сохранения и без обновления страницы что удобно, особенно если на двух мониторах делать, на одном пишешь код, на втором страничка строится
@maxgraph
@maxgraph 2 года назад
Не, мне удобнее самому)
@user-jk9rn5tu9y
@user-jk9rn5tu9y 2 года назад
Максим, здравствуйте, а можно ли этот бургер сделать через display:flex, flex-direction:column, и через псевдокласс задать margin?
@maxgraph
@maxgraph 2 года назад
Можно что угодно)
@kochansv
@kochansv 2 года назад
По поводу списка с гридом, разве не должен быть внутри этого элемента (services__item) внутренний padding, который как раз бы выставил элементы как в макете, или же это плохая практика задавать padding внутри item'a списка?
@maxgraph
@maxgraph 2 года назад
Да как удобно) нет запрета
@lolo_o9520
@lolo_o9520 3 года назад
Ты крут, продолжай в том же духе.Сделай,если тебе не трудно с скриптами
@maxgraph
@maxgraph 3 года назад
Спасибо)
@goopalodavid3744
@goopalodavid3744 3 года назад
Вы поставили в фигме режим View only. Там нельзя проводить никакие дополнительные линии итд. Не могу понять,как мне,к примеру,узнать расстояние слева от заголовка к контейнеру? Или же там есть возможность включить сетку?
@maxgraph
@maxgraph 3 года назад
Нажмите на название макета и duplicate to drafts - макет скопируется вам с нужными правами. Вынужден делать view only, иначе люди могут сломать макет, случайно или намеренно)
@goopalodavid3744
@goopalodavid3744 3 года назад
@@maxgraph спасибо)
@pavelkharytonau
@pavelkharytonau 3 года назад
Как думаете, в css лучше использовать метод ресет-по-классу (36:38) или прописать отдельный файл reset.css?
@maxgraph
@maxgraph 3 года назад
лучше ресет по классу)
@knowledge9396
@knowledge9396 Год назад
Позвольте поинтересоваться, в связи с чем были предприняты столь замороченные действия с кнопкой “бургер”? Почему нельзя было использовать SVG элемент?
@maxgraph
@maxgraph Год назад
Нравится так)
@supererkokz
@supererkokz Год назад
Спасибо
@Pauchyyalapka
@Pauchyyalapka 2 года назад
подскажите пожалуйста, на 24:42 вы когда выделяете link сразу выделяется на 2х строках. Это какая то встроенная функция вашего редактора или плагин? если плагин - подскажите пожалуйста название или может вы знаете, как загуглить, чтобы такое для саблайма найти? я даже не могу придумать, как запрос сформулировать))0
@maxgraph
@maxgraph 2 года назад
Здравствуйте, это встроенная фича всех редакторов кода) в вс коде на альт работает
@Pauchyyalapka
@Pauchyyalapka 2 года назад
@@maxgraph спасибо за ответ!))
@ksenialershina7136
@ksenialershina7136 2 года назад
Добрый день. Возник такой вопрос: мы поставили в .services-subtitle =max-width: 183px, а если потом заголовок увеличится не в количестве слов а увеличится длина первого слова, например, будет не product в заголовке первой колонки, а какой-нибудь productoinson (слово только для примера) и также хотелось бы уточнить нужно ли ставить max-width для services-descr ?
@maxgraph
@maxgraph 2 года назад
Добрый день! Если слово увеличится - оно переполнит блок, да. Но вряд ли что-то сломается. для services-descr не обязательно.
@user-yn8hb2gm7k
@user-yn8hb2gm7k Год назад
Макс, вот ты чувак с бургером заморочился. Отдельное видео сними по бургеру на пару минут! По факту не проще svg воткнуть? Спасибо за контент, полезно!
@MaksssHome
@MaksssHome 3 года назад
Ребят, можете сказать кто разбирается, на 1:22:36, вот мы применили свойство align-items: flex-start и оно применилось как я понял только к первым двум элементам, а как flexbox понимает что вот первые два элемента отности так сказать к start, а вот последний 3 элемент его не нужно касаться? Получается если задаем align-items: flex-start а элемента 3, то оно применится только к первым двум?
@maxgraph
@maxgraph 3 года назад
применилось оно ко всем четырем карточкам)
@DionigiCavalli
@DionigiCavalli 2 года назад
Спасибо, 😉!
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@eugenevandar7952
@eugenevandar7952 Год назад
Где можно посмотреть требования Code Style CSS? Пытался найти после одного из твоих уроков по верстке, но безуспешно
@maxgraph
@maxgraph Год назад
codeguide.maxgraph.ru
@abdazimabdumalikov5194
@abdazimabdumalikov5194 3 года назад
Однозначно подписка \
@maxgraph
@maxgraph 3 года назад
Спасибо)
@tmbrodyaga8584
@tmbrodyaga8584 Год назад
Привет. Возникла проблема, когда ставил соц.сети через css то блок не отображается и картинки не видно. подскажите что может быть не так?
@maxgraph
@maxgraph Год назад
Тут смотреть надо, напиши в тг чат (
@user-ly3xb1hl8q
@user-ly3xb1hl8q 3 года назад
Привет, а у тебя есть svg-карта без федеральных округов а с краями, областями?
@maxgraph
@maxgraph 3 года назад
нет такого)
@elitdie
@elitdie 3 года назад
Лайк подписка комментарий
@user-fs3yr9yk6n
@user-fs3yr9yk6n 3 года назад
Ctrl + shift + вверх/вниз, чтоб продублировать выделенный код)
@maxgraph
@maxgraph 3 года назад
неудобно)
@user-ho2xh5ib8j
@user-ho2xh5ib8j 2 года назад
Привет. Все круто, но остались вопросы. Почему logo img очень большая?
@maxgraph
@maxgraph 2 года назад
Надо смотреть, так не знаю
@TheBreade
@TheBreade 3 года назад
1:12:40 Почему мы пишем inline-block для подзаголовка, но не делаем то же самое для самого заголовка, когда переопределяем их margin ? Изначально было сказано, что так как hero-subtitle - строчный элемент, то он не понимает ни размеров, ни отступов, поэтому мы делаем его inline-block. Но затем, когда нам нужны отступы у самого заголовка hero-title, мы не делаем его inline-block'ом. Почему ?
@maxgraph
@maxgraph 3 года назад
Заголовок блочный, он то умеет в маргины)
@TheBreade
@TheBreade 3 года назад
@@maxgraph Благодарю
@user-ce1wd3ws3l
@user-ce1wd3ws3l 3 года назад
Привет, а в какой программе ты открываешь psd файлы? Заранее спасибо)))))
@maxgraph
@maxgraph 3 года назад
Привет, Avocode)
@Dmitry_Sotnikov
@Dmitry_Sotnikov 3 года назад
Отличное видео, будут ещё уроки для новичков?
@maxgraph
@maxgraph 3 года назад
Здравствуйте, да
@AlexandraNicoleShin
@AlexandraNicoleShin 2 года назад
100000 liks!!!!!
@elitdie
@elitdie 3 года назад
Встречались ли вам макеты с выходящими за container элементами, типа фонового изображения? Как их верстать для широкоформатных мониторов? Делать еще один здоровенный контейнер?
@maxgraph
@maxgraph 3 года назад
Через позишн абсолют и калк, думаю)
@1Nurali
@1Nurali 2 года назад
Здравствуйте) Можно вопросы. 1.Вы используете сетки в крупных проектах?? Я вот дошел до степени когда они не нужны, но бывают такие замечания где клиент прям яро хочет этого (в коде он не разбирается) 2. Вот на ваших примерах да, все просто. а мне вот рисуют дизайн сайта 1920 - 1200 - 979 - 768 - 320 (появляются доп элементы и прочая лабуда) Это нормально?? или мне втык сделать дизайнеру? 3. Используете ли вы изолированные стили по БЭМ или у вас свой подход?
@maxgraph
@maxgraph 2 года назад
Здравствуйте! 1. Не использую, все можно сделать руками 2. Ваш пример ничем не отличается от моего по факту. Доп элементы - ничего страшного, это норма 3. Использую
@adilb8652
@adilb8652 3 года назад
от души :)
@maxgraph
@maxgraph 3 года назад
Ее)
@user-kc7dy9qr8b
@user-kc7dy9qr8b Год назад
Спасибо большое, это было очень полезным, а я ненавижу видео!
@maxgraph
@maxgraph Год назад
Пожалуйста)
@kerto9364
@kerto9364 Год назад
Есть вопрос, почему вы используете Pading для того что бы отделять блоки а не margin. Pading все-таки внутренний отступ.
@maxgraph
@maxgraph Год назад
это где конкретно?)
@kerto9364
@kerto9364 Год назад
Извиняюсь я дурачок и не заметил то что вы ставили pading backgroundду
@elitdie
@elitdie 3 года назад
А еще нюанс. Когда задается transition у элемента, при подгрузке css например в конкретном проекте мигают ссылки) Как от этого избавиться? Забить?))
@maxgraph
@maxgraph 3 года назад
скорее всего транзишн задан неверно
@elitdie
@elitdie 3 года назад
@@maxgraph ну у вас в видео оно так же мигает. Там ведь суть - загрузился стиль, включается транзишн и плавно меняет со стандартной синей на жёлтую в вашем случае. Может там порядок объявлений важен?
@MaksssHome
@MaksssHome 3 года назад
Ребят, а подскажите в каких случаях лучше использовать тег span, а в каких p? Если прям абзац то p, верно?
@maxgraph
@maxgraph 3 года назад
Если у вас там одно или больше предложений - параграф Если пару слов - спан
@MaksssHome
@MaksssHome 3 года назад
@@maxgraph Спасибо)
@user-gx8xj6kc3z
@user-gx8xj6kc3z 3 года назад
Максим здравствуйте. В готовом макете сайта при выделении самого "Webovio" не выделяется точка и логотип, что делать?
@maxgraph
@maxgraph 3 года назад
Не очень понял, что не так? (
@user-gx8xj6kc3z
@user-gx8xj6kc3z 3 года назад
@@maxgraph Просто когда я хотел в начале и в конце добавить "Webobio" и логотип, у меня выделилось только слово. А как сделать сам лого я не знаю. Надеюсь поняли)
@FA-tu5ti
@FA-tu5ti 3 года назад
@@user-gx8xj6kc3z ++++++++
@maxgraph
@maxgraph 3 года назад
Там есть группа слоев, так и называется "webovio.". В ней и текст, и точка
@user-gx8xj6kc3z
@user-gx8xj6kc3z 3 года назад
@@maxgraph Спасибо
@mrnsky
@mrnsky 3 года назад
о, вот это мне нада.
@shadowdance7126
@shadowdance7126 3 года назад
Пажилой адаптив
Далее
Baxtli bo’l do’stim❤️
00:47
Просмотров 1,2 млн