95cc248ae0798372

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

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

У нас нужен php программист.

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

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

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

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

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

пользователь может редактировать заметку в Markdown-формате; при сохранении результат конвертируется в HTML;
пользователю видна дата последнего изменения заметки.
Пример:
HTML
<h1 class=»header»>AngularJS Markdown Notes</h1>
<div ng-app=»notesApp» class=»app»>
<div ng-controller=»notesController»>

<span class=»icons»>
<i class=»fa fa-plus-circle fa-2x» ng-click=»addNote()»></i>
</span>
<div class=»note» ng-repeat=»note in notes | orderBy:’createdOn’:true track by $index»>
<span class=»date»>{{note.createdOn | date:»EEEE dd MMMM, yyyy ‘at’ h:mma»}}</span>
<span class=»icons»>
<i class=»fa fa-check fa-lg» ng-if=»note.edit == false»></i>
<i class=»fa fa-pencil fa-lg» ng-if=»note.edit == true»></i>
<i class=»fa fa-trash-o fa-lg» ng-click=»delete(notes.length — $index — 1)»></i></span>

<div class=»markdown-body» ng-model=»note.text» ng-change=»update(notes.length —
$index — 1,note.text)» ng-focus=»note.edit = true» ng-blur=»note.edit =
false» markdown-editable contenteditable=»true»>{{ note.text }}</div>
</div>
</div>
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);

* {
box-sizing:border-box;
}

body {
max-width:580px;
margin:auto;
padding:10px;
position:relative;
background: #fdfdfd;
}

img {
max-width:100%;
height:auto;
}

div[contenteditable] {
font-size:1.2em;
font-family: ‘Source Sans Pro’, sans-serif;
border:none;
box-shadow:none;
margin:0;
width:100%;
padding:10px 20px 10px;
min-height:300px;
background:#f9f9f9;

pre, code {
background:#ededed;
}
}

div[contenteditable]:focus{
font-family: ‘Source Code Pro’, courier, monospace;
font-size:1em;
}

.header {
margin:5px 10px 0;
color:#d46e58;
display:inline-block;
}

.note {
background: #eee;
box-shadow:#999 1px 1px 3px;
margin:30px 0;
padding-top:40px;
min-height:200px;
width:100%;
display:block;
position:relative;
overflow:hidden;
}

.date {
position:absolute;
top:0;
left:0;
padding:15px;
font-size:0.7em;
font-style: italic;
color:#71CBD0;
}

.icons {
position:absolute;
right:0;
top:0;
padding:10px;
}

.fa-trash-o, .fa-plus-circle {
cursor:pointer;
}

.fa-check {
color:#92D788;
}

.fa-trash-o {
color:#C2474B;

&:hover {
color:darken(#C2474B,20);
}
}

.fa-pencil {
color:#DBC394;
}

.fa-plus-circle {
color:#71CBD0;

&:hover {
color:darken(#71CBD0,20);
}
}
JS
(function(){
var app = angular.module(‘notesApp’,[‘angular-markdown-editable’]);
app.controller(‘notesController’, function($scope){

// Initial Data
$scope.notes = [{
createdOn:1428237500771,
edit:false,
text:»#Hello, World!\n\n
Delete this note\n\nMarkdown compiled using the fantastic
[angular-markdown-editable](http://projects.quiver.
is/angular-markdown-editable/) directive.»
}];

// Add New Note
$scope.addNote = function(){
$scope.newNote = {};
$scope.newNote.createdOn = Date.now();
$scope.newNote.text = ‘ ‘;
$scope.newNote.edit = true;
$scope.notes.push($scope.newNote);
$scope.newNote = {};
};
// Delete Note
$scope.delete = function (i) {
var r = confirm(«Are you sure you want to delete this note?»);
if (r == true)
$scope.notes.splice(i, 1);
};
// Update Note
$scope.update = function(i, note) {
$scope.notes[i].text = note;
$scope.notes[i].edit = false;
};
// End Controller
});
// End Function
})();
2. Рождественские огни
Уровень: beginner

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

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

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

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

3. Тестирование
Уровень: beginner

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

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

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

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

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

I – 1
V – 5
X – 10
L – 50
C – 100
D – 500
M – 1000
Возможности:

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

автоматическое преобразование во время ввода;
возможность конвертирования в «обе стороны».
5. Поиск книг
Уровень: intermediate

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

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

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

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

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

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

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

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

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

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

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

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

Уровень: intermediate

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

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

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

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

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

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

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

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

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

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

BGE

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

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

Уровень: advanced

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

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

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

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

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

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

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

возможность просматривать репозитории по году создания.
13. Spell-It
Уровень: advanced

Описание: приложение Spell-It помогает пользователям практиковать свое правописание, воспроизводя слова в аудиозаписи, которые пользователь затем должен написать. Применяется углубленное программирование JavaScript.

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

по нажатию на кнопку «Play» воспроизводится слово, которое должно быть введено;
кнопка «Enter» отправляет введенное слово на проверку;
при правильном/неправильном вводе слова появляется сообщение об ошибке или успехе.
Бонус:

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

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *



Создание сайтов Создание сайтов Киев