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

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную HTML CSS верстку простого макета FIGMA с кучей полезных решений и лайвхаков!

❓❓ Хотите чтобы стрим остался в записи?
И ЖМЁМ ЛАЙК! :)

Полезные ссылки:

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[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

[xkjfqrp]

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

[dariabannaya]

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

[lglebk]

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

[mnnmlfk]

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

[stuff]

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

[ijambookvia]

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

[LokgoD]

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

[reina_]

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

[yusnhdm]

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

[alisabolgar]

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

[serhiisolovtsev]

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

[msjwqdh]

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

[hichico]

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

[qkghcnt]

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

[deepcox]

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

[al_pav]

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

[kunksfj]

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

[igorfeticov]

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

[lqtdkpn]

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