Razrabotka-vebsajta-individualnyj-proekt

1.

Разработка веб-сайта —
индивидуальный проект
Чинённый Никита Сергеевич, группа ИС-19 Руководитель: Бакулярова
Ирина Николаевна

2.

Вступление
Уважаемый председатель, уважаемые члены комиссии! Представляю
индивидуальный проект на тему «Разработка веб-сайтов». Кратко
прошу ознакомиться с целью, задачами, теорией, практической
реализацией, результатами тестирования и выводами.

3.

АКТУАЛЬНОСТЬ
Почему тема важна
Интернет — ключевая платформа для обучения, работы и коммуникации.
Современные сайты — это инструменты бизнеса и образования. Для будущего
IT-специалиста умение создавать качественные веб-ресурсы является базовым
профессиональным навыком.
Цель проекта
Создать информационный веб-сайт «Современные веб-технологии» с
использованием HTML, CSS, JavaScript, демонстрирующий принципы
адаптивного дизайна и интерактивности.

4.

Задачи проекта
1. Изучение основ
2. Обзор технологий
3. Проектирование и
дизайн
Разобрать структуру и правила
Ознакомиться с современным
оформления веб-страниц
стеком: frontend, backend,
Разработать структуру, навигацию
(семантика, теги).
фреймворки и инструменты.
и визуальную концепцию сайта.
4. Разработка
5. Тестирование
6. Оценка результатов
Имплементировать страницы,
Проверить работу на разных
Проанализировать соответствие
обеспечить адаптивность и
устройствах и в основных
требованиям и сделать выводы.
интерактивность.
браузерах.

5.

Теоретическая
часть
Веб-сайт — набор связанных страниц с
общей целью и оформлением. Основные
технологии: HTML (структура), CSS
(внешний вид), JavaScript (поведение).
Разделение: frontend (интерфейс) и
backend (сервер).
Ключевые требования: адаптивность,
единый стиль, удобная навигация,
быстрая загрузка.
В рамках проекта реализована
frontend-часть с учётом современных
практик.

6.

Практическая часть — структура сайта (2 мин)
Сайт состоит из пяти страниц: Главная, Frontend, Backend, Инструменты разработчика, О проекте. Навигация реализована единым меню на
каждой странице.
Главная
Введение, обзор
разделов, быстрые
ссылки на ключевые
темы.
Frontend
Frontend
Описание HTML, CSS,
JavaScript и
популярных
фреймворков (React,
Vue, Angular).
Backend
Краткий обзор серверных языков,
баз данных и концепции API.
Инструменты
Используемые инструменты: VS
Code, Git, DevTools — описание
их роли и примеры.

7.

Дизайн и вёрстка
Выбрана тёмная тема с акцентом
#481c9eff (синий оттенок) и шрифтом
Roboto для лучшей читаемости.
Использованы семантические теги
(<header>, <nav>, <main>, <footer>),
Flexbox для меню и CSS Grid для
карточек.
Адаптивность
Медиазапросы обеспечивают
корректную раскладку на десктопе,
планшете и смартфоне. Для экранов
<768px меню переходит в вертикальную
версию.

8.

Интерактивность
(JavaScript)
Переключатель темы: светлая / тёмная,
состояние сохраняется в локальном
хранилище браузера.
Подсветка активного пункта меню:
навигация интуитивна, пользователь всегда
видит текущую страницу.
Плавная прокрутка и анимация карточек:
улучшает UX и делает интерфейс «живым».
Код реализован с учётом
прогрессивного улучшения:
функциональность доступна даже при
отключённом JavaScript.

9.

Тестирование и результаты
Проведено кросс-браузерное и кросс-платформенное тестирование.
Браузеры
Устройства
Chrome, Firefox, Edge — корректное
Ноутбук, планшет, смартфон —
отображение и работа
адаптивность проверена при
интерактивных элементов.
разных разрешениях.
Функциональность
Итог
Тесты подтверждают
Готовый информационный сайт
работоспособность переключателя
соответствует современным
темы, навигации и анимаций без
требованиям и пригоден для
ошибок.
учебных демонстраций.

10.

Заключение
Все поставленные задачи выполнены, цель достигнута. В ходе работы я
изучил теорию веб-разработки и применил её на практике: создал
адаптивный, интерактивный сайт с современным дизайном.
Ключевые выводы
Практическая реализация закрепила навыки HTML/CSS/JS.
Проект демонстрирует фундаментальные принципы
frontend-разработки.
Результат готов для дальнейшего расширения и публикации.
QR-Код на проект (ссылка на сайт)