diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..e120795 --- /dev/null +++ b/README.en.md @@ -0,0 +1,50 @@ +# Web Technologies Basics + +[Русский](README.md) · **English** + +[![CI](https://github.com/EDeev/web-tech/actions/workflows/ci.yml/badge.svg)](https://github.com/EDeev/web-tech/actions/workflows/ci.yml) + +Labs for the "Web Technologies Basics" course at Moscow Polytechnic University: from a first HTML page to +the "EcoLunch" lunch delivery site with a menu, cart and orders through the course API. + +**Status:** coursework (Moscow Polytech, 2025), completed, archived · site at [web-tech.deev.space](https://web-tech.deev.space) + +![EcoLunch — final lab](docs/screenshots/eco-lunch.png) + +**Stack:** HTML5 · CSS3 (Flexbox, Grid) · JavaScript (ES6+, fetch) · Bootstrap 5 · GitHub Pages + +| Folder | Topic | +|---|---| +| `labs/lab-01` | semantic markup and basic styles | +| `labs/lab-02` | box model, Flexbox, responsive layout | +| `labs/lab-03` | forms and validation | +| `labs/lab-04` | JavaScript basics, menu from a data array | +| `labs/lab-05`, `labs/lab-06` | DOM, events, filters and dish selection | +| `labs/lab-07` … `labs/lab-09` | JSON and fetch: menu and orders through the course API | +| `labs/lab-10` | final version on Bootstrap: styling, viewing, editing and deleting orders | +| `tasks/` | JavaScript exercises: math functions and a game | + +## Running + +The site is static: open `index.html` in a browser or see the published version at +[web-tech.deev.space](https://web-tech.deev.space). Menus and orders in labs 7–10 come from the Moscow +Polytech course API; the API key was issued by the course and lives in the lab code. + +API data is escaped before being inserted into the page (the `esc()` function); CI checks the syntax of +all scripts. + +## License + +Coursework (Web Technologies Basics, Moscow Polytechnic University, 2025). The code is open for study; +there is no separate license. + +## Author + +**Egor Deev** — [GitHub](https://github.com/EDeev) · [Telegram](https://t.me/DeevEgor) · [egor@deev.space](mailto:egor@deev.space) + +--- + +
+ ⭐ If you find this project useful, give it a star on GitHub! +

Made with ❤️ — deev.space

+
diff --git a/README.md b/README.md index 0c92b6f..9714b33 100644 --- a/README.md +++ b/README.md @@ -1,113 +1,50 @@ -# Основы веб-технологий | Web Technologies +# Основы веб-технологий -> Репозиторий лабораторных работ по дисциплине "Основы веб-технологий" +**Русский** · [English](README.en.md) -[![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) +[![CI](https://github.com/EDeev/web-tech/actions/workflows/ci.yml/badge.svg)](https://github.com/EDeev/web-tech/actions/workflows/ci.yml) -## Описание проекта +Лабораторные по курсу «Основы веб-технологий» в Московском Политехе: от первой HTML-страницы до сайта +сервиса доставки ланчей «ЭкоЛанч» с меню, корзиной и заказами через учебный API. -Комплексный учебный проект, демонстрирующий прогрессивное освоение современных веб-технологий через практическую разработку полнофункционального веб-приложения для сервиса доставки здорового питания "ЭкоЛанч". +**Статус:** учебный проект (Московский Политех, 2025), завершён, в архиве · сайт — [web-tech.deev.space](https://web-tech.deev.space) -**Веб-сайт проекта:** [web-tech.deev.space](https://web-tech.deev.space) +![ЭкоЛанч — итоговая лабораторная](docs/screenshots/eco-lunch.png) -## Архитектура курса +**Стек:** HTML5 · CSS3 (Flexbox, Grid) · JavaScript (ES6+, fetch) · Bootstrap 5 · GitHub Pages -### Тематический план: +| Папка | Тема | +|---|---| +| `labs/lab-01` | семантическая разметка и базовые стили | +| `labs/lab-02` | блочная модель, Flexbox, адаптивность | +| `labs/lab-03` | формы и их проверка | +| `labs/lab-04` | основы JavaScript, меню из массива данных | +| `labs/lab-05`, `labs/lab-06` | DOM, события, фильтры и выбор блюд | +| `labs/lab-07` … `labs/lab-09` | JSON и fetch: меню и заказы через учебный API | +| `labs/lab-10` | итог на Bootstrap: оформление, просмотр, правка и удаление заказов | +| `tasks/` | задачи на JavaScript: математические функции и игра | -- **Основы 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) +## Запуск -## Структура репозитория +Сайт статический: откройте `index.html` в браузере или посмотрите опубликованную версию на +[web-tech.deev.space](https://web-tech.deev.space). Меню и заказы в лабораторных 7–10 загружаются из +учебного API Московского Политеха; ключ API выдан курсом и лежит в коде лабораторных. -``` -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/ # Финальная интеграция +Данные из API экранируются перед вставкой в страницу (функция `esc()`); CI проверяет синтаксис всех +скриптов. -``` +## Лицензия -## Ключевые технологии +Учебный проект (Основы веб-технологий, Московский Политех, 2025). Код открыт для изучения, отдельной +лицензии нет. -### 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) - -## Лицензия и использование - -Данный репозиторий создан в образовательных целях. Код доступен для изучения и адаптации без указания авторства. +**Деев Егор Викторович** — [GitHub](https://github.com/EDeev) · [Telegram](https://t.me/DeevEgor) · [egor@deev.space](mailto:egor@deev.space) ---
- ⭐ Если проект оказался полезным, поставьте звездочку на GitHub! -

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

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

Сделано с ❤️ — deev.space

diff --git a/docs/screenshots/eco-lunch.png b/docs/screenshots/eco-lunch.png new file mode 100644 index 0000000..2b9e314 Binary files /dev/null and b/docs/screenshots/eco-lunch.png differ diff --git a/docs/screenshots/home.png b/docs/screenshots/home.png new file mode 100644 index 0000000..b0ee143 Binary files /dev/null and b/docs/screenshots/home.png differ