Как стать лучшим передовым разработчиком, создавая проекты (идеи)

Если вы хотите ускорить свой рост в качестве внешнего разработчика, ничто не сравнится с реализацией реальных проектов разработки.

Правда в том, что вы можете смотреть все учебные пособия и курсы в мире, но без применения и практики вы не приобретете навыки, необходимые для работы над реальными проектами.

Клиентские проекты не идут с пошаговыми инструкциями, потому что в противном случае они вам вообще не понадобятся. Вам придется мыслить нестандартно, находить решения, идти на компромисс и находить свой путь к финишу.

Лучший способ освоить эти навыки - это сделать несколько фронт-эндовых проектов для разработчиков и учиться по пути. И лучшая часть? Вам даже не нужен клиент, чтобы начать, потому что вы можете делать эти проекты самостоятельно.

Имейте в виду свой уровень мастерства

Не выбирайте проект, который слишком продвинут для вашего уровня квалификации, особенно если вы тот тип, который теряет мотивацию, когда дела становятся слишком сложными.

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

Например, если вы недавно изучили HTML и CSS, пришло время повысить уровень, изучив JavaScript.

Решите личную проблему или проблемы, которые вас волнуют

Вы также с большей вероятностью будете наслаждаться проектом, если он решает ваши собственные проблемы или отвечает вашим собственным желаниям.

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

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

Навыки: HTML, CSS, JavaScript и / или Bootstrap.

Создание клона веб-сайта - это отличный способ изучить его структуру и изучить основы структуры страницы, цвета, шрифты, мультимедиа, таблицы и многое другое. Укажите как можно больше деталей, чтобы воспроизвести оригинал.

Выберите понравившийся веб-сайт и создайте его клон самостоятельно. Не смотрите на исходный код как можно больше, чтобы получить максимальную отдачу от него.

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

Вы также можете выполнить это упражнение, чтобы помочь вам клонировать целевую страницу приложения под названием Karma WiFi. Он был создан Кайлом Коски, одним из наставников Thinkful, и использует HTML и CSS.

Что хорошего в клонировании сайта, так это то, что вы можете выбрать уровень сложности сайта. Если вы только начинаете, простой сайт, который нуждается только в HTML и CSS, является хорошим для начала. Если вы более продвинуты, выберите сайт, который требует JavaScript или React.

Навыки: JavaScript

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

Но прежде чем мы продолжим, важно знать, почему вы хотите построить тест.Это больше, чем веселье и игры. Викторины на самом деле набирают популярность как инструменты контент-маркетинга. Вы когда-нибудь видели такие вещи?

Викторины являются потрясающими инструментами маркетинга, потому что они являются интерактивными. Согласно опросу, проведенному Институтом контент-маркетинга, 81% маркетологов согласны с тем, что интерактивный контент - любой вид контента, требующий участия пользователя - привлекает внимание более эффективно, чем статический контент.

По этой причине тесты используются для различных маркетинговых целей. Тривиальные тесты, как слева, используются для увеличения трафика на сайт. Некоторые маркетологи также используют викторины для определения потенциальных клиентов, потенциальных клиентов и повышения вовлеченности.

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

Чтобы создать тест, ознакомьтесь с этими учебными пособиями по тестированию JavaScript из WebDevTrick и SitePoint. Вот как может выглядеть ваша JS-викторина:

Навыки: JavaScript

Штрих-коды и QR-коды изменили способ совершения покупок. Теперь клиенты могут сканировать продукт со своих смартфонов и узнавать различную информацию о нем, например, цену или где они могут его купить.

Это также избавляет от необходимости вводить длинные коды на веб-сайте, такие как коды активации или номера моделей, что делает процесс совершения покупок более простым и удобным.

Вопреки тому, что думают другие, вам не нужно приложение для телефона для сканирования QR-кодов.

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

Это руководство покажет вам пошаговый процесс создания вашего собственного считывателя QR-кода.

Вы будете использовать HTML и JavaScript, но наиболее важной частью является использование библиотеки JS, которая может интерпретировать QR-код. Хорошей новостью является то, что вам не нужно создавать ее с нуля, потому что для этой цели есть множество отличных библиотек.

Навыки: Angular 8

Angular является одной из трех самых популярных сред разработки интерфейсов наряду с React и Vue.js. Он обычно используется для создания приложений на основе форм (где необходимо зарегистрироваться, чтобы создать учетную запись), но также может использоваться для создания игр и даже приложений с элементами виртуальной реальности.

Существует очень подробное пошаговое руководство по Medium, которое научит новичков, как создавать прекрасные погодные приложения с Angular 8 (последняя версия Angular). Приложение погоды выглядит так:

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

Что хорошего в этом проекте, так это то, что вы почувствуете, каково это создать удобное и отзывчивое приложение с нуля. Вы узнаете все от установки Node.js и Angular CLI до тестирования вашего кода с LightHouse.

И хотя создатель учебного пособия, очевидно, вставил свой собственный дизайн, вы можете добавить свой собственный стиль и быть настолько креативным, насколько захотите. Вы можете поиграть со стилем CSS и анимацией и даже использовать свой собственный логотип, значки и другие дизайнерские материалы.

Сделайте это правильно, и в вашем портфолио появится впечатляющее приложение о погоде.

Вы можете получить доступ к учебнику здесь.

Хотя этот урок удобен для начинающих, вам все же нужно немного познакомиться с Angular. Если вы хотите изучать Angular, лучше всего начать с Angular.io.

В типичном проекте вы, скорее всего, будете работать вместе с веб-дизайнером, который покажет, как будет выглядеть веб-сайт.

Хотя дизайн и разработка, возможно, являются двумя разными областями, понимание веб-дизайна не только добавит еще один набор навыков в ваш арсенал, но и даст вам возможность стать соло-фрилансером и работать над проектами от проектирования до развертывания.

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

Первый шаг - подумать о вашем сообщении или брендинге. Каковы ваши основные услуги, кого вы хотите обслуживать, и почему они должны выбирать вас? (Подробнее о брендинге читайте здесь.)

Второе - создать макет, который детализирует макет, цвета и типографику.

Кроме того, подумайте о теме. Это минималистский или громкий и в стиле фанк? Это монохромный или будет использовать смелые цвета? Затем составьте список страниц, которые вам понадобятся. Это часто включает страницу контактов, несколько постов в блоге, страницу обо мне и страницу с условиями.

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

Хотя лучший способ попрактиковаться в разработке фронт-энда - это создавать собственные приложения и веб-сайты для приложений, но все равно замечательно иметь место, где можно получить советы, получить доступ к учебным пособиям и получить поддержку, когда вы застряли или нуждаетесь в чем-то.

Это отличные места, чтобы получить помощь, когда вы занимаетесь разработкой фронт-энда:

- freeCodeCamp.org - это веб-сайт с бесплатными учебниками по теории веб-разработки, языкам и лучшим практикам. Здесь также есть замечательное сообщество, которое может помочь с вашими вопросами.

- Современный HTML и CSS с самого начала - это курс удэми от Брэда Траверси. Он содержит полезную информацию и может действительно научить вас всему, что вам нужно для начала работы с этими языками.

- Frontendmentor.io - здесь вы можете найти бесплатные и премиальные «задания» размером с прикус, которые вы можете выполнять в свободное время для развития своих навыков. Сложность испытаний варьируется от «младшего» до «продвинутого». Вот примеры проблем, которые вы найдете здесь:

Есть еще ресурсы, которыми я бы хотел поделиться с вами, но чтобы это не было слишком длинным, вы можете воспользоваться этой ссылкой, чтобы увидеть мой полный список рекомендуемых курсов.

Это 5 забавных проектов по разработке, которые вы можете попробовать сегодня. Опять же, они подразумеваются как отправные точки. В конечном счете, вам нужно настроить его, чтобы добавить немного вашего личного прикосновения :)

Помните, это все о практике. Вам нужно строить вещи, чтобы улучшить свой набор навыков.

Удачного кодирования!

Спасибо за чтение.

Ссылка на оригинал