Сайт о скейтбординге на (HTML, CSS, JS)

Задание

Разработать веб-сайт, посвящённый теме скейтбординга, в рамках учебного курса Web Development. Сайт должен содержать:

• Историю скейтбординга.

• Описание знаменитых скейтбордистов.

• Информацию о трюках и обучении скейтбордингу.

• Визуальные элементы: изображения, слайдеры, видео.

• Навигацию между страницами.

Функционал программы

• Главная страница с основным изображением и видео-слайдером.

• Историческая страница с текстом и изображениями.

• Страница легенд скейтбординга с описанием и видео.

• Страница базовых трюков с объяснениями и обучающими видео.

• Страница обучения "How To" с советами и видео от создателя сайта.

• Навигация по всем страницам через панель меню.

• Адаптивная верстка для экранов от 550 пикселей шириной.

• Анимация кнопок и слайдеров с помощью JavaScript.

Содержание отчета к программе

Введение

Веб-сайт создан для популяризации и обучения скейтбордингу. Проект ориентирован на пользователей всех возрастов и уровней подготовки.

Задание на курсовую работу

Создать тематический сайт, посвящённый определённой области интересов, с использованием HTML, CSS и JavaScript. Предусмотреть навигацию, медиа-контент и анимацию элементов.

Постановка задачи

Разработать удобный, интуитивно понятный сайт о скейтбординге с учебным и информационным контентом, оформленный в ярком современном стиле.

Проектная часть

Проектирование страниц и элементов сайта выполнялось в Figma. Разработана структура сайта и определены все ключевые разделы.

Теоретическая часть

Для реализации сайта использованы:

• HTML5 для построения структуры страниц.

• CSS3 для оформления дизайна и адаптивности.

• JavaScript для анимации элементов интерфейса.

Общее описание разработки

Создан сайт из шести страниц с единым стилем оформления и общей навигацией. Применены два типа слайдеров: изображений и видео.

Таблица свойств объектов

Список идентификаторов

• logo__link — ссылка на главную страницу.

• top-menu__link — навигационные ссылки на страницы сайта.

• showcase_navigation__prev, showcase_navigation__next — кнопки перелистывания видео-слайдера.

Структура приложения

• 6 HTML файлов (по одному на каждую страницу).

• 2 CSS файла (основной и адаптивный для мобильных устройств).

• 1 JavaScript файл для логики анимации и навигации.

Функциональное описание приложения

Сайт запускается в браузере. Навигация осуществляется через меню, доступное на каждой странице. Анимация делает интерфейс живым и удобным. Все страницы логично связаны друг с другом.

Описание работы программы с представлением экранных форм

• Главная страница: слайдер изображений + видео-слайдер.

• Историческая страница: текст о происхождении скейтбординга.

• Страница легенд: описания скейтбордистов с видео.

• Страница трюков: обучающие тексты и видео базовых трюков.

• Страница "How To": советы и личные видео создателя сайта.

• Единая шапка сайта с меню навигации и футер.

Заключение

Проект был успешно выполнен. Сайт работает стабильно и соответствует поставленным требованиям. В будущем возможна доработка адаптивности для мобильных устройств и добавление пользовательских функций, таких как смена темы или регистрация пользователей.

Список использованных источников

• Red Bull Skateboarding Hub — https://www.redbull.com/int-en/hubs/skateboarding

• Личный опыт и практическая работа в Figma и Web-разработке.

Фрагмент программного кода

<!-- Навигационная панель -->
<header class="header">
  <a href="../index.html" class="logo__link">Skateboarding</a>
  <nav class="top-menu">
    <a href="../index.html" class="top-menu__link">Home</a>
    <a href="html/History.html" class="top-menu__link">History</a>
    <a href="html/Legends.html" class="top-menu__link">Legends</a>
    <a href="html/Tricks.html" class="top-menu__link">Tricks</a>
    <a href="html/HowTo.html" class="top-menu__link">How To</a>
  </nav>
</header>

<!-- Видео-слайдер -->
<div class="showcase">
  <div class="showcase_navigation__prev"></div>
  <div class="showcase_navigation__next"></div>
</div>

Скриншот архива с проектом

Пояснения по запуску программы

• Установите любой современный браузер: Google Chrome, Mozilla Firefox, Microsoft Edge.

• Скачайте архив с проектом.

• Разархивируйте проект в любую папку.

• Откройте файл index.html через браузер.

• Весь функционал сайта работает локально без необходимости подключения к серверу или дополнительных настроек.