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

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

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

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

Веб-сайт проекта: 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 — полная веб-документация
• JavaScript.ru — современный учебник
• HTML Academy — интерактивные курсы
• Bootstrap Documentation — официальная документация

Стандарты и спецификации

• HTML Living Standard
• W3C CSS
• Google HTML/CSS Style Guide

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

• Мохначев Виктор Сергеевич — @gagashaggy
• Ашрафи Арифа — @Arifaa13

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

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

---

_{⭐ Если проект оказался полезным, поставьте звездочку на GitHub!}

_{Создано с ❤️ от вашего дорогого - deev.space ©}