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

Чем именно занимаются фронтенд-разработчики?

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

  • Разработка макетов
  • Укладка
  • Государственное управление
  • Обработка и рендеринг асинхронных данных

Следующие шаги помогут вам начать все с нуля.

1. Изучите HTML

HTML (язык гипертекстовой разметки) - это основной строительный блок любой веб-страницы. Он определяет значение и структуру веб-контента. Вам не нужно изучать каждую деталь HTML или каждого тега. Вот несколько ключевых моментов, на которых вам следует сосредоточиться:

  • Базовая конструкция HTML-страницы
  • Добавление и форматирование текста в HTML
  • Создание списков, таблиц и форм
  • Встраивание ссылок, изображений и видео

Ресурсы

Статья по изучению HTML от html.com

Ускоренный курс HTML на YouTube Мош Хамедани

2. Изучите CSS.

Теперь, когда у нас есть различные элементы, добавленные на нашу страницу с помощью HTML, нам нужно стилизовать их с помощью CSS (каскадные таблицы стилей). CSS описывает, как должны отображаться элементы HTML. Ниже приведены некоторые важные концепции:

  • Селекторы CSS (для выбора определенного или группы элементов HTML)
  • Единицы в CSS (абсолютные значения пикселей, проценты, em + rem, vh + vw)
  • Позиционирование CSS (статическое, относительное, абсолютное, фиксированное, липкое)
  • блочная модель CSS
  • CSS Flexbox
  • Сетки CSS

Советы и рекомендации

Удалите все поля и отступы по умолчанию с веб-страницы

Используйте Clamp вместо медиа-запросов

Используйте относительные единицы вместо абсолютных, чтобы страница была отзывчивой.

*{ 
  padding: 0; 
  margin: 0;
  box-sizing:border-box;
}

Ресурсы

Плейлист Learn CSS на YouTube от Web Dev Simplified

2.1 CSS-фреймворки

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

Некоторые популярные варианты (выберите один):

  • Попутный ветер CSS
  • Bootstrap5
  • Материализовать
  • Бульма

3. Изучите JavaScript.

Теперь вы можете создавать красивые веб-страницы с помощью HTML и CSS. Но как сделать его функциональным? Как вы на самом деле отправляете форму при нажатии кнопки или динамически обновляете содержимое при определенных событиях? Ответ - JavaScript.

JavaScript - это язык сценариев, который можно использовать для написания как клиентского кода (кода, который выполняется в браузере), так и серверного кода (с Node.js и Deno). Вы можете написать целое приложение, используя только один язык, тем самым упростив процесс разработки и ускорив работу приложения. Вот почему JavaScript так популярен и обязателен к изучению любому начинающему разработчику.

Базовый JavaScript

  • Переменные, типы данных, циклы и функции
  • Объекты JavaScript и ключевое слово this
  • Объектная модель документа (DOM)
  • Разница между ключевыми словами var / let / const
  • Методы массива (foreach, map, filter, reduce и т. Д.)

Расширенные концепции

Когда вы закончите с основами, следование продвинутым концепциям JavaScript поможет сделать код эффективным и кратким, а также поможет получить данные из API и отобразить их. Вам следует ознакомиться с некоторыми сложными концепциями:

  • Возможности ES6, такие как стрелочные функции, литералы шаблонов, деструктуризация.
  • Обратные вызовы и обещания
  • Асинхронное программирование (async / await)
  • API Fetch

Ресурсы

Изучите JavaScript - Полный курс для начинающих от freeCodeCamp

Вопросы для интервью по JavaScript от интервьюbit

4. Фреймворки JavaScript

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

Самыми популярными фреймворками сегодня являются React, Angular, Vue.js. Не рекомендуется пытаться все выучить. Выберите любой из них. React и Vue.js сравнительно легче освоить, но у них меньше функций; в то время как Angular имеет массу функций, но требует более крутого обучения.

React - это библиотека с открытым исходным кодом, поддерживаемая Facebook. Он пользуется большим спросом, прост в освоении, имеет отличное сообщество (вы найдете решения даже для самых редких проблем на Stack Overflow) и имеет хорошую документацию. Следовательно, это может быть отличный выбор. Следующая статья может внести больше ясности в то, какая структура может лучше всего соответствовать вашим требованиям.



Vue vs React vs Angular: какой фреймворк вы бы выбрали?
Этот блог представляет собой подробное сравнение трех самых популярных фреймворков JavaScript: Vue, React, Angular и case… medium.com



Ресурсы

Https://reactjs.org/docs/getting-started.html - официальная документация

Учебный плейлист по React от Codevolution

Learn Angular - Полный учебный курс

Learn Vue.js - Полный курс для начинающих

5. Изучение Git

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

Git - это инструмент командной строки, но центром, вокруг которого вращается все, что связано с Git, является хаб - GitHub.com, где разработчики хранят свои проекты и общаются с единомышленниками. Изучив git, вы можете участвовать в проектах с открытым исходным кодом на Github. Участвуя в проектах с открытым исходным кодом, вы многому научитесь, и это поможет укрепить присутствие в Интернете.

Ресурсы

Ускоренный курс Git и Github от freeCodeCamp

Что такое git и как им пользоваться от simpleilearn

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

6. Глобальное государственное управление

  • React: Контекстный API, Redux, MobX
  • Угловой: общая служба, NgRx
  • Vue.js: Vuex

7. Рендеринг на стороне сервера

  • Реагировать: Next.js
  • Vue.js: Nuxt.js
  • Угловой универсальный (Angular)

8. Необязательно

  • Изучите развертывание и разместите свои проекты (Netlify, страницы Github, Heroku).
  • Изучите TypeScript (привносит в JavaScript «строгую» систему типов). Это делает ваш код более надежным и менее подверженным ошибкам. Отлично подходит для больших проектов.
  • Firebase может быть действительно полезен для создания приложений с полным стеком в качестве внешнего разработчика, не требуя больших знаний о серверной части и базах данных и с минимальным кодом на стороне сервера. Также предоставляется бесплатный хостинг.
  • Изучите некоторые среды тестирования (например, Jest и Mocha для JavaScript).
  • Создайте веб-сайт-портфолио, чтобы отображать свои работы и проекты.

Поздравляем! Теперь вы веб-разработчик.

Больше контента на plainenglish.io