Тёмный

HTML CSS адаптивная верстка сайта Freelance Portfolio. Темная тема на JS. CSS переменные 

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

Адаптивная HTML верстка сайта портфолио для новичков на HTML и CSS. Мобильная адаптивная верстка, медиа-запросы. Темная тема на CSS переменных и JavaScript. Публикация сайта на GitHub Pages.
Макет, скрипты и готовый код: webcademy.ru/blog/932/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на 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:03 Курс по верстке
01:41 Создание проекта, настройки редактора
13:18 Верстка навигации
23:42 Логотип и пункты в навигации
44:54 CSS переменные
53:27 Верстка шапки
01:27:36 Секция Projects
01:44:43 Верстка подвала
01:55:23 Страница с проектом
02:12:48 Страницы Skills и Contacts
02:23:28 Страница Contacts
02:27:40 Sticky footer
02:31:00 Мобильная адаптация
02:52:35 Темная тема. Верстка переключателя
03:11:27 Позиционирование переключателя
03:18:09 CSS переменные для темной темы
03:35:20 localStorage для сохранения темной темы
03:42:56 Ориентир на системные настройки для темной темы
03:47:48 Отслеживание системных настроек
03:51:42 Порядок в JS коде
03:57:50 Публикация проекта на GitHub Pages
04:05:24 Анонс следующего проекта
04:05:50 Курс по JS Frontend разработке
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews

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

 

30 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 136   
@zaurhuseynzade6950
@zaurhuseynzade6950 Год назад
Продолжаю удивляться тому, что люди выкладывающие хомячков да котиков набирают сотни тысяч лайков. А у человека, который делится своим бесценным опытом да и на целых 4 часа их так мало. Видео очень подробное. Я не новичок. Но и я смог что то для себя подчеркнуть. Спасибо тебе за твой труд.
@user-zq6uh9qm5k
@user-zq6uh9qm5k Год назад
Неудивительно, так как в моем ближайшем окружении почти нет людей, знающих английский, а программирование (ну или верстка) для них вообще тёмный лес. Зато в каком-то бытовом споре что-то доказать им почти невозможно, и это несмотря на то, что я человек достаточно упрямый. И да, котиков они обожают.
@user-zq6uh9qm5k
@user-zq6uh9qm5k Год назад
@Дмитрий Самарин я к тому, что неудивительно, что так мало людей ставит лайк этому видео в сравнении с видео с котиками, потому что мало кто таким интересуется, умных вообще мало в моем окружении, вернее, их почти нет.
@denzeroneYT
@denzeroneYT Год назад
@Дмитрий Самарин В любом случае желательно знать. Это будет как + тебе в копилку, ведь можно красиво называть переменные, вместо того чтобы лазить по переводчикам, которые не всегда точно переведут, программы часто на английском, и не всё понимаешь, так же основная часть контента в интернете на английском, и проще будет найти какую-то информацию именно на этом языке. Читать документации, общаться с заказчиками, для такого себе уровня может и не надо, а так желательно, и это не миф, что программистам нужен английский, ведь вообще всё тут на английском
@user-nw3iw2ci3x
@user-nw3iw2ci3x 6 месяцев назад
Я рад этому
@neleaonila2191
@neleaonila2191 Год назад
Ваш урок, Юрий, структурирует кашу в моей голове и дает понимание "как" и на “что” обращать внимание. Выводы таковы: -я усвоила, как нужно сворачивать выбранный блок кода ; -получила сведения, в какие теги нужно поместить дополнительные, пояснительные фразы к заголовкам; -уловила, как написать заглушку, чтобы не было прокрутки, когда мы нажимаем на ссылки.(например где-нибудь в подвале) ; -узнала про практику хорошего верстальщика - предусмотреть различные варианты контента, внутри блока, и написать специальную конструкцию; -для меня, была полезна и информация, о предварительной заглушки, чтобы ссылка не работала; -я узнала, какое стилевое свойство нужно назначить HTML, если я хочу, чтобы элемент не отображался и не реагировал на события; -как быстро дублировать нужный блок кода (shift +alt и стрелочка вниз); -узнала, как в медия-запросы производить упорядочение, в зависимости от значений технических параметров устройств; -изучила, как сделать медия - запрос на темную тему на уровне системных настроек Windows ; -разобралась как регистрироваться, создать репозиторий и опубликовать “свой опус” на GidHub. Юрий, я ценю ваш огромный труд и прекрасно осознаю масштабы Вашего вклада в построение этих уроков. Спасибо.
@WebCademy
@WebCademy Год назад
Неля, спасибо огромное за комментарий и четкие сформулированные итоги тому что вынесли из видео!) Я всегда стараюсь чтобы в новом МК были вот такие полезные приемы которые помогают верстать. А вы все это заметили и указали. Рад что вы растете в верстке, развиваетесь и есть прогресс!) И всегда приятно получать такую обратную связь от учеников. Желаю успехов в изучении верстки и веб-разработке, а после и в работе в данном направлении!)
@user-vr2ks1xe6d
@user-vr2ks1xe6d 9 месяцев назад
@@WebCademy Здравтсвуйте почему не Sass?
@Bogdanich911
@Bogdanich911 Год назад
Мощнейший труд для нас простых смертных! Огромное спасибо за такой основательный урок!!!
@user-jq4fl3pg8r
@user-jq4fl3pg8r Год назад
Юрий, большое спасибо Вам за ваш труд! Вы объясняете без "воды" и по факту. Очень интересные и познавательные уроки, ждём новых уроков от Вас!
@yuriykolomytsyn2352
@yuriykolomytsyn2352 Год назад
Юрий! огромное тебе спасибо за то, что все подробно поясняешь, очень приятно учится у тебя. Продолжаю активно набираться опыта и закрепляю знания на твоих верстках! Всего тебе наилучшего!
@lidiamenshikova1130
@lidiamenshikova1130 Год назад
Один из лучших уроков по верстке из тех, что мне встречались. Очень удобно, что вы проговариваете каждое действие, чтобы можно было не отрываться от своего кода, а просто следовать за вашими инструкциями. Спасибо большое!!
@zasketo255
@zasketo255 Год назад
Спасибо большое за урок! Все информативно и понятно!
@NastyaKaise
@NastyaKaise Год назад
Спасибо огромное за уроки!)) Всё чётким и понятным языком объясняете. Я многое узнала благодаря вашим урокам. Ценю ваш труд.
@maximandreevskiy5714
@maximandreevskiy5714 Год назад
Идеальная подача информации)) Большое спасибо за ваш труд))
@zoreyan
@zoreyan Год назад
Решил начать учить реакт, и подкочать знания верстки, уроки просто топ, столько проектов забрасывал, и тут взял и всё сделал. Очень круто!
@user-bs5hv4qr2t
@user-bs5hv4qr2t Год назад
Не знаю, что написать. Просто лайк и коммент в благодарность. Наткнулся случайно на ваш урок по grid, подписался.. Спасибо за труды.
@GreatOsmanSultan
@GreatOsmanSultan Год назад
Всем салам алейкум! Да каждый раз убеждаюсь что Юрий талант и крутой и верстальщик и программер! Спасибо что ты есть! Спасибо за уроки и ролики!
@MrGreenman02
@MrGreenman02 Год назад
Спасибо за классный контент!) жду вёрстку на React!)
@user-vj8hj9jk2b
@user-vj8hj9jk2b Год назад
Делал 3 дня. Не новичок, но несколько полезных фишечек нашел. И... ннада 2 монитора) Афтору респект - за топовое видео по адаптивной верстке на HTML CSS, переменным CSS и по подключению dark темы на уровне верстки. Обязательно добъю данный проект на React. Там реально должна быть мааагия)
@MelkoR4111
@MelkoR4111 Год назад
без МИНИМУМ 2-х моников в верстке делать нечего. Я тоже не новичок, но люблю смотреть видео подобного рода, потому что практически ВСЕГДА что-то новое будет полезное
@uk-lych_sveta
@uk-lych_sveta Год назад
Юрий доброго вечера!!! Спасибо за контент, как всегда все понятно и интересно!!! Надеюсь мастер-класс будет в записи.
@WebCademy
@WebCademy Год назад
Спасибо за комментарий!) Да, видео с МК остается на канале.
@igoryavchenko3973
@igoryavchenko3973 Год назад
Как всегда круто!!!
@PPL2412
@PPL2412 8 месяцев назад
Лучший урок из все что видел.
@ilyaVnukchinskiy
@ilyaVnukchinskiy Год назад
Спасибо за уроки !!!!!
@vaspurakavdalian1133
@vaspurakavdalian1133 Год назад
Красава Юра,благодарю тебе.Всех благ и успехов и много денег😆😉👍
@WebCademy
@WebCademy Год назад
Спасибо!) 🤝🤝🤝
@hapikus5157
@hapikus5157 Год назад
спасибо за огромную работу!
@user-nd9uk2qw6i
@user-nd9uk2qw6i Год назад
А я то голову ломал, как мне портфолио показывать, тоже надо сверстать отдельный сайт для портфолио. Спасибо за идею!
@user-qw9cg3is4j
@user-qw9cg3is4j 8 месяцев назад
Спасибо тебе родной этот урок был великолеаный
@sitini
@sitini Год назад
Ждём! 🎉🎉🎉
@rus24133
@rus24133 Год назад
Это слишком хорошо 😱
@ekaterinadobrzhanskaya3422
@ekaterinadobrzhanskaya3422 Год назад
Спасибо за урок, все сделала, все получилось!!!🤩
@WebCademy
@WebCademy Год назад
Супер!)
@didarmurzhukpaev6099
@didarmurzhukpaev6099 Год назад
Огромное спасибо,дружище!
@leonpiter
@leonpiter Год назад
Спасибо большое за такие видео, отшлифую свои навыки по верстке и приду к Вам на курс по JS))) Очень нравится подача.
@nurmukhammadxxx5046
@nurmukhammadxxx5046 Год назад
Один из самых классных каналов. Хотелось бы посмотреть на реализацию проекта уровня senior, чисто ради интереса и контента.
@dedlive51
@dedlive51 Год назад
Спасибо!
@benchik100
@benchik100 Год назад
очень четко! спасибо!
@user-zr2qn4px3q
@user-zr2qn4px3q 8 месяцев назад
Cпасибо за видео!
@Varushkin_17
@Varushkin_17 Год назад
Спасибо большое) ...
@GudgiJFm
@GudgiJFm Год назад
Меня тоже зовут Юрий, ждём)
@user-ju3sc2ik5v
@user-ju3sc2ik5v Год назад
Просто смотрел и повторял и все получилось, добавил фиксированную шапку при скроле страницы без js и теперь можно по id туда-сюда ходить, спасибо вам большое автор данного канала!
@juice_beatz
@juice_beatz Год назад
привет, подскажи пожалуйста как закрепить шапку
@user-ju3sc2ik5v
@user-ju3sc2ik5v Год назад
@@juice_beatz в CSS надо к header написать свойство Position: sticky; и Top: 0; Если ваша шапка скролится и вдруг останавливается в определенном блоке при попытке скролле страницы то можете добавить такие свойства Position: fixed; Width: 100%; ( или Top: 0; Left: 0;) заменив с Position: sticky; и Top: 0; То есть если не работает Position: sticky; Top: 0; то можете использовать Position: fixed; Top: 0; Left: 0; И да можете добавить width: 100%; на всякий случай. А да кстати не забудь свойство z-index: 1000; что бы твоя шапка не сливалась с контентом при прокрутке) Рад был помочь )
@juice_beatz
@juice_beatz Год назад
@@user-ju3sc2ik5v спасибо)
@user-th7tl6uu1k
@user-th7tl6uu1k Год назад
Жду)))
@user-gl5ow3ng9o
@user-gl5ow3ng9o 7 месяцев назад
Здравствуйте! Я интересуюсь, чтобы понять, почему при написании секции "projects" на гридах, теряется адаптивность, в то время как на флексах проблем с этим нет. Почему так происходит? :)
@arsenmelkumyan
@arsenmelkumyan 6 месяцев назад
💯💯💯
@user-nl3lg9by2i
@user-nl3lg9by2i Год назад
3:23:59 не переопределяются переменные и руинится позиционирование элементов. будто ломается display: flex и flex-direction:column
@progover24
@progover24 Год назад
жду
@user-is9nx5je5t
@user-is9nx5je5t 2 дня назад
01:11:39 забыли точку с запятой в color: var(--text-color)
@user-wn6lw8wi3h
@user-wn6lw8wi3h Год назад
Здравствуйте, может кто то подсказать, почему при body.dark не меняет цвет текста? Меняется только бекграунд. Из различностей, вместо обычного css использую sass
@WebCademy
@WebCademy Год назад
Смотрите на CSS который формируется в итоге.
@midinsuyutbekov6426
@midinsuyutbekov6426 Год назад
спасибо за уроки а что сделать для защиты диплома или сертификата
@WebCademy
@WebCademy Год назад
Смотря какие у вас требования к диплому. Где то и сайта на html хватает, где-то нужен Фреймворк или работа с БД.
@user-tn9nb9dx9n
@user-tn9nb9dx9n 10 месяцев назад
2:04:04 там задали display: flex; flex-direction: column; align-items: center; В место этих трех кода можно же да писать Text-align: center; ??? Плиз подскажите а то это меня убивает
@iakovryzhichka2832
@iakovryzhichka2832 Год назад
Когда меняете стили в инструментах разработчика, то чтобы их скопировать нажимайте ПКМ на самом свойстве или на классе, там будет много опций. Мне так проще, чем выделять все.
@Astco_Hosk
@Astco_Hosk Год назад
Спасибо за твой труд дорогой . Скажи пожалуйста почему в гитхабе не грузит стили ?? HTML есть но стили не срабатывают…..
@Technokpblca
@Technokpblca Год назад
Поставьте точку. Например : и
@user-qs2rj9gh8n
@user-qs2rj9gh8n 4 месяца назад
Помогите как сделать адаптивный сайт в CSS добавил @media сделал max-width 620 px Нечего неизменилось Посмотрел в чем проблема нашел тег meta сделал так и не помогло. Как быть?
@wandanacc3931
@wandanacc3931 Год назад
У меня проблема на протяжении всего урока, не работают некоторые свойства в css, такие как выравнивание текста, gap и другие. В консоли разработчика пишет: The display: list-item property prevents flex-wrap from having an effect. Try setting the display: list-item property to display: flex. Translate: Свойство display: list-item предотвращает действие flex-wrap. Попробуйте установить для свойства display: list-item значение display: flex. Но в css нигде нет значения display: list-item проверял через поиск даже, пусто
@MelkoR4111
@MelkoR4111 Год назад
может что-то из-за reset css
@TheMcKaKoC
@TheMcKaKoC 9 месяцев назад
Доброго времени суток. Подскажите, как вы сделали чтобы strong или em подсвечивались голубым у вас в css? Как пример тут .header__title strong
@WebCademy
@WebCademy 9 месяцев назад
Просто цветовая тема Ayu - mirage bordered. Более ничего специально не делал.
@slavalifehacker5873
@slavalifehacker5873 11 месяцев назад
Приветствую! Есть вопрос: а почему нельзя после тега body сразу задать контейнер один раз, и больше не писать его внутри каждого тега ниже?
@WebCademy
@WebCademy 11 месяцев назад
Можно, если у вас весь сайт в одной секции, или у всех секций единый фон. Но так как у нас в шапке темный фон, в центральной части белый и в подвале опять темный, поэтому делаем три секции с разным фоном и внутри каждой свой контейнер.
@slavalifehacker5873
@slavalifehacker5873 11 месяцев назад
@@WebCademyблагодарю!
@Sergei_meison
@Sergei_meison Год назад
спасибо за урок,почему то не пришли стили при деплое на гит!все файлы запушились,но на страницах стили не отображаются
@MelkoR4111
@MelkoR4111 Год назад
очисть кеш
@user-jq4fl3pg8r
@user-jq4fl3pg8r Год назад
И скажите пожалуйста, почему Emmet не выдаёт мне Query-Selector? Именно его он мне не выдаёт и каждый раз приходится печатать вручную все символы. В остальных моментах Emmet работает идеально.. JavaScript (ES6) code snippets установлен. В чём может быть причина?
@WebCademy
@WebCademy Год назад
У меня установлен js snippets от runningcoder
@user-jq4fl3pg8r
@user-jq4fl3pg8r Год назад
@@WebCademy спасибо большое, установлю тоже.
@user-mx1wd7bm7t
@user-mx1wd7bm7t 10 месяцев назад
Не очень могу понять, как "nav-link__link--active" у вас переключаться между переходами по ссылкам, так же как у вас сделал, но у меня не переключается ховер у менюшки, всегда горит у "project"
@WebCademy
@WebCademy 10 месяцев назад
Так надо руками прописать его для нужной ссылки на каждой странице.
@biscuitjerry8043
@biscuitjerry8043 8 месяцев назад
если не секрет сколько ~ платят за верстку из фигмы подобного макета? за 1 шт., естественно
@ivanpain5956
@ivanpain5956 Год назад
Добрый день, можете написать вашу тему в VS CODE? Нравятся цвета
@bobomurod
@bobomurod Год назад
Кажется Groovebox
@webstep4677
@webstep4677 10 месяцев назад
Отличный урок получился, Спасибо. На скорости 1,5 прошел на одном дыхании. Но есть небольшая проблема которую хотелось бы исправить - при переключении по вкладкам сначала отрабатывают белые стили потом черные если ползунок стоит в Dark. Можно ли этого избежать? Если да то как это фиксить?
@WebCademy
@WebCademy 10 месяцев назад
Спасибо за комментарий. Насчет вопроса. При переключении по вкладкам в браузере?
@webstep4677
@webstep4677 10 месяцев назад
@@WebCademy да по вкладкам меню
@aleksandrmykalo439
@aleksandrmykalo439 Год назад
Для работы с макетом нужна платная версия Figma?
@WebCademy
@WebCademy Год назад
Нет, зачем. Просто дублируйте макет себе в черновики и работайте с ним. В начале урока показал как это делается.
@aleksandrmykalo439
@aleksandrmykalo439 Год назад
@@WebCademy Спасибо! Теперь все получилось )
@MrStealss
@MrStealss Год назад
1:42:45 Почему у меня карточки проектов в 2 колонки и 3 ряда, а не в 3 колонки и 2 ряда Пробовал менять зум, и разные девайсы через ф12, все равно не получается
@nn1413
@nn1413 3 месяца назад
помнишь как решил?))
@MrStealss
@MrStealss 3 месяца назад
@@nn1413 тогда как то решил, но перестал учиться в этом направлении, сейчас не подскажу)
@timglibson7298
@timglibson7298 3 месяца назад
Делаю на своем макете,но по данному уроку,почему то для лишек в меню не сработал column gap
@WebCademy
@WebCademy 3 месяца назад
A display: flex; прописали?
@aslanaskar1193
@aslanaskar1193 Год назад
Привет, почему то у меня не сработало свойства в container {margin: 0 auto; padding: 0 15px; width: 1200px; } Вот здесь:21:39 Весь html и css код написал правильно, но надпись NAVIGATION не хочет разместиться ближе к центру. Когда хочется что то смотреть и что то сверстать обязательно что то препятствует(
@WebCademy
@WebCademy Год назад
Сравните с готовым кодом из урока. Может в другом месте допустили ошибку.
@Pinochete
@Pinochete Год назад
Скорее всего дело в том, что у автора видео, разрешение экрана отличается от вашего. Попробуйте просто уменьшить разрешение через колёсико мыши и всё должно встать на место.
@mokhammedalipatvari3063
@mokhammedalipatvari3063 Год назад
проверьте - точно ли у вас див в нав, а не наоборот
@TarasovFrontDev
@TarasovFrontDev 8 месяцев назад
В целом все правильно, кроме странных паддингов у контейнера. Нет никакого смысла задавать паддинги контейнеру только чтобы затем увеличить его размеры на эти же паддинги.
@WebCademy
@WebCademy 8 месяцев назад
Как насчет "прилипания" контента к краям экрана на мобильных устройствах?
@TarasovFrontDev
@TarasovFrontDev 8 месяцев назад
@@WebCademyДумал об этом. Ни разу не встречал, чтобы для корректного отображения сайта на мобилках не писали медиа-запросы. Соответственно, туда и паддинги вставляем.
@mksmvnv
@mksmvnv 2 месяца назад
Почему у меня горизонтальный скролинг на мобилке? Делал все аналогичым образом. Как его можно исправить?
@WebCademy
@WebCademy 2 месяца назад
Сравните свой код с готовым из урока.
@user-ub7st9lv6j
@user-ub7st9lv6j Год назад
это можно легко обыграть ,не делать переменную под стандартный черный цвет
@dimitry5479
@dimitry5479 Год назад
Запись будет?
@WebCademy
@WebCademy Год назад
Запись осталась на канале.
@pawwsay
@pawwsay Год назад
как сделать к каждой карточке проекта, свой проект? так и не поняла
@WebCademy
@WebCademy Год назад
Также как и первый проект который сделали. Создаете отдельную страницу для второго проекта, и на вторую карточку вешаете ссылку на эту страницу.
@user-ze9ks9pr6g
@user-ze9ks9pr6g Год назад
Джава скрипте в 3:24:57 не сработал код. Все правильно написал но нет
@user-gk4ye4zh5x
@user-gk4ye4zh5x 11 месяцев назад
У меня почему-то на главной странице код не срабатывает. На других всё переключается. Ошибок нет. В чём дело?
@WebCademy
@WebCademy 11 месяцев назад
Скрипт на главной правильно подключен?
@user-gk4ye4zh5x
@user-gk4ye4zh5x 11 месяцев назад
@@WebCademy Да. Я даже специально алерт вывела для проверки. Код подключен.
@user-gk4ye4zh5x
@user-gk4ye4zh5x 11 месяцев назад
@@WebCademy Ясно, у Вас тоже так было. Просто я решила исправить до того момента, как Вы стали править у себя.
@maslovsky8969
@maslovsky8969 Год назад
Какая тема стоит в VSCode?
@WebCademy
@WebCademy Год назад
Ayu - mirage bordered
@maslovsky8969
@maslovsky8969 Год назад
@@WebCademy Благодарю)
@asgard7815
@asgard7815 Год назад
как тема называется, очень понравилась, буду рад за ответ)
@WebCademy
@WebCademy Год назад
Ayu
@16gggtm
@16gggtm 8 месяцев назад
Где взять ссылка фигма
@juice_beatz
@juice_beatz Год назад
привет, подскажи пожалуйста как закрепить шапку
@MelkoR4111
@MelkoR4111 Год назад
position: fixed
@Simphonia_store
@Simphonia_store Год назад
какая это тема в vs code?
@kioneQ
@kioneQ Год назад
Это MacBook, там она по дефолту стоит.
@Evgenius-PRO
@Evgenius-PRO 9 месяцев назад
Вы один из немногих кто остался и объясняет очень хорошо на русском языке! Скажите пожалуйста ,а почему вы не используете wrapper и внутри него хедер мейн и футер ? Понятное дело что семантика не для новичков , но враппер что бы убрать скролл и сделать структуру флексом,почему нет? Не в коем случае не нравоучение,а наоборот интересуюсь что бы понимать.
@WebCademy
@WebCademy 9 месяцев назад
Спасибо за комментарий. Насчет wrapper - не вижу в нем необходимости. По сути оберткой может выступать и тег body, если мы говорим например о том чтобы сделать sticky footer.
@Evgenius-PRO
@Evgenius-PRO 9 месяцев назад
@@WebCademy большой спасибо за ответ! Удачи вам🔥
@musicfan507
@musicfan507 Год назад
И это всё бесплатно? Без какого либо подводного камня ?
@WebCademy
@WebCademy Год назад
Да) А еще есть вторая часть на React JS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Iz1NvqG7wTc.html
@user-qn6hd2uq6s
@user-qn6hd2uq6s Год назад
3:35:23
@Shiba_dub
@Shiba_dub 8 месяцев назад
Я там не профи верстки, мне понравился макет, решил ну, чтоб не накосячить по видосу сделаю, на начале верстки через 5 минут, закрыл видео) Это для прям вообще новичков видео? Кто ж сразу все пишет(( Если делаем нав, то пишем хтмл всего нава, потом уже стили к нему
@WebCademy
@WebCademy 8 месяцев назад
Так и не понял - видео урок для вас оказался слишком простым или наоборот сложным.
@Shiba_dub
@Shiba_dub 8 месяцев назад
@@WebCademy слишком простым, но для новичков, конечно отличный вариант!)
@user-fd5le5bx9j
@user-fd5le5bx9j Год назад
Юра топовый парниша!))) FronDend))
@WebCademy
@WebCademy Год назад
Тоже заметил, но ролик уже был записан)
@user-frond-end_dev
@user-frond-end_dev Год назад
я не придираюсь, но эти переменные мозги пудрят по полной и из за них теряется логика всей верстки. мне как новичку приходится слишком много времени тратить на эти переменные
@WebCademy
@WebCademy Год назад
На старте я вас понимаю. Можете их не использовать. В дальнейшем для темной темы они упростят переключение стилей.
@sergeyfedorchuk1562
@sergeyfedorchuk1562 8 дней назад
Есть ли разница между селекторами ".header__text p+p" и ".header__text p:not(:last-child)" и вместо margin-top указать margin-bottom?
@WebCademy
@WebCademy 8 дней назад
Можете сделать как вы описали. Визуальный результат будет таким же. Наверное он будет даже лучше, так как между абзацами могут быть изображения, и отступы все равно будут присутствовать.
@azimnurnazarov7479
@azimnurnazarov7479 Год назад
Запись будет ?
@WebCademy
@WebCademy Год назад
Запись осталась на канале.
Далее
How I Did The Mcdonalds Drink Trick 🤯🥤#shorts
00:16