16 шагов, чтобы стать младшим разработчиком полного стека

Одна из самых востребованных профессий в современном мире — Разработчик. Есть несколько путей, по которым можно начать свой путь в индустрии веб-разработки в качестве младшего разработчика. Прежде чем начать свою карьеру в этой отрасли, люди обычно сталкиваются с фразами PHP, ASP.net, Python (Django), Angular, Vue, React и т. д. Люди либо выбирают стеки на основе своих предпочтений, либо при принятии этого решения на них влияет их окружение. Все это отличные способы начать карьеру младшего разработчика, но в этом посте я поделюсь стратегией из 16 шагов, которая, по моему мнению, может помочь вам быстро стать младшим разработчиком полного стека, а также охватить отрасль. - передовые технологии и навыки для размещения.

Шаг 1: HTML, CSS и GIT

Начните с HTML (языка гипертекстовой разметки), основы каждого веб-сайта. Веб-сайт неполноценен без HTML, как человек без костей. Изучите все следующие основные теги в HTML надлежащим образом и изучите их таким образом, чтобы вам было удобно и вы знали, когда использовать каждый из них. Наиболее распространенные и основные теги: p, a, body, html, div, em, h1, h2, h3, h4, h5, h6, head, img, input, li, ul, ol, span, strong и т. д. Затем приступайте к изучению CSS (каскадных таблиц стилей). Подобно тому, как переодевание и стилизация делают человека привлекательным и впечатляющим, веб-сайт выглядит хорошо и привлекательно только тогда, когда он оформлен с помощью CSS. Поэтому после того, как вы закончите с основными тегами HTML, поиграйте с основными правилами стиля CSS, такими как высота, ширина, цвет, граница, фон, размер шрифта, семейство шрифтов, поля, отступы, переполнение, положение, выравнивание текста. , display и т. д. Поэкспериментируйте с основами HTML и CSS как можно больше. Это поможет вам понять структуру веб-сайтов. Следующим шагом будет знакомство с GIT (системой контроля версий). А пока на начальном этапе просто изучите 3 основные вещи.

• Как сохранить свой код в Github?
• Как создавать репозитории?
• Как отправить свой код в репозиторий Github?

После того, как вы закончите с этими тремя вещами, пришло время создавать веб-сайты. Создайте как минимум 3–4 простых веб-сайта. Не имеет значения, если они выглядят очень плохо, как ваши художественные рисунки в детском саду. Просто сделайте это и разместите свои веб-сайты на страницах GitHub и поделитесь ими со своими друзьями и семьей, что даст вам начальный толчок для погружения в эту область.

Шаг 2: HTML5 и CSS3

Вернемся еще раз к примеру с людьми. Так же, как люди тренируются, чтобы укрепить свои кости, вы должны изучить HTML5, самую последнюю версию HTML, чтобы улучшить свои навыки работы с HTML. Изучите новые теги HTML5, такие как аудио, видео, в стороне, раздел, статья, навигация, заголовок, нижний колонтитул и т. д. Кроме того, узнайте, как создавать таблицы и формы на веб-сайтах. Тогда, пожалуйста, улучшите свой стиль. Как долго вы будете сохранять свой винтажный вид? Улучшите свое чувство стиля с помощью CSS3. Изучите box-shadow, transition, transform, flexbox, макет сетки, переполнение, box-model, специфичность и т. д. Затем, самое главное, начните изучать, что такое отзывчивость и научиться использовать медиа-запросы. Затем необходимо создать как минимум три адаптивных веб-сайта с использованием тегов HTML5, стилей CSS3 и медиа-запросов, чтобы сделать их адаптивными для всех устройств.

Шаг 3: CSS-фреймворки

Закончив с HTML и CSS, вы должны выбрать CSS-фреймворк и начать знакомство с ним. Я бы предпочел изучить Bootstrap или Tailwind CSS. Потратьте некоторое время на документацию выбранного вами фреймворка. Узнайте об отзывчивости с помощью фреймворка без медиа-запросов. Это очень важно в долгосрочной перспективе, поскольку вы будете разрабатывать адаптивные веб-приложения. Нет лучшего способа учиться, чем практиковаться, поэтому создайте как минимум три веб-сайта с использованием фреймворка CSS и убедитесь, что все они адаптивны.

Шаг 4: Базовый JavaScript

Давайте прыгнем в настоящую игру сейчас. Да, JavaScript — жизнь каждого веб-сайта. Веб-сайты не могут функционировать без JavaScript, так же как люди не могут двигаться или что-либо делать без души. Во-первых, изучите пять основных концепций JavaScript, а именно переменные, условия, массивы, циклы и функции. Затем вы должны попрактиковаться в концепциях JavaScript, решая базовые задачи. Термин "решение проблем" в этом контексте не относится к DSA или соревновательному программированию; скорее, это относится к базовому, простому решению проблем, например, к определению наибольшего числа из массива. Затем рассмотрите такие задачи, как простое число, обращение строки, факториал, ряды Фибоначчи и т. д. Кроме того, ознакомьтесь с итеративными и рекурсивными процессами в кодировании. Это не укрепит ваши навыки решения проблем. Но это поможет вам начать свой путь с JavaScript, чтобы стать младшим разработчиком.

Шаг 5: DOM и событие

DOM (объектная модель документа) — это термин в JavaScript, с помощью которого вы можете контролировать все на веб-сайте. Вы можете сказать это как мозг, который управляет всем на веб-сайте путем манипуляций. Посмотрите и потратьте некоторое время на изучение манипулирования DOM. Поэкспериментируйте с такими вещами, как поиск текста, написанного в поле ввода, как изменить это входное значение с помощью манипуляций с DOM, как обрабатывать события при щелчке мыши и т. д. Проще говоря, выясните, как вы можете разработать интерактивность для пользователя на веб-сайт, использующий манипуляции с DOM и обработку событий, и создайте как минимум 3–4 интерактивных веб-сайта. Это поможет вам подумать о том, как работают веб-сайты и как вы можете создавать функции.

Шаг 6: API

Теперь следующий шаг — придать вашему веб-сайту ощущение динамичности с помощью API (интерфейс прикладного программирования). На вашем веб-сайте не настроена база данных или сервер для предоставления вам API. Таким образом, вы можете экспериментировать с бесплатными общедоступными API и переносить данные из другой базы данных на свой веб-сайт и отображать их в пользовательском интерфейсе, что доставит вам большое внутреннее удовлетворение. Доступно множество бесплатных общедоступных API, таких как JSON Placeholder API. Поскольку вы будете работать с данными, вы можете попробовать реализовать одну из общих функций веб-приложений, а именно функцию поиска. Попробуйте создать приложение, в котором вы сможете искать данные и соответствующим образом отображать результаты в пользовательском интерфейсе. Данные должны поступать из API. Кроме того, когда вы работаете с данными, повышайте уровень своей игры и, как и в реальных приложениях, пытайтесь показывать счетчик при загрузке данных из API. Все это начинает давать вам представление о реальных приложениях.

Шаг 7: ES6

Узнайте больше о JavaScript (ES6), таких как let, const, функция стрелки, параметр по умолчанию, три точки, деструктуризация и т. д.

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

Шаг 8: Браузер и отладка

Как разработчик, вы должны знать о браузерах. Во-первых, ознакомьтесь с консолью и вкладкой исходного кода. Затем изучите вкладки сеть, элементы и приложения. Эти возможности браузера помогут вам со сложными большими проектами при разработке веб-приложений. Освоившись с этими вещами, начните изучать отладку. В отладке нет ничего сложного; это просто поиск ошибок и исправление ошибок, когда ваше приложение или код не работает так, как вы хотите. Проще говоря, это процесс выявления ошибок и решения проблем.

Шаг 9: Ревизия

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

Шаг 10: Начало работы с React.js

Вы уже давно работаете с JavaScript. Теперь пришло время погрузиться в мир фреймворков, где мы рассмотрим React.js, созданный Meta Facebook, одной из самых передовых технологий в современном мире. Начните с основ React.js, таких как знание того, что такое компонент и как создать его в своем приложении. Узнайте, как создать проект с помощью create-react-app. Я бы рекомендовал начинать React с функциональных компонентов, потому что классовые компоненты уже мертвы, а функциональные компоненты широко используются в отрасли. Узнайте, как передавать данные компонентам в вашем проекте, а также как динамически управлять данными. Тогда обязательно нужно знать о перехватчиках реакции. На этом этапе ваша задача — изучить упомянутые основы и создать одностраничное приложение (SPA) с использованием React. Кроме того, узнайте, как динамически загружать данные в приложения React.

Шаг 11: Маршрутизатор и управление состоянием

Тем временем вы начали разрабатывать одностраничные приложения с помощью create-react-app, и теперь ваш следующий шаг — создание многостраничных приложений, а для этого вам нужно узнать о React Router. . По мере продвижения в React вы должны знать об управлении состоянием в нескольких компонентах или страницах. Попробуйте сделать интересные и реальные функции, используя все свои знания. Например, попробуйте построить панель инструментов. Для более сложных приложений необходимо знать о Context API и использовать редюсер.

Шаг 12: Аутентификация

В веб-приложении или мобильном приложении одной из важных вещей является система аутентификации. Вы должны знать, как интегрировать систему аутентификации в ваше приложение React. Я до сих пор помню, что мне очень нравилось это во время обучения, потому что интеграция этого заставляет вас действительно чувствовать себя разработчиком. Я рекомендую использовать Firebase для интеграции системы аутентификации в ваше приложение. Кроме того, вы также должны знать, как разместить свое приложение React. Вы также должны узнать, как заставить пользователей входить в ваше веб-приложение с помощью Google, Facebook, Twitter и Github точно так же, как вы входите в реальные приложения. Кроме того, вы должны знать о некоторых полезных пакетах npm, обычно используемых в приложениях React.

Шаг 13: Серверная часть и база данных

До сих пор вы работали на клиентской стороне или, другими словами, на интерфейсе веб-сайта. Итак, теперь пришло время взглянуть на серверную часть и на то, как базовая система работает в приложении с полным стеком. Даже если вы хотите стать фронтенд-разработчиком, вам важно знать основы бэкенда и то, как он работает. Поскольку вы много времени уделяете JavaScript, я бы порекомендовал вам начать с Node.js и MongoDB для серверной части. Узнайте об основных операциях CRUD. Я бы также рекомендовал узнать о защите API с помощью токенов JWT. Эти базовые концепции бэкенда помогут вам понять, как работает бэкэнд-система, но не сделают вас опытным бэкэнд-разработчиком.

Шаг 14: Полный стек

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

Шаг 15: Продолжайте учиться

Это еще не конец. Вы также должны понимать дополнительные понятия, например, как работать с платежными шлюзами в ваших приложениях, как обрабатывать загрузку изображений пользователей и как создать панель администратора, доступную только для системных администраторов. Взгляните на вложенные маршруты, стилизованные компоненты, пользовательский интерфейс материалов и т. д. Убедитесь, что все приложения, которые вы создаете, на 100 % адаптируются для всех устройств, потому что все не просматривают ваше приложение на одном и том же устройстве. Попробуйте изучить Next.js, который является фреймворком для React. По сути, вы сделали основы; теперь это дополнительные вещи, которые каким-то образом помогут вам позже. Однако вы всегда должны быть готовы попробовать что-то новое, если этого требует ваша работа.

Шаг 16: Основы программирования

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

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

Удачного программирования👨‍💻