Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

[@svetlanaandreeva8762]

Пересмотрелa в you tube много видео nо вёрстке и только на этом канале объясняется просто и ГЛАВНОЕ подробно по каждому тегу и свойству, когда и куда применять. Женя, спасибо, ты лучший👍👍👍

[@martinyis6453]

00:29:00 Building the construction of the website 00:49:00 Making header 00:57:00 Making manu and button 01:11:06 Positioning of header 2:04:00 Aligning content 2:07:00 Working with button link 2:16:00 Doing decor in the container 2:20:00 Responsive decor 2:24:00 Responsive’ 2:36:00 Start of layout of block with many decors 2:40:00 Structure a block with decor 2:42:00 Layout of actuals decor 2:50:00 Responsive second block // Third block with 2 floors 2:56:00 Structure of block 3:00:00 How to make width for block with decor 3:05:00 Structure of block with numbers 3:14:00 How to add video to website 3:19:00 Responsive block with video 3:21:30 Responsive bar with text elements // Last block layout 3:39:00 If we don't want to use gap 3:40:00 Doing decor as pseudoelements 3:50:00 How to fix when we have a lot of text in items

[@Ruslan-ni9mh]

я даже не знаю что тут комментировать.... отличный мастер класс....замечательный канал...замечательный учитель......каждое новое видео просто праздник...спасибо от души!!!желаю успехов и процветания!!!

[@andreyzatsepin_ua]

Подивився з великим задоволенням!! Жека, дуже дякую! Після 2-х конспектів по Вашим js почав вмирати, але це відео повертає до життя :) Особливо, коли ти розумієш, що рік тому ти пройшов ці ж уроки на цьому ж каналі і все розумієш, що пише Жека! Окрема подяка за рішення по декору!! Тепер буду знати, як це робиться. Та й Бургер на чистом CSS - дуже класно! Дякую!! Пішов практикувати)))

[@АнастасияАвмочкина]

Благодарю вас за этот мастер-класс и за то что оставили его на канале. Вы мега-супер учитель. Столько нужной информации поняла и узнала. Пожалуйста не удаляйте свой канал и ваши видео из ютуб. Дайте нам шанс учится. Спасибо вам огромное, вы просто человек будущего (делаете такую просветительскую работу, что бы люди становились свободнее и образованнее)! Это самый лучший канал на ютуб! Большой вам поклон!

[@IvannaIv-cy6sj]

Дякую. Дуже корисно. Проходжу курс, здала завдання, дали посилання на Ваш майстер-класс, йду переробляти свого "динозавра".

[@mattewdared1632]

Майстер-клас дуже сподобався, є чого повчитись. Мені як новачку, точно є чого. Цікаві рішення застосовувались, можна передивитись не один раз. Що і робив. Дуже дякую за такий якісний безкоштовний контент.

[@oleksandrpavlov6290]

Жека, привіт! Дякую за супер майстер-клас! Вчусь на курсах менше місяця і, по ходу пошуку контенту для додаткового розвитку, потрапив на твій канал. Дуже вдячний за твою титанічну працю! Багато відосів вже передивився і багато - попереду)

[@Ayt0_on]

Спасибо тебе Женя за такие мастер классы, я просто поражаюсь тем как ты мастерски находишь выход из любой ситуайии, респект. Твоё умение так ловко и быстро разбиратсяв коде при этом не теряться в сотнях строк кода, восхищает,.Когда я смотрю твои стримы у меня аж глаза разбегается, а мозг отказывается воспринимать такую быстроменящую информацию. Лично я к сожелению пока не могу всё делать быстро и ловко как ты, но я буду старатся, Удачи тебе, и делай побольше таких стримов, но старайся объяснять больше, объясняй каждый сделанный твой шаг, так нам новичкам будет легче понять ход твоих мыслей, и будем легче воспринмиать информацию. Ещё раз большое спасибо

[@mzx6531]

Программирование и верстка похожа на конструктор, чем больше занимаешься - тем эффективнее результат, щас ты боишься теряться в сотнях строк кода, а потом попадаешь на проэкт где таких строк десятки/сотни тысяч и там уже не до страха, глаза бояться руки делают(:

[@Ayt0_on]

@@mzx6531 Золотые слова, буду им следовать) А ты уже получал проекты?

[@mzx6531]

@@Ayt0_on Получал, правда делал их со своим учителем грубо говоря, ибо проэкт был своеобразный, неофициальный, на своем опыте убедился, что заказчики это такие особы которые сейчас хотят одно а после десятка присланных правок получаеться вообще не то, что хотели изначально

[@Ayt0_on]

@@mzx6531 спасибо, буду иметь в виду

[@mzx6531]

@@Ayt0_on 99% придирок были к фронтенду, а учитывая что Евгений воспитывает тут будущих фронтедеров, то да, надо иметь в виду(:

[@rozelia_777]

Я только только начала погружаться в сферу IT, до этого была маркетологом, изучаю сейчас HTML, до CSS еще не дошла, но мне таааааак интересно смотреть верстку сайта в прямом эфире, вы даже не представляете) Стараюсь учиться каждый день по 6 часов, пока мозг не начнет взрываться :D Но я прямо кайфую от процесса изучения верстки сайта) Спасибо большое за такие познавательные видео! Особенно с подробными разборами, это прям очень радует и таких видео не особо много на ютубе, БЛАГОДАРЮ ВАС!))

[@pride444]

kak uspexi?

[@olenayevtushok2014]

Женя, дуже дякую за стрім! Я тільки почала вчитися по Вашим урокам, пройшла ще тільки половину. Звісно, багато чого не вловлюю "на льоту", але весь стрім паралельно з Вами повторювала і в мене вийшло! ВЕЛИЧЕЗНЕ ДЯКУЮ

[@grand6511]

Євген рівень Твоїх уроків - це вищий пілотаж ! Дякую за працю і приділений час !

[@ОльгаХаритонова-ц6м]

Жека, велике вам дякую за ваші уроки, багато нового дізналася з них, і з цього стріму включно) За приємну атмосферу та ваш позитивний настрій поставила би окремий лайк, якби була змога)

[@ТарасЧибіс]

Така он-лайн верстка потрібна як практика до теоретичних курсів. Дуже допомогає слідкувати за ходом і порядком мислення розробника. Плюс дуже корисні фічіі при розробці. Дякую!

[@hladyshevaanastasiia6214]

Сколько полезной информации да ещё и в свободном доступе! Спасибо вам большое!!!❤️

[@Chefjeanpierreinhindi]

Огроменнейшее спасибо за то что ты оставил это видел 🙏❤️

[@alexeyderepa9464]

Євген, дуже тобі дякую за твої чудові мастер-класи. Ти робиш дуже корисну справу. Мені ніколи не подобався фронтєнд, але коли я побачив як ти надаєш інформацію я змінив своє ставлення до цьго напрямку розробки, а також ти змотивував мене вивчити фронтенд!!! Дуже тобі дякую!!!

[@Alekseev_Oleg]

Всё достаточно чётко, бери и делай, как говорится! Однозначно, очень полезно! 👍Но моя проблема в том, что я никак не могу себя заставить! 🤦‍♂️Благодарю за информацию и труд!

[@kostyafrompiter]

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

[@Alekseev_Oleg]

@@kostyafrompiter каждому своё!)

[@фролгард]

Огромное вам спасибо за ваш быстрый и качественный обзор проекта все супер понятно и без всякой воды!

[@vikghjbj3137]

второй прием по размещению квадратиков просто офигенннный! спасибо, мастер!

[@denyspugachov2771]

49:20 => для Windows удобно переносить тест из Figma: "ctrl + С" все что нужно, а в VSCode: " Win + V" и выбираешь в обратном порядке (из буфера обмена)

[@ilya78950]

большое спасибо,ведь для начинающих особенно важно разбираться в таких моментах,вы всё объясняете по существу

[@НиколайМорозов-ы1э]

Вёрстка бургера и вся это логика с открытием/закрытием пукнтов меню в хедере просто взорвала мозг. Спасибо за мастер-класс. Очень полезно!

[@Дарья-ч5у4л]

я только только послушала вступление и у меня так настроение поднялось что захотелось написать коммент в поддержку аххах вы меня вдохновляете!!!!

[@МихаилЗалозный-у4ч]

Доброго дня вам❗️ Шикарні уроки 👌👍❗Самостійно навчаюсь на вашому сайті❗Круто❗

[@panda-str]

Чудовий контент, дуже вдячний за Вашу роботу ! Бажаю Вам гарного розвитку каналу!

[@КамКК]

Больше спасибо ВСЁ понравилось, обязательно пересмотрю все ваши стримы. Это супер мастер класс по верстке, с вами верстать интереснее. За скорость еще один лайк.👍

[@lizgarcia7455]

Мне нравится легкий и простой способ, который все объясняет, идеально подходит для новичков.

[@Symphony_MMA]

Cпасибо Жека!!! Тебя очень приятно смотреть! Позитивный, жизнерадостный и креативный человек! Успехов тебе в твоём деле ;)

[@КонстантинОсипчук]

«Заробити гроші так, щоб ще й принести користь людям» - це те, до чого має прагнути кожен! Дуже тобі дякую за твою працю! Саме після твоїх відео я вирішив стати розробником! І вже пів року вчу HTML,CSS, JS!)

[@redlineup7391]

Как успехи? За год с лишним работа хотя бы фриланс есть?

[@sergunvictor]

Евгеній, ДЯКУЮ ВАМ!!! Ви просто СУПЕР!!! Ви, Ваш контент та Ваша єнергетика просто ФАНТАСТИЧНІ!!!

[@ДинаИсаева-м1я]

Ваши видео просто НЕОЦЕНИМАЯ помощь для изучающих верстку. Спасибо огромное!!!!!

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём желаю мира и спокойствия вашей стране и семье

[@daryaemelyanova1785]

Круто! На этапе верстки "бургера" пришлось даже взять листочек и написать все на бумаге, чтоб понять до конца что к чему)

[@elif.3258]

Тоже уже все записала, но хоть тресни не могу так нарисовать бургер🙈

[@nyusha-hryusha]

Большое спасибо за проделанную работу. Это моя первая верстка, все доходчиво и понятно! 👍

[@BassHunterX1]

Для новичков самое то! А что если сделать серию обучающих версток по нарастающей? К примеру несколько видео (5-10), в которых сложность макета и применяемые технологии в верстке, будут по не многу увеличиваться. "От мала до велика " так сказать. Структурировать видео создав отдельный плейлист и показывать новичкам от чего к чему нужно двигаться. Будет видна четкая "лестница" прогресса. Как идея?

[@Ayt0_on]

супер идея, главное что бы это увидел Жека

[@PaulGabow]

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

[@АлександрДунаев-к9э]

Поддерживаю. Видео отличное, мне как начинающему очень зашло! Небольшие усложнения тоже отлично зайдут! Евгению большой респект за работу!

[@alexmarch]

идея Великолепна , но чел итак делает столько контента , преклоняюсь. 10 конечно много (не для нас, для нашего сенсея) но даже 5 это было бы круто!

[@kamranlatipov999]

супер идея

[@ВячеславСмагин101]

я вот учусь, а что то новое узнаю у тебя)) спасибо выручаешь всегда, настанет время и я заданачу за все твои труды!

[@ЕвгенийКозлов-й5л]

Евгений, благодарю тебя! Очень полезно и интересно! Как всегда заряжаешь своей мощным настроем и энергетикой! Смотреть за твоим ходом мысли бесценно! Обожаю тебя)

[@ВасяПупкин-л3ю6ж]

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

[@КириллКузнецов-ш2к]

чтобы работать с такими скоростью и качеством выполнения естественно нужно иметь опыт (например, скорость коддинга да и в принципе "интуицую верстальщика"), но для меня тут отлично показаны принципы работы, логика, подходы, фишечки. Появляется чувство, что можно этому спокойно научиться. Спасибо, что зарядил, Жень. каждое видео-немного мотивейт

[@NoakSV]

Смотрел в записи, очень понравилось, спасибо за знания и позитив!

[@big_aim2006]

Как всегда быстро, четко и по делу!!! Лайк!!!

[@ЕваЛарионова-о9ж]

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

[@АннаКибенко-у3х]

Спасибо огромное!!! После начала войны у меня пришло время "вернуться в семью". Решила с этого видео. Все понятно, все доступно.

[@verstkalive]

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

[@Zhenkaaf]

можно узнать, что значит осилил за 3 подхода? вы просто повторяли по видео? или сами верстали? просто сам учусь и не подглядывая в видео не могу начать верстать..

[@verstkalive]

@@Zhenkaaf повторял по видео. Пока ещё сам тоже не готов верстать.

[@_pitbull-gameschannel_6701]

Была проблема с бургером он просто не высвечивался пока я не указал в icon-menu ширину. Но и на этом проблемы не закончились, помните Женя добавлял , так вот я этот момент упустил у меня этот бургер не высвечивался если в meta указать значение ниже 980px. Так вот прикол в том по умолчанию ширина страницы на мобильных устройствах равняется 980px. Чтобы ширина страницы равнялась ширине экрана нужно добавить этот тег и все заработает. Это для тех у кого будут такие же проблемы как у меня, если еще что-то будет, отредачу коммент. Пока только с эти м столкнулся. Жене отдельное спасибо за такой качественный контент, помогает разобраться что да как делается. Респект!

[@helenlena2837]

Вот тоже меню-бургер не появляется вообще. Сейчас попробую выполнить то, о чем вы говорите.

[@helenlena2837]

ничего не помогло. Мета-тег был на месте. Добавила ширину в icon-menu, но бургера как не было, так и нет.... не знаю, в чем дело. Проверила и код и сcss, все, как у Жени

[@helenlena2837]

При этом само место под бургер - зарезервировано. При адаптиве появляется блок, кнопка download сдвигается влево

[@LovelyNature-f6y]

Вдячний за майстер-клас! Дізнався дуже багато нового і корисного. Однозначно лайк!

[@olexsandrapavlenko1166]

дякую!)) девилась декілька днів, але цього було варте.

[@David_Liu93]

На курсах сейчас как раз делаю проект по вёрстке макета, сначала начал сам, вроде что-то вышло, но коряво, пришёл сюда и прям кайфую от стройности кода, все как симфония. Иду в свой VS, а мой код - обнять и плакать😅 Но я очень благодарен за возможность учиться и настоящего мастера своего дела, получается весело и нескучно. Заряжает мотивацией. Пусть это у меня займёт больше времени, но терпение и труд, все должно получиться.

[@Rasty_Boss]

подивився і взнав для себе багато нового, хоть і верстаю вже більше 6 міс. Дякую Жека

[@gogo-jr3im]

Огромное спасибо за уроки! с тобой этот мир лучше!

[@АняЦівіна]

Дякую за відео, дуже класно все поясненюєте, допомогли стратувати в верстці

[@tarasrachuk8097]

Ження, вкрай вдячний за черговий топовий майстер-класс! Надзвичайно корисний контент,не зупиняйся!

[@antontoha35]

Большой и толстый палец вверх, все очень круто, спасибо большое тебе Женя)))

[@nick.naista]

Половину стрима лахматили бабушку с бургер меню... Стрим реально крутой был!

[@-UAcontent-]

Ну клас!... Кожен твій майстер-клас додає ще більше впевненості в своїх силах!! Дякую за знання, якими ділишся. Давай ще верстку з mobile-first та з макетом де є адаптив.

[@ОльгаХемингуэй]

Было очень интересно, столько нюансов, столько классных пояснений, очень довольна стримом 👍

[@PaulGabow]

Уххх) сверстал "буквель в буквель") нетривиальная задача для начинающего даже со знанием шоркатов\еССтрактора\оборачивания кусков кода и прочего. Даже пару сниппетов пришлось накатать для вывода пустых линеек маржинов\паддингов) Сам так маржины\паддинги развернуто не фигачу, потому не нужны были.. И очень помогло, что два монитора. На одном смотрю ролик, на втором шпарю как угорелый по кнопкам... Из полезного точно: 1. Повторюсь, но с классами CSS прям отличная штука; 2. Не додумался бы сам рисовать напрямую декор, уже даже все вырезал из макета; 3. Создание готовых шаблонов кода для использования в другом месте с модификаторами (те же функции по сути). 4. Снес нафиг VS Code. Слишком много было накидано всякой фигни в плагинах по незнанию и это мешало нормально работать (что-то с чем-то конфликтовало\неправильно было настроено и тд...). Поставил с чистого листа, настроил по инструкции Евгения. Спасибо за урок Евгений)

[@asmrbutterfly9984]

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

[@ІгорНовак-д5д]

Дякую за класний майстер клас, тепер знаю як робити правильно декоративні елементи, Жека красава, чекатиму ще майстер класів від тебе👍

[@АняБалаба-л3з]

Спасибо Женя, Благодаря тебе я ушла с завода и сейчас сижу дома и работаю удалено!🥰

[@PaulGabow]

Мастер-класс отличный) особенно про классы спасибо. очень удобно. и это, даже интересно, кому-то удалось повторить верстку?)

[@MrKfnmpa]

Как всегда невероятно полезно и познавательно. Спасибо, Жека!

[@vvks9901]

Есть разница как зарабатывать деньги и да они пахнут, но большинство готовы делать что угодно за деньги, не задумываясь пользу или вред они принесут своими действиями. Благодаря таким людям как Женя, нас будет намного больше )))

[@sergmalin210]

Спасибо за урок, пробовал верстать параллельно стриму, но хоть и простой макет, а за тобой не успеваю.

[@anton1775]

Спасибо. Очень поучительно. Есть что для себя выделить и применять на практике)

[@DanielBardyk]

Усе чітко й зрозуміло, дякую за запис!)

[@lxlwut]

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

[@romav3398]

Жека, БОЛЬШОЕ тебе спасибо за то что ты делаешь !!! Стрим очень полезный в том что пройденный материал применяется на практике конкретно что где и почему применять а так же хорошо закрепляется пройденное. Объясняешь ты классно и понятно очень рад что нашел твой канал. 👍👍👍

[@ЕваКорастылева]

[@user-mykyta_vyshniakov]

Невероятно крутой стрим!!! Вы сходу решаете интересные задачи к которым не готовились ))) спасибо за мега полезную инфу.

[@ИльяЗемля-щ3с]

Не поленился пройти по всем видео на канале чтобы лайкнуть и оставить комент. Жека респект!

[@omgpewpew]

Спасибо огромное за этот труд. Очень приятно видеть Ваш позитив во время работы, это мотивирует.

[@mihaeldyachenko9221]

Жека это первый ролик из всех где у меня получилось так же как у тебя )). Всё красиво и ясно получилось. Для новичков то что надо.

[@FredericSeagal]

Как всегда супер! Один из лучших каналов по данной тематике

[@СергейГорст-ь7ч]

Смотрю уже 5 раз, каждый раз нахожу что-то новое. Что бы я без тебя делал!? Спасибо

[@nadirmusayev8885]

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

[@korvet348]

Отлично. Уже 5 раз стартую в IT. Я надеюсь, что ты совсем не такой)

[@AlexSkaeg]

Охрененное видео, все наглядно понятно. Спасибо очень полезно.

[@ДарьяИвлиева-ж1я]

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

[@ИльяКабанов-с1ч]

Жека, приветствую! СПАСИБО за стрим и запись от новичка!! Очень полезный и качественный контент! Превосходный уровень! С наилучшими пожеланиями всех-всех благ!

[@ДаляСадыков]

Женя, ты лучший! Мирного тебе и твоему народу неба над головой’

[@БородинДенис-к8м]

Привет. Кому четыре часа, а кто только с 6-го подхода, с изучением flex, gap, position, transition, vw за почти три дня : - ) Спасибо за обучение! Многое узнал.

[@фролгард]

Проект перспективен и интересен, хороша подача информации. Просто пир Духа.

[@ramwhite3704]

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

[@inet_biznes]

Спасибо большое. Классно, профессионально записан ролик. Качественный звук. Хороший микрофон у автора наверное дорогой)). Вот как нужно записывать уроки. Еще раз большое спасибо!

[@silenciomar]

Евгений, большое спасибо вам за этот урок! Многому научилась!

[@Ирин-ъ6в]

Евгений спасибо за верстку! Желаю чтобы в твоей жизни кофе всегда был горячим !!! )))

[@alexvetrov8029]

Жека, стрим ТОП, хотим еще)))

[@RohanSan-nh1ig]

Боженька науки , Евгений , Вы лучший )

[@serega_vvoi7137]

Дуже добрий курс)))) Адаптив дякую)))

[@katykartasova7889]

Супер!!! Кажется всё просто, пока сама не начинаю верстать. =)

[@elenadymona1473]

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

[@tetianapodleska5575]

На стрим не попала, смотрела в записи. Спасибо, что сохранили запись. Было очень интересно и очень полезно)

[@deepcox4229]

Жека, ты самый правильный чувак-в этом деле!!!!

[@h1d0ra64]

Жаль что нельзя увеличить количество лайков закликиванием. Я бы закликал лайками этот ролик. Благодарю за проделанную работу.

[@НикитаАндреев-д1я]

Спасибо за урок! Как всегда 🔥🔥🔥🔥

[@MetalDazer666]

Сенсей как всегда бесподобен! Огромное спасибо за мастер-класс!

[@AbaiIlyasov]

дуже корисний стрим для новачків👍

[@usmanovmihail]

крестик без javascripta это просто пушка, спасибо тебе ОГРОМНОЕ, очень полезный контент)))

[@ИринаКириченко-т9ч]

Спасибо за стрим! Очень круто и поучительно!