Education Ecosystem Blog

Канадский разработчик Гаретт Левин, собрал 5 проектов, для начинающих фронтенд разработчиков.

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

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

Цель:  воссоздать pixel perfect дизайн и решить проблемы адаптивной верстки

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

Изучайте веб разработку, с помощью онлайн уроков, каждый понедельник и среду в 20:00, на канале: Быстрый старт в веб-разработке (на странице проекта доступный записи всех уроков).

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

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

Следующим шагом будет создание адаптивного многостраничного веб-сайта. В сети есть множество бесплатных шаблонов, но достаточно сложно найти действительно хороший. Theme Forest – замечательное место, где вы можете приобрести работы дизайнеров. Помните, вы пытаетесь стать веб-разработчиком, а не дизайнером. Не ждите, что сразу сможете стать и тем, и другим. Много веб-разработчиков не имеют никаких навыков в дизайне и, наоборот, есть много дизайнеров, которые совершенно не умеют программировать. Поэтому сосредоточьтесь на своем выборе, на веб-разработке!

Для более быстрого старта в веб разработке оцените проект: Быстрый старт в веб-разработке

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

Цель: Создать простую игру на JavaScript и jQuery.

Особенность изучения JavaScript для начинающих фронтенд разработчиков в том что бывает сложно выбрать проект по своим силам. Отличным вариантом для начинающего веб программиста может стать разработка викторины. Это поможет вам разобраться в Document Object Model. Уровень сложности викторины будет зависеть только от вас. Начните с создания простой игры, в которой будет несколько вопросов с возможностью выбора варианта ответа. Вы узнаете много  нового о работе с данными. В этот раз не стоит тратить  много времени на дизайн того, что вы создаете. Я бы порекомендовал вам использовать CSS-фреймворк, например: Bootstrap, дабы быстро стилизовать вашу игру.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оригинал

————————————————————————————————————————

Рекомендуем к прочтению: Upwork: вывод средств. Как вывести средства с международной биржи труда в России и Украине?