Профессионально верстаем макет с адаптивом, часть 1 | HTML, CSS

Верстаем вместе первую часть адаптивного макета.

🏰 Английский YouTube: @webelart_en

Видео рекомендуемые посмотреть:

00:00 введение.
03:32 запускаем проект, изучаем макет
07:21 представляем html шапки
12:49 css шапки
41:46 главная секция html + css
01:05:50 верстаем колонки html + css

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[harrisonwinston]

Здравствуйте, сам ваш коллега, но опыта работы еще год, не бросайте канал, если бы нашел вас 2 года назад был бы очень рад! Продолжайте! Спасибо

[danildemchenko]

Спасибо большое! Хоть в верстке и не новичок, но было приятно смотреть и подчеркивать для себя какие-то решения/подходы от более опытной коллеги, так сказать:)

[ardinarbeats]

Круто! Очень жду видео с профессиональной версткой других интересных макетов!

[stavrogin_]

крутой контент, давайте ещё верстки!! :)

[dmitriyart]

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

[tokka__]

То чувство когда woman moment обретает другой смысл, ты крутая

[vanwitkowski]

Спасибо! ваши видео очень полезны, вы классная разработчица❤

[ВикаКоко-рю]

Спасибо большое за видео! Была бы рада поверстать с вами более сложный сайт, если это возможно.

[MikhailBurlet]

.search__icon должен быть инлайновым элементом.
Смотрю другие ваши видео по JS, отлично объясняете. Спасибо.

[dirtyhandz]

Лена! Спасибо!
Ты так классно рассказываешь!
Уже больше года JS учу, а верстка всё как-то мимо пролетает, особенно вот это позиционирование гридами и флексами….
У тебя же на канале можно всё с нуля попробовать освоить, да? :)
Спасибо ещё раз!

[РачилаАлександр]

На винде в хроме и FF горизонтальный скролл на десктопе. У body убираем 100vw и все будет норм. Проблема в вертикальной полосе скролла. Дело в том, что в 100vw этот скролл по умолчанию не входит, поэтому при наличии полосы добавляется ее ширина в body. Вообще не совсем понятно зачем явно задавать ширину, body по умолчанию блочный элемент, а блоки в любом случае тянутся на всю ширину вьюпорта.

[sergeiverenikin]

Здравствуйте. У Вас небольшая ошибочка. Для класса .search__icon Вы прописали свойство "background-size: content". Нужно "contain".

[МадумаровМинтемир]

prosto top kapes novym kodam dofiga nauchilsya i logoke {thank you very much}

[denystelehin]

Очень классно рассказываешь, сделай видео про npm с подробностями как куда и что и для чего, мне очень надо, и если не тяжело про gulp тоже отдельный видос замути чтобы всем понятно было, зарание благодарочка, ты очень красивая)

[dobrMAV]

Добрый вечер! Хочу попробовать по верстать вместе с Вами, мой уровень: HTML CSS уже не так сильно пугает, если что иду в документацию .А вот JS пока непросто дается) У меня Windows 7 + VS code .Надо ли еще что то устанавливать ? Сборку буду впервые скачивать и устанавливать .

[YaniaRZ]

Есть маленький вопрос о пути к бэкграунд картинке - вы в пути поставили слеш вначале /images/cover.jpg . У меня в связи с этим вопросы: почему не делали выход из папки (../) - и означает ли слеш вначале - путь от корня сайта?
Просто с путями периодически есть вопросы у меня(особенно, если использую препроцессор и при последующем деплое например) и решаю в основном их "методом научного тыка", а хотелось бы как-то попрофессиональнее😁

[kristinag]

ролик класс! когда ждать следующую часть? и подскажите пожалуйста, все padding, margin, width и height в rem считаются относительно 18px, который мы указали в html?

[ДмитрийПолушкин-ъо]

Не разумно использовать тег <H1> в таком контексте. Логика ваша в целом ясна, если наполнение будет происходить из цмски и туда будет падать нормальный заголовок сайта а не простое "QWERy", но об этом необходимо упомянуть. Это важная деталь. А если наш заголовок сайта так и будет иметь в логотипе h1 со значением "QWERy" то это не только не имеет отношения к семантике, но и напрочь лишено здравого смысла.

[Vladimir-yhdl]

Марафон классный, но мне непонятно для чего нужно использовать препроцессоры когда есть уже есть и переменные, миксины так же и математические функции, а модульность через import существовал всегда. Когда в препроцах нужен компиллятор и всякие зависимости устанавливать в большом количестве, так же синтаксис новый да и потом ошибки тяжелее искать. CSS развивается очень стремительно

[AlekseyNaumov_]

Спасибо за урок! От стен идет сильный ревер, режет по ушам. Надо, что то сделать. Или средних очень много, а низких частот не хватает.