Тёмный

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

ВебКадеми | Юрий Ключевский
Подписаться 54 тыс.
Просмотров 110 тыс.
50% 1

Адаптивная HTML верстка сайта для новичков на чистом HTML + CSS. Сайт портфолио фрилансера. Заверстаем по макету с Figma. Сделаем адаптацию для мобильных устройств, мобильную навигацию. Применим адаптивные изображения. Верстка на flexbox.
Материалы к уроку: webcademy.ru/blog/855/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на 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
Тайм коды:
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

Опубликовано:

 

28 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 171   
@belovmihan
@belovmihan Год назад
Спасибо автору за это видео. Отличная вёрстка без лишней воды. Также особо понравились пояснения по вёрстке. Будем ждать новых видеороликов!
@user-en9mz7sh8i
@user-en9mz7sh8i 2 года назад
Это очень крутой урок. Понравилось что было немного про JS,про то как подгрузить картинку другова размера при мобильном разрешении и о том как делается анимация блоков в конце ролика. Спасибо было очень познавательно.
@seron4206
@seron4206 Год назад
Один из лучших блогеров!Такого понятного объяснения еще не видел)И теги нужные и свойства к ним, подписываюсь!)
@iwmatt
@iwmatt Год назад
Одно из самых лучших видео которых я видел по теме верстки, отличные объяснение, приятный голос, много нового для себя подчеркнул.
@lidiamenshikova1130
@lidiamenshikova1130 Год назад
Редко, когда бывает возникает намерение просмотреть все доступные материалы на интересующие темы какого-то конкретного лектора. Это тот редкий случай. Не первое видео, которое с удовольствием "прорешиваю", вернее проверстываю с вами. Спасибо большое.
@9NeGaTV
@9NeGaTV 4 месяца назад
Очень качественное объяснение каждого шага, спасибо. Все просто и понятно. До этого натыкался на ролики где совсем нет понятных обьяснений, а тут прямо идеально. Много нового для себя выделил. Спасибо!
@HA_CTPIME
@HA_CTPIME Год назад
Я очень много материалов перелопатил, удивлён что раньше мне не встретился настолько качественный контент. 👍👍👍
@user-rj6ph9zt3q
@user-rj6ph9zt3q 2 года назад
Спасибо за урок! Очень нравится Ваш канал! И по java script уроки тоже хорошие!
@marytmnv25
@marytmnv25 Год назад
Очень крутой видео урок , спасибо большое! Не все готовы в одном видео всё и сразу рассказать, а у Вас очень много полезного
@user-fh8qr4td6x
@user-fh8qr4td6x Год назад
просто до дрожи! Юра вы Талантище в плане преподавания!!! Я свами заверстался на одном дыхании! ДАЙ ВАМ БОГ ВСЕГО И ПО БОЛЬШЕ)))
@davidgrigoryan8279
@davidgrigoryan8279 Год назад
Боже, это видео просто находка. У автора дар объяснять, пересмотрел видео по верстке в сумме часов на 20, но за эти 2 часа понял раз в 10 больше моментов. За анимации отдельный лайк, не думал, что это так просто)
@Savanna_Slytherin
@Savanna_Slytherin 10 месяцев назад
Спасибо огромущее! Сделала и получилось просто класс. Обьясняете круче всех!☺
@vordoen5333
@vordoen5333 Год назад
Автору большое спасибо за такое подробное видео! Совсем недавно начал верстать и делать это в vscode. Задавался вопросом как быстро скопировать строку. Хотел уже коммент с этим вопросом написать. Но автор как - будто услышал мой вопрос. Вообщем всё очень очень понятно и по горячим клавишам и по вёрстке в целом)) Здоровья и удачи! 🤝
@user-bv3mv9um3i
@user-bv3mv9um3i 2 года назад
Спасибо за урок.Мне понравилась и подача и информативность.
@user-pj3ks9lq8c
@user-pj3ks9lq8c 2 года назад
Ты просто лучший кого я смотрел за эти пол года!!! Многое для себя открыл!
@irinastecenko91
@irinastecenko91 Год назад
Присоединяюсь,это самое лучшее объяснение.Спасибо огромное.
@user-ny3ll2bs6v
@user-ny3ll2bs6v Год назад
column gap прекраснейшее свойство , которое ты мне показал дружище
@user-rv8xh8fy3m
@user-rv8xh8fy3m Год назад
полностью согласен с вышесказанным,облегчило мне жизнь)
@seventhspace
@seventhspace 9 месяцев назад
Замечательный урок ! Спасибо за труды !
@nickeit509
@nickeit509 6 месяцев назад
Огромное спасибо, Юрий, что делаете такие полезные обучающие ролики. Благодаря вашим роликам я достаточно продвинулся во фронтенде.
@user-or2nc9px3z
@user-or2nc9px3z 6 месяцев назад
Здравствуйте , можно задать вам вопрос
@pipopipo1
@pipopipo1 Год назад
спасибо за прекрасное видео, все очень понятно объясняете, узнал много нового)
@elution1337
@elution1337 Год назад
Блин, Юрий, Вы просто красавчик! Супер видеоурок! Я столько всего узнал... Всем рекомендую! Парень - профи своего дела!
@while.444
@while.444 Год назад
Спасибо большое за ролик. Много нового узнал благодаря вам + работа в портфолио
@denisly6109
@denisly6109 Год назад
Ура! Я сделал его) благодарю за урок! С вами плюс сто к усидчивости.))))
@uk-lych_sveta
@uk-lych_sveta Год назад
Спасибо за урок!!! Было интересно и полезно.
@user-vj8hj9jk2b
@user-vj8hj9jk2b Год назад
Верстка, адаптивная верстка - все ясно, доступно, понятно. Лайк и подписка.
@user-gi5lw6iy1y
@user-gi5lw6iy1y Год назад
Спасибо большое за проделанную работу!
@vseravnoanam
@vseravnoanam Год назад
Спасибо за урок, обязательно попробую.
@alexanderorlov9684
@alexanderorlov9684 Год назад
Жаль что не могу поставить 2 лайка. Очень грамотно и доходчиво объясняете.
@user-lw7mg8yx4p
@user-lw7mg8yx4p 8 месяцев назад
Спасибо за видео, все очень информативно и познавательно! Смотрится очень легко, сайт заверстала)
@user-km6qf9ot2l
@user-km6qf9ot2l Год назад
Спасибо за урок! Всё было круто!
@electromotosmi3112
@electromotosmi3112 3 месяца назад
Доходчиво и крапотливо к каждой детали,продумано. Программный пианист
@user-bj8oe1gt3r
@user-bj8oe1gt3r 6 месяцев назад
очень хороший урок, максимально подробный и понятный для новичка. Спасибо
@user-or2nc9px3z
@user-or2nc9px3z 6 месяцев назад
Здравствуйте , можно задать вам вопрос ?
@CapitanZapasa
@CapitanZapasa Год назад
Офигенно было! от души спасибо!)
@yaroslavzef7267
@yaroslavzef7267 3 месяца назад
Спасибо. Поверстал с удовольствием с вами
@epicshorsviral
@epicshorsviral Год назад
Благодарствую. Все сверстал, все получилось очень даже годно. Разве что сам макет не очень сложный.
@mattsmitt4914
@mattsmitt4914 Год назад
с удовольствием подписался - спасибо за видео
@lionarstan3628
@lionarstan3628 Год назад
спасибо большое вы так понятно обьясняете
@user-eu2pw9so5p
@user-eu2pw9so5p 9 месяцев назад
Очень круто, спасибо за урок))
@anddrew5841
@anddrew5841 Год назад
классный урок, спасибо большое!
@illuminate3151
@illuminate3151 Год назад
Друг спасибо тебе большое, классный урок
@user-id5ct2de8v
@user-id5ct2de8v 11 месяцев назад
Спасибо за урок.🙋‍♂
@nursultannurlanov660
@nursultannurlanov660 Год назад
спасибо за данное обучающее видео !
@ruinxr9
@ruinxr9 9 месяцев назад
Благодарю за урок!
@afin4684
@afin4684 2 года назад
Спасибо за урок!
@SalavatGalimov-tb8ye
@SalavatGalimov-tb8ye Год назад
заверстал вместе с тобой, спасибо тебе большое!
@Mubarak.Yasynbek
@Mubarak.Yasynbek Год назад
57:23 у меня не работает colum gap что делать?
@BezhovHF
@BezhovHF 4 месяца назад
Афигенный видос, спасибо
@justfisher2920
@justfisher2920 Год назад
Юра спасибо за урок решил вспомнить что такое вёрстка, т.к. давно не занимался таким, в основном сейчас работаю на react.js Хотел выразится по поводу css библиотеки AOS : мне кажется при адаптиве, будет заламываться сайт, поэтому лучше отключить её для девайсов и оставить только для широкоформатных экранов, по крайней мере у меня так. Проблема возникла при разрешении 992 и ниже, начался overflow-x только при свайпе влево - экран уполз, навигационное меню уползло, в общем балаган, поэтому disable: 'mobile';
@lugaang
@lugaang Год назад
Я кайфанул))) спасибо тебе
@chriswalcker5203
@chriswalcker5203 Год назад
Отличный урок без лишней воды! Смотрю вас впервые и заметил что не используете фишки самого ЕМЕТА! Как по мне, если знаете что будет находиться внутри внутри определенного дива или секции, какие классы будете применять то можно сократить время и написать так, как пример секция для первого портфолио (section.portfolio>div.container>div.portfolio-title>h2.title-1 и нажав клавишу табуляции емет создаст автоматически полноценную структуру) в виде
@WebCademy
@WebCademy Год назад
Спасибо) Насчет emmet я в курсе, и даже подскажу больше, что не обязательно писать div.portfolio, достаточно просто написать .portfolio
@chriswalcker5203
@chriswalcker5203 Год назад
@@WebCademy Ну я так привык) но спасибо за контент, приятно слушать, спокойно и понятно рассказываете а не как все гуру тараторят))
@LegoMasterteam
@LegoMasterteam Год назад
привет есть вк?
@omg5088
@omg5088 Год назад
Спасибо большое, очень полезно
@yuriyv2150
@yuriyv2150 Год назад
супер. верстал с Вами. спасибо
@Okh-dr9sj
@Okh-dr9sj 2 месяца назад
Спасибо вам большое
@alexlitvin1297
@alexlitvin1297 19 дней назад
Хороший hands-on урок
@user-nv1cs5vd3j
@user-nv1cs5vd3j 2 года назад
Круто, спасибо !
@tapok1991
@tapok1991 Год назад
Подача 100%🥨🍳🍟🍧🤯
@vadimstukalov4873
@vadimstukalov4873 6 месяцев назад
Объясните пожалуйста почему в адаптиве меню, когда вы раскрываете меню на весь екран на 1:24:19 у вас в стилях по прежнему для .nav-button указан стиль display:block, но кнопка почему то не видна. Делаю тоже самое как у вас, у меня кнопка остается видимой. И потом когда вы кнопку делаете видимой она появляется в правом верхнем углу, хотя у меня она расположена внизу под ul. Тут же вы говорите что z-index у nav-list на ее отображение не влияет. И в дальнейшем при скроле в мобильной версии у вас бургер постоянно виден, у меня при прокрутке он уходит вверх, хотя стиль для бургера такой же как у вас фиксед. И еще, при добавлении aos анимации есть проблема, когда нажимаешь на бургер и открывается мобильное меню, то картинка c челом hero остается на своем месте, не перекрывается фиксированным меню. Спасибо
@LegoMasterteam
@LegoMasterteam Год назад
Здраствуйте, не подскажите что делать если при анимации то что вы в конце показывали происходит баг т е при нажатии на бургер анимированный объект остаётся поверх навигации бургер меню.
@pomogala4214
@pomogala4214 2 года назад
Отличный урок, благодарю
@user-yu5ig5pj8s
@user-yu5ig5pj8s Год назад
Кайф! Спасибо :)
@user-xl6ho9ff4j
@user-xl6ho9ff4j Год назад
а у меня проблема нету плавной анимации кнопки top все делаю как в видео но плавности элемента не как не добьюсь ,цвет меняет, но смещения вниз с плавной анимацией нет то есть смещение есть плавности нет
@alexgordon950
@alexgordon950 Год назад
Подскажите почему у меня может не работать замедления btn? transition: background-color 0.2s ease-in, top 0.2s ease-in;
@denissaveliev2664
@denissaveliev2664 2 года назад
а софт нужно купить,что бы всё как на видео отображалось?
@nurymi
@nurymi Год назад
Спасибо братец!
@siminasimba
@siminasimba Год назад
Урок хороший, есть ряд вопросов. Почему вы ставите h2 ниже, чем h3, везде советуют не ломать порядок заголовков? Чем сolumn-gap лучше not-last-child? И чем лучше project+ project, чтобы задать верхний маржин каждому проекту, кроме первого, почему не not first child, это чем-то обусловлено или вы показывали возможности css? Также интересно почему именно верхний маржин, а не паддинг, везде пишут, что маржины лучше только нижний и правые. Зачем на 1:18:20 в пути файла ./ а не просто /, зачем точка перед слэшем? Возможно много вопросов, но я очень хочу разобрать в верстке до мелочей, заранее благодарю
@WebCademy
@WebCademy Год назад
1) Ставлю по важности, а не по порядку. 2) Проще задать. Ним легче управлять. Не надо отменять нижний или крайний правый отступы. 3) Не понял о каком margin-top вы спрашиваете. Обычно его не прописываю, только в особых случаях. 4) Чтобы указать путь от текущей директории. Просто "/" это путь от корня домена. Приходите на курс 🙂, там будет много практики, разборов и каждый день ответы на вопросы в чате от меня и кураторов.
@user-si2eq3jd5z
@user-si2eq3jd5z Год назад
Здравствуйте! Я не могу найти именно ваш макет фигма. Где искать? Подскажите, кто знает?
@sitini
@sitini Год назад
Топ! Спасибо! 😎
@user-se5dy7sh8k
@user-se5dy7sh8k 6 месяцев назад
Здравствуйте, помогите пожалуйста с кнопкой навигации, открытие работает а закрывать иконка исчезает и не возможно закрывать пока не обновить страничку,я заметил что main.js не подключился.
@user-et1vd4qf9g
@user-et1vd4qf9g 2 года назад
Здравствуйте, Юрий! Уроки ваши отличные, занимаюсь с удовольствием, но с макетом возникла проблема, в меню фигмы нет вкладки плагины, причем занималась по другим вашим макетам, все было в порядке, вкладка была, с таким сталкиваюсь впервые
@WebCademy
@WebCademy 2 года назад
Наталья, приветствую! Если вы открываете макет по ссылке, то сделайте копию макета к себе в черновики (Duplicate to drafts) и тогда у вас появится возможность редактировать макет и использовать плагины.
@bakbayew
@bakbayew Год назад
я думал что не получаеться заголовок выровнять по линий оказывается див от контейнера идет с хедер роу вместе))
@user-xg4zc7ff1n
@user-xg4zc7ff1n 2 года назад
Круто!
@Dabudida
@Dabudida Год назад
Еееее, мой лайк юбилейно 900ый
@LegoMasterteam
@LegoMasterteam Год назад
Добрый вечер, смотрю и восхищаюсь вами, наконец то нашёл нормальный канал! А не подскажите что делать если у сайта нет "Контейнером"? Я всех блогеров смотрю у всех все сайты с "Контейнером", что делать? Может если вам угодно ссылку на ютуб ролик дадите, ну или сами объясните.
@keshencov4747
@keshencov4747 Год назад
Так называют блоки, которым ограничивают ширину
@WebCademy
@WebCademy Год назад
Тут зависит от макета, но даже при ширине контента на 100% экрана все равно стоит добавлять контейнер для отступов слева и справа, чтобы контент не прилегал к краям экрана.
@LegoMasterteam
@LegoMasterteam Год назад
@@WebCademy Спасибо вам, я аж забыл что написал вам))) Ну понял тут дело в дизайне) Кстати почему бы вам не сделать урок по Прелодеру?) Будет прикольно)
@auyespek
@auyespek 10 месяцев назад
у меня проблемы с секцией services-row, display: flex не работает, как можно исправить ?
@juice_beatz
@juice_beatz Год назад
Здравствуйте, можно ли как-то зафиксировать шапку сайта при скролинге?
@fppff7779
@fppff7779 Год назад
Я конечно новичок, но можно вроде через position: sticky, можешь ещё инфы нагуглить
@front_praxis
@front_praxis Год назад
Спасибо . Подскажите пожалуйста , что за плагин стоит который отвечает за желтые направляющие между скобками ?
@WebCademy
@WebCademy Год назад
Он уже deprecated - то есть устарел и не рекомендуется к использованию. Это Bracket Pair Colorizer 2. Сейчас эта возможность встроена в VS Code. Настройка: Editor > Guides: Bracket Pairs - установите на active или true.
@front_praxis
@front_praxis Год назад
@@WebCademy ага уже разобрался , но все равно спасибо вам.
@Lilia-Rozovaya
@Lilia-Rozovaya 7 месяцев назад
здравствуйте. можно ссылку на макет , пожалуйста
@azimjonkarimov5054
@azimjonkarimov5054 Год назад
спосибо болшое скажите пожалюста почему иногда h2 иногда h3 написали
@jackson8460
@jackson8460 Год назад
Здравствуйте, Юрий! У меня такой вопрос. Сколько вам понадобилось времени на изучение HTML и CSS, чтобы научиться верстать сайты любой сложности? Хотя бы примерно.
@WebCademy
@WebCademy Год назад
Я версткой занимаюсь довольно давно, со времен когда сайты были на таблицах и . В целом скажу что 2-х месяцев активного обучения достаточно чтобы ознакомиться и попрактиковать приемы базовой верстки типового сайта или лендинга. В той же верстке постоянно можно придумывать сложные варианты дизайна и их реализации и развиваться бесконечно. А если совмещать все это с анимациями и 3D - то это вообще отдельный вид искусства. (тут должна быть ссылка на сайты с awwwards.com)
@JYE732
@JYE732 9 месяцев назад
почему то в навигации у меня не сработало column-gap, он не реагирует вообще.
@Xtemple135
@Xtemple135 11 месяцев назад
Секцию сервис можно же сделать через списки же
@animekens-zf5xs
@animekens-zf5xs 2 месяца назад
Можете исправить на reset там другие команды
@user-jl8fv2zz4e
@user-jl8fv2zz4e Год назад
Блин я не понимаю в чем проблема, я повторял весь код точь в точь но, у меня адаптив сломан, картинки в портфолио не уменьшаются как на видео, есть предположение в чем может быть дело?
@JYE732
@JYE732 9 месяцев назад
я уже вас люблю
@user-du2bo5tm7b
@user-du2bo5tm7b 2 года назад
Хочу задать вопрос: - В чем разница между картинкой и текстовым вариантом логотипа? Ведь наверное проще добавить картинку и не париться ( наверное)) )
@WebCademy
@WebCademy 2 года назад
Текстовый логотип можно поменять изменив текст. Картинку надо пересохранять. Да, добавить картинку было бы проще.
@artyomsommer1843
@artyomsommer1843 2 года назад
@@WebCademy вы забыли отметить то, что предпочтительнее использовать для логотипов SVG, он быстрее рисуется во время загрузки графического контента
@Sltkbeaver199
@Sltkbeaver199 Год назад
как подключить media.css к html файлу?
@nurlansalkinbayev3890
@nurlansalkinbayev3890 2 года назад
Спасибо.
@usermanafrtyh
@usermanafrtyh Год назад
Здраствуйте. Почему на навигациях тут нужно было сделать active классом, а не через псевдоэлемент active или hover?
@WebCademy
@WebCademy Год назад
При переходе на определенную страницу к ней добавляем класс active. Псевдокласс active или hover также стоит прописать.
@user-qo5ke3oi2w
@user-qo5ke3oi2w Год назад
Почему я не могу скрыть видимость обьекта на фигме? На левой части экрана не могу найти кнопку "глазика".
@WebCademy
@WebCademy Год назад
Дублируйте макет к себе в черновики, тогда будет доступно редактирование макета.
@nfenjoyer
@nfenjoyer Год назад
Можно вопрос? При создании адаптива, когда я меняю размер шрифта у элемента ul, у меня меняются расстояния между li элементами, а сам шрифт остаётся такой же, что это такое вообще?
@WebCademy
@WebCademy Год назад
Странно. Как будто у вас отступы основаны на пробелах, а размер текста задан где то дальше в li или в поэтому он не меняется.
@nfenjoyer
@nfenjoyer Год назад
@@WebCademy действительно! я установил размер шрифта для , здесь и была ошибка) Спасибо за помощь!
@user-wy5te6jk4d
@user-wy5te6jk4d 2 года назад
AOS почему то не работает. А при записи картинка hero.png вообще пропала. Все делал буква в букву.
@WebCademy
@WebCademy 2 года назад
Проверьте с готовым кодом с урока. Он есть на странице с материалами, ссылка в описании под видео.
@LektorGuru
@LektorGuru Год назад
@@WebCademy Исчезают объекты почему-то при подключении AOS
@user-jf4yr8fp5o
@user-jf4yr8fp5o Год назад
Ребят, такая ошибка. main.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onclick') что делать?(
@WebCademy
@WebCademy Год назад
Неверно был найден элемент для которого пытаетесь задать onclick. Посмотрите что лежит в этой переменной, проверьте селектор по которому делали его поиск.
@user-ny3ll2bs6v
@user-ny3ll2bs6v Год назад
Здравствуйте , подскажите пожалуйста , когда я скачиваю svg , он у меня скачивается как Microsoft Edge
@WebCademy
@WebCademy Год назад
Норм. Просто edge открывает его как программа по умолчанию.
@user-xw2do3fp6f
@user-xw2do3fp6f 2 года назад
Доброго времени суток. Ссылка на макет фигмы неправильная, там совсем другой макет. Скиньте пожалуйста актуальную ссылку
@WebCademy
@WebCademy 2 года назад
Проверил. На странице с материалами к уроку макет верный. Материалы к уроку: webcademy.ru/blog/855/
@user-xw2do3fp6f
@user-xw2do3fp6f 2 года назад
@@WebCademy Да, я только заметил. Но последние две ссылки в описании были неверны
@user-xw2do3fp6f
@user-xw2do3fp6f 2 года назад
@@WebCademy Урок невероятно полезный, повезло что нашел ваш сайт, спасибо
@user-cm1om1oo3p
@user-cm1om1oo3p 3 месяца назад
Сверстал вместе с вами макет. Коплю деньги на курсы у вас.
@user-yn5xq1iu2y
@user-yn5xq1iu2y 2 года назад
Топ
@samwinny
@samwinny 11 месяцев назад
опечатка в название канала, надо ВебКомеди
@user-hz2it8qz3f
@user-hz2it8qz3f Год назад
где ссылка на макет?
@mallaw4625
@mallaw4625 Год назад
Здраствуйте почему у меня не работает display: flex; . Подключал все как на видео.
@WebCademy
@WebCademy Год назад
Возможно где-то ошибка в синтаксисе. Как вариант проверьте весь код CSS файла через CSS валидатор jigsaw.w3.org/css-validator/#validate_by_input Он покажет синтаксические ошибки если они есть, незакрытые скобки } или отсутствие точек с запятой ;
@pashakod7785
@pashakod7785 3 месяца назад
1:27:35 Что делать, если отображается одновременно и кнопка навигации и сам список?
@WebCademy
@WebCademy 3 месяца назад
Кнопку на десктопе скрываем через display: none; В мобильной версии скрываем сам список.
@pashakod7785
@pashakod7785 3 месяца назад
@@WebCademy Спасибо, 1:39:00 в каких случаях лучше добавлять "мобильные" версии фотографий?
@WebCademy
@WebCademy 3 месяца назад
@@pashakod7785 Когда на мобилке явно другое изображение, либо если вы хотите оптимизировать весь страницы, чтобы на мобилке подгружалась маленькая картинка, а не большая с десктопа.
Далее
BASTA BOI MAGIC SECRETS
00:50
Просмотров 11 млн
🛑кто круче сделал?
00:12
Просмотров 91 тыс.