Основы веб-технологий - Лабораторные работы

Репозиторий содержит лабораторные работы по курсу "Основы веб-технологий" (3 семестр). В рамках курса разрабатывался сайт для компании Drive Burger - сервиса доставки бизнес-ланчей в Москве. С каждой лабораторной работой проект расширялся новым функционалом.

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

Сайт позволяет клиентам:

• Ознакомиться с информацией о компании
• Просмотреть доступное меню
• Собрать и оформить свой ланч
• Просмотреть историю заказов

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

OSV-sem3/
├── lab1/          - Главная страница (HTML + CSS)
├── lab2/          - Страница меню с адаптивной версткой
├── lab3/          - Форма заказа
├── lab4/          - Динамическое управление меню
├── lab5/          - Расширенная валидация форм
├── lab6/          - Работа с API
├── lab7/          - Дополнительный функционал
├── lab8/          - Улучшения интерфейса
├── lab9/          - История заказов
└── lab10/         - Лендинг с Bootstrap 5

Прогресс выполнения

Лабораторная работа 1

Главная страница сайта

• Верстка главной страницы (HTML)
• Оформление стилями CSS
• Подключение Google Fonts
• Валидация кода

Технологии: HTML5, CSS3

Лабораторная работа 2

Страница меню и адаптивность

• Верстка страницы "Собрать ланч"
• CSS Grid и Flexbox для раскладки блюд
• Адаптивный дизайн для планшетов и мобильных устройств
• Интерактивные эффекты при наведении

Технологии: HTML5, CSS3, Grid, Flexbox, Media Queries

Лабораторная работа 3

Форма заказа

• Страница оформления заказа
• JavaScript для работы с формами

Технологии: HTML5, CSS3, JavaScript

Лабораторные работы 4-9

Каждая работа добавляла новый функционал к проекту: динамическое управление меню, валидация форм, работа с API, улучшения интерфейса и история заказов.

Лабораторная работа 10

Лендинг с Bootstrap

• Адаптивный лендинг на Bootstrap 5
• Hero section
• Блок с преимуществами компании
• Call to Action
• Форма обратной связи

Технологии: HTML5, CSS3, Bootstrap 5, JavaScript

Технологии

• Frontend: HTML5, CSS3, JavaScript
• Фреймворки: Bootstrap 5
• Инструменты: Git, GitHub
• Хостинг: GitHub Pages / Netlify / хостинг Политеха

Основные возможности

• Адаптивный дизайн для всех типов устройств
• Валидный HTML и CSS код
• Интерактивные элементы интерфейса
• Система навигации между страницами
• Формы с валидацией данных
• Динамическое управление контентом через JavaScript

Запуск проекта

Для просмотра проекта локально:

1. Клонируйте репозиторий:

git clone <url-репозитория>
cd OSV-sem3

2. Откройте нужную лабораторную работу в браузере:

# Например, для лабораторной работы 10
cd lab10
# Откройте index.html в браузере

Или используйте локальный сервер:

# С помощью Python
python -m http.server 8000

# С помощью Node.js
npx http-server