Вёрстка сайта с 0 до результата | HTML, SCSS, БЭМ — Подробное ПОШАГОВОЕ объяснение | Часть 1

✏️ Первая часть мастер-класса по верстке лендинга по БЭМ методологии с применением препроцессора Sass на диалекте SCSS. Подготоавливаем файловую структуру, анализируем макет, готовим шрифты, миксины, медиазапросы, утилитарные и глобальные классы. Верстаем шапку, секции hero и services.

🔴 Timeline:
▶ 00:00​ | Вступление
▶ 00:32​ | Подготовка файловой структуры
▶ 02:32​ | Нормализация стилей
▶ 04:30​ | Анализ макета, заполнение глобальных CSS-переменных
▶ 09:45​ | Подключение шрифтов
▶ 11:45​ | Подготовка миксинов
▶ 16:09​ | Миксины медиазапросов
▶ 21:22​ | Утилитарные классы
▶ 23:27​ | Глобальные стили
▶ 27:22​ | Шапка страницы — разметка
▶ 36:02​ | Шапка страницы — стилизация
▶ 43:02​ | Шапка страницы — адаптация
▶ 56:50​ | Секция Hero — разметка
▶ 01:02:52​ | Секция Hero — стилизация
▶ 01:07:21​ | Секция Hero — адаптация
▶ 01:19:24​ | Секция Services — разметка
▶ 01:27:59 | Секция Services — стилизация
▶ 01:45:28 | Секция Services — адаптация

📚 Ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #верстка #версткасайтов

[AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:


Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[polka.dot.]

Спасибо огромное за уроки! Ценнейший материал, даже на англоговорящем Ютубе ему нет ровни! Я очень рада, что учу прямо в то же время, что вы выпускает ролики. Мотивирует! ❤

[LAMit]

Первая часть великолепна. Много нового узнал. А подход к структуре просто супер!

[ArtemAtari]

Видео на 2 часа смотрел часов 10 (останавливался на каждой новой строчке кода, смотрел, что меняется, оставлял в проекте коммент и запускал дальше). Полет нормальный! Спасибо!

[artur_interes]

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

[МаксимСотников-юу]

Александр, спасибо за труды. Благодаря вам я здорово прокачал вёрстку, каждый день узнаю какие-то новые нюансы, подходы.
Преимущество вашего материала это тщательная подготовка текста, что делает его всеобьемлющим и исключает воду. Так же чувствуется, что код продакшн уровня. В свободном доступе такое найти очень сложно. Надеюсь увидеть такой же материал и по React, без воды, тудушек, сразу и по возрослому))

[ajoq]

Бриллиант среди подобных видео по тематике! Спасибо за контент)

[placid]

Александр, ваши уроки - это божественная эссенция лучшего учебного материала и вашего опыта! Я прошел через курсы скилбокс, но там по верстке дали не больше половины того, что вы показали в этом уроке. С удовольствием впитываю все нюансы и тонкости верстки, которые вы рассказываете в процессе работы. Очень хорошо, что объясняете каждый блок кода, почему написали вот так и т.д. Это очень помогает понять множество вещей и увидеть картину в целом. Безмерно благодарен вам за ваш труд!

[kaiju]

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

[Michaelmoises-rv]

Лучше один раз увидеть, чем сто раз услышать.Все просто и понятно.

[cryfos]

Очень классный урок! Интересно посмотреть. Узнал для себя много нового. Спасибо <3

[prodzaha]

Это просто прекрасно! Спасибо за такой контент.

[Airat]

Саша, ОГРОМНОЕ СПАСИБО!!! Много полезного и нового узнал для себя

[mourat]

Давно так вкусно не смотрел. Спасибо 👍

[Kotovar]

Только начал смотреть, уже много полезного узнал. Большое спасибо)

[SkarkS]

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

[Quantum-of]

Контент топ, вставки, зум кода и тд, очень удобно

[hattori]

Спасибо за видео! Скорее бы уже джаваскрипт и фреймворки, хтмл и цсс все такие быстро осваиваются 😊

[Pavelius]

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

[mourat]

На 45:20 ты уменьшил кнопку без медиа запроса, значит не для планшета, а вообще. Не по макету получается. Править уже поздно, так для информации, тем кто будет верстать по видео.