Что следует знать перед тем, как начать карьеру в области фронтенд-разработки
Это статья для всех, кто хочет начать фронтенд-разработку без опыта программирования. Конечная цель - помочь энтузиастам понять сложный мир разработки программного обеспечения и помочь им найти свой путь в этой многолюдной экосистеме. Результатом является дорожная карта для начала процесса обучения.
Оглавление
- Вступление
- Основы Интернета
- Технологии веб-разработки
- Процесс написания кода для его воплощения в жизнь
- Экосистема разработки программного обеспечения
- 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. Это бесплатное программное обеспечение с открытым исходным кодом.
Современные интерфейсные библиотеки и фреймворки
Примечание. Приведенные ниже определения взяты из Википедии и других интернет-источников.
- AngularJs AngularJS - это интерфейсный веб-фреймворк на основе JavaScript с открытым исходным кодом, который в основном поддерживается Google и сообществом отдельных лиц. Это один из самых популярных фреймворков для интерфейсной разработки . - Википедия.
- ReactJs React - это библиотека JavaScript для создания пользовательских интерфейсов. Он поддерживается Facebook и сообществом индивидуальных разработчиков . - Википедия.
ReactJs также является одним из самых популярных, с большим сообществом вокруг него. - VueJs Vue - это платформа JavaScript Model – View – ViewModel с открытым исходным кодом для создания пользовательских интерфейсов и одностраничных приложений. Он был создан Эваном Ю и поддерживается им и остальными активными членами основной команды из различных компаний, таких как Netlify и Netguru . - МарсМедиа
Для начала просто сконцентрируйтесь на одном. У вас, как у младшего разработчика, множество возможностей трудоустройства, но опять же, я подчеркиваю 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
- Https://www.youtube.com/user/DesignCourse
Отличный канал на YouTube, на котором рассказывается и преподается интерфейс разработки. - Https://www.udemy.com/course/web-design-for-beginners-real-world-coding-in-html-css/
Хороший курс для начинающих по HTML и CSS. - Https://egghead.io/playlists/css-fundamentals-238ce697
CSS для начинающих - Https://www.coursera.org/specializations/web-design
Еще один хороший курс по HTML и CSS.
JavaScript
- Https://www.udemy.com/course/javascript-basics-for-beginners/
- Https://www.udemy.com/course/javascript-for-beginners-introduction-learn-fast-easy/
- Https://www.udemy.com/course/modern-javascript/
- Https://www.coursera.org/learn/javascript-jquery-json
- Https://www.edx.org/course/javascript-introduction
- Https://www.edx.org/course/programming-for-the-web-with-javascript
Код VS
- Https://egghead.io/browse/tools/vscode
Это хорошее место для вас, чтобы узнать больше об IDE и VsCode.
Git
- Https://www.udemy.com/course/git-going-fast/
- Https://gist.github.com/nicowilliams/a6e5c9131767364ce2f4b3996549748d
- Https://egghead.io/browse/tools/git
- Https://www.udemy.com/course/git-complete/
NodeJS
- Https://www.w3schools.com/nodejs/default.asp
- Https://nodejs.dev/learn/introduction-to-nodejs
- Https://www.youtube.com/watch?v=TlB_eWDSMt4
- Https://www.youtube.com/user/programmingwithmosh
- Https://www.udemy.com/course/the-complete-nodejs-developer-course-2/
npm
- Https://www.udemy.com/course/understanding-npm/
- Https://www.tutorialspoint.com/nodejs/nodejs_npm.htm
- Https://www.w3schools.com/nodejs/nodejs_npm.asp
Протокол HTTP
ReactJs
- Https://reactjs.org/tutorial/tutorial.html
Это лучшее место для начала. На веб-сайте React есть отличное простое руководство по обучению основам. - Https://reactjs.org/community/courses.html
А потом зацените это. - Https://www.w3schools.com/react/
- Https://egghead.io/courses/the-beginner-s-guide-to-react
Chrome DevTools
GitHub
Заключение
Стимулом к написанию этой статьи было помочь увлеченным людям, не имеющим опыта в программировании, изучить разработку программного обеспечения, особенно веб-интерфейс. Обсуждаемые здесь вещи - это основы, которые вам следует изучить перед изучением любой библиотеки или фреймворка. Прежде чем выбирать какой-либо продвинутый учебный материал, вам необходимо хорошо знать JavaScript + HTML + CSS. Тогда все станет намного проще, и вы довольно быстро изучите любой интерфейсный фреймворк.
Спасибо за прочтение!