Адаптивная верстка сайта с нуля по макету из Figma #4 CSS Grid и медиа запросы
HTML-код
- Опубликовано: 28 фев 2022
- Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS.
В этом уроке мы будем верстать раздел о компании. Я покажу как выравнивать элемент с абсолютным позиционированием и мы сверстаем сетку из 4-х столбцов с помощью CSS Grid, а так же сделаем адаптивную версию сайта с помощью медиа запросов @media на CSS для разных устройств.
⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": boosty.to/itdoctor/posts/6f32...
Курс "Верстка сайта с нуля по макету из Figma": • Верстка сайта с нуля п...
Макет сайта Figma: drive.google.com/file/d/1gSTp...
▶▶ Видео, которые будут вам полезны ◀◀
Видео урок по CSS Grid: • CSS Grid Layout подроб...
БЭМ методология от Яндекс: • БЭМ методология от Янд...
Курс по вёрстке HTML+CSS для начинающих: • Курс по вёрстке HTML+C...
CSS @media: • Специальные правила в ...
Медиа запросы в языке CSS: • Медиа запросы в языке ...
Поддержать автора ₽ублем:
1. Сбер: 4274 3200 3233 1582
2. YooMoney: sobe.ru/na/itdoctor
3. PayPal: paypal.me/itdoctorstudio
Телеграм: t.me/itdoctorstudio
#html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor
Макет сайта Figma: drive.google.com/file/d/1gSTpLp4TfoLMiGzmSVfUgQnvhYwcgfmL/view?usp=sharing
Вот это подробности, ни в одном курсе и видео, так ещё не разжовывали, спасибо!
Рад что понравилось. Это мой подход в обучении. Обращать внимание на мелкие детали, нюансы и в результате из всего этого получится одна цельная картина с хорошим пониманием области в целом.
лучший курс из всех, что проходил на ютубе, жаль, что не начал с этого плейлиста сразу
Спасибо
Огромное спасибо!
пожалуйста
Практика с гридами и медиа запросами это ТОП, спасибо!
Дальше больше
Хорошие объяснения и хорошая наглядная реализация уроков. Ну и ссылки на дополнительные темы, то же помогают в обучении. Спасибо за уроки!
Рад что нравится
Присоединяюсь ко всем позитивнім оценкам курса. Спасибо за доступное обїяснение.
Всегда пожалуйста
Прекрасный урок. Спасибо за труд.
Grid'ы - круто!
всегда пожалуйста
Спасибо большое за твой труд. Всё очень понятно объясняешь.
Спасибо что оценили
Хорошие уроки, всё доступно и понятно. Благодарю за ваш труд)
Спасибо за оценку
очень крутые видео, мега полезные!
жду следующую часть!
Спасибо. Сегодня следующий урок
Спасибо за урок
И вам спасибо за добрые слова
Отличный цикл роликов. Спасибо )
Вам спасибо, рад что нравится
Спасибо за прекрасный урок, смотрим дальше!
Пожалуйста
Спасибо!
Пожалуйста)
Спасибо за видео!!!!!!!!👍👍👍
Пожалуйста
Спасибо большое за такой курс
Пожалуйста
Хороший урок, спасибо за труд
спасибо что оценили
Уроки просто супер
Спасибо
спасибо!!очень круто!!
Пожалуйста. рад что понравился
для адаптива я использовал grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); Не надо медиа запросы, более-менее нормально переносит колонки, но для некоторых экранов делает их 3 и одну внизу
Доброго дня. С версии Google Chrome 84 (Edge 84, Firefox 63, Safari 14, Opera 70) рекомендуемый синтаксис для Css-grid свойства gap - row-gap или column-gap.
Когда верстаем второй блок для чего финт ушами с абсолютным позиционированием, left: 50% и трансформ транслэйт? когда тот же эффект можно достигнуть с помощью margin: -150px auto 0;
❤👍🏼👍🏼👍🏼👍🏼
Спасибо
Добрый день ! Исмаил благодарю за такой полезный курс ! Можно небольшой вопрос , зачем создавать еще один див с классом about__grid вместо того чтобы оставить все item просто в контейнере и делать манипуляции именно с ним ?
Добрый день. Контейнер у нас для ограничения по ширине. Конечно можно его использовать как грид родитель добавив ему другой класс дополнительно. Но логичней разделить по назначению элементы. Так легче читать этот код в дальнейшем и поддерживать его. Но вы можете сделать и так как предложили, тут нет ничего плохого и оба варианта имеют место быть.
Продолжаем учить, продолжаем зубрить. Надеюсь комментарии помогут продвижению).
Спасибо, помогут
Itdoctor ты лучший
Спасибо
Уважаемый Исмаил Усеинов❤ (без сарказма, потому что я реально Вас уважаю)
У Вы специализируетесь только на front end или у Вас есть ещё курс по PHP?
Спасибо. Есть ruclips.net/p/PLuY6eeDuleIPUDtVRCM4aEWQwdONcTXW5
Здравствуйте! У меня вопрос о минимальных разрешениях. С момента 420px картинка начинает плыть, а на 320px(минимум для смартфонов) совсем съезжает. Может лучше сделать еще один брейк-поинт для минимальных разрешений и уменьшить шрифты.?
Можно и так . Но у меня вроде всё не плохо выглядит. Вы же видели. Или вы о чем то другом?
День добрый. А почему section не поместили в main? А сразу после header создали секцию.
такое принял решение.
можно по подробнее об ширине и высоте? почему при ширине мах используете а при высоте mib ?
ruclips.net/video/ZuRJSkvuHoQ/видео.html
недавно освоил флексбокс, но грид куда круче😃
И то и то круто, одно другое не заменяет
А почему бы не написать margin:0; к селектору *, а font-family не прописать сразу в body, оно же наследуется, как и font-weight, а где не оно - вписать Opensans, некоторые селекторы можно сгруппировать и написать для них одинаковые css свойства, в целом тогда код станет намного короче. например в первом блоке h1 и h4 имеют одинаковый цвет, ширину, прописные буквы и ширину
Здравствуйте. 14:44 у меня почему то блок никак не хотел быть нужного размера (с низу торчал больше чем 150px), пока не перекинула паддинг из инфо в абаут__грид. С чем это может быт связано, что в чём моя ошибка ?
.info {
position: absolute;
top: -150px;
left: 50%;
max-width: 1110px;
width: 100%;
min-height: 300px;
transform: translateX(-50%);
background-color: #f7f7f7;
}
.about__grid {
padding: 57px 130px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
justify-items: center;
}
box-sizing: border-box прописывали в самом начале? может забыли?
@@ITDoctor использовала обнуляющий стиль, и попробовала бокс сайзинг и ничего не изменилось. Помогло отключение паддингов 57 130 из .info, после этого блок стал размером что мы кюуказали для .conteiner, если же добавить паддинги В .INFO то он вылазит за контейнер
Здравствуйте ! Почему при перечислении тегов в vs code через запятую (h1, h2, h3 и.т.д) они становятся в столбик а не в строчку ? Заранее спасибо.
если вы про селектор в CSS файле, то они становятся так как мы их ставим сами. для визуального удобства я так размещаю если вам удобно можно в строку писать. если вы про другое что то, то значит я не понял ваш вопрос.
@@ITDoctor Как в Visual Studio Code настроить автоформатирование при сохранении так что-бы в css перечисление классов через запятую оставалось в строчку а не выстраивалось в колонну?
Например
nav,
footer,
header,
aside {
display: block;
}
а нужно
nav, footer, header, aside {
display: block;
}
Сами становятся в столбик не могу сделать чтобы были в строку. Где в настройках что-то не то но никак не могу понять где.
@@contrik_2469 это стандартное блочное поведение у элементов. Чтобы было по другому можно использовать flexbox или grid. Вот тут я собрал много уроков t.me/itdoctor_official/1100 пройдите их. Повысьте свой уровень и будете понимать все прекрасно
Ребят, всем привет! Может кто-то сможет объяснить зачем мы на 13:48 пишем max-width: 1110px и width: 100%? Немного не понял что имеет ввиду автор под "Из-за абсолютного позиционирования у нас не применяются все предыдущие стили". Убрав оба этих стиля все отлично ложится на 100% pixel perfect и не возникает проблем с адаптивом. Заранее спасибо за ответы!
Здравствуйте! Спасибо за уроки, получила ответы на многие вопросы) У меня проблем а с макетом. До 4 урока все нормально было как вы показывали. Начала четвертый урок, открыла в хроме страницу, потом расширение perfect pixel, загрузила заново макет через него, все съехало не могу поставить на место. Страница нормально выглядит при загрузке, а макет при наложении уменьшился. Никак не могу разобраться как обратно поставить на место, уже весь интернет обыскала не нашла ответа как это сделать((( Помогите пожалуйста?!
Может у вас scale или position сбился. Или масштаб в браузере не 100% он меняется с помощью ctrl+ колёсико мыши и иногда случайно его можно сбить и тогда ничего совпадать не будет
@@ITDoctor Спасибо за помощь, смогла разобраться)))
@@khfk671 пожалуйста
Спасибо. Сколько можно зарабатывать на верстке после основной работы, работая по вечерам ?
кто как сможет. найдете ли клиентов и многое другое. Это все индивидуально. Это не работа по найму где вам точно скажут что вы получите 15 000 р. например и вы точно уверены в этой сумме. тут такого нет.
@@ITDoctor Спасибо тебе.
А зачем сбрасываем на "position: relative" ?
Не понял на 23.50 смысл фразы - подбираем и делаем три вот таких вот класса
изучайте основы html потом css потом только переходите к верстке.
ruclips.net/p/PLuY6eeDuleINqbJtQv32qtDpTBopxuqs4
ruclips.net/p/PLuY6eeDuleINJ5hIlBJWopSWHWDJYz_XW
ruclips.net/video/ZGeCNkW7FKw/видео.htmlsi=js4KpTyMNMRgeJC0
ruclips.net/video/MoIK7WtUvto/видео.htmlsi=3ZEkrJbyT-_mScf5
ruclips.net/video/6YnDq_oDw_I/видео.htmlsi=mszh2LtEBz0WsC4h
Вкладка inspect на Figma стала недоступной в бесплатной версии
у меня есть три новых урока за последнее время там все подробно рассказывал. откройте вкладку видео на канале и посмотрите уроки по верстке из Figma и Pixso их 3 штуки они по 40 минут и чуть больше часа.
ruclips.net/video/ZGeCNkW7FKw/видео.htmlsi=js4KpTyMNMRgeJC0
ruclips.net/video/MoIK7WtUvto/видео.htmlsi=3ZEkrJbyT-_mScf5
ruclips.net/video/6YnDq_oDw_I/видео.htmlsi=mszh2LtEBz0WsC4h
Ребята, что делать если пытаюсь сделать паддинг в инфо, и вместо то что бы текст ушел глубже, наоборот от него создаются паддинги
не совсем понятно что именно вы хотите сделать? внтуренний отступ он на то и внутренний что он от краев элемента в центр делается. если вы хотите сам элемент двигать то можно margin с отрицательным значением использовать например.
@@ITDoctor дело в том, что он выходил за грани контейнера, но я уже по рылся в интернете и по фиксил, с помощью бокс сайзинг бордер бокс
@@usuratonkach1 рад что вы справились. Ну про бокс сайзинг я рассказывал вроде в первом видео. Это плейлист целый там много уроков последовательно, может вы не знали и только один посмотрели?
@@ITDoctor да, я по вашим видео практикуюсь, очень полезные, нигде не видел столько объяснений, а про бордер бокс, я просто в начале его не правильно прописал
Помогите пожалуйста. У меня в фигма нету кнопки inspect
figma интерфейс поменялся. в правом углу где кнопка share, справа от нее теперь бегунок. его кликните и появится испект. теперь так надо менять режимы постоянно.
Он теперь платный стал (
Миллион вложенных дивов на 7:28 и непонятно для чего.
Зачем столько дивов?
@media screen and (max-width: 420px) {
.info {
position: relative;
}
.h1 {
font-size: 30px;
line-height: 1.2;
}
.h4 {
font-size: 15px;
}
.about__grid-item {
text-align: center;
width: 80px;
}
}