Примечание: Этот проект НЕ требует постоянных обновлений кода.
Статус Проекта: 🟩 Актуален.
Целью данной работы является реализация адаптивной вёрстки по макету из Figma.
Вёрстка являестся адаптивной.
Очень маленькие экраны (width: 444px):
Маленькие экраны (width: 600px):
Средние экраны (width: 900px):
Большие экраны (width: 1920px):
В проекте был использован следующий стек технологий:
Клонируем удалённый репозиторий на локальную машину и устанавливаем все необходимые компоненты:
git clone https://github.com/Nico-kun123/html-layout-1
cd html-layout-1
npm install
Содержание package.json
:
{
"name": "verstka",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"build:preview": "npm run build && npm run preview",
"deploy": "npm run build && gh-pages -d dist"
},
"devDependencies": {
"gh-pages": "^6.1.1",
"typescript": "^5.2.2",
"vite": "^5.2.0"
}
}
В проекте есть следующие разделы:
- devDependencies: Это пакеты, которые нужны только для разработки и тестирования приложения. Они не будут включены в окончательную сборку приложения.
В проекте есть следующие скрипты:
- "dev". Этот скрипт запускает сервер разработки Vite на локальной машине;
- "build". Этот скрипт используется для сборки проекта для production. Он минимизирует и оптимизирует код для лучшей производительности в production;
- "preview". Этот скрипт предназначен для предварительного просмотра собранного проекта. Он запускает сервер, который позволяет увидеть, как он будет выглядеть и работать в production;
- "build:preview". Этот скрипт запускает 2 других скрипта: "build" и "preview";
- "deploy". Этот скрипт сначала собирает проект, а затем развертывает его на "GitHub Pages".
Кудрявцев Николай (Электронная почта: nicolay.kudryavtsev@gmail.com)