Введение в финальный проект

Вы прошли четыре модуля и разобрали все основные инструменты веб-разработки: HTML, CSS, JavaScript и работу с браузерным API. Пришло время собрать всё воедино.

В этом модуле вы самостоятельно создадите полноценное веб-приложение — интерактивный путеводитель по достопримечательностям Санкт-Петербурга. Никаких пошаговых инструкций — только требования и ожидаемый результат. Именно так устроена настоящая разработка.

Что нужно построить

Интерактивный путеводитель — одностраничное приложение, которое:

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

API

Данные о достопримечательностях предоставляет готовый эндпоинт:

GET https://advanced-frontend.ru/api/frontend-basics/attractions

Пример одного объекта в ответе:

{
  "id": 1,
  "name": "Эрмитаж",
  "description": "Один из крупнейших и старейших художественных музеев мира...",
  "category": "Музей",
  "rating": 4.9,
  "address": "Дворцовая площадь, 2",
  "image": "https://..."
}
json

Структура проекта

Создайте папку spb-guide/ и в ней три файла:

spb-guide/
├── index.html
├── style.css
└── app.js

Никаких фреймворков, никаких сборщиков — чистые HTML, CSS и JavaScript. Именно это позволит вам по-настоящему закрепить все базовые навыки, не прячась за абстракции.

Как подходить к задаче

Каждый следующий урок описывает один этап разработки: что должно работать после его выполнения. Прочитайте требования, подумайте, как их реализовать, и только потом садитесь писать код.

Несколько советов:

• Не пытайтесь сделать всё сразу. Завершите один этап, убедитесь что он работает, и только тогда переходите к следующему.
• Используйте DevTools. Вкладка Console — для ошибок, Network — для запросов, Elements — для проверки DOM.
• Гуглите. Реальная разработка — это постоянный поиск. Если не помните метод или свойство, MDN и doka.guide всегда рядом.
• Не списывайте код из предыдущих уроков. Можно подсматривать логику, но старайтесь писать самостоятельно — только так формируется навык.

Приступим к первому этапу.