5 проектов для начинающих фронтенд-разработчиков

Гаретт Левин, фронтенд-разработчик из Канады, собрал пять проектов, которые следует сделать каждому начинающему веб-разработчику на этапе обучения. Techrocks.ru приводит адаптированный перевод материала.


Я начинал свой путь веб-разработчика, используя учебные материалы от Treehouse. Видео сделаны довольно хорошо, отлично подобран материал — это помогало делать обучение увлекательным. Однако их материалы были лишены самого важного — полноценной практики. Мне было непонятно, как на самом деле сделать веб-проект.

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

Проект 1 – Одностраничная адаптивная верстка

Цель:  Научиться адаптивно верстать сложные макеты

фронтенд

Основная трудность обучения в том, чтобы опередить уровень навыков своих учеников и, в то же время, попытаться найти проект, который их заинтересует. The Conquer template это отличная стартовая площадка. Здесь у новичков будет возможность создать то, что не стыдно будет добавить в портфолио. The Conquer template использует Вootstrap, но важно не использовать его при создании проекта. Шаблон предлагает множество задач, с которыми веб-разработчик может столкнуться в реальном мире. Он заставит новичков думать самостоятельно и погрузиться в новые технологии (такие, как flex box и float). Это поможет приобрести опыт в техниках верстки CSS. Сверстать макет адаптивно – это дополнительная цель, которая заставит попотеть!

Проект 2 – Многостраничный адаптивный веб-сайт

Цель: Научиться адаптивно верстать сложные макеты

фронтенд

Следующий шаг – создание адаптивного многостраничного веб-сайта. В сети есть много бесплатных шаблонов, однако сложно найти тот, который придется по вкусу. Поэтому я рекомендовал бы потратить немного денег на дизайн. Помните, вы пытаетесь стать веб-разработчиком, а не дизайнером. Не ждите, что сразу сможете стать и тем, и другим. Есть много разработчиков без навыков дизайна и, наоборот, есть много дизайнеров, которые не умеют программировать. Сосредоточьтесь на веб-разработке! Theme Forest – замечательное место, где вы можете приобрести работы дизайнеров. Здесь вы можете по доступной цене купить PSD-макеты. Выбор очень большой, но я остановился на Foundry. Он стоит $19 и содержит 25 PSD-макетов страниц. Мой личный фаворит — это шаблон для путешествий, однако, здесь есть с чего выбрать.

В рамках этого проекта сверстайте хотя бы 3 страницы — но, если вам понравится этот процесс, не останавливайтесь — делайте больше!

Проект 3 — Маленькая игра-викторина, написанная на языке JavaScript

Цель: Создать игру-викторину, используя JavaScript / jQuery.

фронтенд

Изучая JavaScript, бывает сложно подбирать проект по силам. Хорошим вариантом для начинающего разработчика может стать игра-викторина. Это поможет разобраться с DOM (Document Object Model). Уровень сложности викторины будет зависеть только от вас. Начните с создания простой игры, в которой будет несколько вопросов с возможностью выбора варианта ответа. Вы узнаете много  нового о работе с данными. На этот раз не тратьте слишком много времени на дизайн того, что вы создаете. Я бы даже рекомендовал вам использовать какой-нибудь CSS-фреймворк (например, Bootstrap), чтобы быстро стилизовать вашу игру. Помните, ваша цель — стать веб-разработчиком, оставьте создание дизайна профессионалам.

Проект 4 — Сделайте аналог Giphy, используя открытый API

Цель: Создать веб-приложение, которое использует Giphy’s API, чтобы отображать giphs на странице.

фронтенд

После того как вы получили опыт работы с DOM и JavaScript (и/или jQuery), я рекомендую изучить шаблонизацию данных и их отображение в DOM. Отличная цель для старта — создать аналог веб-сайта giphy, используя Giphy API. Я рекомендую их API для начинающих, потому что у них нет проблем с получением ключа, и форматы запросов-ответов там достаточно простые. Используя их API, создайте небольшое веб-приложение, которое будет делать следующее:

  • отображать трендовые gif-файлы при загрузке приложения;
  • позволять искать определенные gif-файлы;
  • показывать кнопку «Загрузить больше», при нажатии которой загружается больше gif-файлов

Делая этот проект, вы узнаете много нового. Одна из ключевых вещей – работа с асинхронными запросами. Для этого вы можете использовать JavaScript или jQuery. Ваша цель состоит в том, чтобы начать работу с асинхронным кодом. Поскольку ваше приложение будет расти и усложняться, вам нужно подумать о том, как организовать ваш код. Для этого я рекомендую использовать паттерн name spacing (пространство имен)

Проект 5 — Веб-приложение Punk Beer

Цель: Использовать Punk Beer API для создания проекта, использующего шаблонизацию для отображения данных на странице. По возможности, попробуйте использовать какой-нибудь фронтенд фреймворк (например, React).

фронтенд

В последнем проекте вы тоже будете работать с API. Punk API (аналогично Giphy API) не требует ключа для использования и предоставляет много информации в своих ответах.

Верстка этого проекта во многом будет похожа на верстку предыдущего. Из новых вещей — функции «корзина покупок» или «любимый товар». Должна быть возможность просмотреть отобранный список товаров. Здесь вы столкнетесь с проблемами управления состоянием приложения. Я рекомендую вам углубиться в изучение фронтенд фреймворков — это поможет расширить ваши возможности и получить общее представление о современной веб-разработки. Поскольку я активно работаю с React от Facebook, я бы советовал начать с него. Сперва это может показаться трудной задачей, поэтому сосредоточьтесь на создании веб-приложения по частям. Делайте все в следующем порядке:

  • разместите данные на странице из запроса к API
  • добавьте строку поиска (должна работать через отдельный запрос к API)
  • добавьте функцию «любимый товар»
  • подключите react router и добавьте функциональность просмотра «любимых товаров»

Решение этих проблем позволит серьезно продвинуться в веб-разработке. Здесь я тоже рекомендую использовать какой-либо CSS-фреймворк. Я решил использовал Bulma для данного примера, но вы можете выбрать и изучить то, что вам нравится!

Совершенствуйтесь и создавайте

Если вы начинающий веб-разработчик и пытаетесь создать свою собственную учебную программу, то, я надеюсь, эти 5 проектов помогут вам добиться поставленной цели.
Но помните, это только старт! Продолжайте обучаться — смотрите видео и читайте учебники. Опираясь на свой опыт, скажу, что сильнее всего я продвинулся, когда столкнулся с реальным проектом. Поэтому создайте что-то свое, используя навыки, которые вы приобрели!

Оставьте комментарий

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

Прокрутить вверх