ТОП-13 крутых идей веб-проектов для прокачки навыков

0
13103
Добавить в избранное

Иногда хочется написать что-то эдакое, а идей нет. Вот вам подборка классных идей для веб-проектов на любой случай и вкус.


Данные приложения поспособствуют:

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

ТОП-13 крутых идей веб-проектов для прокачки навыков

Список идей разделен на три базовых уровня сложности:

  • Beginner – разработчики  на ранних этапах своего учебного путешествия, которые обычно сосредоточены на создании простых веб-проектов.
  • Intermediate – разработчики с определенным количеством опыта. Они себя хорошо чувствуют в создании UI/UX, в использовании инструментов разработки и написании приложений, использующих API.
  • Advanced – программисты, имеющие все вышеперечисленное и создающие более продвинутые штуки, такие как бэкенд и службы БД.

1. Блокнот

Уровень: beginner

Описание: создание и сохранение заметок.

Возможности:

  • сохранение;
  • редактирование;
  • удаление;
  • при закрытии окна / браузера данные должны сохраняться, а при «возвращении» пользователя – динамически подгружаться.

Бонус:

  • пользователь может редактировать заметку в Markdown-формате; при сохранении результат конвертируется в HTML;
  • пользователю видна дата последнего изменения заметки.

Полезные ссылки:

Пример:

HTML

CSS

JS

2. Рождественские огни

Уровень: beginner

Описание: ваша задача нарисовать в ряд семь цветных окружностей и по таймеру изменять интенсивность свечения каждого из них. После прохода нескольких рядов «лампочек» последовательность подсвечивания меняется.

Возможности:

  • пользователь может нажать кнопку для включения/выключения огней;
  • пользователь может изменить время между интервалами свечения.

Бонус:

  • выбор цвета заполнения каждой окружности;
  • указание значения интенсивности;
  • изменение размера любого круга в ряду;
  • указание количества строк (от 1 до 7).

Пример:

HTML

CSS

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

3. Тестирование

Уровень: beginner

Описание: создайте приложение-опрос для тестирования навыков программирования разработчиков.

Возможности:

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

Бонус:

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

Полезные ссылки:

Пример:

HTML

CSS

JS

4. Конвертер римских чисел в десятичные

Уровень: beginner

Описание: римские цифры включают в себя семь символов, каждый с фиксированным целым значением:

  • I – 1
  • V – 5
  • X – 10
  • L – 50
  • C – 100
  • D – 500
  • M – 1000

Возможности:

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

Бонус:

  • автоматическое преобразование во время ввода;
  • возможность конвертирования в «обе стороны».

Полезные ссылки:

Пример:

Конвертер

5. Поиск книг

Уровень: intermediate

Описание: приложение для поиска книги по запросу (название, автор и т. д.). Список книг отображается со всей информацией о них.

Возможности:

  • пользователь может ввести поисковой запрос в поле ввода;
  • юзер может отправить запрос, который обращается к API, возвращающей массив с книгами и дополнительной информацией (название, автор, дата публикации и т. д).

Бонус:

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

Полезные ссылки:

Пример:

HTML

CSS

JS

6. Карточная игра

Уровень: intermediate

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

Возможности:

  • пользователь видит сетку из n x n карточек, которые изначально скрыты;
  • юзер нажимает на кнопку начала игры, и запускается таймер;
  • открытая карточка будет отображаться до тех пор, пока пользователь не нажмет на вторую;
  • если нашлись две одинаковые карточки, то они исчезают из списка, а если нет – переворачиваются в исходное положение;
  • когда нашлись все совпадения – пользователю выводится сообщение.

Бонус:

  • юзер может выбирать между несколькими уровнями сложности; увеличение сложности означает: уменьшение времени и/или увеличение количества карточек;
  • пользовательская статистика (количество выигрышей/проигрышей, лучшее время).

Пример:

HTML

CSS

JS

7. Markdown-генератор

Уровень: intermediate

Описание: данное приложение преобразует обычную таблицу с данными в форматированную Markdown-таблицу.

Возможности:

  • пользователь может создать HTML- таблицу с заданным количеством строк и столбцов;
  • юзер может вставлять текст в каждую ячейку таблицы;
  • можно генерировать Markdown-таблицу, содержащую данные из HTML-таблицы;
  • можно просматривать форматированную таблицу Markdown-таблицу.

Бонус:

  • реализовать возможность копирования форматированной таблицы в буфер обмена;
  • реализовать возможность вставить новую строку или столбец в определенное место;
  • добавить возможность полностью удалить строку или столбец.

Полезные ссылки:

Пример:

8. Линии

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

Уровень: intermediate

Описание: приложение автоматически рисует разноцветные линии. Когда линия касается края окна, она меняет свое направление. Полосы постепенно исчезают. Библиотеки анимации не используются. Применяйте только Vanilla HTML/CSS/язык JavaScript.

Возможности:

  • линии появляются в рандомном положении в пределах границы ее окружающего окна;
  • каждые 20 мс отображается новая копия линии в новом положении на основе траектории предыдущей линии;
  • когда конечная точка линии касается границы окна, ее направление и угол меняется случайным образом;
  • после отрисовки 10-20 линий «старые» линии постепенно исчезают.

Бонус:

  • пользователь может указывать длину линии и скорость ее движения;
  • юзер имеет возможность установить появление нескольких линий и указать их траекторию и скорость.

Полезные ссылки:

Пример:

HTML

CSS

JS

9. Список дел

Уровень: intermediate

Описание: классическое приложение, где пользователь может записать все мысли, задачи и цели, чтобы не забыть.

Возможности:

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

Бонус:

  • возможность редактировать любой пункт;
  • просмотр выполненных и активных задач, даты их создания;
  • при закрытии окна/браузера данные должны сохраняться, а при «возвращении» пользователя динамически подгружены.

Полезные ссылки:

Пример:

HTML

CSS

JS

10. Морской бой

Уровень: advanced

Описание: текстовый вариант графической версии игры. Игра состоит из движка (BGE) и консольной части.

Возможности:

BGE

  • для запуска используется функция startGame(), чтобы начать игру с 1 игроком: функция создаст игровую доску 8×8, состоящую из 3 кораблей, размещенных рандомно;
  • для выстрела используется функция shoot(), передающая координаты пересечения строки и столбца на игровом поле. Функция вернет информацию о статусе (попадание или промах), количестве оставшихся кораблей, а также массивы размещения кораблей, попаданий и промахов.

Консольная часть

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

Полезные ссылки:

Пример:

11. Чат

Это приложение самое интересное из подборки веб-проектов и самое популярное на данные момент.

Уровень: advanced

Описание: классический мессенджер.

Возможности:

  • пользователю предлагается ввести свой ник при входе (он будет сохранен в приложении);
  • присутствует поле для ввода сообщения и кнопка отправки. Отправленное сообщение появится в окне чата рядом с ником.

Бонус:

  • сообщения должны быть видны всем пользователям чата (WebSockets);
  • когда новый пользователь присоединяется к чату, всем юзерам приходит сообщение;
  • сообщения хранятся в БД;
  • в чат можно посылать смайлы, изображения, видео и ссылки;
  • есть возможность создать приватную комнату.

Полезные ссылки:

Пример:

HTML

CSS

JS

Следующий в списке веб-проектов – классная полезность для Git-а. Зацените!

12. GitHub Timeline

Уровень: advanced

Описание: приложение должно показывать всю историю создания репозиториев, их имена и даты создания по конкретному юзеру. График можно расшарить. Используются только публичные репозитории.

Возможности:

  • ввод имени пользователя GitHub;
  • по нажатию на кнопку генерируется график активности данного пользователя;
  • если такого юзера не существует – выводится сообщение об ошибке.

Бонус:

  • возможность просматривать репозитории по году создания.

Полезные ссылки:

Пример:

HTML

CSS