Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи
HTML-код
- Опубликовано: 2 июн 2024
- ↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓ Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео уроке я подробную покажу HTML CSS верстку простого макета из FIGMA. Поделюсь полезными приемами как быстро сделать адаптивную верстку, добавить мобильную навигацию и разместить видео на вашем сайте.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт курса: 27-го Мая 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 3-го Июня 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
МАТЕРИАЛЫ К УРОКУ:
• Макет: t.me/joinchat/friZxyBulgNmYjE6
• Код с урока: t.me/joinchat/friZxyBulgNmYjE6
• Урок по VS Code: • VS Code - установка и ...
• Основы HTML: bit.ly/3jry7AH
• Сброс стилей reset.css: webcademy.ru/blog/739/
ТАЙМ КОДЫ:
00:00 Знакомство с макетом и старт проекта
03:38 Сброс стилей
18:02 Базовые стили, контейнер, шрифты
29:57 Контейнер
33:40 Верстка шапки с навигацией
1:10:30 Верстка верхней секции
1:47:35 Секция How It Works - заголовок
2:04:48 Секция How It Works - колонки
2:32:34 Секция Story
2:56:56 Секция Our Product
3:27:54 Подвал
3:34:16 Правка багов
3:37:37 Читкод для отображения десктопной версии на смартфонах
3:41:58 Адаптивная верстка шапки и навигации
3:50:20 Адаптация первой секции
3:56:10 Адаптивная верстка секции How It Works - заголовок
4:00:30 Адаптивная верстка секции How It Works - колонки
4:07:42 Адаптивная верстка Story
4:12:51 Адаптив для секции Product
4:38:05 Адаптив для подвала
4:43:02 Мобильная навигация, скрипты
5:06:24 Видео в секции Story, Скрипты
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Меня зовут Юрий Ключевский. Я занимаюсь разработкой сайтов уже много лет, специализируюсь на front-end разработке и верстке сайтов, JavaScript и PHP программировании. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, JavaScript, jQuery, PHP, MySQL, React, Gulp.
На нашем канале ruclips.net/user/WebCademy?s... вы найдете много полезных обучающих материалов, а так же сможете поработать со мной лично пройдя мои курсы.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Сайт школы ВебКадеми: webcademy.ru/
Наша группа Вконтакте: webcademy
Telegram канал: t.me/webcademynews
все, как всегда подробно и понятно объяснено. спасибо огромное учитель за урок
Спасибо, пересмотрел все ваши макета с канала и повторил, очень доступно объясняете.
Юрий, большое спасибо! Все доступно, и понятно, так держать!
Добрый вечер! Юра спасибо за урок, как всегда круто!!!
Удачи тебе во всех твоих начинаниях)
Большое спасибо, отличное видео! Очень подробное объяснение (особенно нравится предложенные альтернативные варианты). Посмотрел пол видео, но уже часть вопросов спала относительно некоторых вещей. С адаптивным фоновым изображением + object fit были недопонимания, но теперь все ок)
Юрий, спасибо большое за практику! Всё очень подробно, понятно и логично. Я совсем новичок и для меня очень важно понять закономерность и правильно выстроить верстку с самого начала. 🙏🔥💪
Юрий, так подробно Вы ещё никогда не объясняли, имхо. Я нашла для себя много объяснений разных приёмов, которые Вы раньше только поверхностно затрагивали. Это счастье наконец-то понять "что к чему". Классное видео ! Спасибо за Ваш труд.
Спасибо за практику в конкретной IDE и указание оптимального плагина-расширения
Как всегда приятно послушать и посмотреть
Отличный урок и не менее отличный преподаватель! Четкая дикция, без запинок, Вы молодец, спасибо за труд🙏
благодарю за урок! отличное объяснение процесса!
Спасибо, за подобные видео.
Спасибо, весь урок повторил, увидел как структурировать файлы в проекте и многое оказалось уже проще чем было ранее. Вспоминаю свою верстку и понимаю, что для портфолио ее необходимо привести в порядок. Также интересен был вариант трансформации десктопной версии в мобильную. Принял во внимание подходы к формированию блоков сайта из макета в фигме. Возможно попробую этот подход на другом макете. С видео тоже не работал. По скрипту вопросов не возникло.
просто космос )спасибо большое за ваш труд
Это просто рай для начинающих. Спасибо огромное!!!! Ребята не будем скупится на коммент и лаиков.
Юрий, большое спасибо! Не получилось опять онлайн (только чуть-чуть посмотрел), зато в записи теперь смотрю, делаю заметки, учусь "как надо". Успехов!
Спасибо, очень классно. Еще и макет есть. Не часто встретишь))))
Спасибо, очень хорошо и подробно
Нереальное видео. Большое спасибо
Очень доходчиво! Спасибо
Привет, будет урок с грамотным бем неймингом? Или мне не стоит ждать? Что думаешь по поводу записи урока по теме: "написание full-stack приложения" ?
наконец-то мне показывают откуда css и прочее для вёрстки
спасибо за такое подробное видео! сейчас как раз активно изучаю верстку
Большое спасибо Юрий за отличный мастер-класс по верстке сайта! И хоть я и сам мог бы сверстать данный простой сайт, но все же благодаря вам, узнал некоторые полезные для себя моменты. Очень понравился ваш неспешный, грамотный и основательный подход к делу, с объяснением разных нюансов и мелочей, на которые мало кто обращает внимания, но которые также очень важны.
Спасибо за комментарий!) Рад что МК понравился!)
блоку хедер лучше задавать высоту или же паддинги? Точнее как понять в какой ситуации что лучше или правильнее?
Молодец друг. Все Супер !!!!
Лайк однозначно!!!!!
Лысый из Вэбкадеми имеет подачу материала, которая мне безукоризненно заходит.
Я парень простой, вижу его видео - ставлю лайк, добавляю в "смотреть позже" и не смотрю ))))
Есть вариант покруче. Покупаешь премиум вариант курса "HTML верстальщик" или другой, слушаешь неделю-вторую и бросаешь.
Спасибо!
на счёт блока header есть пару вопросов.
Почему кнопку Start Trial не сделать с помощью обычного padding'a? Зачем height и line-height? Вообще же какое-то извращение..
И второе, где мы убрали space-between и jc и добавили margin-left: auto, почему нельзя было сделать просто margin-left к диву с навигацией?
КЛАСС! Давайте еще такое видео
Какая у вас тема в VS Code? Мне она очень понравилась
02:25:04 не совсем понял,для чего нужно делать контейнер .step-img-wrapper для картинки и задавать padding-bottom 126%,если у картинки уже стояли width: 100%;
height: auto; object-fit: cover; которые растянуть ее по контейнеру и пропорции тоже будут сохраняться при изменении размера родительского блока.
Добрый день. Сделал все как по видосу, но у класса .step-heading цифра "02" находится правее пикселей на 20 (у меня), если сравнивать с макетом. Как можно эту ошибку исправить, опираясь на код из видео? Просто если я буду изменять в .step-heading::before значение left, то будет сдвиг всех трех цифр, а все остальные цифры стоят на своих местах. Самое забавное. Заранее большое спасибо за ответ
Шрифты конечно, хорошо что выбрали какие надо, но по факту, вызовутся только те которые надо в браузере, потому их может быть хоть на 1 гиг, только да, место на сервере занимают )
Юрий когда будешь по сложнее макеты верстать?
Юрий, здравствуйте. не является ли главным условием при использовании - это иметь в этом блоке хоть 1 заголовок ?
Добрый день!) Если в теге section нет заголовка - то от валидатора будет Warning. Не ошибка Error, а предупреждение.
Привет всем. После просмотра видео-урока, решил попробовать использовать атрибут data-number через псевдоэлемент ::before, на рисунке (png) и у меня ничего не получилось! Может кто подсказать что нибудь по этому поводу? Может attr(data-number) не работает с изображениями, тег img?
Как сделать чтобы в режиме разработчика в хроме при на ведении на ссылки или ховеры сразу появлялся результат? У меня только после клика по ссылкам появляются изменения...
Привет.
Почему у меня по умолчанию стоит крестик, а при появления меню появляется кнопка?
не могу разобраться
Спасибо
Здравствуйте, благодарю за урок. Программа который сделаете принт-скрин и вставляете рамки разного как называется??? по моему отличный инструмент исследование макета.
это Скриншотер от Яндекс.Диска
лучший
Спасиб!
У меня play button на нажатия не реагирует. Метод play в консоли работает, но с кодом в js файле нет. Не знаете почему?
Надо смотреть JS код, а лучше сразу проект. Ошибка может быть как в JS так и в HTML.
Решил проблему?
На 52:00 вы использовали для пространства между ссылками margin-right 70px. Почему там нельзя использовать column-gap?
Надеюсь получу ответ🙏
Так а разве column-gap не для гридов используется? Я, если честно, ни разу не видел, чтобы ссылки задавали грид-контейнерами.
@@dmytroheneralov3579 для флексов тоже gap используется
Сложно назвать этот ролик для начинающих,а так ролик полезный без сомнений.
Добрый день. Есть несколько вопросов:
1)почему в адаптиве меньше 1536px не поставить падинги у контейнера по 30 px
. Да, мы не дизайнеры, но вроде бы очевидно, что 15px маловато. Или нет? Поясните, пожалуйста.
2) зачем мы выключаем блоки при адаптиве ? Ведь если бы мы их не выключали, мы могли бы одновременно для всех блоков проставить одинаковое уменьшение отступов между блокам, размеры текстов и заголовков, размеры кнопок. Да, мы бы шли сверху вниз по всем блокам и не один раз (для каждого разрешения), но зато у нас бы не было такого, что в каких-то местах мы уменьшаем заголовок, в каких-то нет...
3) степсы из блока how to works прям просятся в центр..
Возможно надо было бы изменить их ширину. А то у нас в секции продакт фотка девушки огромная на всю ширину, а степсы маленькие и сбоку.
4) у нас в третьем степе в секции хау ту воркс элемент before ниже, чем в других степах
П.с. я без претензий, просто хочу разобраться. Заранее спасибо.
Добрый день.
1) Вообще стоит исходить из дизайна. Если адаптив на усмотрение верстальщика, то он принимает решение.
2) Такой подход более удобен. Не всегда в секциях одинаковые заголовки и другие элементы.
3) Может быть... опять же, дизайна адаптива нет.
4) Так понимаю у вас все вопросы по дизайну. Это уже отдельный разговор. В идеале - должен быть макет с адаптивом на который ориентируемся. Иначе все на усмотрение верстальщика.
А почему кнопке у шапки(Логин) задали высоту? Не проще было дать падинги 13px сверху и снизу и 50px по бокам?
Она же приняла бы нужную форму как в макете
Такой же вопрос
добрый день можно макет figma чтобы изображение посмотреть)
Я так и не понял, как и почему задаётся высота блока через padding bottom/top
а сколько примерно стоит верстка такой страницы
Юрий подскажите пожалуйста, а посему вы картинки добавляете в html а не css ?
Смотря какие. Что то можно фоном и в css прописать. В HTML обычно пишутся те картинки которые можно будет в будущем менять через CMS, опять же подразумевая что верстка после будет ставиться на движок (CMS).
можно ссылку на макет? в ТГ не могу найти
Почему мы прописываем стили для кнопок через .btn, a.btn? И почему без a.btn не работает? Проверял и правда, только после указания a.btn на кнопку идут стили. Почему нельзя просто указать .btn?
Потому что есть стили для ссылок по тегу и они перебивают стили по классу. Поэтому делаем селектор более специфичным a.btn { }
за неделю неспеша вечерами сделал,но порой то одно не так работало то другое хD .Для тех кто долго мучается что кнопка плей не воспроизводится ,смотрите на z индекс как в кнопке ,так и в оверлее что бы были прописаны .
Отлично) У нас там новый стрим вышел, по верстке на Gulp, новые вершины ждут)
здравствуйте, я не разбираюсь в figma, пчм я не могу смотреть какое расстояние от каких либо объектов на макете? я просто тыкаю на объект и указываюсь курсором на нужный объект чтоб узнать расстояние, но ничего не происходит...
а все, разобрался. Метод тыка - лучшее средство
Почему мы блок нижний двигаем padding top? а не margin bottom от верхнего?
Там без разницы, и так и так можно
33:07 почему не max width?
Юра, а что за настенное покрытие сзади Вас?
Акустический поролон.
Не нашел макет проекта на Figma указанного в видео. Подскажите где есть пожалуйста.
Зайдите по ссылке в описании под видел, найдите пост в канале за 17 окт. 2021 г. там будет ссылка на макет.
Спасибо большое. Очень интересно!
@@WebCademy
Здравствуйте. спасибо огромное за урок очень много полезных фишек узнал ) Сделайте пожалуйста видео как загрузить сайт на хостинг. Можно прям этот сайт чтоб была прям такая полная процедура от макета до загрузки на хостинг. Заранее спасибо )
У тебя есть три способа как это сделать.
1.через файловый менеджер хостинга
2.через FileZilla
3.деплой используя IDE PhpStorm или подобный
@@evgeniy8695 хотелось бы увидеть ролик на тему загрузки сайта на хостинг
А почему верхню картинку просто через background image не повесить на секцию home и через background size cover растянуть ?
Зачем эти лишние обертки? Это все увеличивает ДОМ структуру что в свою очередь сказывается на оптимизацию сайта
Вам дан ответ на ваш вопрос на 1ч 13м 37 секунде урока
@@user-mr1dc1hr9q так ее можно выводить в html через атрибут style у секции home и это прекрасно выводится в cms и не обязательно для этого создавать обертку и в неё ложить тэг img. Пока не понял для чего такой подход использует автор.
@@evgeniy8695 возможно это более профессиональный подход
@@user-mr1dc1hr9q ахаха 🤣 и чем же? Тем что засоряет дом ?
@@evgeniy8695 чем засорять? Там всего один контейнер
Откуда в style sheets оказались настройки? Ничего не понятно
Нет этих настроек в папке fronts (((
Это называется - в Москву через Ньюйорк
kak skachat maket? spasibo
tittle в step2 немного не по шаблону))
Здравствуйте, не нашел ссылка на фаил reset css? не подскажите ссылку?
webcademy.ru/blog/739/
Я не понимаю, где макеты. Начал обучение на этом канале, хороший контент и приподносят понятно. Но не могу понять, начиная с определённого момента под видео не могу найти макеты. Где макеты?!
В ТГ канале t.me/joinchat/friZxyBulgNmYjE6 , ссылка на пост: t.me/c/1579074518/52
Что за тема в VS Code установлена? найти не могу((
Ayu
А где макет?
Зачем обертки. БЭМ нейминг в помощь
Ссылки не работают, просят телеграмм.
Все материалы в телеграм канале.
@@WebCademy Здравствуйте телеграмм не открывается по сылке именно ваш канал, нашёл сам подписался всё ровно не находит сам Макет пожалуйста подскажите что делать?
Извините, нешел.
Макета нету
есть в тг, просто название видео вводите
автор пояснює некоректно. Спішить перед батька в пекло. Я більшу частину відео не зрозумів що він робить, все пише все навгад, фіг зрозумій його...
a ti ukr subtitri vklyuchi mojet poimesh ss
О опять этот недоучитель, потом будет ролики удалять и записывать заного, он так всегда делал, потом народ не мог найти инфу в комментариях, по разборам, так как ролики удалены. Помню жалобу на него писали
А вот тут можно подробнее, насчет жалобы. Потому как прошлые ролики отсутствуют именно потому что был удален канал, с 48 к подписчиков. И из за тех кто скамил на него пропал контент.
Никогда не понимал таких поступков. Если что-то не устраивает - самый простой способ написать автору и пообщаться. А не скамить на канал.
Тк тебе уже писали о том что ты снимаешь видео, в комментах идёт активный диалог с обсуждением, дискуссии, так как ролики вроде бы как имеют обучающий характер, а потом ты удаляешь и через месяц записывашь тот же самый ролик на ту же тему с тем же заданием, а у людей которые хотели бы вернуться в предыдущее видео где было обсуждение с новым функционалом которое не обсуждалось в ролике, а создавалось спонтанно, не могут этого сделать. Так делать не правильно. Поэтому и были жалобы. Ты либо обычай, либо рекламь свои услуги, для этого есть иные способы.
@@Indi1go Это были марафоны которые проводились под запуск курса. Естественно было повторение контента, с привлечением новой аудитории. А удалялись они чтобы не захламлять канал повторением контента. Я за этим слежу и считаю это удобно когда можно открыть вкладку "Видео" и увидеть смысловые ролики по темам, а не десятки стримов с одинаковым названием. То есть делалось это также для удобства подписчиков. Есть чат в Телеграмме - можно обсуждать там.
Но вот писать коллективную жалобу на канал на котором же и обучаешься, для меня это непостижимо. (Ах, да - обучаться у человека, а после называть его недоучителем) Еще и коллективно, это значит вы где-то координируетесь.
То есть вместо того чтобы обучаться или зарабатывать деньги вы собираетесь в группу и думаете как бы кому-то поднасрать, и занимаетесь этим. Тут у меня опять идут двойные фейспалмы. Как выстрел себе в ногу. В принципе это поведение полностью вас характеризует.
@@WebCademy Юрка, молодец! Хорошо обработал негатив и понятно разложил для остальных. Хейтерс гонна хейт, как говорится. Короче, едем дальше. Спасибо тебе и твоей командей за все, что вы делаете. Учился с вами, учусь сейчас по этому видео (повторяю базу), буду учиться и дальше. p.s. индинго, коллега по веб-разработке, ты чего такой злой то?)
@@WebCademyнекоторые люди просто не ценят труд других
кто может подсказать , при загрузке готового проекта на github , выходит ошибка в консоле Failed to load resource: net::ERR_FILE_NOT_FOUND styles.css:1 ?
function Visible() {
var Grps = app.activeDocument.layerSets; // loops through all groups
for (var i = 0; i < Grps.length; i++) {
var tmp = app.activeDocument.layerSets[i].layers.length;
app.activeDocument.layerSets[i].visible = true;
var groupChildArr = app.activeDocument.layerSets[i].layers;
var randLays = Math.floor(Math.random() * tmp);
groupChildArr[randLays].visible = true;
Налаживает рандом слои на картинку ( нужно для генерации картинок)
Подскажите, мне нужно чтобы была возможность повторения одинаковых слоев на одной картинке + генерация абсолютно ориггинальных картинок без повторения по наложении слоев.
Это вообще можно реализовать? Информации совсем мало, прошу помощи
кто работает в наши дни верстальщиком.? с работой в фронтенде глухо поэтому все пилят курсы чтоб хоть как то заработать на жизнь с этими ненужными на рынке труда знаниями)))) расскажите кто работает и где и как работа в целом)) все бегут в эти области из за рекламы дикой но не понимают что потом бежать будет не куда когда дело доходит до работы
ну я бекендер ,но так как выбрал веб ,вот приходится и фронт поучить
А где макет?