Адаптивная верстка сайта на HTML CSS

Адаптивная HTML верстка сайта для новичков на чистом HTML + CSS. Сайт портфолио фрилансера. Заверстаем по макету с Figma. Сделаем адаптацию для мобильных устройств, мобильную навигацию. Применим адаптивные изображения. Верстка на flexbox.
Материалы к уроку: webcademy.ru/blog/855/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
7 уроков по 30 мин: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
Тайм коды:
00:00 Обзор проекта
01:10 Объявление
02:06 Создание проекта
04:30 Сброс стилей reset.css
07:05 Нарезка изображений
13:41 Подключение шрифтов
16:16 Верстка шапки сайта
24:12 Разметка под логотип и навигацию
26:44 Верстка логотипа
33:42 Верстка навигации
38:19 Контент в шапке
47:48 Верстка секции с услугами
54:26 Портфолио
1:03:15 Верстка Контакты
1:17:25 Мобильная навигация
1:31:51 Адаптация шапки
1:41:30 Адаптация секции Услуги
1:46:18 Адаптация Портфолио
1:48:27 Адаптация Контактов
1:50:35 Правка кнопки с навигацией
1:52:22 Добавление анимации
1:57:21 Настройки анимации
2:00:08 Финал
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews

[@belovmihan]

Спасибо автору за это видео. Отличная вёрстка без лишней воды. Также особо понравились пояснения по вёрстке. Будем ждать новых видеороликов!

[@user-en9mz7sh8i]

Это очень крутой урок. Понравилось что было немного про JS,про то как подгрузить картинку другова размера при мобильном разрешении и о том как делается анимация блоков в конце ролика. Спасибо было очень познавательно.

[@seron4206]

Один из лучших блогеров!Такого понятного объяснения еще не видел)И теги нужные и свойства к ним, подписываюсь!)

[@iwmatt]

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

[@9NeGaTV]

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

[@HA_CTPIME]

Я очень много материалов перелопатил, удивлён что раньше мне не встретился настолько качественный контент. 👍👍👍

[@user-rj6ph9zt3q]

Спасибо за урок! Очень нравится Ваш канал! И по java script уроки тоже хорошие!

[@marytmnv25]

Очень крутой видео урок , спасибо большое! Не все готовы в одном видео всё и сразу рассказать, а у Вас очень много полезного

[@davidgrigoryan8279]

Боже, это видео просто находка. У автора дар объяснять, пересмотрел видео по верстке в сумме часов на 20, но за эти 2 часа понял раз в 10 больше моментов. За анимации отдельный лайк, не думал, что это так просто)

[@lidiamenshikova1130]

Редко, когда бывает возникает намерение просмотреть все доступные материалы на интересующие темы какого-то конкретного лектора. Это тот редкий случай. Не первое видео, которое с удовольствием "прорешиваю", вернее проверстываю с вами. Спасибо большое.

[@user-fh8qr4td6x]

просто до дрожи! Юра вы Талантище в плане преподавания!!! Я свами заверстался на одном дыхании! ДАЙ ВАМ БОГ ВСЕГО И ПО БОЛЬШЕ)))

[@Savanna_Slytherin]

Спасибо огромущее! Сделала и получилось просто класс. Обьясняете круче всех!☺

[@user-pj3ks9lq8c]

Ты просто лучший кого я смотрел за эти пол года!!! Многое для себя открыл!

[@vordoen5333]

Автору большое спасибо за такое подробное видео! Совсем недавно начал верстать и делать это в vscode. Задавался вопросом как быстро скопировать строку. Хотел уже коммент с этим вопросом написать. Но автор как - будто услышал мой вопрос. Вообщем всё очень очень понятно и по горячим клавишам и по вёрстке в целом)) Здоровья и удачи! 🤝

[@user-bv3mv9um3i]

Спасибо за урок.Мне понравилась и подача и информативность.

[@seventhspace]

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

[@irinastecenko91]

Присоединяюсь,это самое лучшее объяснение.Спасибо огромное.

[@denisly6109]

Ура! Я сделал его) благодарю за урок! С вами плюс сто к усидчивости.))))

[@elution1337]

Блин, Юрий, Вы просто красавчик! Супер видеоурок! Я столько всего узнал... Всем рекомендую! Парень - профи своего дела!

[@pipopipo1]

спасибо за прекрасное видео, все очень понятно объясняете, узнал много нового)

[@uk-lych_sveta]

Спасибо за урок!!! Было интересно и полезно.

[@user-gi5lw6iy1y]

Спасибо большое за проделанную работу!

[@alexanderorlov9684]

Жаль что не могу поставить 2 лайка. Очень грамотно и доходчиво объясняете.

[@user-km6qf9ot2l]

Спасибо за урок! Всё было круто!

[@nickeit509]

Огромное спасибо, Юрий, что делаете такие полезные обучающие ролики. Благодаря вашим роликам я достаточно продвинулся во фронтенде.

[@user-or2nc9px3z]

Здравствуйте , можно задать вам вопрос

[@while.444]

Спасибо большое за ролик. Много нового узнал благодаря вам + работа в портфолио

[@user-vj8hj9jk2b]

Верстка, адаптивная верстка - все ясно, доступно, понятно. Лайк и подписка.

[@vseravnoanam]

Спасибо за урок, обязательно попробую.

[@user-lw7mg8yx4p]

Спасибо за видео, все очень информативно и познавательно! Смотрится очень легко, сайт заверстала)

[@CapitanZapasa]

Офигенно было! от души спасибо!)

[@user-ny3ll2bs6v]

column gap прекраснейшее свойство , которое ты мне показал дружище

[@user-rv8xh8fy3m]

полностью согласен с вышесказанным,облегчило мне жизнь)

[@user-eu2pw9so5p]

Очень круто, спасибо за урок))

[@user-bj8oe1gt3r]

очень хороший урок, максимально подробный и понятный для новичка. Спасибо

[@user-or2nc9px3z]

Здравствуйте , можно задать вам вопрос ?

[@mattsmitt4914]

с удовольствием подписался - спасибо за видео

[@electromotosmi3112]

Доходчиво и крапотливо к каждой детали,продумано. Программный пианист

[@yaroslavzef7267]

Спасибо. Поверстал с удовольствием с вами

[@illuminate3151]

Друг спасибо тебе большое, классный урок

[@epicshorsviral]

Благодарствую. Все сверстал, все получилось очень даже годно. Разве что сам макет не очень сложный.

[@lionarstan3628]

спасибо большое вы так понятно обьясняете

[@anddrew5841]

классный урок, спасибо большое!

[@user-id5ct2de8v]

Спасибо за урок.🙋‍♂

[@ruinxr9]

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

[@nursultannurlanov660]

спасибо за данное обучающее видео !

[@afin4684]

Спасибо за урок!

[@BezhovHF]

Афигенный видос, спасибо

[@lugaang]

Я кайфанул))) спасибо тебе

[@omg5088]

Спасибо большое, очень полезно

[@SalavatGalimov-tb8ye]

заверстал вместе с тобой, спасибо тебе большое!

[@Okh-dr9sj]

Спасибо вам большое

[@yuriyv2150]

супер. верстал с Вами. спасибо

[@justfisher2920]

Юра спасибо за урок решил вспомнить что такое вёрстка, т.к. давно не занимался таким, в основном сейчас работаю на react.js Хотел выразится по поводу css библиотеки AOS : мне кажется при адаптиве, будет заламываться сайт, поэтому лучше отключить её для девайсов и оставить только для широкоформатных экранов, по крайней мере у меня так. Проблема возникла при разрешении 992 и ниже, начался overflow-x только при свайпе влево - экран уполз, навигационное меню уползло, в общем балаган, поэтому disable: 'mobile';

[@user-nv1cs5vd3j]

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

[@nurymi]

Спасибо братец!

[@chriswalcker5203]

Отличный урок без лишней воды! Смотрю вас впервые и заметил что не используете фишки самого ЕМЕТА! Как по мне, если знаете что будет находиться внутри внутри определенного дива или секции, какие классы будете применять то можно сократить время и написать так, как пример секция для первого портфолио (section.portfolio>div.container>div.portfolio-title>h2.title-1 и нажав клавишу табуляции емет создаст автоматически полноценную структуру) в виде

[@WebCademy]

Спасибо) Насчет emmet я в курсе, и даже подскажу больше, что не обязательно писать div.portfolio, достаточно просто написать .portfolio

[@chriswalcker5203]

@@WebCademy Ну я так привык) но спасибо за контент, приятно слушать, спокойно и понятно рассказываете а не как все гуру тараторят))

[@LegoMasterteam]

привет есть вк?

[@tapok1991]

Подача 100%🥨🍳🍟🍧🤯

[@user-yu5ig5pj8s]

Кайф! Спасибо :)

[@alexlitvin1297]

Хороший hands-on урок

[@pomogala4214]

Отличный урок, благодарю

[@sitini]

Топ! Спасибо! 😎

[@siminasimba]

Урок хороший, есть ряд вопросов. Почему вы ставите h2 ниже, чем h3, везде советуют не ломать порядок заголовков? Чем сolumn-gap лучше not-last-child? И чем лучше project+ project, чтобы задать верхний маржин каждому проекту, кроме первого, почему не not first child, это чем-то обусловлено или вы показывали возможности css? Также интересно почему именно верхний маржин, а не паддинг, везде пишут, что маржины лучше только нижний и правые. Зачем на 1:18:20 в пути файла ./ а не просто /, зачем точка перед слэшем? Возможно много вопросов, но я очень хочу разобрать в верстке до мелочей, заранее благодарю

[@WebCademy]

1) Ставлю по важности, а не по порядку. 2) Проще задать. Ним легче управлять. Не надо отменять нижний или крайний правый отступы. 3) Не понял о каком margin-top вы спрашиваете. Обычно его не прописываю, только в особых случаях. 4) Чтобы указать путь от текущей директории. Просто "/" это путь от корня домена. Приходите на курс 🙂, там будет много практики, разборов и каждый день ответы на вопросы в чате от меня и кураторов.

[@nurlansalkinbayev3890]

Спасибо.

[@user-xg4zc7ff1n]

Круто!

[@JYE732]

я уже вас люблю

[@user-et1vd4qf9g]

Здравствуйте, Юрий! Уроки ваши отличные, занимаюсь с удовольствием, но с макетом возникла проблема, в меню фигмы нет вкладки плагины, причем занималась по другим вашим макетам, все было в порядке, вкладка была, с таким сталкиваюсь впервые

[@WebCademy]

Наталья, приветствую! Если вы открываете макет по ссылке, то сделайте копию макета к себе в черновики (Duplicate to drafts) и тогда у вас появится возможность редактировать макет и использовать плагины.

[@Dabudida]

Еееее, мой лайк юбилейно 900ый

[@LegoMasterteam]

Добрый вечер, смотрю и восхищаюсь вами, наконец то нашёл нормальный канал! А не подскажите что делать если у сайта нет "Контейнером"? Я всех блогеров смотрю у всех все сайты с "Контейнером", что делать? Может если вам угодно ссылку на ютуб ролик дадите, ну или сами объясните.

[@keshencov4747]

Так называют блоки, которым ограничивают ширину

[@WebCademy]

Тут зависит от макета, но даже при ширине контента на 100% экрана все равно стоит добавлять контейнер для отступов слева и справа, чтобы контент не прилегал к краям экрана.

[@LegoMasterteam]

@@WebCademy Спасибо вам, я аж забыл что написал вам))) Ну понял тут дело в дизайне) Кстати почему бы вам не сделать урок по Прелодеру?) Будет прикольно)

[@Mubarak.Yasynbek]

57:23 у меня не работает colum gap что делать?

[@user-xl6ho9ff4j]

а у меня проблема нету плавной анимации кнопки top все делаю как в видео но плавности элемента не как не добьюсь ,цвет меняет, но смещения вниз с плавной анимацией нет то есть смещение есть плавности нет

[@LegoMasterteam]

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

[@jackson8460]

Здравствуйте, Юрий! У меня такой вопрос. Сколько вам понадобилось времени на изучение HTML и CSS, чтобы научиться верстать сайты любой сложности? Хотя бы примерно.

[@WebCademy]

Я версткой занимаюсь довольно давно, со времен когда сайты были на таблицах и . В целом скажу что 2-х месяцев активного обучения достаточно чтобы ознакомиться и попрактиковать приемы базовой верстки типового сайта или лендинга. В той же верстке постоянно можно придумывать сложные варианты дизайна и их реализации и развиваться бесконечно. А если совмещать все это с анимациями и 3D - то это вообще отдельный вид искусства. (тут должна быть ссылка на сайты с awwwards.com)

[@vadimstukalov4873]

Объясните пожалуйста почему в адаптиве меню, когда вы раскрываете меню на весь екран на 1:24:19 у вас в стилях по прежнему для .nav-button указан стиль display:block, но кнопка почему то не видна. Делаю тоже самое как у вас, у меня кнопка остается видимой. И потом когда вы кнопку делаете видимой она появляется в правом верхнем углу, хотя у меня она расположена внизу под ul. Тут же вы говорите что z-index у nav-list на ее отображение не влияет. И в дальнейшем при скроле в мобильной версии у вас бургер постоянно виден, у меня при прокрутке он уходит вверх, хотя стиль для бургера такой же как у вас фиксед. И еще, при добавлении aos анимации есть проблема, когда нажимаешь на бургер и открывается мобильное меню, то картинка c челом hero остается на своем месте, не перекрывается фиксированным меню. Спасибо

[@alexgordon950]

Подскажите почему у меня может не работать замедления btn? transition: background-color 0.2s ease-in, top 0.2s ease-in;

[@user-du2bo5tm7b]

Хочу задать вопрос: - В чем разница между картинкой и текстовым вариантом логотипа? Ведь наверное проще добавить картинку и не париться ( наверное)) )

[@WebCademy]

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

[@artyomsommer1843]

@@WebCademy вы забыли отметить то, что предпочтительнее использовать для логотипов SVG, он быстрее рисуется во время загрузки графического контента

[@denissaveliev2664]

а софт нужно купить,что бы всё как на видео отображалось?

[@koleytv]

я думал что не получаеться заголовок выровнять по линий оказывается див от контейнера идет с хедер роу вместе))

[@user-si2eq3jd5z]

Здравствуйте! Я не могу найти именно ваш макет фигма. Где искать? Подскажите, кто знает?

[@user-yn5xq1iu2y]

Топ

[@Xtemple135]

Секцию сервис можно же сделать через списки же

[@azimjonkarimov5054]

спосибо болшое скажите пожалюста почему иногда h2 иногда h3 написали

[@user-se5dy7sh8k]

Здравствуйте, помогите пожалуйста с кнопкой навигации, открытие работает а закрывать иконка исчезает и не возможно закрывать пока не обновить страничку,я заметил что main.js не подключился.

[@front_praxis]

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

[@WebCademy]

Он уже deprecated - то есть устарел и не рекомендуется к использованию. Это Bracket Pair Colorizer 2. Сейчас эта возможность встроена в VS Code. Настройка: Editor > Guides: Bracket Pairs - установите на active или true.

[@front_praxis]

@@WebCademy ага уже разобрался , но все равно спасибо вам.

[@juice_beatz]

Здравствуйте, можно ли как-то зафиксировать шапку сайта при скролинге?

[@fppff7779]

Я конечно новичок, но можно вроде через position: sticky, можешь ещё инфы нагуглить

[@usermanafrtyh]

Здраствуйте. Почему на навигациях тут нужно было сделать active классом, а не через псевдоэлемент active или hover?

[@WebCademy]

При переходе на определенную страницу к ней добавляем класс active. Псевдокласс active или hover также стоит прописать.

[@user-wy5te6jk4d]

AOS почему то не работает. А при записи картинка hero.png вообще пропала. Все делал буква в букву.

[@WebCademy]

Проверьте с готовым кодом с урока. Он есть на странице с материалами, ссылка в описании под видео.

[@LektorGuru]

@@WebCademy Исчезают объекты почему-то при подключении AOS

[@user-jl8fv2zz4e]

Блин я не понимаю в чем проблема, я повторял весь код точь в точь но, у меня адаптив сломан, картинки в портфолио не уменьшаются как на видео, есть предположение в чем может быть дело?

[@Lilia-Rozovaya]

здравствуйте. можно ссылку на макет , пожалуйста

[@JYE732]

почему то в навигации у меня не сработало column-gap, он не реагирует вообще.

[@animekens-zf5xs]

Можете исправить на reset там другие команды

[@Sltkbeaver199]

как подключить media.css к html файлу?

[@user-qo5ke3oi2w]

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

[@WebCademy]

Дублируйте макет к себе в черновики, тогда будет доступно редактирование макета.

[@nfenjoyer]

Можно вопрос? При создании адаптива, когда я меняю размер шрифта у элемента ul, у меня меняются расстояния между li элементами, а сам шрифт остаётся такой же, что это такое вообще?

[@WebCademy]

Странно. Как будто у вас отступы основаны на пробелах, а размер текста задан где то дальше в li или в поэтому он не меняется.

[@nfenjoyer]

@@WebCademy действительно! я установил размер шрифта для , здесь и была ошибка) Спасибо за помощь!

[@auyespek]

у меня проблемы с секцией services-row, display: flex не работает, как можно исправить ?

[@user-xw2do3fp6f]

Доброго времени суток. Ссылка на макет фигмы неправильная, там совсем другой макет. Скиньте пожалуйста актуальную ссылку

[@WebCademy]

Проверил. На странице с материалами к уроку макет верный. Материалы к уроку: webcademy.ru/blog/855/

[@user-xw2do3fp6f]

@@WebCademy Да, я только заметил. Но последние две ссылки в описании были неверны

[@user-xw2do3fp6f]

@@WebCademy Урок невероятно полезный, повезло что нашел ваш сайт, спасибо

[@Gogsan]

Адаптив 1:17:50

[@user-cm1om1oo3p]

Сверстал вместе с вами макет. Коплю деньги на курсы у вас.

[@samwinny]

опечатка в название канала, надо ВебКомеди

[@user-jf4yr8fp5o]

Ребят, такая ошибка. main.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onclick') что делать?(

[@WebCademy]

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

[@user-uy8jk2dt1f]

со скольки лет обучение в Вашей школе,спасибо

[@WebCademy]

Четкого ценза нет. Вполне можно с 16-ти, а если есть интерес со стороны ученика то и с 14-ти.

[@mallaw4625]

Здраствуйте почему у меня не работает display: flex; . Подключал все как на видео.

[@WebCademy]

Возможно где-то ошибка в синтаксисе. Как вариант проверьте весь код CSS файла через CSS валидатор jigsaw.w3.org/css-validator/#validate_by_input Он покажет синтаксические ошибки если они есть, незакрытые скобки } или отсутствие точек с запятой ;

[@user-ny3ll2bs6v]

Здравствуйте , подскажите пожалуйста , когда я скачиваю svg , он у меня скачивается как Microsoft Edge

[@WebCademy]

Норм. Просто edge открывает его как программа по умолчанию.