Базовое веб-приложение (HTML/CSS/JS)

Это стартовый шаблон для разработки веб-приложения на чистых технологиях: HTML5, CSS3 и JavaScript (Vanilla JS).

Структура проекта

/
├── index.html          # Главная страница приложения
├── css/                # Стили приложения
│   ├── style.css       # Точка входа (импортирует остальные файлы)
│   ├── base/           # Базовые стили и шрифты
│   ├── layout/         # Структура страницы (header, footer)
│   └── components/     # UI компоненты (кнопки, карточки)
├── js/
│   └── app.js          # Основная логика приложения
├── assets/
│   ├── images/         # Папка для изображений
│   └── fonts/          # Папка для шрифтов
└── README.md           # Документация

Архитектура CSS

Проект использует модульную структуру CSS. Главный файл css/style.css не содержит стилей, а только импортирует модули из подпапок:

• base/: base.css (сброс, body), fonts.css (подключение шрифтов).
• layout/: layout.css (основные блоки страницы: header, main, footer).
• components/: components.css (UI элементы: кнопки, формы, карточки).

Для добавления новых стилей рекомендуется создать новый файл в соответствующей папке и подключить его в style.css через @import.

Как запустить

1. Простой способ: Просто откройте файл index.html в любом современном браузере.
2. Для разработки (рекомендуется): Используйте локальный сервер, так как некоторые функции JS (например, ES6 модули или Fetch API) могут не работать при открытии файла напрямую (file://).
   • В VS Code установите расширение Live Server.
   • Нажмите правой кнопкой мыши на index.html и выберите "Open with Live Server".

Подключение сторонних библиотек

Поскольку проект не использует сборщики (Webpack, Vite и т.д.) и пакетные менеджеры (npm), библиотеки подключаются напрямую в HTML или через ES-модули.

Способ 1: Использование CDN (Самый простой)

Для подключения библиотеки добавьте тег <script> или <link> (для CSS) в файл index.html.

Пример подключения Bootstrap (CSS): Добавьте в <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Пример подключения Axios (JS для запросов): Добавьте перед закрывающим тегом </body> и перед вашим скриптом:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="js/app.js"></script>

Теперь объект axios будет доступен глобально в вашем app.js.

Способ 2: Локальное подключение

1. Скачайте .js или .css файлы библиотеки.
2. Положите их в папку js/vendor/ или css/vendor/ (рекомендуется создать подпапки для стороннего кода).
3. Подключите их в index.html так же, как и свои файлы:

<script src="js/vendor/library-name.js"></script>
<script src="js/app.js"></script>

Способ 3: ES Модули (Современный подход)

Вы можете использовать import прямо в браузере, если библиотека поддерживает ES-модули.

1. В index.html добавьте атрибут type="module" к вашему скрипту:

<script type="module" src="js/app.js"></script>

2. В js/app.js импортируйте библиотеку по URL:

import { createPopper } from 'https://unpkg.com/@popperjs/core@2/dist/esm/index.js';

// Ваша логика

Дальнейшая разработка

• CSS: Для удобства можно разбить стили на несколько файлов (например, header.css, footer.css) и подключать их в index.html по отдельности, либо использовать @import в style.css.
• JS: Если код разрастается, разбивайте его на модули и используйте синтаксис import/export (см. Способ 3 выше).