# Основы веб-технологий | Web Technologies

> Репозиторий лабораторных работ по дисциплине "Основы веб-технологий"

[![HTML](https://img.shields.io/badge/HTML5-E34F26?style=flat&logo=html5&logoColor=white)](https://developer.mozilla.org/ru/docs/Web/HTML)
[![CSS](https://img.shields.io/badge/CSS3-1572B6?style=flat&logo=css3&logoColor=white)](https://developer.mozilla.org/ru/docs/Web/CSS)
[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black)](https://developer.mozilla.org/ru/docs/Web/JavaScript)

## Описание проекта

Комплексный учебный проект, демонстрирующий прогрессивное освоение современных веб-технологий через практическую разработку полнофункционального веб-приложения для сервиса доставки здорового питания "ЭкоЛанч".

**Веб-сайт проекта:** [web-tech.deev.space](https://web-tech.deev.space)

## Архитектура курса

### Тематический план:

- **Основы HTML и CSS** | Базовая семантическая разметка и стилизация (лаб. 1)
- **CSS Box Model / Flexbox** | Блочная модель документа и адаптивные сетки  (лаб. 2)
- **HTML Forms** | Работа с формами и валидация (лаб. 3)
- **JavaScript Fundamentals** | Введение в программирование на JavaScript (лаб. 4)
- **Browser Environment** | Браузерное окружение и DOM API (лаб. 5 и 6)
- **JSON и AJAX** | Асинхронное взаимодействие с сервером (лаб. 7, 8 и 9)
- **Bootstrap Framework** | Компонентный подход к разработке интерфейсов (лаб. 10)

## Структура репозитория

```
web-tech/
├── index.html             # Главная страница навигации
├── .htaccess              # Редирект с домена на index.html
└── labs/
    ├── lab-01/            # Базовая HTML-структура
    ├── lab-02/            # CSS Flexbox и адаптивность
    ├── lab-03/            # HTML-формы
    ├── lab-04/            # JavaScript и DOM
    ├── lab-05/            # Динамическая генерация контента
    ├── lab-06/            # Обработка событий
    ├── lab-07/            # AJAX и асинхронность
    ├── lab-08/            # JSON и API
    ├── lab-09/            # Bootstrap интеграция
    └── lab-10/            # Финальная интеграция

```

## Ключевые технологии

### Frontend Stack
- **HTML5** — семантическая разметка
- **CSS3** — современные техники стилизации (Flexbox, Grid, адаптивность)
- **JavaScript (ES6+)** — интерактивность и бизнес-логика
- **Bootstrap 5** — UI-фреймворк

### Инструменты разработки
- **ESLint** — статический анализ кода JavaScript
- **HTMLHint** — валидация HTML-разметки
- **Git** — система контроля версий
- **Visual Studio Code** — интегрированная среда разработки

## Эволюция проекта

- **Lab 01:** Базовая HTML-разметка и CSS-стилизация
- **Lab 02:** Адаптивная сетка с Flexbox и Grid
- **Lab 03:** HTML-формы с валидацией данных
- **Lab 04:** Динамическая генерация контента через JavaScript
- **Lab 05:** Фильтрация блюд по категориям
- **Lab 06:** Валидация заказа и модальные уведомления
- **Lab 07:** Асинхронная загрузка данных с сервера
- **Lab 08:** LocalStorage и оформление заказа
- **Lab 09:** Управление заказами через REST API
- **Lab 10:** Адаптивный лендинг на Bootstrap

## Система оценивания

- **Лабораторные работы:** 10 × 10% = 100%
- **Рубежные контроли:** РК1 + РК2
- **Тестирование:** 5 тестов (20 вопросов)
- **Итоговый проект:** Экзаменационная работа

**Критерии оценки:**
- 85+ баллов → Отлично (5)
- 75-84 балла → Хорошо (4)
- 60-74 балла → Удовлетворительно (3)

## Учебно-методические материалы

### Основные ресурсы
- [MDN Web Docs](https://developer.mozilla.org/ru/) — полная веб-документация
- [JavaScript.ru](https://learn.javascript.ru/) — современный учебник
- [HTML Academy](https://htmlacademy.ru/) — интерактивные курсы
- [Bootstrap Documentation](https://getbootstrap.com/docs/) — официальная документация

### Стандарты и спецификации
- [HTML Living Standard](https://html.spec.whatwg.org/multipage/)
- [W3C CSS](https://www.w3.org/Style/CSS/)
- [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)

## Преподавательский состав

- **Мохначев Виктор Сергеевич** — [@gagashaggy](https://github.com/gagashaggy)
- **Ашрафи Арифа** — [@Arifaa13](https://github.com/Arifaa13)

## Лицензия и использование

Данный репозиторий создан в образовательных целях. Код доступен для изучения и адаптации без указания авторства.

---

<div align="center">
  <sub>⭐ Если проект оказался полезным, поставьте звездочку на GitHub!</sub>
  <p><sub>Создано с ❤️ от вашего дорогого - <a href="https://deev.space">deev.space</a> ©</sub></p>
</div>