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

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 370

  • @maxgraph
    @maxgraph  3 года назад +28

    Привет! Обновил на github блок get started, спасибо подписчикам, указавшим на неточность. Блок был сделан неровно, не по контейнеру - исправил с помощью calc.

    • @Akwidh
      @Akwidh 2 года назад +3

      .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 3 года назад +40

    Самый лучший видос по вёрстке) Минимум воды, максимум содержания, всё понятно и доступно. Благодарю от души)

    • @maxgraph
      @maxgraph  3 года назад +1

      Пожалуйста)

  • @RuslanaRovdo
    @RuslanaRovdo 11 месяцев назад

    Отличный урок! Мне кажется, таких мало. Обычно мало кто объясняет почему делается так или эдак, просто повторять за кем-то не вариант для новичков. Я хоть и не очень новичок, но с удовольствием смотрела и верстала. Спасибо

  • @isok.atyrau
    @isok.atyrau 3 года назад +5

    Случайно наткнулся на этот канал!!! Автор спасибо что делитесь со своим опытом и знанием. Все четко и понятно!!! Удачи вам!!! И побольше таких видео про верстку)))

    • @maxgraph
      @maxgraph  3 года назад +1

      Спасибо))

  • @spacekraken67
    @spacekraken67 Год назад +1

    Спасибо, очень сильно помог понять вёрстку ещё лучше!

  • @r4ns4ck17
    @r4ns4ck17 2 года назад +1

    Круто! Прошел за 3 захода. Отдельное спасибо автору за объяснения и внесения чего-то необычного по типу переменных. Пройдя урок, я нашел много ответов на мои вопросы.

    • @maxgraph
      @maxgraph  2 года назад +1

      Пожалуйста)

  • @ВалерийХарламов-ь4в
    @ВалерийХарламов-ь4в 3 года назад +4

    Очень благодарен за ценный курс! 3 дня разбирал ролик и писал структуру и оформление, на базовом уровне теперь легко ориентируюсь. Спасибо!

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @арсентийшуть-т4д
    @арсентийшуть-т4д 2 года назад

    Сколько видосов смотрел уже у других авторов, вы реально талант)) максимально четко, доходчиво, с правильным темпом без воды и лишних слов. Бывает включаешь кого-то кто курсы продаёт и ощущение что они учат тех кто всё и так знает, ибо чтобы понимать жаргон гореучителей, нужно наверное родиться в системном блоке))) а тут я не могу остановить видосы, очень интересно и понятно

  • @ruinxr9
    @ruinxr9 Год назад

    Спасибо автору за марафон, практиковал html css, вторая верстка, узнал для себя много нового, удачи!

  • @dimazolotarenko
    @dimazolotarenko Год назад

    Большое спасибо, сидел под впечатлением весь ролик, узнал много нового, большое спасибо!

  • @МихаилОнипченко-й3щ
    @МихаилОнипченко-й3щ 2 года назад +1

    Макс! Это супер видео для начинающих! Просто лучше не найти. Я попробовал 6 уроков для новичков и только на твоем я дошел до самого конца и у меня все получилось! Спасибо тебе за потрясающий контент. Я посмотрю все твои видео и всячески буду тебя поддерживать! Огонь мужик!

    • @maxgraph
      @maxgraph  2 года назад +1

      Круто)) спасибо!

  • @morandinielena3034
    @morandinielena3034 2 года назад

    Отличное видео, все работает прекрасно! Объяснения очень четкие и подробные. Спасибо!

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @bbnowhat
    @bbnowhat 2 года назад

    Нажал на видос, за полминуты подписался и поставил лайк, это талант)
    Как раз то что мне и нужно)

    • @maxgraph
      @maxgraph  2 года назад

      Спасибо))

  • @scullymulder-t3s
    @scullymulder-t3s 7 месяцев назад

    одно из лучших видео на канале столько полезных фишек если еще бэм там был лучшее видео

  • @kirillhrynko6565
    @kirillhrynko6565 3 года назад +2

    Про burger было всё понятно. Оно того стоило, спасибо)

  • @НадеждаГонтарь-е2н
    @НадеждаГонтарь-е2н 3 года назад +1

    Хороший урок, отличная подача материала 👍Спасибо!

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @Expertdog
    @Expertdog 3 года назад +3

    Отличное видео и объяснения супер!!! Максим, сделайте такого же формата для новичков по JS чтобы понять что кака работает в кухне JS, какие элементы за что отвечают, где разные методы смотреть и т.д. )))

    • @maxgraph
      @maxgraph  3 года назад +5

      Да будет когда нибудь, но это большой и сложный материал)

  • @nataliealeksandrova8047
    @nataliealeksandrova8047 3 года назад +5

    А есть ли у вас на канале еще подобное видео для новичков? Здесь вы очень подробно рассказываете о таких моментах в верстке, которые в обычных видео и уроках/курсах просто не говорят. Хотелось бы продолжить вместе с вами обучение и практику. И огромное спасибо за ваш труд. Для таких новичков, как я, это абсолютная ценность.

    • @maxgraph
      @maxgraph  3 года назад +3

      Ещё будут, пока нет)

  • @ynwa2290
    @ynwa2290 2 года назад

    Спасибо за видео. Я очень мало знаю про верстку, но твое видео точно было полезным. Удачи

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @drDOC-zw2nh
    @drDOC-zw2nh 3 года назад +1

    То что доктор прописал, спасибо большое за полезный контент

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @vitali5715
    @vitali5715 2 года назад

    Спасибо за видео, очень нравится что нет всякой надстроечной хрени вроде БЭМ, препроцессоров и тд, если людей учат верстке, то сначала нужно пройти именно эти азы

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @alexeyschmidt93
    @alexeyschmidt93 2 года назад

    Автору огромный респект! Всё суперпонятно, жду новых марафонов

    • @maxgraph
      @maxgraph  2 года назад +1

      Спасибо)) пока что комп в ремонте, но будут

    • @alexeyschmidt93
      @alexeyschmidt93 2 года назад

      @@maxgraph Тогда ждём. Пока что Вы - единственный человек, кто показал от нуля до адаптации. Хотелось бы ещё поверстать вместе с Вами и набить руку. Ждём)

  • @anzhelikacherniavska2605
    @anzhelikacherniavska2605 3 года назад +1

    Отличный урок! Все доступно и понятно! Благодарю!

  • @dmitrysweetly
    @dmitrysweetly Год назад +1

    Автор, у тебя бургер без абсолюта тоже получается, просто нужно чуть отступ сверху убрать
    .burger{
    padding: 7px 11px 14px 11px;
    line-height: 4px;

  • @esportsxღ
    @esportsxღ 3 года назад +1

    Спасибо вам огромное за то что выкладываете такие полезные ролики в этом видео ролике я научился многому спасибо еще раз с меня подписка и лайк вы очень крутой ютубер не заканчиваете снимать такоц контент так как это сильно заходит и помогает другим людям продвегаться в сфере программирования удачи вам в видео роликах буду следить за каналом вашим))))

    • @maxgraph
      @maxgraph  3 года назад

      Спасибо!)

  • @Sergio-gr6ro
    @Sergio-gr6ro 2 года назад +1

    Для footer-column:last-child:before left можно вычислять вместо " calc( ( -1 * (-var(--grid-gap) ) ) " с помощью более лаконичной записи " calc( var(--grid-gap) * -1) ".

  • @dzmitryk7546
    @dzmitryk7546 3 года назад +3

    Спасибо;) все четко, без воды.

    • @maxgraph
      @maxgraph  3 года назад +1

      Пожалуйста))

  • @fly9345
    @fly9345 2 года назад

    Я уже прошла весь урок и мне показалось слишком быстро, и только в конце ты сказал, что можно было поставить на 0.75, хахах)а получилось очень круто, лучший урок по верстке

    • @maxgraph
      @maxgraph  2 года назад +1

      Спасибо)

  • @Exigoll92
    @Exigoll92 3 года назад

    балдежный материал, автору спасибо, понял как делать адаптив) это 5 или 6 ролик по адаптиву, тут хоть и вкратце объяснил, но я понял! подписался!

    • @maxgraph
      @maxgraph  3 года назад

      Спасибо))

  • @dela22
    @dela22 3 года назад

    Отличный выпуск, без воды и все очень ясно 👍

  • @artemshishkov9711
    @artemshishkov9711 3 года назад +1

    Если вы пишите стили, используя препроцессор SCSS, и у вас при использовании переменных в calc() они подсвечиваются как ошибки, то надо использовать: calc(#{$offset-vertical} + 6px)

  • @denisly6109
    @denisly6109 Год назад

    Вообще все очень понравилось спасибо! Но вот сначала, не будем усложнять говорил, все шло хорошо, вникал. Но как только бургер начался все. Мозг вскипел сразу. Это все конечно замечательно. Но для начинающих, кто учится, это было лишним.
    Но в целом благодарю конечно! Материал очень полезен )

    • @MonDLeR-g5n
      @MonDLeR-g5n Год назад

      Поддерживаю!) про бургер - это уже не про новичков...

  • @ЕкатеринаФомина-м4ф

    Не зря потраченное время на просмотр, интересно)

  • @ДенисБолковенко
    @ДенисБолковенко 2 года назад

    Было бы отлично увидеть решение с разной шириной блоков в футере. За работу огромное Спасибо!

  • @olegger7436
    @olegger7436 3 года назад +1

    Спасибо, все просто замечательно), все получилось)

    • @maxgraph
      @maxgraph  3 года назад

      Отлично))

  • @hightommy7961
    @hightommy7961 3 года назад

    Хорошо объясняешь,всё понятно . Грызем гранит.

  • @elenapetrova4964
    @elenapetrova4964 3 года назад

    Огромное спасибо за видео! Супер полезно! Все понятно

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @ЧеГевара-и1ч
    @ЧеГевара-и1ч 3 года назад +4

    Это что у нас за палочка - непонятно 41:20 посмеялся от души ))

  • @Сергей-д9ъ7г
    @Сергей-д9ъ7г 3 года назад

    Бро, спасибо за контент. понял очень многое, однозначно лайк! :D

  • @katrinakatrina22
    @katrinakatrina22 2 года назад

    Спасибо большое. Все предельно ясно!

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @SerhiiUzunov
    @SerhiiUzunov 2 года назад

    Однозначно подписка за такое видео.

  • @elenapolat9228
    @elenapolat9228 3 года назад

    Объяснение лучшее! Спасибо

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @Anitizer
    @Anitizer 3 года назад +1

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

    • @maxgraph
      @maxgraph  3 года назад

      Ещё будут подобные уроки))

  • @AlexandraNicoleShin
    @AlexandraNicoleShin 3 года назад +1

    100000 liks!!!!!

  • @Anatoli-bq1pe
    @Anatoli-bq1pe Год назад

    Благодарю за труд!

  • @jozefvinsent6138
    @jozefvinsent6138 3 года назад

    еще автосейв поставь на 1 секунду и ненадо сохранять каждый раз при изменении html (управление-параметры-в параметре поиска написать "auto save" и поставить Files:auto save в параметр afterDelay и ниже задержку в миллисекундах оставить 1000), теперь можно писать код и переключаться на страницу без сохранения и без обновления страницы что удобно, особенно если на двух мониторах делать, на одном пишешь код, на втором страничка строится

    • @maxgraph
      @maxgraph  3 года назад +2

      Не, мне удобнее самому)

  • @АлександрРомашкевич-ъ8б

    Спасибо за видео, хорошо получилось!

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @itga1qadam941
    @itga1qadam941 2 года назад

    Все круто помогло. Спасибо за урок

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @yunggoatflexin8919
    @yunggoatflexin8919 2 года назад +1

    привет! сделай пожалуйста разбор полного лендинга этого макета) очень интересно как остальные блоки верстаются, спасибо!

  • @olor777
    @olor777 Год назад

    Вы лучший!

  • @ДмитроКазаров
    @ДмитроКазаров 3 года назад

    Шикарно. Спасибо огромное!

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @dmitriylazarev1550
    @dmitriylazarev1550 3 года назад

    Привет! Спасибо ) Узнал несколько интересных решений. Только смутил момент с display: grid , недавно пользовался этим свойством, пока не открыл верстку в explorer и все накрылось женским органом)) и safari тоже не хочет с ним дружить

    • @maxgraph
      @maxgraph  3 года назад

      В сафари все окей)
      А ie я не поддерживаю

    • @dmitriylazarev1550
      @dmitriylazarev1550 3 года назад +1

      @@maxgraph Пардон , с сафари все ок , это Opera Mini не хочет видеть. В общем, очень крутое и удобное свойство , и когда для себя его открыл радовался как ребенок. Конечно IE, это пережиток прошлого , но , возможно какие-то староверы пользуются. Мне как ветерану верстки с 3 месячным стажем сложно , не согласится . При проверки верстки заказчиками , это может как-то сыграть роль?

    • @maxgraph
      @maxgraph  3 года назад

      Все от заказа зависит) если им очень нужен ie - придется без гридов

  • @burmst9653
    @burmst9653 3 года назад

    Посмотрел марафон. Очень интересно, но не понятно почему так мало просмотров)

    • @maxgraph
      @maxgraph  3 года назад

      увы) спасибо)

  • @ЕвгенийТюкин-щ9о

    Макс, вот ты чувак с бургером заморочился. Отдельное видео сними по бургеру на пару минут! По факту не проще svg воткнуть? Спасибо за контент, полезно!

  • @ТатьянаСорокина-х8м
    @ТатьянаСорокина-х8м 2 месяца назад

    Спасибо большое❤

  • @niceman5890
    @niceman5890 2 года назад

    Спасибо за помощь!

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста =

  • @AlexandraNicoleShin
    @AlexandraNicoleShin 3 года назад

    ya eshe polovinu posmotrela a uje stolko novogo uznala chego mne daje na shvedskih kursah ne rasskazyvali, SPASIBO VAM!!!!!!!!!!!!!!!!

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @Pauchyyalapka
    @Pauchyyalapka 2 года назад

    спасибо огромное за урок!

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @Кочевник-р2е
    @Кочевник-р2е 3 года назад +1

    Ну наконец-то, вот тебе мой царский лайк🤴🏻
    Вопрос:
    Как сборку gulp можно интегрировать в например Laravel ну или как можно его связывать с PHP ?! Было бы круто увеличить это с версткой интернет-магазина😁

    • @maxgraph
      @maxgraph  3 года назад +1

      Полюбому можно, но я не занимаюсь бэкендом))

  • @rutem3785
    @rutem3785 3 года назад

    Спасибо бро! сильно помог)

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @elitdie
    @elitdie 3 года назад

    Встречались ли вам макеты с выходящими за container элементами, типа фонового изображения? Как их верстать для широкоформатных мониторов? Делать еще один здоровенный контейнер?

    • @maxgraph
      @maxgraph  3 года назад

      Через позишн абсолют и калк, думаю)

  • @СветланаЧернышева-р2щ

    Спасибо большое, это было очень полезным, а я ненавижу видео!

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @web-impuls
    @web-impuls 3 года назад

    гамбургер сделан вообще неверно, надо было спану сделать псевдоэлементы да и всё. Блок с тенями сделан так же некорректно, и его так же надо было делать с псевдоэлементом, которому надо было задать тень, сдвинуть отрицательно влево, а сам блок, который в контейнере сделать прозрачным))) Треугольник для ссылки тоже надо было сделать псевдоэлементом, повернуть его ротэйтом и сдвинуть влево наполовину, ссылке задать оверфлоу хидден

    • @maxgraph
      @maxgraph  3 года назад +1

      Если я сделал не псевдоэлементы - неверно?) только один вариант единственно верный?)

    • @maxgraph
      @maxgraph  3 года назад

      Какие то у вас странные понятия про вёрстку

    • @web-impuls
      @web-impuls 3 года назад

      @@maxgraph просто если есть очевидное решение, то надо новичков учить именно ему. А не городить забор из не кроссплатформенных, сомнительных решений. Блок с тенями вы реализовали вообще неправильно. это фиаско. Вы не видели что ли как текстовый блок вылез за пределы вертикальной границы видимости блоков?

    • @maxgraph
      @maxgraph  3 года назад

      Ничего не вылезло, разве что на большем разрешении) но не беда, дело пары строчек css.
      Ваше решение по бургеру очевидное только вам.

    • @web-impuls
      @web-impuls 3 года назад

      @@maxgraph в смысле только мне? Бургер все делают псевдоэлементами, Вы о чём? Это же правило, меньше обёрток и html элементов - безусловное благо!

  • @Bekey13
    @Bekey13 Год назад

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

  • @АнастасияСклярова-и4з

    Спасибо большое, только с Вами у меня получилось сверстать свой первый лендинг без каких-либо ошибок. До этого забрасывала сайты из-за того, что где-то что-то не так объяснили, допустила ошибку, а как исправить не знаю, т.к я только учусь. С Вами дошла до конца, все работает, супер, очень рада. У меня есть еще такой вопрос, когда я начну работать с клиентами, как после окончания верстки передавать клиенту готовый результат?

    • @maxgraph
      @maxgraph  2 года назад

      Можно собрать все в архив и скинуть)

  • @gulnur_m7803
    @gulnur_m7803 3 года назад

    Благодарю!👍

  • @ИльназГарайшин-ч6о
    @ИльназГарайшин-ч6о 3 года назад

    Ctrl + shift + вверх/вниз, чтоб продублировать выделенный код)

    • @maxgraph
      @maxgraph  3 года назад

      неудобно)

  • @elitdie
    @elitdie 3 года назад +1

    Лайк подписка комментарий

  • @alexandy1344
    @alexandy1344 3 года назад

    Да куда уж детальней объяснять? Спасибо Макс, ты лучший. Канал смотрю подрос, меня не было долго.
    Как никому другому желаю успехов в развитии канала.

    • @maxgraph
      @maxgraph  3 года назад

      Спасибо!))

  • @greatn3s
    @greatn3s 3 года назад

    очень крутой обзор!

    • @maxgraph
      @maxgraph  3 года назад

      Спасибо))

  • @Brunopt893
    @Brunopt893 3 года назад +3

    Максим! Приветствую вас) не проще сделать бургер с помощью флекса? И битвин?) Как по мне в три строчки решается) P.S. Обожаю ваши ролики!)

    • @maxgraph
      @maxgraph  3 года назад +1

      Здравствуйте, может и проще))

  • @lolo_o9520
    @lolo_o9520 3 года назад

    Ты крут, продолжай в том же духе.Сделай,если тебе не трудно с скриптами

  • @supererkokz
    @supererkokz 2 года назад

    Спасибо

  • @alexandr8151
    @alexandr8151 3 года назад

    спасибо, всё отлично!!!!!

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @DionigiCavalli
    @DionigiCavalli 3 года назад

    Спасибо, 😉!

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @abdazimabdumalikov5194
    @abdazimabdumalikov5194 3 года назад

    Однозначно подписка
    \

  • @knowledge9396
    @knowledge9396 2 года назад

    Позвольте поинтересоваться, в связи с чем были предприняты столь замороченные действия с кнопкой “бургер”? Почему нельзя было использовать SVG элемент?

    • @maxgraph
      @maxgraph  2 года назад

      Нравится так)

  • @adilb8652
    @adilb8652 3 года назад

    от души :)

  • @yardcsgo2428
    @yardcsgo2428 3 года назад

    Максим здравствуйте, подскажите пожалуйста, как сделать сделать блок с логотипами под "hero", который есть в полном макете?

  • @MaksssHome
    @MaksssHome 3 года назад

    Ребят, можете сказать кто разбирается, на 1:22:36, вот мы применили свойство align-items: flex-start и оно применилось как я понял только к первым двум элементам, а как flexbox понимает что вот первые два элемента отности так сказать к start, а вот последний 3 элемент его не нужно касаться? Получается если задаем align-items: flex-start а элемента 3, то оно применится только к первым двум?

    • @maxgraph
      @maxgraph  3 года назад

      применилось оно ко всем четырем карточкам)

  • @TheBreade
    @TheBreade 3 года назад

    1:12:40 Почему мы пишем inline-block для подзаголовка, но не делаем то же самое для самого заголовка, когда переопределяем их margin ? Изначально было сказано, что так как hero-subtitle - строчный элемент, то он не понимает ни размеров, ни отступов, поэтому мы делаем его inline-block. Но затем, когда нам нужны отступы у самого заголовка hero-title, мы не делаем его inline-block'ом. Почему ?

    • @maxgraph
      @maxgraph  3 года назад

      Заголовок блочный, он то умеет в маргины)

    • @TheBreade
      @TheBreade 3 года назад

      @@maxgraph Благодарю

  • @ThePatosha
    @ThePatosha 2 года назад

    Я бы добавил лого href в футоре. Чтобы не скролить наверх. Нажал на логотип и ты наверху =)

    • @maxgraph
      @maxgraph  2 года назад

      Это неверное поведение с точки зрения логики)

  • @pavelkharytonau
    @pavelkharytonau 3 года назад

    Как думаете, в css лучше использовать метод ресет-по-классу (36:38) или прописать отдельный файл reset.css?

    • @maxgraph
      @maxgraph  3 года назад +1

      лучше ресет по классу)

  • @kerto9364
    @kerto9364 2 года назад

    Есть вопрос, почему вы используете Pading для того что бы отделять блоки а не margin. Pading все-таки внутренний отступ.

    • @maxgraph
      @maxgraph  2 года назад

      это где конкретно?)

    • @kerto9364
      @kerto9364 2 года назад

      Извиняюсь я дурачок и не заметил то что вы ставили pading backgroundду

  • @webboy2820
    @webboy2820 3 года назад

    Блин оказывается в фигме можно с скетч файлами работать.
    Зря ток устанавливал lunacy когда некоторое время назад верстал этот макет.Ох и помучался я тогда с переносом текста

    • @maxgraph
      @maxgraph  3 года назад

      да-да, можно)

  • @1Nurali
    @1Nurali 2 года назад

    Здравствуйте)
    Можно вопросы.
    1.Вы используете сетки в крупных проектах?? Я вот дошел до степени когда они не нужны, но бывают такие замечания где клиент прям яро хочет этого (в коде он не разбирается)
    2. Вот на ваших примерах да, все просто. а мне вот рисуют дизайн сайта 1920 - 1200 - 979 - 768 - 320 (появляются доп элементы и прочая лабуда) Это нормально?? или мне втык сделать дизайнеру?
    3. Используете ли вы изолированные стили по БЭМ или у вас свой подход?

    • @maxgraph
      @maxgraph  2 года назад

      Здравствуйте!
      1. Не использую, все можно сделать руками
      2. Ваш пример ничем не отличается от моего по факту. Доп элементы - ничего страшного, это норма
      3. Использую

  • @dmitry9771
    @dmitry9771 2 года назад

    Привет из 2022!
    Смотрю видос, стараюсь обучиться верстке, потом перейти во фронтенд.
    Насколько я понимаю, ты сделал ошибку в верстке блока сервисов, так как в макете,
    контейнер с карточками имеет padding: 0 30px;
    или я не прав?

    • @maxgraph
      @maxgraph  2 года назад

      Да вроде бы нет, все в порядке.

  • @whicencer8819
    @whicencer8819 3 года назад

    Спасибо за видео. Что у вас за клавиатура? Звук кайфовый. А то моя слишком громкая

    • @maxgraph
      @maxgraph  3 года назад

      Моя тоже не очень тихая)) но шумодав микрофона работает
      Anne pro 2

  • @user-gx8xj6kc3z
    @user-gx8xj6kc3z 3 года назад +1

    Максим здравствуйте. В готовом макете сайта при выделении самого "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 Спасибо

  • @AlexandraNicoleShin
    @AlexandraNicoleShin 3 года назад

    srazu like za to chto nauchil klassy cherez tochku zaoisyvat bystro!

  • @Виктор_Крылов
    @Виктор_Крылов 3 года назад +1

    16:45 а я наоборот стараюсь убирать такие вещи (ucoz их ставит сам, при работе через визуальный редактор) 😅
    PS
    Просто ни у кого не видел использование данного сервиса...

  • @СафаровМухаммад-т6щ

    Привет. Все круто, но остались вопросы. Почему logo img очень большая?

    • @maxgraph
      @maxgraph  3 года назад

      Надо смотреть, так не знаю

  • @Mrnsky
    @Mrnsky 3 года назад +1

    о, вот это мне нада.

  • @digitalturkistan1857
    @digitalturkistan1857 7 месяцев назад

    Бургер кнопку можно было сделать флексом .

    • @maxgraph
      @maxgraph  7 месяцев назад

      Да много как можно)

  • @spacenomoe
    @spacenomoe 3 года назад

    Спасибо, всё супер, но остались вопросы. Если не трудно ответь пожалуйста.
    1. Почему ты используешь паддинги, а не марджины для отступов сверху? Это принципиально или вопрос вкуса?
    2. Зачем элементам давать марджин 0, если он прописан в обнуляющем стиле?
    3. Не слышал про нормалайз. Работаю в SCSS в VScode. Он компилит уже с префиксами. Что лучше? Или использовать и то и то?

    • @maxgraph
      @maxgraph  3 года назад +6

      Привет!
      1. потому что существуют правила организации отступов, по ним так правильно. Видос на канале имеется)
      2. Где написано?
      3. префиксы с нормалайзом никак не связаны) нужно и то, и другое. Нормалайз приводит стили в разных браузерах к одному виду

  • @Dmitry_Sotnikov
    @Dmitry_Sotnikov 3 года назад

    Отличное видео, будут ещё уроки для новичков?

    • @maxgraph
      @maxgraph  3 года назад

      Здравствуйте, да

  • @-shakirov
    @-shakirov Год назад

    Не разобрался в сборке текущей как отключаешь Ховер на мобилках. Вику миксин есть, смысла не вдуплил. По бургеру допустим на Гите описание есть, с ним разобрался сходу 😁 «по инструкции». А на конструкцию миксина для откл Ховера смотрю и не догоняю по сборке в медиа чтоли пихнуть и что прописать? Все свойства которые у кнопок меняются типа цвет бэкграунд ? Не проканало. Либо смысл неверно понял либо реализовал неверно тут уже сам разберусь дай направление пожалуйста 😁😊

    • @maxgraph
      @maxgraph  Год назад +1

      Да просто @include hover {стили} и всё

    • @-shakirov
      @-shakirov Год назад

      @@maxgraph спасибо 😎

  • @eugenevandar7952
    @eugenevandar7952 2 года назад

    Где можно посмотреть требования Code Style CSS? Пытался найти после одного из твоих уроков по верстке, но безуспешно

    • @maxgraph
      @maxgraph  2 года назад

      codeguide.maxgraph.ru

  • @ITis_hub
    @ITis_hub 3 года назад

    Подскажите, пожалуйста, как вы печатаете текст сразу на нескольких строках (например, 29:33)? Какое это сочетание клавиш?

    • @maxgraph
      @maxgraph  3 года назад +1

      Альт зажать надо)

  • @чёрныймэм
    @чёрныймэм 3 года назад

    Максим, здравствуйте, а можно ли этот бургер сделать через display:flex, flex-direction:column, и через псевдокласс задать margin?

    • @maxgraph
      @maxgraph  3 года назад

      Можно что угодно)