Перевод статьи «How to Become a Better Front-end Developer by Building Projects (Ideas Included)».
Если вы хотите быстро вырасти как фронтенд-разработчик, нет ничего лучше работы над проектами.
Дело в том, что вы можете просмотреть все видеоруководства и пройти множество курсов, но если вы не будете практиковаться, вы не приобретете навыков, необходимых для создания приложений.
Проекты клиентов, над которыми вы планируете работать в будущем, не снабжены пошаговыми инструкциями (иначе ваши услуги вообще не понадобились бы). Чтобы создать реальный проект, вам придется выдавать нестандартные идеи, находить решения, идти на разумные компромиссы.
Лучший способ научиться все это делать — работать над проектами по фронтенду и учиться по дороге. А знаете, что здесь лучше всего? Чтобы начать, вам не нужно искать клиента: вы можете реализовывать собственные проекты.
Как выбрать личный фронтенд-проект
Учитывайте свой уровень навыков
Не выбирайте слишком сложный для себя проект, особенно если легко теряете мотивацию, когда становится трудно. Но не забывайте, что ваша цель — развитие навыков. А развиваются они, когда вы беретесь за задачи, с которыми можете справиться, но для этого нужно чуть подтянуть свои знания и умения.
Например, если вы недавно изучили HTML и CSS, пора идти дальше и браться за изучение JavaScript.
Решайте свои личные задачи и интересные вам проблемы
Когда ваш проект призван решить ваши личные задачи, вы с большей вероятностью доведете его до конца.
Может, вы постоянно теряете счет времени, когда прокручиваете ленту Facebook, и вам нужен какой-то тайм-трекер или блокиратор. А может, вы хотели бы иметь приложение, генерирующее привлекательные миниатюры для роликов на YouTube.
Подумайте, какую свою проблему вы могли бы решить при помощи известных вам технологий, и начните с нее. Все варианты, которые мы предлагаем в этой статье, — лишь отправные точки. Если вы разовьете эти идеи в соответствии со своими нуждами, проекты от этого только выиграют.
4 интересных фронтенд-проекта
Клон какого-нибудь сайта
Отрабатываемые навыки: HTML, CSS, JavaScript и/или Bootstrap.
Создание клона сайта это отличный способ исследовать, как на этом сайте все утроено, изучить основы структурирования страниц, разобраться с цветами, шрифтами, медиа, таблицами и прочими вещами. Старайтесь максимально вникнуть во все подробности, чтобы воспроизвести все в точности.
Выбирайте сайт, который вам нравится, и стройте его самостоятельно. Не подглядывайте в исходный код оригинала без абсолютной необходимости: так вы получите максимум пользы от этой работы.
Компания Thinkful предлагает курсы по веб-разработке. В одном из упражнений на этих курсах студентам предлагается создать клон Google. Можете воспользоваться другим упражнением с тех же курсов и создать клон страницы-лэндинга для приложения Karma WiFi. В работе над этим проектом применяются знания HTML и CSS.
Что хорошо в клонировании сайтов, это возможность выбрать подходящий для себя уровень сложности. Если вы только начинаете свой путь в разработке, лучше начать с клонирования самого простого сайта, чтобы потренироваться работать с HTML и CSS. А если у вас уже уровень повыше, — беритесь за сайты, для воспроизведения которых потребуются навыки работы с JavaScript или React.
Викторина на JavaScript
Работая над таким проектом, можно научиться применять на практике знания JavaScript.
JavaScript — язык программирования, позволяющий создавать интерактивные веб-страницы. С его помощью можно создавать отзывчивые элементы, такие как меню, видеоплееры, анимации, интерактивные карты и даже браузерные игры.
Но, прежде чем продолжить, давайте разберемся, зачем создавать именно викторину.
Викторины это больше, чем просто занятные тесты или игры. На самом деле это один из инструментов маркетинга. Видали когда-нибудь подобные вопросы?
Викторины являются прекрасным инструментом маркетинга именно в силу своей интерактивности. Чтобы пройти какой-нибудь тест, пользователь должен активно участвовать, а это приковывает внимание к странице куда больше, чем чтение статического контента.
Поэтому тесты часто используются с маркетинговыми целями. Обычные тесты, вроде того, что на первой картинке, используются для привлечения трафика на сайт. Но есть и более замысловатые способы их использования.
Мы остановились на этой теме, потому что ваша задача как фронтенд-разработчика состоит не только в том, чтобы «сделать красиво». Вы должны создавать дружественный к пользователю функционал, благодаря которому сайты ваших клиентов смогут более эффективно достигать маркетинговых целей.
В создании викторины вам помогут туториалы от WebDevTrick и SitePoint. Вот как может выглядеть ваша викторина (пример с SitePoint):
See the Pen Simple JavaScript Quiz (No Pagination) by SitePoint (@SitePoint) on CodePen.
Ваш собственный QR-ридер
Отрабатываемый навык: JavaScript.
Штрихкоды и QR-коды изменили наш подход к шоппингу. Теперь покупатели могут сканировать продукт своими смартфонами и находить самую разную информацию о нем, например, цену или адрес магазина, где его можно купить.
Также QR-коды отметают необходимость публиковать длинные коды активации или номера моделей на сайте, благодаря чему шоппинг становится проще.
Вопреки распространенному мнению, для сканирования QR-кодов вовсе не обязательно устанавливать приложение, созданное специально для вашего телефона. С чтением этих кодов могут справиться и сайты, имеющие доступ к камере устройства.
Эта пошаговая инструкция научит вас создавать собственные ридеры для считывания QR-кодов.
В ходе работы над этим проектом вы будете использовать HTML и JavaScript, а также JS-библиотеку, которая умеет распознавать QR-коды. Хорошая новость состоит в том, что вам не придется создавать этот функционал с нуля, ведь для этих целей уже создано множество библиотек.
Погодное приложение
Изучается Angular 8.
Angular это один из трех самых популярных фронтенд-фреймворков (наряду с React и Vue.js). Он часто применяется для создания приложений, в которых вам нужно зарегистрироваться, чтобы создать аккаунт. Но Angular вполне можно использовать и для создания игр, и для разработки элементов виртуальной реальности.
На Medium есть очень подробное пошаговое руководство для начинающих по созданию красивого погодного приложения на Angular 8. Конечный результат выглядит так:
Это приложение имеет простой интерфейс и чистый, минималистичный дизайн с красивыми иллюстрациями. Также есть светлый и темный режим, что добавляет проекту баллов.
Этот проект особо примечателен тем, что позволит вам создать полезное, отзывчивое приложение с нуля. Вы научитесь всему: от установки Node.js и Angular CLI до тестирования вашего кода при помощи LightHouse.
Хотя создатель руководства имеет свои предпочтения по части дизайна, вы вполне можете поменять стили и проявить творческую жилку. Ничто не мешает вам использовать свои CSS-стили и анимации, свое лого, иконки и прочие элементы дизайна.
Если сделаете все правильно, на выходе у вас получится красивое и впечатляющее приложение для портфолио.
Этот туториал предназначен для начинающих, но вам все равно нужно быть хоть немного знакомым с Angular. Начать знакомиться лучше всего на Angular.io.
Собственный сайт-портфолио
Обычно над проектами вы будете работать вместе с веб-дизайнером, который будет показывать, как должен выглядеть сайт.
Хотя дизайн и разработка это две разные сферы деятельности, понимание основ дизайна расширит ваш набор навыков, а также позволит работать над какими-то проектами самостоятельно (например, в качестве фрилансера).
Работая над собственным сайтом-портфолио, вы сможете продемонстрировать как технические навыки, так и творческую сторону вашей личности.
Для начала подумайте над тем, какую идею вы хотите продвигать, каким будет ваш бренд. Какие основные услуги вы будете оказывать и почему клиенты должны выбрать именно вас? (О брендинге можно почитать здесь).
Затем нужно создать пробный дизайн, в котором вы подберете подходящий макет, цвета, шрифты.
Подумайте о теме. Должна она быть минималистичной или броской? Монохромной или яркой? Затем набросайте список необходимых страниц. Обычно на таких сайтах есть страница с контактами, несколько постов в блоге, страница «Обо мне», а также «Условия и соглашения».
Наконец, напишите код! Используйте современный CSS, добавьте анимации, вставьте картинки высокого качества. Вас ничто не ограничивает: с вашим сайтом-портфолио вы можете делать все, что захотите, потому что он ваш личный. Пользуйтесь этим!
Где фронтенд-разработчик может попрактиковаться?
Хотя самый лучший способ практиковаться — самостоятельно создавать приложения и сайты, все равно хорошо иметь площадки для тренировки. То есть, платформы, где можно найти советы и руководства, а также обратиться к сообществу за советом.
Как фронтенд-разработчику, вам пригодятся следующие площадки:
- freeCodeCamp.org — сайт с бесплатными руководствами по веб-разработке, языкам и подходам. Здесь вы также найдете отличное сообщество, которое поможет вам во многих ситуациях.
- Modern HTML & CSS From the Beginning (Современные HTML & CSS с самого начала) — курс на Udemy от Брэда Трэверси. Пройдя этот курс, вы узнаете все, что нужно, чтобы начать работать с этими языками.
- Frontendmentor.io. Здесь вы сможете найти бесплатные и «премиальные» задачи для отработки навыков, которыми сможете заняться в свободное время. Сложность задач варьируется от «junior» до «advanced». На иллюстрации вы можете видеть примеры задач:
Помните, в сфере разработки ваше мастерство определяется практикой. Для улучшения навыков вам НЕОБХОДИМО создавать что-нибудь.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
