8 идей пет-проектов для начинающего frontend-разработчика

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

Ниже 8 идей, от простых к сложным, а также какие навыки поможет прокачать каждый проект и как его реализовать. А если вы еще не уверены, зачем вообще нужен пет-проект, сначала загляните в нашу статью о том, как пет-проекты помогают в карьере.

Как выбрать идею, которую вы не бросите

Частая история с пет-проектами — человек загорается большой идеей (свой маркетплейс или соцсеть), неделю пишет код и бросает, когда понимает объем работы. Поэтому при выборе темы смотрите на три простых признака.

• Тема вам интересна. Любите готовить — делайте сервис рецептов, ходите в зал — трекер тренировок. Скучный проект закончить труднее.
• Проект можно начать с простой версии, которую реально сделать за 1–2 недели. Сначала доведите ее до готового состояния и опубликуйте, а дополнительные функции добавляйте уже постепенно как улучшения.
• В проекте есть хотя бы одна новая для вас вещь (например, запрос к API, сохранение данных, фреймворк). Иначе вы просто повторите то, что уже умеете.

Первые проекты на верстке и простом JavaScript

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

1. Лендинг для реального места

Посмотрите, кому из вашего окружения или рядом с вами мог бы пригодиться небольшой сайт. Это может быть знакомый со своим делом, владелец кафе у дома, небольшой студии или другого локального бизнеса. Предложите сделать для него сайт и заранее уточните, что на нем должно быть: например, меню, цены, контакты или форма записи. Так у вас появится первый «реальный заказчик», а вместе с ним — опыт работы с конкретными требованиями и создания по ним готовой адаптивной страницы. Для начала хватит одной страницы, которая хорошо выглядит и на телефоне, и на ноутбуке. Потом добавьте бургер-меню, проверку формы на JavaScript и плавную прокрутку к разделам.

2. Список дел, но со своей фишкой

Да, это классика, и такой проект есть почти у каждого новичка. Зато на нем отлично тренируется работа с DOM, событиями и localStorage (задачи не пропадают после перезагрузки страницы). Чтобы проект не потерялся среди сотен таких же, добавьте то, чего нет у других — дополнительные функции, которые сделают его интереснее и помогут потренировать более сложную логику. Например, сроки с подсветкой просроченных задач, фильтры, перетаскивание между колонками или темную тему.

3. Тренажер слепой печати

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

Проекты с данными и API

Следующий шаг — научиться получать данные с сервера и показывать их пользователю. С этим junior-разработчик сталкивается почти в любой задаче на работе.

4. Прогноз погоды

Возьмите бесплатный API погоды, например Open-Meteo (для некоммерческих проектов не нужно получать ключ доступа), и выведите прогноз для города, который ввел пользователь. На этом проекте вы освоите fetch и async/await и, что важно, научитесь показывать загрузку и ошибки (город не найден, пропал интернет). Когда это заработает, добавьте определение города по геолокации и прогноз на неделю с иконками.

5. Каталог книг или фильмов с поиском

Для книг подойдет открытый API Open Library (ключ доступа не нужен), для фильмов можно собрать свой JSON-файл на 30–50 карточек. Сначала сделайте поиск по названию, потом фильтры по жанру и году и постраничный вывод. Здесь много работы с массивами (filter, sort, map), а еще нужно продумать сам интерфейс: чтобы пользователь быстро находил нужные книги или фильмы, понимал, какие фильтры включены, и мог легко менять подборку. Дополнительно можно сохранять выбранные фильтры в адресе страницы — тогда пользователь сможет скопировать ссылку и сразу поделиться готовой подборкой.

6. Квиз с результатами

Тест на любую тему (знаете ли вы JavaScript, какой вы персонаж из сериала), где вопросы идут один за другим, а в конце человек видит результат. Это проект на несколько вечеров, и одного его для портфолио мало. Но он хорошо учит продумывать, как хранить вопросы и ответы и переключать экраны, а ограничение времени на каждый вопрос и таблица лучших результатов сделают его заметно интереснее.

Проекты с более сложной логикой

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

7. Мини-магазин с корзиной

Каталог, карточка товара, корзина и форма заказа. Для первой версии хватит 5–6 товаров и корзины, которая правильно считает сумму. Дальше вы столкнетесь с теми же вопросами, что и в коммерческой разработке (где хранить состояние корзины, как переходить между страницами, что делать с пустой корзиной). Такой проект удобно делать уже на фреймворке (Angular, React или Vue). Так в портфолио появится проект на более продвинутом стеке, который покажет, что вы умеете работать не только с базовыми инструментами, но и с масштабными задачами. Для работодателя это уже более серьезный уровень проекта и дополнительный плюс при оценке ваших навыков.

8. Трекер привычек или расходов с графиками

Пользователь отмечает, что сделал за день (или сколько денег потратил), а приложение показывает итоги за неделю и месяц. Первая версия может обойтись без графиков, просто список и суммы. Потом подключите библиотеку Chart.js и нарисуйте динамику, а если добавить работу без интернета и установку на телефон (PWA), трекером можно будет пользоваться как обычным приложением.

Как подготовить пет-проект для публикации в портфолио

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

• Ссылка, по которой проект можно открыть в браузере. Простые frontend-проекты можно бесплатно выложить на Netlify или опубликовать прямо из репозитория через GitHub Pages. Для более сложных проектов, например с серверной частью, понадобится отдельный хостинг, который поддерживает такую функциональность. Главное, чтобы работодатель или заказчик мог перейти по ссылке и сразу посмотреть, как работает ваш проект, без скачивания файлов и дополнительного запуска.
• README на GitHub. Это файл с кратким описанием проекта и инструкцией по нему. Укажите, что делает проект, на каких технологиях он написан, как его запустить, добавьте 1–2 скриншота и коротко расскажите, что было самым сложным в процессе.
• Понятная история коммитов (сохраненных версий кода). Не один коммит «готово», а осмысленные шаги разработки — пригодятся основные команды Git.

2–3 полностью оформленных проекта со ссылками, описанием и наглядным результатом будут смотреться сильнее, чем десять просто начатых. По готовому проекту работодатель или заказчик сразу видит, что вы умеете доводить задачу до результата, как была организована работа и какие навыки вы применили. В незавершенных проектах это оценить гораздо сложнее, и качество зачастую гораздо важнее количества. Как собрать все проекты в одно аккуратное портфолио, мы рассказывали в статье про портфолио разработчика в Notion.

Можно ли делать пет-проект с помощью ИИ?

Можно. Главное, использовать нейросеть именно как помощника, чтобы она объясняла ошибки, предлагала варианты и помогала проверить код, а не писала весь проект за вас. Иначе вы не будете в полной мере нарабатывать собственные знания и навыки, ради которых вообще создаете пет-проект. А на собеседовании будет трудно объяснить, почему код устроен именно так, ведь про ваши собственные проекты обычно спрашивают подробно. Хорошее правило — каждую строку, которую подсказала нейросеть, вы должны уметь объяснить своими словами.

Создайте свой первый проект с проверкой от экспертов

Самое сложное в первом проекте — не бросить его на середине, когда что-то не работает и непонятно, где искать ошибку. Поэтому первый раз проще пройти этот путь с подсказками и поддержкой других людей. На бесплатном интенсиве «Frontend: Start» за 7 дней вы соберете вместе с преподавателем сервис доставки из трех страниц и выложите его на хостинг, а кураторы проверят ваши домашние задания. Это хорошая основа: доработайте сервис своей фишкой (например, корзиной или фильтрами из идей выше), и он станет полноценным пет-проектом для портфолио.

А если захочется идти дальше, на курсе «Frontend-разработчик» за 12 месяцев вы сделаете больше 20 проектов на Angular с наставниками, в том числе собственный проект по этапам.

Записаться на бесплатный интенсив «Frontend: Start»