Канадский разработчик Гаретт Левин, собрал 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: вывод средств. Как вывести средства с международной биржи труда в России и Украине?
