ВЕРСТКА САЙТА ИЗ FIGMA С НУЛЯ ДЛЯ НАЧИНАЮЩИХ | HTML, SCSS, FLEXBOX, GIT | ЧАСТЬ 1

⬥Telegram-канал: https://t.me/maxim_webdev
⬥Instagram:   / maxim_webdev  

В этом видео мы будем разрабатывать макет из FIGMA с нуля. Будут использованы такие технологии и сервисы, как HTML, SCSS, Flexbox, GIT, GitHUB, NPM и др. Если вы с какой-либо из этих технологий не работали, то ничего страшного. По мере просмотра видео мы будем разбираться с ними. Также внизу в описании вы можете найти полезные ссылки, которые вам помогут в верстке данного макета.

———————————
ПОЛЕЗНЫЕ ССЫЛКИ И МАТЕРИЛЫ ИЗ ВИДЕО:
1. GitHub-репозиторий с кодом: https://github.com/M-fil/chairs-shop-...
2. Команды для запуска node-sass и browser-sync:

"styles": "node-sass -w ./src/scss -o ./src/css --recursive"
"browsersync": "browser-sync start --server --files '**/*'"

3. Документация по методологии BEM: https://ru.bem.info/methodology/quick...
4. Игра "FlexBox Froggy" для изучения технологии FlexBox: https://flexboxfroggy.com/
5. Макет в Figma: https://www.figma.com/file/glve4jU7GH...
6. Что такое origin в git push origin и git pull origin?
Если вы напишите команду git remote -v в терминале, то увидите следующее:

origin https://github.com/M-fil/chairs-shop-... (fetch)
origin https://github.com/M-fil/chairs-shop-... (push)

Соответсвенно, origin заменяет прямую ссылку на GITHUB-репозиторий.
7. Основные команды GIT: https://www.hostinger.ru/rukovodstva/...
8. Установка NODEJS (нужен для работы NPM): https://nodejs.org/en/
9. Установка GIT: https://git-scm.com/downloads](https://git-scm.com/downloads

———————————
ТАЙМКОДЫ:
00:00 - Начало видео.
00:32 - Инициализация проекта на GitHub. Клонирование репозитория. Создание ветки develop.
06:27 - Составляем структуру проекта. Создаем начальные файлы.
13:48 - Разбираемся, что такое SCSS.
16:08 - Устанавливаем библиотеку node-sass для преобразования CSS-файлов в SCSS.
28:41 - установка библиотеки browser-sync для автоматического обновления веб-страницы после сохранения любого файла в проекте
33:39 - Разделяем сайт на блоки, выделяем повторяющиеся элементы, создаем переменные для цветов в SCSS.
51:34 - Добавляем глобальные стили в файл _global.scss
56:36 - Верстаем блок header-navigation
01:13:40 - Верстаем блок header