Вёрстка сайта с нуля: создаём простую страницу на HTML и CSS

Друзья, вы можете больше узнать обо мне и моих услугах на сайте https://sigeev.ru

Также вы можете сразу узнать о интересующей вас услуге:

Менторство: https://sigeev.ru/#/services/mentoring
Консультация: https://sigeev.ru/#/services/consulta...
Тестовое собеседование (frontend): https://sigeev.ru/#/services/tech-int...

tg-канал: https://t.me/sigeev_frontend

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

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

tg-канал: https://t.me/+RIFfH6Wx0GdlYmFi

Дизайн: https://www.figma.com/community/file/...
Код: https://github.com/alex173828/simple_...
Методология BEM: https://ru.bem.info/methodology/quick...
Google fonts: https://fonts.google.com/

Плагины для vs code:

Live server: https://marketplace.visualstudio.com/...
Prettier: https://marketplace.visualstudio.com/...


Таймкоды:

00:00 - Введение
01:26 - Готовим изображения и иконки
4:59 - Готовим шрифты
7:29 - Разбираемся с цветами и компонентами
10:38 - Создаем проект
12:43 - Оптимизируем изображения
15:00 - Переносим шрифты
17:06 - Советую полезные плагины
18:27 - Фишки для быстрой разметки
20:43 - Создаем HTML-разметку
36:59 - Подключаем шрифты
39:48 - Создаем CSS-переменные
42:30 - Описываем базовые стили
44:33 - Алгоритм стилизации страницы
45:36 - Пишем стили для layout
51:02 - Задаем отступы
01:02:28 - Задаем размеры
01:09:51 - Задаем шрифты и размеры
1:13:18 - Стилизуем декоративные элементы и исправляем недочеты
1:23:58 - Немного про интерактивные элементы на странице
1:24:24 - Поздравляю, мы это сделали. Подписывайтесь и ставьте лайки :)


Музыка на фоне:

Adrift Among Infinite Stars by Scott Buckley | www.scottbuckley.com.au
Music promoted by https://www.chosic.com/free-music/all/
Creative Commons CC BY 4.0
https://creativecommons.org/licenses/...