План развития разработчика
Если хотите оценить, насколько именно разработка вам подходит по сравнению с другими ветками, используйте Навигатор новичка и профилей.
План развития разработчика
И именно это ваша практика. Раз уж вы познали целую кучу информации, почему бы не создать что-то своё, проверить и развить свои навыки, сформировав портфолио.
Внимание: я составил список не для выбора. Если вы хотите действительно украсить своё портфолио, оно нужно вам не для оригинальности или уникальности (плевать, Что такие проекты есть у многих), главное именно показать, что вы умеете с этим работать. А как научиться, если не поработать? А чтобы поработать, нужно создать, ведь на работу сразу без опыта никто не возьмёт!
Хотите список? Давайте сделаем, но только сформулируем задачу хаотично и с намёками, чтобы вам пришлось проанализировать, подумать, структурировать и спроектировать.
Как пользоваться списком
| Уровень | Проекты ниже (ориентир) | Цель |
|---|---|---|
| Старт | Калькулятор, To-Do, таймер, "угадай число" | DOM, события, базовый JS/Python |
| Средний | Погода с API, формы с валидацией, генератор паролей | HTTP, JSON, работа с формами |
| Продвинутый | REST + БД, JWT, CRM, Swagger, OAuth mock | Backend, безопасность, документация API |
Берите 2–4 проекта подряд в одном стеке (например, только фронт, потом только Python API), а не по одному из каждой категории. Методология пет-проекта — Пет-проекты. HTML/CSS/JS база — раздел 5.01 JavaScript, Python — 5.02, C# — 5.05.
А попробуйте реализовать следующий список пет-проектов:
Play ITЗагрузка интерактивного демо…
У каждого блока ниже одна структура:
- Описание — что должно работать с точки зрения пользователя ("нажал + — увидел сумму", а не абстрактное "написать класс").
- Навыки — что вы тренируете; сверяйте с пробелами в резюме.
- Стек — зафиксируйте в README; не меняйте язык посередине проекта без причины.
- Критерий готовности (рекомендуем добавить сами) — когда проект можно считать сданным в портфолио — репозиторий на GitHub, README с командами запуска, скриншот или ссылка на демо, 3+ осмысленных коммита.
Калькулятор на HTML/CSS/JS
Если вы выполняли практические задания в этих главах, то вы уже его реализовали - можете "причесать" и отправлять в свой репозиторий!
Описание: Простой калькулятор с кнопками и отображением результата.
Навыки — DOM-работа, события, интерфейсы.
Стек — HTML, CSS, JavaScript
Критерий готовности (пример): работают + − × ÷, деление на ноль обработано, результат на экране обновляется без перезагрузки страницы; проект в отдельном репозитории с README и скриншотом.
Список дел (To-Do List)
Самый популярный и лёгкий тип пет-проекта.
Описание: Приложение для добавления и удаления задач. Создайте список задач, логику добавления задач в список, удаления их из списка, возможность создавать элементы по кнопке и ввода текста. Список можно хранить в localStorage, а элементы группировать в список <li>.
Навыки — Работа с массивами, localStorage, обработка событий.
Стек — HTML, CSS, JavaScript
Таймер обратного отсчёта
Описание: Таймер, который запускается по клику и считает секунды до нуля. К примеру, начальным временем будет 60 секунд, функция будет уменьшать таймер на 1, обновлять текст на экране, и если таймер == 0, то останавливать таймер, выводя "Время вышло!". Можно добавить кнопку "Запустить" для повторения логики.
Навыки: Работа с setInterval, обновление DOM.
Стек — HTML, CSS, JavaScript
Программа "Загадай число" на Python
Описание: Компьютер загадывает число, пользователь угадывает. Здесь нужно использовать рандомизацию, установив переменную равной случайному числу от 1 до 100, и дать пользователю ввести число. Если число больше загаданного, то выводить "Меньше", аналогично "Больше" и если оно совпадёт, выводить "Победа!".
Навыки — Условия, циклы, ввод/вывод.
Стек: Python
Конвертер валют (локальный)
Описание: Ввод суммы и вывод эквивалента в другой валюте (курс можно задать статически). Установить начальный курс, к примеру, 75,55, затем дать возможность ввести сумму (число с плавающей запятой), а при нажатии на кнопку "Конвертировать" перевода умножать эту сумму из поля ввода на курс доллара, а результат выводить на экран.
Важно либо добавить проверку поля ввода на число, либо перевод в число.
Навыки — Формы, вычисления, работа с числами.
Стек — HTML, CSS, JavaScript
Интерактивная анкета
Описание: Форма с полями ввода и кнопкой "Отправить", которая выводит результат на странице. При нажатии на кнопку получаем значение всех полей формы, очищаем блок вывода и для каждого поля создаётся строка "Имя поля: значение". Можете поэкспериментировать с содержанием и реализацией.
Навыки: Работа с формами, обработка событий.
Стек — HTML, CSS, JavaScript
Приложение "Генератор паролей"
Описание: Генерирует случайный пароль по длине и типам символов. Можно создать переменную цифры "0123456789", спецсимволы "!@#$%^&*" и буквы "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ". При генерации выбрать случайные символы из выбранных наборов, перемешать их и вернуть как строку.
Навыки — Случайные числа, строки, условия.
Стек: Python / JS
Базовый конвертер температур
Описание: Перевод градусов Цельсия в Фаренгейты и наоборот. При выборе направления перевода Цельсий в Фаренгейт, результат = (температура * 9/5) + 32, а если Фаренгейт в Цельсий, то результат = (температура - 32) * 5/9. Разумеется, результат выводить.
Навыки — Формы, вычисления, события.
Стек — HTML, CSS, JavaScript
Угадай цвет (RGB)
Описание: Пользователь видит цвет и должен выбрать правильное его имя из нескольких вариантов. Создать цвета = [{ hex — "#FF0000", name — "красный" }, { hex — "#00FF00", name — "зелёный" }, { hex — "#0000FF", name — "синий" }], выбирать один из списка, записывать в переменную, и при загрузке страницы устанавливать фон как эту переменную. Создайте кнопки, и если при клике на кнопку будет совпадение с "name" этой переменной, то вывести "Правильно!". Это аналогия угадывания числа, но здесь рандомизация будет касаться именно одного из трёх цветов, и взаимодействие будет не через ввод текста, а через кнопки.
Навыки — Работа с цветом, условия, события.
Стек — HTML, CSS, JavaScript
Мини-игра — Камень-ножницы-бумага
Описание: Игрок выбирает вариант, компьютер случайно отвечает. Можно создать массив с вариантами "камень", "ножницы", "бумага", затем компьютер будет делать случайный выбор из вариантов, а игрок вводить (или нажимать на кнопку, как угодно), если результаты равны то вывод "Ничья!", если побеждает компьютер "Вы проиграли!", а если игрок "Вы победили!".
Навыки — Условия, случайность, логика.
Стек: Python / JS
Веб-приложение "Погода" с API
Описание: Отображение погоды по городу через OpenWeatherMap API. При нажатии на кнопку "Показать погоду", нужно получить название города из поля ввода, отправить GET-запрос к API, дождаться ответа, распарсить JSON-ответ, извлечь температуру, описание погоды, значок и отобразить информацию на странице.
Навыки — Fetch, JSON, работа с API.
Стек — HTML, CSS, JS + Fetch API
Основа по HTTP и JSON — HTTP как основа веб-интеграций.
Форма регистрации с валидацией
Описание — Полноценная форма с проверкой email, пароля, подтверждением. При нажатии на кнопку "Зарегистрироваться" получить email, пароль, подтверждение пароля, и если email не содержит "@", то показать ошибку "Некорректный email!". Если пароль короче 6 символов, показать ошибку "Пароль слишком короткий!", если пароль не равен подтверждению, то показать ошибку "Пароли не совпадают!", иначе "Регистрация успешна.
Навыки — Валидация, события, сообщения об ошибках.
Стек — HTML, CSS, JavaScript
REST API на Flask (Python)
Описание — Создание простого API для заметок (GET, POST, DELETE). Импортируйте Flask и jsonify, создайте список заметок, и для метода GET возвращайте список через jsonify, для POST получайте данные из запроса и добавляйте в список, затем возвращайте статус 201 Created, а для DELETE по <id>, удаляйте заметку.
Внимание - API мы рассматриваем подробно позднее, так что может быть, вам стоит вернуться к этой задаче позже.
Навыки — HTTP, маршруты, JSON.
Стек: Python + Flask
Чат-бот на Python
Описание: Бот в консоли, реагирующий на команды. Можете сделать просто - если пользователь вводит "Привет" или "привет", то печатать "Бот: Привет!". Если напечатает "как дела?", то "Бот: Нормально, а у тебя?" и всё в таком стиле. Можно это всё упаковать в цикл пока true, иначе напечатать "Бот: Не понял" для обработки неизвестных выражений. Поэкспериментируйте.
Навыки — Обработка ввода, условия, функции.
Стек: Python
Мобильное приложение (на C# .NET MAUI)
Описание — Простое приложение под Android/iOS, например, калькулятор. Создайте интерфейс с текстовым полем, кнопками 0-9, +, -, =. При нажатии на кнопку проверять, если цифра, то добавлять к текущему числу, если операция, то сохранять число и операцию, если равно то выполнять операцию и обновлять экран.
Можете конечно попробовать и реализовать это на Kotlin/Java.
Навыки — UI, события, кроссплатформенная разработка.
Стек: C#, .NET MAUI
Установка IDE — Visual Studio, MAUI в энциклопедии.
ASP.NET Core Web App
Описание: Базовое веб-приложение с несколькими страницами. Создайте HomeController, в котором добавьте действия Index(), About(), Contact(). Для каждой страницы создайте файл в Views/Home/ и т.д.
В Startup.cs или Program.cs настроить маршруты, к примеру:
"/" → HomeController.Index()
"/about" → HomeController.About()
Поэкспериментируйте.
Навыки — MVC, Razor, маршруты.
Стек: C#, ASP.NET Core
CRUD-приложение с SQLite
Описание — Добавление, редактирование, удаление записей в БД SQLite. Создайте таблицу, к примеру Задачи, с id, title и description. Сделайте функции create_task(title, description), read_tasks() для SELECT, update_task(id, new_title, new_description) для UPDATE и delete_task(id) для DELETE.
Навыки — SQL, ORM (например, SQLAlchemy), CRUD.
Стек: Python + SQLite
REST API с авторизацией
Описание: API с JWT-токенами для входа и защищёнными маршрутами. Создайте страницу с вводом email и пароля, добавьте валидацию и проверку в базе данных на наличие таких данных. Если правильные, то создавать JWT-токен и возвращать его, иначе возвращать ошибку "Неверные данные". Создайте также страницу с профилем, которая будет требовать токен из заголовка запроса, будет проверять его валидность, иначе возвращать ошибку 401 Unauthorized.
Навыки — Авторизация, токены, безопасность.
Стек: Python (FastAPI/Flask), Node.js, Java (Spring Boot)
Форма с отправкой данных на сервер
Описание: HTML-форма, данные передаются на бэкенд и сохраняются в файл или БД. На клиенте нужно добавить форму с кнопкой отправки POST-запроса на сервер. На сервере же получить данные, сохранить в БД или файл, и вернуть ответ "Спасибо, ваша заявка принята!".
Навыки — POST-запросы, обработка данных, сохранение.
Стек: HTML, JS + PHP / Python / Java
Веб-приложение "Заметки" с сохранением в localStorage
Описание: Сохраняет заметки в браузере. Если localStorage содержит заметки, то загрузить их, иначе создавать пустой список. При добавлении новой заметки, добавлять её в список и сохранять в localStorage. При удалении удалять из списка и перезаписывать localStorage, а при загрузке отображать все заметки.
Навыки — localStorage, формы, списки.
Стек — HTML, CSS, JS
Погодное приложение с сохранением истории
Описание: История запросов сохраняется в localStorage или БД. При загрузке страницы, если есть история в localStorage, отображать её, иначе пустой список. При нажатии на кнопку "Показать погоду", получать город из поля ввода, отправлять запрос к API, получать температуру и описание, добавлять запись в историю и обновлять localStorage, отображая историю на странице.
Навыки — LocalStorage, API, шаблонизация.
Стек: JS + OpenWeatherMap
REST API с MongoDB
Описание: Хранение данных в NoSQL (MongoDB), CRUD-операции. Здесь точно понадобятся знания API, поэтому можете сюда вернуться позже. Нужно сделать маршруты для методов GET, POST, PUT, DELETE. GET получает все элементы и возвращает JSON. POST получает данные из тела запроса, добавляет в коллекцию и возвращает 201. PUT ищет элемент по Id, как и DELETE. Усложняется всё тем, что добавляется MongoDB. Можете реализовать её и на других языках, поэкспериментируйте, главное понять как работает MongoDB и "пощупать" её.
Навыки — MongoDB, Mongoose, Express.
Стек: Node.js + MongoDB / Python + PyMongo
Парсер CSV/JSON/XML
Описание: Загрузка файла и отображение данных в таблице. При выборе файла пользователем, читать содержимое, определить тип файла (CSV, JSON, XML), распарсить его - CSV по строкам и запятым, JSON преобразуйте в объект, XML через парсер. Итоговые данные нужно отобразить в структурированной таблице.
Навыки — Чтение файлов, парсинг, отображение.
Стек: Python / JS / Java
Блог на Flask/Django
Описание: Простой блог с возможностью добавления статей. Маршрут первый отображает список статей из БД, второй маршрут используется для добавления (POST для получения заголовка и текста статьи). Можно использовать шаблонизаторы. Также хорошим вариантом будет реализовать блог на ASP.NET.
Навыки — Шаблоны, маршруты, БД.
Стек: Python + Flask / Django
Локальная CRM система
Описание — Управление клиентами, поиск, фильтрация. Как можно понять, то на сервере нужна будет таблица с клиентами (id, name, email, phone), маршруты GET, POST, PUT, DELETE, а на клиенте отображаться таблица клиентов, возможность добавить через специальную форму. Можно добавить поиск с фильтрацией клиентов по имени или email.
Навыки — CRUD, таблицы, формы.
Стек: HTML, JS + Python (Flask) / PHP / Java (Spring)
Консольный менеджер задач
Описание — Программа, которая позволяет добавлять, удалять и просматривать задачи. По сути, это аналог ToDoList, однако нужно будет реализовать возможность загрузки задач из файла, сохранение их в файл и меню с командами добавления, удаления, просмотра. Можно также сделать и на C#. Навыки — ООП, файловая система, CLI.
Стек: Java / Python
Веб-приложение "Книги" с поиском
Описание — Поиск книг по названию, автору, жанру. На сервере нужно создать список книг с полями (название, автор, жанр), создать маршрут /search с параметрами запроса, добавить фильтрацию книг по любому совпадению в полях. На клиенте при вводе запроса отправлять GET-запрос на /search?query=..., получать результаты и отображать их в виде списка.
Навыки — Формы, фильтрация, отображение.
Стек: JS + HTML/CSS / Python + Flask
REST API с документацией (Swagger/OpenAPI)
Описание: API с автоматически генерируемой документацией. Определите модели данных (например, User, Product), добавьте маршруты GET (вернуть список пользователей) и POST (принять объект и добавить в базу). Документирование для GET должно возвращать массив User, для POST принимать User и возвращать созданного пользователя.
Здесь лучше использовать Swagger, настроить его интерфейс, указать описания, примеры, типы данных и сделать доступным по адресу /docs.
Навыки — Swagger, REST, документирование.
Стек — Python (FastAPI/Swagger), Spring Boot, ASP.NET
Аутентификация с использованием OAuth
Описание: Реализация аутентификации через Google/Facebook (локально, через mock). Нужно будет имитировать редирект на Google, получить mock токен, проверить его подлинность, создать сессию пользователя и перенаправить на главную. На главной, если сессия активна, то показать приветствие, иначе показать кнопку "Войти через Google". Добавьте также маршрут для выхода, чтобы удалять сессию и перенаправляться на главную.
Навыки — OAuth, сессии, безопасность.
Стек: Python / Node.js / Java
Веб-приложение "Фильмы" с поиском по базе
Описание: Поиск фильмов по базе данных (SQLite или PostgreSQL). На сервере создайте таблицу для фильмов (id, title, genre, year, rating), выполняйте поиск через SQL-запрос, возвращайте JSON-результат. На клиенте нужна форма с полями (название, жанр, год), и при отправке GET-запроса отображать результаты в виде карточек.
Навыки — SQL, ORM, поиск, фильтрация.
Стек: Python + Flask / Java + Spring Boot
Готовый фронтенд-проект из списка выше можно выложить бесплатно — репозиторий на GitHub, Settings → Pages, при необходимости свой домен — лабораторный кейс "Размещение своего сайта с GitHub Pages".
Базовый разбор HTTP и HTTPS находится в отдельной статье — HTTP как основа веб-интеграций.