Адаптивная верстка сайта с нуля по макету из Figma #4 CSS Grid и медиа запросы

Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS.

В этом уроке мы будем верстать раздел о компании. Я покажу как выравнивать элемент с абсолютным позиционированием и мы сверстаем сетку из 4-х столбцов с помощью CSS Grid, а так же сделаем адаптивную версию сайта с помощью медиа запросов @media на CSS для разных устройств.

▶▶ Видео, которые будут вам полезны ◀◀

Поддержать автора ₽ублем:
1. Сбер: 4274 3200 3233 1582

#html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor

[sintez]

Вот это подробности, ни в одном курсе и видео, так ещё не разжовывали, спасибо!

[diman_daron]

лучший курс из всех, что проходил на ютубе, жаль, что не начал с этого плейлиста сразу

[egiqidr]

Хорошие объяснения и хорошая наглядная реализация уроков. Ну и ссылки на дополнительные темы, то же помогают в обучении. Спасибо за уроки!

[pondokf]

Практика с гридами и медиа запросами это ТОП, спасибо!

[zfxrdom]

Присоединяюсь ко всем позитивнім оценкам курса. Спасибо за доступное обїяснение.

[kfzqfpw]

Хорошие уроки, всё доступно и понятно. Благодарю за ваш труд)

[evgeniyevgeniy]

Спасибо большое за твой труд. Всё очень понятно объясняешь.

[supersmooth]

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

[saneok]

Спасибо за прекрасный урок, смотрим дальше!

[romando]

для адаптива я использовал grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); Не надо медиа запросы, более-менее нормально переносит колонки, но для некоторых экранов делает их 3 и одну внизу

[j.bond]

Доброго дня. С версии Google Chrome 84 (Edge 84, Firefox 63, Safari 14, Opera 70) рекомендуемый синтаксис для Css-grid свойства gap - row-gap или column-gap.

[tvktckw]

Продолжаем учить, продолжаем зубрить. Надеюсь комментарии помогут продвижению).

[deniskutsenko]

недавно освоил флексбокс, но грид куда круче😃

[romando]

Когда верстаем второй блок для чего финт ушами с абсолютным позиционированием, left: 50% и трансформ транслэйт? когда тот же эффект можно достигнуть с помощью margin: -150px auto 0;

[dilqioe]

Добрый день ! Исмаил благодарю за такой полезный курс ! Можно небольшой вопрос, зачем создавать еще один див с классом about__grid вместо того чтобы оставить все item просто в контейнере и делать манипуляции именно с ним ?

[Drewaka]

День добрый. А почему section не поместили в main? А сразу после header создали секцию.

[romando]

А почему бы не написать margin:0; к селектору *, а font-family не прописать сразу в body, оно же наследуется, как и font-weight, а где не оно - вписать Opensans, некоторые селекторы можно сгруппировать и написать для них одинаковые css свойства, в целом тогда код станет намного короче. например в первом блоке h1 и h4 имеют одинаковый цвет, ширину, прописные буквы и ширину

[focusedzed]

Ребят, всем привет! Может кто-то сможет объяснить зачем мы на 13:48 пишем max-width: 1110px и width: 100%? Немного не понял что имеет ввиду автор под "Из-за абсолютного позиционирования у нас не применяются все предыдущие стили". Убрав оба этих стиля все отлично ложится на 100% pixel perfect и не возникает проблем с адаптивом. Заранее спасибо за ответы!

[gepa]

можно по подробнее об ширине и высоте? почему при ширине мах используете а при высоте mib ?

[cmomoop]

Уважаемый Исмаил Усеинов❤ (без сарказма, потому что я реально Вас уважаю)
У Вы специализируетесь только на front end или у Вас есть ещё курс по PHP?