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

[@Sweet_and_joy]

Анализ пятого блока 3:55 Структура HTML пятого блока 4:45 Вёрстка пятого блока 12:31 Адаптив пятого блока 35:38 Анализ шестого блока 48:25 Структура HTML шестого блока 50:19 Вёрстка и Адаптив шестого блока 51:08 Структура HTML седьмого блока 58:32 Вёрстка седьмого блока 1:01:17 Адаптив седьмого блока 1:11:12 Структура HTML восьмого блока 1:17:10 Структура HTML девятого блока 1:38:01 Вёрстка девятого блока 1:40:13 Адаптив девятого блока 1:43:21 Структура HTML footer 1:44:55 Вёрстка footer 1:55:40 Адаптив footer 2:05:18

[@Konotopskaya]

Женя, прими щиру подяку за цей чудовий стрім. Навчаюсь верстці по твоїм безкоштовним відео вже 5 місяців і, думаю, що вже багато чому навчилась. Це при умові того, що 5 місяців тому навіть слова верстка не знала що означає і з чим її їдять))) Ти чудовий вчитель. Так тримати!!!

[@Lok1goD]

Женя! Спасибо тебе за твои стримы, смотрю и скилл растёт, просто проговариваю все теги, что куда и зачем я пишу, с утра просыпаюсь и понимаю , что могу уже что то сверстать! Спасибо Жень, от души! Твои уроки шикарны, понятны и любимы! Продолжай нести знания в этот тёмный мир) Благодарю!

[@FreelancerLifeStyle]

Рад что полезно!

[@ИннаЖалковская-й4б]

Спасибо Вам большое, благодаря вашим урокам многое понимаю. СПАСИБО 😀

[@СергійЛитвін-и3г]

Дякую за цей урок. Завдяки йому, нарешті, зрозумів, що таке адаптивна верстка і як її виконувати. До цього взагалі, намагався якось її обійти, обмежувався тільки версткою десктоп екранів.

[@lglebk1449]

Огромное спасибо за стрим! Первый стрим я кое-как повторил. Долго, муторно, с кучей ошибок, но повторил. Зато второй стрим увеличил мою скорость в разы. Я с каждой секундой видел, как я начинаю не только понимать, но даже предугадывать дальнейшие действия. Хотя зачастую все равно предугадывал неправильно))) Повторяя твой проект, я все время ставил комментарии-пояснения для себя в коде. В итоге комментариев с половину кода))) Ты очень крут! Большое спасибо и продолжай!

[@МаксимРуднев-ы9ч]

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

[@yutbchannel]

Женя, хотела сказать, огромное спасибо тебе. посмотрела 2 части и все поняла. Ты очень хорошо все объясняешь, многие вещи, когда-то непонятные, стали ясны как день. спасибо ещё раз огромное!!!!

[@babyn0brah]

Евгений, я вам очень благодарен. Обучаюсь у вас 2 месяца, очень радует ваше старание, мне 16 лет и ваше старание я очень ценю

[@hasanravshanov6856]

Здраствуйте я из Узбекистана. Да полезно делать такие стримы я научился многому через этот стрим. СПАСИБО вам большое !!!

[@НаталияНовицкая-ц5з]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@VIJana79]

Аналогично, тоже в тетрадку все примеры фиксирую.

[@stuff5738]

Буду ждать больше подобных видео! Очень интересно и познавательно, а различные лайфхаки во время самого процесса вообще бесценны. Спасибо вам, Жека, за то, что вы есть)))

[@EvilYou]

да, это лучший видос по верстке по макету среди видосов на чистом css. 4 раз уже верстаю этот макет за это лето ) P.S Подобные если и будут, то не скоро. Во всяком случае, не на русском языке точно.

[@deepcox4229]

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

[@АндрейСереда-н8х]

Привет. Как успехи? Я в том же возрастном сегменте ) Недавно ступил на стезю front-enda. Двигаюсь дальше. Ты уже сверстал свои пару страничек? Начальной тяги хватает или нет? Чем мотивируешься?

[@b2tf676]

@@АндрейСереда-н8х А как ваши дела ? У вас есть успехи ?

[@АндрейСереда-н8х]

@@b2tf676 Был перерыв около месяца, изучаю JS. Проблема в том, что надо уделять больше времени и практики. Не всегда хватает время, пока не здаюсь. Думаю через месяц, два начать искать работу

[@b2tf676]

@@АндрейСереда-н8х Удачи вам !

[@АртурПогоріляк]

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

[@serhiisolovtsev1952]

Женя, спасибо! Очень все доходчиво объясняешь. У меня всегда была проблема с разбитием блоков. Теперь стало намного яснее!

[@Катерина-з2м5ю]

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

[@ynwa2290]

Дуже дякую за інформативне відео. Для мене як для новачка було дуже корисно, адже я побачив, що можна зверстати сайт навіть без великої кількості знань. Всього найкращого

[@alisabolgar4926]

Спасибо, Жека! Макет вроде бы несложный, но куча полезных вещей. Хочу его теперь сверстать, чтобы закрепить знания.

[@hichico325]

Жека ты молодчина! Спасибо тебе за всё.

[@РусскийГитарист-к9ф]

Огромное спасибо, Евгений!!! Ты мне очень помогаешь во всем, я учусь на твоих уроках, стримах и тд... , в каждом видео очень много полезного... Еще раз огромное спасибо... Благодарен тебе за твои старания... Дай Бог тебе, всего самого наилучшего!!!

[@dariabannaya2681]

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

[@ТатьянаЯрцева-ч1я]

JОчень нужны такие стримы)) В голове всё в порядок приводит)

[@TheTempest_]

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

[@reina_5425]

Спасибо большое за такой подробный разбор. Выявила для себя новые лайфхаки 🙂 Побольше таких видео, очень полезно для таких новичков как и я)

[@АлександрКорольков-ъ7о]

Однозначно такие стримы нужны, важны и полезны! А для новичков особенно ...

[@СергейСуворов-ч7ъ]

Спасибо за науку ! Понятно, доступно Пожелание от новичка: включайте пожалуйста JS и в проекты для новичков Уверен, с вашими комментариями, пояснениями сможем разобраться и JS-код не только не отпугнёт, но даже понравится и точно украсит любой проект

[@Sweet_and_joy]

Зачем кнопке 1:42:20 display-flex?

[@azatgilmutdinov7601]

чтобы легко отцентровать контент внутри кнопки

[@enterkvas]

Большое спасибо! Думаю, когда чувствуешь, что "тупишь" во время стрима, то нужно поглядывать почаще в чат. Там - подсказки. Это, как в шахматах: со стороны всегда виднее ситуацию на доске. Так и здесь. 2:10:17: поставил 2 подряд медиазапроса на 992 (скопировал из предыдущего медиазапроса и не поменял на 700), а пытался увидеть результат как на 700. Я смотрел в записи, но в чате увидел подсказку. Которая так и осталась незамеченной. Думаю, для новичков это будет сложновато. Тем более, на такой скорости и в такой неразберихе в css: в одном файле, всё подряд - блоки, медиазапросы. Но тем и хорош этот формат, что все можно пересмотреть на разной скорости, подразжевать. Для меня это было очень, очень полезно. Тем более, когда я разлюбил препроцессоры, сборщики (у которых каждую секунду что-то меняется, что-то перестает поддерживаться и т.п.) и пытаюсь нативить, где можно . Большое еще раз спасибо. Успехов!

[@alexpro7033]

Спасибо! Ждём новых выпусков!

[@Записи-л7у]

Медиазапросами идет привязка к ширине вьюпорта и это во многом является проблемой для БЭМ структуры блоков. Дело в том, что теряется независимость блока, который может быть использован многократно где угодно и блок по методологии БЭМ должен быть независимым, т.е. не должен ничего знать о том, где он будет использоваться. Такому независимому блоку нужно адаптировать свои элементы не на основании вьюпорта, а на основании ширины контейнера, куда он будет помещен. Мы решили эту проблему в своей БЭМ-реализации путем прописывания атрибута data-beakpoints со значениями типа "1200, 1024, 600, 400" и далее JS уже творит чудеса, создавая необходимы модификаторы для описанных точек излома. И это очень классно работает. Теперь блок действительно обрел независимость и стал адаптивным - без разницы куда он будет помещен.

[@Andrey_Mendel]

Ну сделайте видео реализации)))

[@bessyaka.production]

Спасибо Вам огромное! Досмотрела бесплатный курс до Скриптов и все понятно! Иногда просто по невнимательности возникают ошибки. А так все просто Супер!!!

[@ИльяГурин-з8б]

Жека, спасибо тебе огромное! Благодаря твоему каналу столько вопросов разобрал непонятных для себя. Круть!

[@hasanravshanov6856]

Я не довно начал учить IT и вся наша Академия смотрит ваши уроки стримы и как вы верстаете нам это очень нравиться и интересною. Иногда наш учитель даёт самостоятельную работу мы все смотрим ваши уроки и сдаем самостоятельную даже наш учитель предлогает и настаивает смотреть эти видео. СПАСИБО ОГРОМНОЕ !!!

[@NP-wc7ze]

Вот поэтому я не пошел в академию. В бесплатном доступе крутейшие приподаватели и Жека пожалуй лучший из них.

[@Тысячаиодинтест]

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

[@chiromotivation9729]

Женя топовий викладач )! дякую за інфу )

[@dENI-fe3ci]

Кюсі! Закінчив макетик. Було дуже корисно!

[@justfisher2920]

Ты лучший, я в 2022 и учусь верстать, хотя раннее я изучал самостоятельно Python всё доходчиво и прозрачно объясняешь, легко начал усваивать вёрстку т.к. свободно владею английским, и есть понимание небольшое исходя из питона. Буду смотреть твои видосы, круто)))

[@shukonfadah5725]

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

[@al_pav8521]

Очень классные и нужные стримы. Подписался на все твои каналы, лайк всем твоим урокам которые посмотрел. жду от тебя новых стримов по верстке для новичков.))) Спасибо тебе Женя, Ты делаешь очень классное и нужное дело!

[@haze-mi9ns]

Спасибо большое за стрим, что то сделал даже сам. Понял как делается адаптивная вёрстка. Спасибо так же за курс, очень полезно и информативно, мне 15 и я планирую стать фронтом, твои курсы в этом отлично помогают, спасибо!

[@ДаянУсманов-и4ы]

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

[@mishamisha1850]

Евгений, спасибо большое за вашу работу. Все очень доходчиво объясняете. С радостью смотрю ваш материал.

[@pavelmalorodnov2078]

Женя спасибо тебе большое за твои уроки, привет из Беларуси, Украине желаю только добра

[@НатальяВоробьева-ъ4е2м]

Жалко, что нельзя лайкнуть/поблагодарить Вас каждый раз, когда возвращаешься к тому или иному Вашему видео )) Спасибо

[@javlonbekerkinov8460]

Здравствуйте, меня зовут Жавлонбек. Уроки, которые вы посещаете, великолепны. Я слежу и изучаю ваши уроки из Узбекистана. Большое спасибо за полезные уроки. Приглашаю вас в Узбекистан, где вы сможете познакомиться с историческими памятниками, Бухарой, Хивой, Самаркандом, Ташкентом и другими местами. Я только что выучил русский язык, извините за ошибки и недочеты

[@Sweet_and_joy]

А почему клиенты 52:30 прописываются через проценты flex: 0 1 16.6667%, а не через justify-content: space-between; ? Кто-то знает?

[@Ирин-ъ6в]

Спасибо! Все верстаю вместе с тобой только с использованием scss и переменные, под запись!

[@FreelancerLifeStyle]

Пожалуйста!

[@rostyslavreal]

Спасибо, за запись стрима и подробный разбор. Очень познавательная информация и много различных лайфхаков. Удачи в дальнейших проектах!

[@vikalapova8159]

Дуже гарно. Дякуююю.

[@igorfeticov]

Как всегда все понятно, полезно и интересно. Спасибо за твои труды)

[@tarasrachuk8097]

Дякую за урок! З нетерпінням чекаю на новий!

[@АлександрЖуравлев-ы8т]

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

[@Elena_Petrenko]

Евгений, благодарю за видео!

[@SirJoker91]

классный стрим!сил и удачи в новом году!

[@ВикаОношко-л8ж]

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

[@meiirzhanilesh7347]

1:04:35 процентный line-heigth: 133% вы дали к font-size поэтому размер шрифта был меньшим

[@subind.8126]

только что тоже заметил думаю почитаю коменты или еще кто то увидел

[@ТетянаПересипкіна]

Как же все доступно изложено. Материал очень высокого качества. Спасибо!

[@галинабабаян-с1в]

Евгений, спасибо вам оромное!

[@МарияКашпур-з3б]

Лайк за доступное объяснение. И большое человеческое спасибо.

[@ИринаШириевская]

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

[@FreelancerLifeStyle]

Будут!

[@evgenia6124]

Большое спасибо за познавательный стрим. Смотрю и верстаю уже после его выпуска, многое для себя отметила. НО все терзает один момент - как каждый раз считаешь % для line-height. В фигме, прямо под значением пикселей, серым текстом указано соответствующее значение в %.

[@stronik89]

Дякую за твою працю.👍 Роби будь ласка такі верстки по частіше.

[@arturmamyshev3667]

Огромное спасибо за обучающее видео!! Хотя, мне не всё было понятно, но я многое для себя вынес.

[@maftunaazimzonova2302]

я многому научилось 😊 спасибо тебе огромное и удачи и успехов👍

[@ОльгаЛеонтьева-ц3з]

Женяяя!!! Спасибо тебе за труд !!!

[@ТетянаБукорос-р5ю]

Найкращий канал на Ютубі)))

[@truth4047]

Спасибо, информативно, нам это помогает. Мы на повторе ещё все повторяем, разбираем. Я недавно начала смотреть, очень интересно. 👍

[@DRVOSSEN]

Первая часть огонь! Спасибо! Однако по просмотрам многие не дошли до второй :D

[@SuperRAilya]

15:27 * column video fb 0 0 per(600,1046), column content f11a(если видео уберут чтобы встала на всю ширину) * ibg для того чтобы сделать видео квадратным, как в макете. задал высоту размерозадающим padding. (комментарий для себя)

[@mr.matvieiev3653]

крутой контент) по больше таких видео нужно )

[@РавшанУмаров-м9е]

Жека большой молодец! Искренне благодарствую за проделанную работу. Интересно было бы узнать ещё о CSS переменных. Стоит ли их применять, и если да, то как и когда?

[@СергейПресняков-о4р]

Когда значение используется несколько раз в разных местах. Например основные цвета темы. И тогда не придется помнить и писать коды цветов, а просто var(--color-main), var(--color-secondary) и тд

[@Евгений-н2л8з]

Привет , я благодарен тебе безмерно . Спасибо большое

[@FreelancerLifeStyle]

Пожалуйста!

[@АлександраТанташева-ч8и]

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

[@captainpers5003]

1:30:00 Вроде line-height в фигме в пикселях дано, а снизу закоментировано в процентах) (по крайней мере в этом макете)

[@beehivevfx]

Щиро дякую за Вашу роботу!

[@МаксимАртемьев-з2д]

Жека твои лайфхаки это магия!!!!!!!!!!!

[@maxkalashnyk3378]

1:09:20 декоративна лінія, 1:14:45 два оступа в один

[@Марква-щ4ы]

Очень полезная штука была озвучена на 17:45, спасибо

[@dennyluckes4783]

Привет, хотелось бы видео о том как ужить несколько JS-библиотек вместе, к примеру Fancybox с Magnific на больших лендосах, где есть и галереи и попапы. Спасибо.

[@AntoinRus]

Шикарно! Все подробно разжёвано!))

[@АлександрСавостин-н4к]

Спасибо большое за ваш труд

[@Luchok523]

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

[@jamesmay5088]

Прм-прм-прм-прм-прм-прм ... и не лахмачу бабушку:) Лучший момент)

[@tiberseptim7183]

Красавчик. Спасибо за урок!

[@o_antushevich]

Спасибо за отличный стрим!

[@vasylst4241]

Спасибо большое! только пробую разобраться, но все доступно и понятно подано!

[@dvsbreitmann4914]

Жека ты умница! Спасибо тебе за всё.

[@FreelancerLifeStyle]

Пожалуйста!

[@dvsbreitmann4914]

@@FreelancerLifeStyle Блин ну как ты на это все отвечаешь?) У тебя человек на зп? Курс, семья, соцсети, KZbin, чаты, каналы, как?)) Сделай пожалуйста урок по time management )))))

[@yehorkolpashchikov334]

Жека красава! Удачи!

[@alien2364]

Спасибо! Очень хочется попасть на прямой стрим, но увы, работаю

[@maxxnuzhnykh6407]

Скажите, пожалуйста, а в каком обучающем видео можно посмотреть про "Размерозадающий процентный padding"?

[@Vladimir-zp4kw]

такие стримы конечно делай очень помагает в тренировке

[@Дмитрий-л4с9х]

Очень полезно! Большое спасибо!

[@Krasnovats]

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

[@kirlleyd3258]

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

[@ВасяВася-ч8э]

Подскажите, пожалуйста, почему высота блока с видео делалась при помощи padding-bottom, а не height? спасибо

[@zolrux]

Огромное тебе спасибо! Очень сильно помогаешь

[@elvindesign6350]

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

[@jonjonsan1036]

Благодарствую!!!)))

[@АлександрКорниленков]

ДЯКУЮ😄😄😄😄😄

[@АннаФилиппова-ж7т]

Добрый вечер. Спасибо за ваше видео! Очень все круто! Но вот ссылка на макет в Figma у вас не работает. Можете поделиться еще раз, пожалуйста!!!

[@direvi6502]

Жека сними видео о памяти, как запоминать так много информации, или это все практика.. Благодарю