Запись на наставничество, консультацию, или тестовое собеседование: https://sigeev.ru/
В этом видео мы шаг за шагом сверстаем лендинг на чистом HTML и CSS. Я расскажу полезные фишки для ускорения верстки, а также поделюсь другими лайфхаками в процессе разработки. Приятного просмотра)
Полезные ссылки:
tg-канал: https://t.me/+RIFfH6Wx0GdlYmFi
Дизайн: https://www.figma.com/community/file/946944225031473055/personal-portfolio-website-template
Код: https://github.com/alex173828/simple_portfolio_landing
Методология BEM: https://ru.bem.info/methodology/quick-start/
Google fonts: https://fonts.google.com/
Плагины для vs code:
Live server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Таймкоды:
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/by/4.0/