Лабораторная работа 2 "Настройка рабочего окружения для веб-разработки"
1. ЦЕЛЬ РАБОТЫ
Формирование практических навыков настройки современного рабочего окружения для полноценной веб-разработки. Освоение инструментов контроля версий, создание и конфигурация проекта, изучение базовых возможностей интегрированной среды разработки и инструментов проектирования.
2. НЕОБХОДИМЫЕ ЗНАНИЯ
Для успешного выполнения работы студент должен знать:
-
Основы процесса веб-разработки (SDLC).
-
Понятие системы контроля версий и её назначение.
-
Основы работы с командной строкой/терминалом.
-
Назначение основных инструментов веб-разработчика: IDE, Node.js, менеджер пакетов.
3. ЗАДАЧИ РАБОТЫ
-
Установить и настроить базовое программное обеспечение: Node.js, Git, VS Code, Figma.
-
Освоить базовые операции работы с Git через терминал VS Code.
-
Создать структуру веб-проекта и настроить окружение для разработки.
-
Изучить основные возможности VS Code и полезные расширения.
-
Освоить основы работы с Figma для проектирования интерфейсов.
-
Настроить интеграцию между инструментами разработки.
4. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ (Общий для всех вариантов)
Часть 1. Установка базового программного обеспечения
-
Установка Node.js и npm:
-
Перейдите на официальный сайт https://nodejs.org/.
-
Скачайте и установите LTS-версию Node.js.
-
-
-
Откройте терминал в VS Code и выполните команды для проверки установки:
node --version npm --version
-
Зафиксируйте в отчёте полученные версии.
-
-
Установка Git:
-
Перейдите на официальный сайт
https://git-scm.com/. -
Скачайте и установите Git для вашей операционной системы. https://git-scm.com/install/windows
-
-
-
В терминале VS Code проверьте установку:
git --version
-
Настройте глобальные параметры (замените данные на свои):
git config --global user.name "Ваше Имя" git config --global user.email "your_email@example.com"
-
-
Установка и настройка Visual Studio Code:
-
Перейдите на официальный сайтhttps://code.visualstudio.com/.
-
Скачайте и установите VS Code.
-
-
-
После установки, запустите VS Code.
-
-
Знакомство с Figma:
-
Перейдите на https://figma.com и создайте бесплатный аккаунт.
-
Изучите интерфейс Figma: рабочее пространство, панель инструментов, слои.
-
Создайте новый файл и назовите его согласно вашему проекту.
-
Часть 2. Настройка VS Code и установка расширений
-
Изучение интерфейса VS Code:
-
Ознакомьтесь с основными элементами: Панель активности, Боковая панель, Панель редактора, Панель состояния, Терминал.
-
Откройте встроенный терминал с помощью `Ctrl+`` или через меню «Вид» → «Терминал».
-
-
Установка расширений через Marketplace:
-
Перейдите на вкладку «Расширения» (Ctrl+Shift+X).
-
-
-
Установите обязательные расширения:
-
Live Server - для быстрого запуска веб-сервера
-
Auto Rename Tag - для автоматического переименования парных тегов
-
Prettier - Code formatter - для автоматического форматирования кода
-
GitLens - для расширенной работы с Git
-
ES6 String HTML - для подсветки HTML в строках
-
Figma to Code - для интеграции с Figma
-
-
-
Настройка интегрированного терминала:
-
Убедитесь, что терминал VS Code распознает команды Git и npm.
-
Проверьте работу autocomplete в терминале.
-
Часть 3. Создание и настройка проекта
-
Создание структуры проекта:
-
Создайте новую папку для вашего проекта с названием согласно варианту.
-
Откройте эту папку в VS Code через «File» → «Open Folder...».
-
В терминале VS Code создайте структуру папок:
mkdir css js assets images design
-
-
Создание базовых файлов проекта:
-
Создайте файл
index.htmlс базовой HTML5-разметкой:
-
Создайте
css/style.cssс базовыми стилями. -
Создайте
js/script.jsс простым скриптом.
-
-
Работа с Figma:
-
В вашем Figma-файле создайте мудборд (moodboard) для проекта.
-
Определите цветовую палитру и шрифты для проекта.
-
Создайте простой прототип главной страницы вашего проекта.
-
Часть 4. Работа с системой контроля версий через VS Code
-
Инициализация Git-репозитория:
-
В терминале VS Code выполните:
git init -
Создайте файл
.gitignore:echo "node_modules/" >> .gitignore echo ".DS_Store" >> .gitignore echo "*.log" >> .gitignore
-
-
Первый коммит через VS Code:
-
Используйте вкладку Source Control (Ctrl+Shift+G) в VS Code.
-
Добавьте файлы в staging area.
-
Создайте коммит с сообщением "Initial commit: project structure".
-
-
Создание удаленного репозитория:
-
Создайте репозиторий на GitHub/GitLab с названием вашего проекта.
-
В терминале VS Code привяжите удаленный репозиторий:
git remote add origin https://github.com/your-username/your-repo-name.git
-
Отправьте код:
git push -u origin main
-
Часть 5. Интеграция инструментов разработки
-
Настройка Node.js проекта:
-
В терминале VS Code инициализируйте npm-проект:
npm init -y
-
Установите необходимые пакеты:
npm install lodash npm install --save-dev nodemon
-
-
Настройка форматирования кода:
-
Создайте файл
.prettierrcдля настроек форматирования. -
Настройте VS Code для автоматического форматирования при сохранении.
-
-
Интеграция Figma с проектом:
-
Используйте расширение "Figma to Code" для экспорта стилей.
-
Сохраните ссылку на Figma-макет в файл
design/figma-link.txt.
-
Часть 6. Выполнение унифицированного задания
Задание одинаковое для всех вариантов, отличается только тематика проекта
-
Настройка окружения для вашего проекта:
-
Создайте структуру папок, соответствующую вашему типу проекта.
-
Настройте базовые файлы HTML, CSS, JS.
-
-
Работа с системой контроля версий:
-
Инициализируйте Git-репозиторий.
-
Создайте и настройте удаленный репозиторий.
-
Сделайте несколько коммитов через интерфейс VS Code.
-
-
Настройка инструментов разработки:
-
Установите и настройте необходимые расширения VS Code.
-
Настройте форматирование кода с Prettier.
-
Инициализируйте npm-проект и установите базовые зависимости.
-
-
Проектирование в Figma:
-
Создайте цветовую палитру и типографику для вашего проекта.
-
Разработайте прототип главной страницы.
-
Экспортируйте ресурсы для использования в проекте.
-
-
Документирование проекта:
-
Создайте README.md с описанием проекта.
-
Добавьте информацию о используемых технологиях.
-
Укажите ссылки на Figma-макет и репозиторий.
-
5. СОДЕРЖАНИЕ ОТЧЕТА
Отчёт о выполнении лабораторной работы должен содержать:
-
Титульный лист (по Стандарту Предприятия).
-
Цель работы.
-
Краткие теоретические сведения о процессе веб-разработки, системах контроля версий и инструментах разработчика.
-
Ход работы:
-
Описание выполненных действий (по пунктам 4.1-4.6).
-
Скриншоты:
-
Проверка версий Node.js и npm в терминале VS Code.
-
Интерфейс VS Code с открытым проектом и установленными расширениями.
-
Структура проекта в проводнике VS Code.
-
Figma-макет с прототипом страницы.
-
Вкладка Source Control с историей коммитов.
-
Репозиторий на GitHub/GitLab.
-
-
Ссылки:
-
На созданный удаленный репозиторий.
-
На Figma-макет проекта.
-
-
-
Ответы на контрольные вопросы (2 вопроса).
-
Выводы по работе.
6. ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ И СДАЧЕ
-
Выполненное задание и отчет должны быть представлены преподавателю для защиты.
-
Электронная версия отчета (в формате PDF) должна быть загружена в систему СЭО не позднее даты следующего лабораторного занятия.
-
Отчет должен быть оформлен в соответствии с Стандартом Предприятия (СТП).
-
Студенты разбиваются на бригады по 2 человека в пределах своей подгруппы.
-
1 подгруппа: выполняет варианты 1-8.
-
2 подгруппа: выполняет варианты 9-16.
-
Для выбора номера варианта для бригады используется Генератор вариантов.
ТЕМАТИКА ПРОЕКТОВ ПО ВАРИАНТАМ
Для всех вариантов задание одинаковое, меняется только тематика проекта
| Вариант | Тип проекта | Название проекта |
|---|---|---|
| 1 | Новостной портал | "NewsHub" |
| 2 | Интернет-магазин | "TechStore" |
| 3 | Кулинарный блог | "TastyBlog" |
| 4 | Сайт мероприятия | "EventSpace" |
| 5 | Социальная сеть | "SocialSphere" |
| 6 | FAQ система | "HelpDesk" |
| 7 | Портфолио фотографа | "PhotoPortfolio" |
| 8 | Образовательная платформа | "EduPlatform" |
| 9 | Ресторан | "GourmetResto" |
| 10 | Библиотека | "DigitalLibrary" |
| 11 | Киносайт | "MovieHub" |
| 12 | Бронирование отелей | "HotelBooking" |
| 13 | Музыкальный сервис | "MusicStream" |
| 14 | SaaS платформа | "CloudService" |
| 15 | Спортивный портал | "SportArena" |
| 16 | Научный журнал | "ScienceJournal" |
КОНТРОЛЬНЫЕ ВОПРОСЫ
Для всех вариантов вопросы одинаковые
-
Каковы основные преимущества использования интегрированной среды разработки (VS Code) по сравнению с простыми текстовыми редакторами? Какие расширения оказались наиболее полезными при настройке вашего проекта?
-
Как система контроля версий Git интегрируется в процесс разработки в VS Code? Опишите основные этапы работы с репозиторием через интерфейс VS Code и терминал.
-
Какую роль играет Node.js и npm в современной веб-разработке? Какие преимущества дает использование менеджера пакетов в проекте?
-
Как инструменты проектирования (Figma) интегрируются в процесс веб-разработки? Какие возможности Figma наиболее полезны на этапе подготовки к верстке?
-
Какие настройки и конфигурации в VS Code наиболее важны для эффективной работы над веб-проектом? Как организовать рабочее пространство для комфортной разработки?
- 19 января 2026, 10:46
- 19 января 2026, 10:46
- 19 января 2026, 10:46
- 19 января 2026, 10:46
- 19 января 2026, 10:46
- 19 января 2026, 10:46
Состояние ответа
| Состояние ответа на задание | Отправлено для оценивания |
|---|---|
| Состояние оценивания | Оценено |
| Оставшееся время | Ответ на задание представлен заранее - 1 день 20 час. |
| Последнее изменение | среда, 18 февраля 2026, 03:27 |
| Ответ в виде файла |
|
| Комментарии к ответу | Отобразить комментарии Сохранить комментарий | Отмена |
Отзыв
| Оценка | 8,00 / 10,00 |
|---|---|
| Оценено в | среда, 25 февраля 2026, 15:15 |
| Оценено |