Адаптивная HTML SCSS верстка сайта из Figma лендинга жилого комплекса LoftHouse.
Верстка по пакету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. JS скрипты для маски номера телефона, скрипт для youtube lightbox видео, скрипт для yandex карты с кастомным пином, тонкой CSS стилизацией и JS настройкой карты.
Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается.
Содержание
Видео урок
Макет
Материалы к уроку
Ссылки
- Плагин LiveSass Compiler для сборки SCSS в VS Code
- Сброс стилей reset.css
- Сниппеты в VS Code
- Набор CSS сниппетов VS Code
- Быстрое копирование CSS классов. Плагин eCSStractor
- Моя настройка VS Code
Мои настройки для Live SASS Compiler
"liveSassCompile.settings.showOutputWindowOn": "None",
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
}
],Сниппет для миксина с медиазапросом
/* Media Tablet */
"mediaTablet": {
"scope": "css,scss",
"prefix": "tablet",
"body": ["@include mediaTablet {", " ${1}", "}"],
"description": "mediaTablet"
},
