Что следует знать перед тем, как начать карьеру в области фронтенд-разработки

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

Оглавление

  • Вступление
  • Основы Интернета
  • Технологии веб-разработки
  • Процесс написания кода для его воплощения в жизнь
  • Экосистема разработки программного обеспечения
  • Front-end технологии разработки
  • Как правильно выбрать инструменты
  • План и дорожная карта
  • Учебный материал
  • Заключение

Вступление

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

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

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

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

Основы Интернета

Начнем с вопроса, из чего состоит веб-страница.

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

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

Элементы веб-страницы

Почти все остальное, что вы видите на веб-странице, каким-то образом представляет собой композицию из этих базовых элементов:

  • Текст
  • Изображение
  • Аудио
  • видео
  • Ссылки (элемент навигации)

Цель веб-сайта - доставлять информацию вместе с пользовательским интерфейсом, ориентированным на бизнес.

Технологии веб-разработки

Существует три основных технологии, которые позволяют веб-разработку:

  • HTML (язык гипертекстовой разметки)
  • CSS (каскадные таблицы стилей)
  • JavaScript (динамический язык программирования, который понимают браузеры)

HTML

Язык гипертекстовой разметки (HTML) - это стандартный« язык разметки для документов, предназначенных для отображения в веб-браузере . Этому могут помочь такие технологии, как Каскадные таблицы стилей (CSS) и языки сценариев, такие как JavaScript. - Википедия

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

Вот список HTML-тегов.

CSS

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

JavaScript

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

Итак, теперь мы знаем, что с помощью трех технологий мы можем создавать веб-страницы. Мы рассмотрим, как это сделать, в дальнейших шагах.

Процесс написания кода, чтобы воплотить его в жизнь

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

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

Помните этот факт: весь процесс повторяется. Каждый раз, когда вы размещаете свое приложение в сети, вы должны отслеживать запросы и отзывы пользователей или заинтересованных сторон, а затем планировать изменения.

Управления источником

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

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

Экосистема разработки программного обеспечения

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

В этой теме я собираюсь дать вам несколько ссылок на центры знаний в области технологий, особенно для интерфейсной разработки.

W3Schools

W3Schools - один из хороших справочников для начала изучения JavaScript, HTML и CSS. Он также охватывает некоторые другие темы, такие как React и SQL. Это хорошее место для начала работы с названными темами.

"Переполнение стека"

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

NpmJS org

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

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

GitHub

Существует несколько облачных платформ управления, но эта особенная, потому что вы можете найти множество популярных проектов и библиотек с открытым исходным кодом. Кроме того, почти все исходные коды пакетов npm размещены на GitHub. Рассматривайте GitHub как платформу для обмена кодом.

Удэмы

Udemy - одна из образовательных платформ для технологической индустрии, которая помогает разработчикам развивать свои навыки. На этой платформе существует множество различных курсов, связанных с фронтенд-разработкой, которые вы можете просматривать и выбирать.
Существуют также другие платформы, такие как Coursera, Edx, Lynda и некоторые другие, где вы можете найти курсы, связанные с фронтенд-разработкой.

HackerRank

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

Front-End технологии разработки

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

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

Концепции JavaScript, которые вам следует изучить:

  • Лексическая структура
  • Выражения
  • Типы
  • Переменные
  • Функции
  • this
  • Стрелочные функции
  • Петли
  • Области применения
  • Массивы
  • Литералы шаблона
  • Точка с запятой
  • Строгий режим
  • ECMAScript 6, 2016, 2017
  • JSON
  • Nodejs. Это среда для запуска JavaScript на сервере или любой машине, независимой от браузера.
  • Модель HTTP-запроса и ответа и концепции REST API.
  • Работа с файлами и машинными ресурсами с помощью JavaScript
  • Async / await и Модули
  • Нпм

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

Изучите JQuery, библиотеку JavaScript, предназначенную для упрощения обхода дерева HTML DOM и управления им, а также обработки событий, анимации CSS и Ajax. Это бесплатное программное обеспечение с открытым исходным кодом.

Современные интерфейсные библиотеки и фреймворки

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

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

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

Как правильно выбрать инструменты

Вам нужны инструменты для написания кода, его выполнения и отладки. Вот мои предложения по основным инструментам. (Примечание: определения ниже взяты из Википедии и других интернет-источников.)

VS-Код

Visual Studio Code - это редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Он включает встроенный Git и поддержку отладки, выделения синтаксиса, интеллектуального завершения кода, фрагментов и рефакторинга кода . - Википедия.

ЗШ

Z« shell - это оболочка Unix или CLI, которая может использоваться как интерактивная оболочка входа в систему и как интерпретатор команд для сценариев оболочки. ZSH поддерживает плагины и предоставляет множество функций, упрощающих работу с CLI »- Википедия .

"Почтальон"

Postman - популярный клиент API, который упрощает разработчикам создание, совместное использование, тестирование и документирование API. Это достигается за счет того, что пользователи могут создавать и сохранять простые и сложные запросы HTTP / s, а также читать их ответы . - DZone.

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

План и дорожная карта

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

Вы можете изучить фронтенд-разработку, начав курс Udemy ReactJs, но затем на собеседовании вы столкнетесь с множеством новых и неизвестных вопросов и ключевых слов. Моя цель - помочь вам как истинному разработчику изучить основы фронтенд-разработки. И также помните, что чтобы чему-то научиться, вам нужно что-то делать, поэтому вам нужно писать код с нуля.

Учебный материал

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

HTML + CSS

JavaScript

Код VS

Git

NodeJS

npm

Протокол HTTP

ReactJs

Chrome DevTools

GitHub

Заключение

Стимулом к ​​написанию этой статьи было помочь увлеченным людям, не имеющим опыта в программировании, изучить разработку программного обеспечения, особенно веб-интерфейс. Обсуждаемые здесь вещи - это основы, которые вам следует изучить перед изучением любой библиотеки или фреймворка. Прежде чем выбирать какой-либо продвинутый учебный материал, вам необходимо хорошо знать JavaScript + HTML + CSS. Тогда все станет намного проще, и вы довольно быстро изучите любой интерфейсный фреймворк.

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