ДЗ №5
Дедлайн 09.11.2025 в 20:59
Проектная деятельность
Описание задчи
Создайте свое одностраничное приложение, например:
«Сайт-визитка»
«Список задач» AKA «TODO List»
«Каталог товаров»
«Список фильмов»
«Галерея изображений»
«Погодное приложение»
Главное — чтобы в проекте присутствовали все базовые элементы фронтенда: структура, стили, динамика, данные с API
Функциональные требования
> Данный раздел носит информационный и рекомендательный характер, на что мы будем обращать внимание в приложении
> Вам не обязательно следовать каждому пункту, особенно, если концепция вашего приложения не включает в себя такую логику (например, если список каких-то пользователей какого-то сайта будет отображаться в вашем сайте-визитке, то это будет выглядеть странно, согласитесь?)
> Но мы будем рады, если вы сможете охватить больший (или весь спектр) знаний и применить их в своей проектной работе
1. Структура приложения
Минимум 3 логических секции: например, шапка / контент / подвал
Использование семантических HTML-тегов (
header,main,footer,section,article,nav)Адаптивная вёрстка (корректное отображение на мобильных и десктопных устройствах)
2. Качество кода
Код разделён на модули (или хотя бы логические файлы:
api.js,dom.js,main.js)Нет глобальных переменных — используется замыкание или модули
Комментарии в коде, читаемые имена функций и переменных
Все файлы именованы на английском
сос мысломпо смыслу
3. Работа с API
Отобразить полученные данные на странице (список, карточки, таблица и т.д.)
Обработка ошибок (
try/catch+ сообщение пользователю)
Для этого можно использовать публичное API или собственный
JSON-файлчерезfetch
Примеры:
a. JSONPlaceholder
c. Другие источники с Public API
Внимание! Public API предоставляет возможность релизации только GET запроса, тоесть мы можем только получить данные, но не изменить их (представьте, что было бы, если 1000+ случайных человек в день могли бы менять данные в открытом источнике)
4. Интерактивность
Реализовать поиск / фильтрацию / сортировку данных (например, поиск по названию или фильтр по категории).
Кнопки с понятным поведением (удалить, обновить, показать детали).
При нажатии на элемент (карточку / кнопку) — вывод подробной информации (модалка, отдельная секция или popup).
5. Формы
Минимум одна форма (например, добавление отзыва, создание заметки, фильтр по полям)
Валидация формы на уровне JS (проверка заполненности, длины, email и т.п.)
После отправки формы — обновление интерфейса без перезагрузки
6. UI и стили
Применить адаптивную сетку (
flex/grid).Использовать кастомные стили: эффекты наведения (
:hover), плавные переходы, кнопки.Поддержка тёмной / светлой темы (опционально).
Что можно улучшить?
Пагинация данных (страницы или “показать ещё”)
Сохранение пользовательских настроек (тема, язык, фильтры)
Простейший роутинг по hash (
#/home,#/details/3)Активное состояние меню (например, подсветка выбранного пункта)
Минимальные анимации (через
CSS transitionsилиJS)Использование
localStorageилиsessionStorageдля сохранения избранного, темы оформления, фильтров, последнего поиска и т.д.
Что мы не можем использовать на проекте?
На самом деле вы можете использовать абсолютно любую технологию, с которой познакомились, но мы будем фокусироваться на том, что изучали на курсе, поэтому список ограничений довольно скромный:
Любой фреймворк (или библиотеку для создания пользовательских интерфейсов), т.е.
React
Vue
Svelte
Angular
и т.п.
Откуда брать вдохновение?
> Список ресурсов для вдохновения:
Визуальная часть приложения
Pinterest (ссылка на примеры с TODO List)
Dribble (ссылка на примеры с TODO List)
Bechance (ссылка на примеры с TODO List)
Готовые макеты на Figma (ссылка на примеры с Портфолио)
P.S.
Если у вас возникают какие-либо проблемы, например:
Тяжело выбрать проект
Не знаю, с чего начать
Не могу выбрать из такого разнообразия
Я куда то нажал и все исчезло
и др.
Не стестняйтесь и пишите в группу с вопросами:
https://t.me/+a_AZcU1eCHo0NDU6
Или лично:
Ваша команда Frontend Course 2025F