Гаретт Левин, фронтенд-разработчик из Канады, собрал пять проектов, которые следует сделать каждому начинающему веб-разработчику на этапе обучения. 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 проектов помогут вам добиться поставленной цели.
Но помните, это только старт! Продолжайте обучаться — смотрите видео и читайте учебники. Опираясь на свой опыт, скажу, что сильнее всего я продвинулся, когда столкнулся с реальным проектом. Поэтому создайте что-то свое, используя навыки, которые вы приобрели!
