У разработчиков, как и у писателей, бывает ступор, когда хочешь что-то написать, но не знаешь что.
Мы с моим другом Джимом собрали коллекцию идей для приложений, чтобы решить эту проблему. ?
Для чего это нужно:
- Улучшить навыки программирования.
- Опробовать новые технологии.
- Наполнить портфолио.
- Использовать как примеры, создавая собственные уроки.
- Их легко выполнить, а также можно добавлять новые фичи.
Это не просто список проектов. Здесь есть детальное описание каждого задания, чтобы помочь вам начать разработку с нуля.
В описании каждого проекта вы найдёте:
- Постановку задачи.
- Описание возможностей, которые должны быть реализованы (это скорее подсказка, чем жёсткое условие. Вы можете добавлять собственные функции, если хотите).
- Список дополнительных фич, реализация которых поможет прокачать ваш проект и мозги.
- Ссылки на ресурсы, которые помогут вам выполнить проект.
Проекты
Все проекты разделены на три уровня сложности:
- Начальный — для новичков, которые как правило сосредоточены на разработке пользовательских приложений.
- Средний — более опытные разработчики, которые уже знакомы с UI/UX, умеют пользоваться инструментами разработки и внедрять API сервисы в свои приложения.
- Продвинутый — те, кто прошёл две предыдущие стадии и хочет улучшить навыки изучив новые техники, например внедрение бэкенд приложений и баз данных.
Далее представлены по 5 проектов для каждого уровня (всего 15). На данный момент мы собрали более 30 проектов, их можно найти на GitHub. В дальнейшем мы планируем пополнить этот список.
1. Записная книжка
Уровень: 1 — Начальный
Описание: создаёт и хранит напоминания
Возможности
- Создать запись.
- Редактировать запись.
- Удалить запись.
- При закрытии окна, записи сохраняются. Открыв приложение, сохранённые записи восстанавливаются.
Дополнительные фичи
- Пользователь может создавать и редактировать записи в формате Markdown. При сохранении данные конвертируются в HTML.
- Пользователь может посмотреть дату создания записи.
Ссылки и ресурсы
Пример проекта
2. Гирлянда
Уровень: 1 — Начальный
Описание: вам необходимо создать мигающую гирлянду. Задача — нарисовать ряд из семи разноцветных кружков (огоньков), интенсивность каждого огонька будет меняться в зависимости от таймера. Когда текущий огонёк становится ярче, предыдущий тускнеет, возвращаясь к исходной интенсивности.
Проще говоря, симуляция новогодней гирлянды.
Возможности
- Кнопка для запуска/остановки мигания.
- Можно менять интервал мигания.
Дополнительные фичи
- Выбор цвета каждого огонька.
- Выбор уровня яркости.
- Изменение размера любого огонька.
- Выбор количества рядов (от 1 до 7).
Ссылки и ресурсы
Пример проекта
3. Вращение изображений
Уровень: 1 — Начальный
Описание: для веб-разработчика важно понимать основы работы с изображениями, потому что UI/UX современных приложений во многом на них опирается.
В приложении вы реализуете возможность вращения изображения. На экране отображается 4 копии одного изображения, представленного в матрице 2 на 2. Используя стрелки вверх, вниз, влево и вправо рядом с каждым изображением, пользователь может повернуть их вертикально или горизонтально.
Допускается использовать только чистый HTML, CSS, и Javascript. Сторонние библиотеки не допускаются.
Возможности
- Отображение 4 копий одного изображения в матрицы 2 на 2.
- Рядом с каждой копией есть стрелочки вверх, вниз, влево и вправо, с помощью которых пользователь может вращать каждое изображение.
Дополнительные фичи
- Пользователь может изменить изображение по умолчанию, введя URL другого изображения в поле ввода.
- Отобразить новое изображение можно, нажав кнопку «Показать» рядом с полем ввода.
- Если изображение не найдено, пользователь увидит сообщение об ошибке.
Ссылки и ресурсы
Пример проекта
4. Тестирование
Уровень: 1 — Начальный
Описание: тест, в котором можно проверить свои знания, отвечая на вопросы.
Создайте приложение для других разработчиков, в котором они смогут проверить свои знания HTML, CSS, JavaScript, Python, PHP и т.д.
Возможности
- Есть кнопка для начала тестирования.
- Для каждого вопроса предусмотрено 4 варианта ответа.
- После выбора ответа отображается следующий вопрос. Так до конца теста.
- В конце теста отображается статистика:
- Время, за которое был выполнен тест.
- Количество правильных ответов.
- Сообщение с результатом теста (пройден/не пройден).
Дополнительные фичи
- Пользователь может поделиться результатом тестирования в соц. сетях.
- Добавить больше тестов с возможностью выбора одного из них.
- Создать аккаунт для хранения результатов тестирования. Пользователь может пройти тест множество раз.
Ссылки и ресурсы
Пример проекта
5. Конвертация римских чисел в десятичные
Уровень: 1 — Начальный
Описание: каждый римский символ имеет своё фиксированное целое значение, которое можно преобразовать в десятичный формат. В наши дни используют семь символов:
- I — 1
- V — 5
- X — 10
- L — 50
- C — 100
- D — 500
- M — 1000
Возможности
- Ввод римского символа в поле ввода.
- После нажатия кнопки выводится эквивалент введённого числа в десятичном формате.
- Если введён недопустимый символ, пользователь увидит сообщение об ошибке.
Дополнительные фичи
- Автоматический вывод ответа без нажатия кнопки (сразу после ввода символа).
- Возможность обратной конвертации (десятичные в римские).
Ссылки и ресурсы
Не пропустите 5 приложений среднего уровня сложности во второй части.
Перевод статьи Florin Pop: Here are some app ideas you can build to level up your coding skills
Читайте так же Почему вам нужно учить больше языков программирования
