#10 Верстка сайта с нуля для начинающих | Адаптивная верстка

В этом видео мы продолжаем верстать сайт используя HTML и CSS и сегодня мы продолжим делать адаптивную верстку. Сделаем мобильную навигацию, бургер меню и подготовим некоторые элементы для взаимодействия с javascript.
------------------------------------------------
Основы HTML и CSS для начинающих: brainscloud.ru...
Верстка сайта транспортной компании: brainscloud.ru...
Файлы урока: files.brainscl...
------------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
------------------------------------------------
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak
#верстка #версткасайта #html #css #css3

[@aleksandrkedria4024]

Сколько смотрел других ютуберов которые делают сайты с нуля , но ты самый толковый и легко восприимчивый , знай , что мы , начинающие верстальщики , очень ценим твои уроки!

[@BrainsCloud]

Спасибо, я рад :)

[@yomzfka]

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

[@topmobilegames1494]

.nav__toggle.active .nav__toggle-item:before{ transform-origin: left top; transform: rotate(45deg) translateX(-3px); } .nav__toggle.active .nav__toggle-item:after{ transform-origin: left bottom; transform: rotate(-45deg) translateX(-3px); } Идеальный крестик получается Спасибо за видосы.

[@above_goals626]

Что бы крестик был ровным - translateX(-3px) ; ( before и в after) . Не Примите за /всезнайство/... Всем успехов!) А тебе - BrainsCloud, огромное спасибо за еще один бесценный урок!!!)

[@AlenaEtudente]

above_goals тоже -3 поставила, красота)

[@grastor]

Обнулил top и bottom у псевдоэлементов

[@nataliamartynenko1731]

Да, я тоже так сделала и тоже получилось ровно

[@trendsgallery]

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

[@Anahitacode]

У меня допущена ошибка с самого начала. Все не так. Веры не теряю, разберусь. Почему-то отступ. Спасибо за видеоуроки. Это мощно!!! Мне кажется никто такого не делает сейчас. Чтобы так продуктивно и подробно. Всем кто дошел до этого видоса респект! Мы вместе верстаем. Я - 0 быль, сейчас уже 0 +.

[@Anahitacode]

Zigtelus и я тоже не бросаю. Верстаю не так быстро, но если на CMS делать, то можно и за день вполне себе многостраничник или даже интернет магазин слепить. Js изучать круто.

[@Anahitacode]

Zigtelus вордпресс, а до этого год админом на какой-то локальной cms индивидуально разработанной. Ещё у меня есть bitrix сейчас joomla планирую учить. А вообще лучше свою написать пробовать.

[@Anahitacode]

Zigtelus пока php учу

[@Anahitacode]

Zigtelus да! Столько всего интересного есть.

[@stanislavsemenenco8425]

@Zigtelus как успехи?)

[@Sun2rw]

Привет. Спасибо за курс. Просмотрел и всё повторил. Всё было очень круто. Лайк, подписка, однозначно.

[@Burovasofia]

перешла на 10 урок и сразу ставлю лайк , Дмитрий очень Вам благодарна за ваш труд! спасибо Вам за возможность учиться у Вас! Вы лучший учитель!!!

[@jahzoviy260]

крестик - взрыв мозга))

[@xtravels_kz]

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

[@nikita.moskovskiy]

@@xtravels_kz да, но это был мини гайд по анимациям, и с помощью этого можно сделать что- то большее, чем просто крестик

[@ngnko]

Spasibo za uroki, ochen rada chto nashla tvoy kanal!

[@LetsPlayOverGame]

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

[@vitka0]

Дмитрий ,спасибо вам за труд!

[@nikita.moskovskiy]

твой крестик это просто пушка

[@mikhailgrinchenko5541]

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

[@st0nedcreature17]

По-моему, сайт ни фига не для начинающих)) Такой здоровенный макетище. Однако, он крайне полезен для разбора начинающим после тренировки на боль-мень простеньких страницах - потому что тут всё есть практически, а не просто набор блоков, которые состоят из одного и того же. Код очень ровный, ничего не плывёт - то, что нужно для начала, но я лично разбирал бы сначала одностраничный сайт визитку из урока "Основы создания сайтов. HTML и CSS для начинающих", а потом уже перешёл бы на MoGo)) Большое спасибо, Дима, ты отличный преподаватель и девелопер))

[@antoniobanderas3303]

Спасибо за ваши уроки! Давно хотел пошарить в верстке и вы мне с этим отлично помогли! Удачи в развитии канала. С меня лайки ;)

[@BrainsCloud]

Спасибо!

[@dimagraf5411]

Отличные видосы, к последнему уроку дело идёт тяжеловато, но много годной информации. Спасибо!)

[@alexfleur]

Спасибо за урок! Лично для себя нашла много полезной информации =)

[@user-rr8gn3ft5b]

Ещё раз спасибо, еду дальше

[@sacrat4676]

Пожалуйста делай еще и не останавливайся!

[@AlenaEtudente]

Голова взрывается потихоньку, но я держусь))) А если серьезно, спасибо!

[@Yakyzzza93]

10Q=) я для nav-toggle { background: transparent; border: none; } немного по другому сделал, чтобы кнопка не унаследовала стили, а потом уже у тебя увидел) видимо как ты и говорил, что методы решения могут быть разными) Согласен со всеми на 100% and more, что для начинающих верстаков ты очень доступно объясняешь, настолько , что вопросов после твоих уроков почти нет) Продолжай в том же духе!

[@Alexey_Gri]

вопросы есть всегда, главное чтобы было кому отвечать на них

[@VladRakityanskyi]

Мне просто интересно кто ставит дизлайк под этим видео? Кто этот уникальный товарищ?)

[@user-oi7ek3km5j]

лучший учитель! спасибо!

[@dimitru1776]

как вариант крестика .nav-toggle.active .nav-toggle__item:before { top: 0; transform: rotate(45deg); } .nav-toggle.active .nav-toggle__item:after { bottom: 0; transform: rotate(-45deg); }

[@olegsteelkinzu]

Вот! Сделал так же. Вернул псевдоэлементы в начальную точку отсчета с помощью top и bottom, и получился ровный крестик.

[@polivokser]

Самое верное решение!

[@tanyamarushka7251]

Огромное спасибо за урок!

[@pogios]

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

[@nilsen1879]

Спасибо за урок! Лайк поставил

[@PiterProduction]

Огромное спасибо!)

[@flab3rt]

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

[@azizazizov9339]

Наверно дизлайк вставит те которые не смогли сделать крестик , но я смог по этому лайк :)

[@DerAleksey]

я остановился на х(-3) у(-3) =)

[@MrZorg23]

Спасибо! Узнал много нового!

[@mrpipiskin4]

Спасибо, брат.

[@user-yb9uf8uz8k]

Тема интересная, получилось всё хорошо, но хотелось бы более развёрнутых объяснений. И кстати линейки есть экранные ))))

[@skvor83]

Меня жена уже начинает ревновать к этому каналу)))))

[@Тини]

Большое спасибо!

[@YaroslavNechyporuk]

Воу, спасибо!

[@Alexey_Gri]

а еще можно в описании добавлять ссылку на следующий/предыдущий урок (чтобы не искать)

[@o.kiryukhin]

Подскажите механику позиционирования псевдоэлементов before и after. Они занимают свое место относительно своего родителя .nav-toggle__item, но ведь сам родитель не relative, а absolute.

[@Alexey_Gri]

Вот этот момент тоже недопонял - получается absolute в absolute

[@brutbraty5134]

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

[@utkirkurbanov8241]

👍

[@wanzet11]

Всегда было интересно, а почему именно двойное подчёркивание?

[@mrpolloco]

Всем привет! А что можете посоветовать для подгонки медиа под 4к экраны? Поставьте более высокое разрешение - увидите всю боль))

[@sabatonbaton6105]

C новым годом)

[@Mykhailo_Vdovychenko]

СПАСИБО! =)

[@timlee7364]

крестик получился легко при -3px .nav-toggle.active .nav-toggle__item:before { transform-origin: left top; transform: rotate(45deg) translateX(-3px); } .nav-toggle.active .nav-toggle__item:after { transform-origin: left bottom; transform: rotate(-45deg) translateX(-3px);

[@romanro8630]

спасибо

[@shifrl771]

очень спасбио очень помогло

[@Den_camrad]

Я указал -3рх для before и after, получилось все ровно.

[@sappho980]

После того как поставила display none у медиа 770, а потом убрала, навигация отказывается проявляться. консоль показывает, что она есть, но самой ее не видно. подскажите, пожалуйста, что делать

[@user-lq9yu7gr1n]

Спасибо.

[@hotDelights_]

🔥🔥🔥😀👍

[@marynakosiv3750]

сенсей)))

[@grs204_]

такой вопрос, в теории мы можем открывать и закрывать бургер через псевдокласс active и visited?

[@user-eu4zu7wf5i]

Дмитрий подскажите как вы ставите комментарий в строку где уже есть текст? У меня при "Ctrl + /" комментируется весь текст в строке вместо комментария рядышком (редактор VS Code).

[@turzvuk]

Всё равно слайдер двигается. Так и не нашёл - что не так...

[@polivokser]

@Константин Бурдуков Большое спасибо!)

[@yevheniidodiak3644]

Да , это было нелегко с этим крестиком =)

[@kolosrodoskyi]

пасиба сенсей

[@KuKu_RuKu88]

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

[@clickabelno]

лайк

[@romanmityagin3115]

Ребят подскажите, у меня не хочет работать плавность перехода из бургера в крестик. В инспект элементе показывает эту строку зачеркнутой. Заново все перепроверил по видео, так и не нашел ошибку. Может кто сталкивался?

[@grs204_]

правильный крестик для before и after translateX(-5px);

[@TheDobermanTV]

Момент на 23:00 😂😂

[@asadbekkenjabaev]

BoooM nav is ready thanks 👌 👌 👌

[@stavrogin_]

не заметил в каком видео были вставлены корзина и лупа, вроде такого в предыдущих не было

[@user-lj6si4lf3o]

Не до коца ролики досматриваешь:)

[@jane_bin]

Разве для крестика нельзя убрать топ и боттом у псевдоелементов? тогда они стают ровно по центру и без трансформ-ориджин

[@antonantonov6389]

Валидатор ругается когда section без h1...h6 внутри. Просто досмотрелся, не придираюсь - учусь.

[@alexmatiz5077]

крутая фотка

[@trendsgallery]

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

[@user-ww1sc4cd3j]

"z-index, например, 1" Красной нитью через все уроки

[@user-di4zt3br5m]

+

[@vitalikberezovsky5619]

7:22

[@makayd3031]

Я поставил так .nav-toggle.active .nav-toggle_item:before { transform-origin: left top; transform: rotate(45deg); top: -10px; } .nav-toggle.active .nav-toggle_item:after { transform-origin: left bottom; transform: rotate(-45deg); bottom: -10px; } Вроде довольно ровно вышло. Почему то мой VSC не видит такую команду как translateX,Y есть только translate если в ручную к нему дописываю Х ругается приттер... Спасибо за уроки BC

[@user-ie7md3mm6x]

Большое спасибо!