Подборка фронтенд-проектов для новичков

Хотите стать фронтенд-разработчиком, но не знаете, с чего начать? Рассказываем идеи для новичков, которые помогут прокачать навыки HTML, CSS и JavaScript.

Страница с формой регистрации

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

Чему научитесь: проверять правильность заполнения различных полей с помощью JavaScript.

В итоге у вас должна быть возможность:

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

Giphy

Задача: создать страницу для поиска и просмотра GIF-файлов, используя Giphy API.

Чему научитесь: делать кнопки, работать с асинхронным кодом и обрабатывать асинхронные запросы, работать с запросами пользователя и работать с Giphy API.

В итоге у вас должна быть возможность:

• просматривать адаптированную страницу на ноутбуке и смартфоне;
• видеть актуальные GIF-изображения;
• загружать релевантные гифки по запросу;
• загружать новые гифки с помощью кнопки «загрузить ещё».

Лендинг

Задача: создать страницу с несколькими секциями, адаптированную для разных устройств.

Чему научитесь: писать страницы с помощью HTML и работать со стилями. Бонусом научитесь использовать Sass и Bootstrap.

В итоге у вас должна быть возможность:

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

Сайт-портфолио

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

Чему научитесь: создавать переходы от страницы к странице, работать со стилями, создавать интерактивные проекты, создавать регистрационные формы.

В итоге у вас должна быть возможность:

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

Тест

Задача: создать тест, который будет принимать ответы пользователя и выводить результат.

Чему научитесь: создавать тест с помощью JavaScript, работать со стилями, работать с манипуляциями DOM-элементами.

В итоге у вас должна быть возможность:

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

Чат

Задача: написать приложение-чат с помощью Vue.

Чему научитесь: использовать вебсокеты, обновлять информацию в режиме реального времени, работать с сообщениями, работать с полями ввода. А ещё разберётесь с тем, как работают чаты и как выдавать права доступа разным пользователям.

В итоге у вас должна быть возможность:

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

Камень, ножницы, бумага

Задача: создать страницу, на которой можно играть с компьютером и наблюдать за счётом игры.

Чему научитесь: решать задачи с помощью JavaScript, создавать стили простых браузерных игр, адаптировать страницы под смартфоны и планшеты и работать с localStorage (также советуем почитать о технологии localStorage).

В итоге у вас должна быть возможность:

• играть с компьютером в «Камень, ножницы, бумага» на ноутбуке и смартфоне;
• видеть состояние счёта во время игры и после обновления страницы;
• бонусом можете поиграть «Камень, ножницы, бумага, ящерица, Спок».

Страница магазина

Задача: создать проект магазина с корзиной и возможностью добавить товары в избранное с помощью Punk Beer.

Чему научитесь: адаптировать страницы под мобильные устройства, работать со стилями, создавать кнопки, создавать переходы от страницы к странице, обрабатывать поисковые запросы, работать с шаблонами отображения данных, работать с Punk Beer API.

В итоге у вас должна быть возможность:

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