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

Привет! В этом видео я покажу, как верстать несложный лендинг (преимущественно для новичков) с нуля до результата. Здесь будет все те мелочи, которые я учитываю в каждом проекте - почему отступы именно такие, зачем нужен контейнер и так далее
www.figma.com/file/RMyU83sC42iWF82Q2mZcGK/%D0%9C%D0%B0%D1%80%D0%B0%D1%84%D0%BE%D0%BD-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8-MaxGraph-%E2%84%965?node-id=2%3A2 - макет
github.com/maxdenaro/maxgraph-youtube-source/tree/master/%D0%9C%D0%B0%D1%80%D0%B0%D1%84%D0%BE%D0%BD%20%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8%20%E2%84%965.%20%D0%94%D0%BB%D1%8F%20%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BA%D0%BE%D0%B2 - готовая верстка
www.artlebedev.ru/typograf/ - Типограф
everythingfonts.com/font-face - Конвертер шрифтов
Понравилось? clck.ru/Gr9Ec
Поддержать канал: boosty.to/maxgraph
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Карта канала: blog.maxgraph.ru/ytmap/
Яндекс.Дзен: zen.yandex.ru/maxgraph
Мой сайт: maxgraph.ru
Канал в телеграм: t.me/maxgraph
Чат для верстальщиков: t.me/maxgraph_chat
#ityoutubersru #марафонверстки #для_новичков

[@user-yw7dl1eq7d]

Уроки должны быть именно такими: правильная семантика, структура проекта, именование классов, адаптивная верстка. Надо учить сразу как должно быть. А то встречаешь уроки, адаптив не делают, классы как попало называют, и т.д. А в этом видео максимальная концентрация всего, как должно быть. Спасибо.

[@maxgraph]

Пожалуйста)

[@vovergg]

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

[@user-ho2wd2ts6n]

Спасибо! И удачи в процветания канала и сайта!

[@maxgraph]

Спасибо)

[@user-hc7wq9om9i]

Спасибо большое Вам,очень нравится, как Вы объясняете, и очень хочется ,в будущем ,также продумывать все ходы в верстке наперед,как Вы!

[@maxgraph]

Пожалуйста)

[@user-gn5th5gt2w]

Очень нравится твой контент. Спасибо, всех благ!

[@maxgraph]

Спасибо)

[@alexdon5107]

Спасибо МАКС что вернулся))) ура ура !!!

[@maxgraph]

Куда ж я денусь))

[@evgeny421]

С возвращением! Ждем качественный контент)

[@maxgraph]

Спасибо)

[@a_zhary]

🎉 Посмотрю сегодня обязательно А лайк сразу бахну 👍👍👍

[@maxgraph]

Спасибо)

[@rezale]

Как вовремя данное видео по адаптиву, застрял на этой теме) Буду сидеть и впитывать!) Спасибо огромное Мак. P.s. лайк за ранее поставлен

[@maxgraph]

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

[@diggerdog001]

Топовый контент. Спасибо Макс! Ты и с 0 до 1 - для меня лучшие каналы по верстке в ру-сегменте!

[@maxgraph]

Спасибо)

[@luchiksolnca6039]

Слушаю твои видео, за день глаза сильно устают. Что то откладывается в голове. Спасибо

[@maxgraph]

Пожалуйста)

[@user-nd4kc4zl3g]

Подписался на тебя через SB и во многих местах контент на много качественнее и доступнее чем на платформе, спасибо!

[@maxgraph]

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

[@sergeilavrenov2022]

Спасибо за разбор. Много нового узнал.

[@maxgraph]

Пожалуйста)

[@user-lm9ee1gn5p]

Спасибо, кайфанул (отдохнул)

[@maxgraph]

Пожалуйста)

[@kontorasb2754]

Привет, спасибо, что вернулся! Не хочется быть занудой, но если видео для новичков, то они будут в ступоре.....))) На 3.24 мин, наверно все таки не с помощью БЭМ, а с помощью Emmet разворачивается базовая структура файла.

[@maxgraph]

Да, мог оговориться)

[@MarkoTH000]

Топ контент!

[@maxgraph]

Спасибо)

[@fly9345]

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

[@maxgraph]

Здорово)

[@user-jv4px9cu3e]

давай посложней макетик заверстаем:))жду марафоны твои:)

[@maxgraph]

Предлагай))

[@user-ef2wx9es1p]

Спасибо огромное за урок! Очень понятно для новичков. И у меня вопрос: а разве блок services не слайдер? Там ведь в макете кнопочки (едва заметные) для переключения слайдера есть

[@maxgraph]

Да, возможно. Но для новичков и этого достаточно)

[@rosumere]

В блоке portfolio, вместо выделения portfolio-item в отдельный блок, можно было использовать элементы portfolio__item > portfolio__item-col (или __item-inner) > portfolio__item-img > portfolio__item-title и т.д. Мне, к примеру, так удобнее, но было бы интересно услышать аргументы за отдельный блок в данном случае. Не спора ради, а опыта для :)

[@maxgraph]

Знаю. Но мне удобнее так)

[@maxgraph]

Просто привык выделять это в отдельные сущности, эти элементы вполне могут использоваться на разных страницах

[@justprogrammer6992]

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

[@Nebogr]

Очень круто, могли бы снять видео как пользователь может свои комментарии оставлять? И могли бы снять видео как пользователь может сам на сайт загружать свои видео и фото? Пожалуйста.

[@maxgraph]

Здравствуйте. Это будет, но на примере другого сайта)

[@Nebogr]

@@maxgraph буду ждать с нетерпением и очень вам благодарна.

[@user-or1hy4xz8u]

Интересно, как Типограф выявляет эти "невидимые" для нас пробелы? Откуда они берутся? Их закладывает дизайнер при создании макетов в Фигме?

[@maxgraph]

Нет, просто анализируется текст и по алгоритму вставляет символы

[@nataliealeksandrova8047]

Подскажите, насколько на данный момент времени актуальна информация о том, что для ссылок с target="_blank", всегда следует добавлять rel="noopener noreferrer", как меру предосторожности против фишинга. Это гарантирует, что значение window.opener будет null, в Chrome и Firefox. В Safari Technology Preview 68, для target="_blank" задается rel="noopener" по умолчанию. ?

[@maxgraph]

Не в курсе, я не добавляю)

[@user-du6jt5of9e]

Подскажите, не проще было бы в начале style.css прописать что-то вроде: * { margin: 0px; } чтобы не сбрасывать их в каждом title и descr ? Или все же их не везде нужно сбрасывать?

[@maxgraph]

В веб-заметках на канале есть видео про сброс отступов) там все рассказано)

[@nazarsincopa880]

Отличный урок! А что за тема в редакторе у вас?

[@maxgraph]

One monokai

[@user-du6jt5of9e]

Добрый день, а зачем мы на 1:05:39 ставим padding-top: calc(120px + 150px); для hero? У нас же нет относительных значений.

[@maxgraph]

Мне так удобнее, что я вижу из чего состоит отступ

[@TheZver63]

маленько вопрос оффтоп, но все же: что за микрофон для записи своего голоса ты используешь? Или может ещё чем-то докручиваешь?

[@maxgraph]

На том видео уже не помню. Сейчас это shure mv7x Ничего сверху не делаю, потому и выбрал его))

[@TheZver63]

@@maxgraph очень классно. А к чему цепляешь микрофон? Там XLR разъём.

[@maxgraph]

Xlr у mv7 А у mv7x только usb) Но у меня и mv7 есть, и аудио карта))

[@nataliealeksandrova8047]

Еще вопрос: на 48:40 мы у h1(hero_title) ставим margin:0 но перед этим в начале работы с css мы подключаем normalize.css, в котором прописываем margin:0.67em у h1 в чем логика? объясните, пожалуйста

[@maxgraph]

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

[@e-astap]

Добрый день! для скрытия элемента, вы используете сочетания свойств visibility: hidden; opacity: 0; А зачем два свойства сразу? Ведь, кажется, что visibility:hidden будет вполне достаточно. С эти свойством элемент невидим, не доступен с клавиатуры и скрыт от скринридеров. Что я упустил?

[@maxgraph]

Да вроде бы и нет особой разницы. Моя привычка

[@jslover3687]

С opacity можно сделать анимацию плавно появляющегося элемента, например, а если использовать только visibility: hidden, то элемент вроде бы будет резко появляться

[@en_kratia]

Только opacity можно использовать в transition , а visibility-hidden дает pointer-events: none, можно и сам pointer-events: none, но с мvisibility доступность выше (скринридеры не видят его, когда элемент скрыт). Поэтому их вместе используют.

[@andrewpizzert4065]

Вот с блоками типа Services у меня всегда путаница. Не лучше ли тут подходит оформление через dl? Вроде по описанию подходит. Dl - список описаний, состоящий из нуля или более групп "имя-значение". Каждая группа должна состоять из одного или нескольких имен ( dt элементов), за каждым из которых следует одно или несколько значений ( dd элементов).

[@maxgraph]

Никогда в жизни ими не пользовался

[@andrewpizzert4065]

@@maxgraph Понял) Просто изучал статьи по семантике и там этот тег рекомендуют для чего-то подобного.

[@yourpain4969]

можно макет в телеграм загружать или в гугл диск, чтобы можно было скачать? а то view only мешает

[@maxgraph]

Нажмите туда и выберите duplicate

[@vlad-jf6ir]

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

[@maxgraph]

Не очень понял ваш вопрос, надо бы посмотреть)

[@hanuka2840]

Здравствуйте, подскажите. Как правильно верстать сайт, чтобы не было проблем с продвижением? Бывает встречаю, что в своих торговых предложениях люди пишут: "вам могут сделать г*вно сайт, который не продвигается, придётся переделывать и т.д. Так что берите у меня". Понятно, что все для завлечения, но у вас есть видео на эту тему? Или может в будущем запланируется? Благодарю

[@maxgraph]

Здравствуйте. Это не к верстальщику вопросы

[@mashutaklencheva4010]

когда видео проигрывается, почему-то нельзя включить в видео звук. кнопка мьютед как будто неактивна, это нормально? и у header__btn svg стили вроде бы не поправили, по крайней мере до момента 1ч 22м точно

[@maxgraph]

В конце поправил

[@aswarriorr]

Здравствуйте. Зачем удалять href если можно в него поставить заглушку ? href”#!” ? Благодарю .

[@maxgraph]

Здравствуйте. А с заглушкой ссылка будет иметь cursor: pointer?

[@aswarriorr]

Почему нет ? В css прописываешь cursor: pointer; если он в reset css отключен .

[@baytszy]

А обязательно было делать main с баннером? Можно же было в хедер поставить картинку?

[@maxgraph]

Я считаю что так правильно

[@baytszy]

@@maxgraph ладно, поняла. Правда это не объяснение..

[@user-oe7ee6xe5p]

Здравствуйте, скажите как вы выбираете где маргин ботом а где паддинг топ?

[@maxgraph]

Есть на канале урок про организацию отступов, посмотрите)

[@gulnarabykhovskaya9021]

Почему ты подключаешь script в head? Это является правильнее, чем подключение в body?

[@maxgraph]

Да, так быстрее будет

[@reshenie1]

Картинка с балконами - это слайдер. тем есть стрелки влево и вправо

[@maxgraph]

Может) но видео для новичков, достаточно и этого

[@unity_12]

MaxGraph! Сними видео про css color-scheme

[@maxgraph]

Подумаю про это)

[@toshchayabritva28]

Приветствую, сделал сайт на твоей сборке, но не могу понять как загрузить его на git и опубликовать, файлы закидываю, публикую, но страница пустая, я просто новичок в этом деле

[@maxgraph]

Привет. Что конкретно надо сделать с кодом ? И какие файлы загружаешь?

[@toshchayabritva28]

@@maxgraph хочу загрузить проект на git и сделать его публичным, чтобы была ссылка на сайт

[@toshchayabritva28]

upd: я понял, надо на хост заливать, т.к не работает php на git

[@drobinskiyd]

не понял зачем мы вообще создавали visually-hidden если мы его потом скрываем?для чего он - упустил этот момент

[@maxgraph]

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

[@Alexus1504]

Смотрел расценки на вёрстку (на биржах фриланса). Цены какие-то "копеечные"!!! Неужели вёрстка так дешево стоит?!

[@maxgraph]

Смотря какая и как себя продашь))

[@1Nurali]

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

[@maxgraph]

Кажется вы не прочли название, там написано "для новичков". Да и понятие сложности слишком размытое

[@diggerdog001]

А что делает :root: --offset: 60px я так и не понял?

[@maxgraph]

Это css переменная, в которой хранится значение отступа

[@diggerdog001]

@@maxgraph спасибо

[@zhamshidkaliev]

Зачем типография сделали тектси ???

[@maxgraph]

Что?

[@zhamshidkaliev]

@@maxgraph почему типографили тектси ?

[@maxgraph]

Так лучше будет работать текст при переносах

[@user-lm9ee1gn5p]

Где вебка?😅

[@maxgraph]

Мешала бы)