ВЁРСТКА ПО МАКЕТУ ИЗ FIGMA

Примечание: Этот проект НЕ требует постоянных обновлений кода.

Статус Проекта: 🟩 Актуален.

📑Содержание

Цели и Задачи
Скриншоты
Стек технологий
Установка

❗ Цели и задачи

Целью данной работы является реализация адаптивной вёрстки по макету из 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)