Share This
Связаться со мной
Крути в низ
Categories
//Как стать Frontend-разработчиком: дорожная карта 2022

Как стать Frontend-разработчиком: дорожная карта 2022

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

kak stat frontend razrabotchikom dorozhnaja karta 2022 126a183 - Как стать Frontend-разработчиком: дорожная карта 2022

Содержание

  • Internet.
  • HTML.
  • CSS.
  • JavaScript.
  • Пакетные менеджеры.
  • CSS-архитектура.
  • CSS-препроцессоры.
  • Инструменты сборки.
  • Фреймворки.
  • Modern CSS.
  • Компоненты.
  • CSS-фреймворки.
  • Тестирование.
  • Типизация.
  • GraphQL.
  • Генераторы статических сайтов.
  • Фреймворки для разработки мобильных приложений.
  • Фреймворки для разработки десктопных приложений.
  • Скачать карту.

Internet

kak stat frontend razrabotchikom dorozhnaja karta 2022 8924f0e - Как стать Frontend-разработчиком: дорожная карта 2022

Как работает Internet

Интернет — это глобальная сеть компьютеров, которые соединяются и обмениваются данными с помощью стандартизированных протоколов, например, HTTP или HTTPS.

Что такое HTTP

HTTP — это протокол связи. С его помощью реализуют модель «клиент-сервер».

Как работает браузер

Браузер — это приложение, которое отображает веб-страницы на экране.

Как работает DNS

DNS переводит доменные имена в IP-адреса. Например, имя сайта mysite.com становится 125.0.0.1

HTML

kak stat frontend razrabotchikom dorozhnaja karta 2022 7abea51 - Как стать Frontend-разработчиком: дорожная карта 2022

Базовая верстка

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

Формы и валидация

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

Практики верстки

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

CSS

kak stat frontend razrabotchikom dorozhnaja karta 2022 39154fa - Как стать Frontend-разработчиком: дорожная карта 2022

Базовые стили

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

Создание макетов

Макеты позволяют размещать элементы на веб-страницах.

  • Float
  • Grid
  • Flexbox
  • Position
  • Display
  • Box model

Отзывчивый дизайн

Отзывчивый дизайн позволяет адаптировать веб-страницы для всех размеров экрана. Например, медиазапросы CSS.

JavaScript

kak stat frontend razrabotchikom dorozhnaja karta 2022 b488dd6 - Как стать Frontend-разработчиком: дорожная карта 2022

Синтаксис и базовые конструкции

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

DOM и манипуляции с DOM

Объектная модель документа (DOM) — это программный интерфейс для документов HTML и XML. Он позволяет обновлять структуру, содержимое и стиль документа. С DOM мы можем легко получить доступ к тегам, идентификаторам, классам, атрибутам.

API

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

Концепции JavaScript

Изучите такие понятия:

  • Область видимости
  • Асинхронность
  • Строгий режим

Система контроля версий

kak stat frontend razrabotchikom dorozhnaja karta 2022 74c7fcf - Как стать Frontend-разработчиком: дорожная карта 2022

Система контроля версий позволяет контролировать изменения исходного кода. Почти все они основаны на командах GIT

Для работы с GIT используют командную строку или сервисы:

  • GitHub
  • GitLab
  • BitBucket

Пакетные менеджеры

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

npm

kak stat frontend razrabotchikom dorozhnaja karta 2022 0fb3250 - Как стать Frontend-разработчиком: дорожная карта 2022

npm — это менеджер пакетов для языка программирования JavaScript для Node.js.

yarn

yarn — это система упаковки программного обеспечения, разработанная Facebook в 2016 году для среды выполнения JavaScript Node.js.

CSS-архитектура

БЭМ

Методология «блок, элемент, модификатор» — это соглашение об именовании классов в HTML и CSS. БЭМ разработали в Яндекс. Его цель — помочь разработчикам лучше понять взаимосвязь между HTML и CSS в конкретном проекте.

SMACSS

SMACSS — это справочное руководство по стилю.

OOCSS

OOCSS — это инструмент для неоднократного использования кода.

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера» Интересно, перейти к каналу

CSS-препроцессоры

Препроцессоры CSS позволяют использовать в CSS переменные, наследование, миксины, функции и математические операции.

SASS

SASS — это язык сценариев препроцессора, который компилируется в CSS. Он позволяет вам писать поддерживаемый CSS и предоставляет такие функции, как переменные, вложенность, миксины, расширения, функции, циклы, условные операторы.

PostCSS

PostCSS — это инструмент для преобразования стилей с помощью JS-плагинов. Эти плагины могут анализировать ваш CSS, поддерживать переменные и миксины, транспилировать будущий синтаксис CSS, встроенные изображения и многое другое.

Инструменты сборки

Инструменты сборки выполняют повторяющиеся задачи и автоматизируют рабочий процесс. Обычно это запуск серверов разработки, компиляция кода (например, SCSS в CSS), запуск линтеров, обслуживание файлов с локального порта на компьютере и многое другое.

Менеджеры задач

kak stat frontend razrabotchikom dorozhnaja karta 2022 0bb0b2d - Как стать Frontend-разработчиком: дорожная карта 2022

Менеджер задач — это инструмент для упрощения некоторых рутинных задач разработки, таких как автоматизация компиляции sass/scss, объединение ресурсов, анализ исходного кода и горячая перезагрузка локального сервера.

Например:

  • npm scripts
  • gruntjs
  • gulp

Сборщики

Сборщик модулей — это инструменты, которые объединяют сценарии JavaScript и зависимости в один файл.

Например:

  • Webpack
  • Esbuild
  • Rollup
  • Parcel
  • Vite

Линтеры

Это инструменты для анализа кода и обнаружения ошибок.

Например:

  • ESLint
  • JSLint
  • JSHint

Фреймворки

kak stat frontend razrabotchikom dorozhnaja karta 2022 68c9f6f - Как стать Frontend-разработчиком: дорожная карта 2022

Фреймворки — библиотеки, которые помогают в разработке программного продукта.

React

React — самая популярная внешняя библиотека JavaScript для создания пользовательских интерфейсов. React можно использовать на сервере с помощью Node и запускать мобильные приложения с помощью React Native.

Angular

Angular — это среда для разработки интерфейсов. Она включает в себя набор библиотек с функциями маршрутизации, управления формами, взаимодействия клиент-сервер и многое другое.

Vue.js

Vue.js — это среда JavaScript с открытым исходным кодом для создания пользовательских интерфейсов и одностраничных приложений. Основное внимание уделяется фронтенд-разработке.

Modern CSS

Styled-components

Это библиотека CSS-in-JS, которая позволяет писать обычный CSS и присоединять его к компонентам JavaScript.

CSS Modules

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

Styled JSX

Это библиотека CSS-in-JS. Стили одного компонента не влияют на другие компоненты. Это позволяет добавлять, изменять и удалять стили и не беспокоится о побочных эффектах.

Emotion

Это библиотека для написания стилей CSS с помощью JavaScript.

Компоненты

С помощью компонентов создают многократно используемые элементы. Они изолированы от остального кода. Например, кнопки, иконки, аватары.

HTML-шаблоны

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

Custom Elements

Пользовательские элементы инкапсулируют функциональность на HTML-странице.

Shadow DOM

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

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

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

  • Bootstrap
  • Bulma
  • Tailwind CSS
  • Chakra UI
  • Material UI
  • Radix UI

Тестирование

Тестирование необходимо для проверки правильной работы приложения.

Для тестирования можно использовать следующие инструменты:

  • Jest
  • react-testing-library
  • Cypress
  • Enzyme

Типизация

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

TypeScript

TypeScript — это строго типизированный язык программирования, основанный на JavaScript.

Flow

Flow — это инструмент для статической проверки типов данных. С его помощью можно искать ошибки типов в программах на JavaScript.

GraphQL

kak stat frontend razrabotchikom dorozhnaja karta 2022 cee781e - Как стать Frontend-разработчиком: дорожная карта 2022

GraphQL — это язык запросов для API и среда выполнения для этих запросов.

Apollo

Apollo — это платформа для создания сети данных и сервисов на основе языка запросов GraphQL. Разработчики сервиса называют его суперграф.

Relay

Relay — это клиент JavaScript, который используется для получения данных GraphQL в приложениях React.

Генераторы статических сайтов

Генератор статических сайтов — это инструмент, который создает полноценный статический HTML-сайт на основе исходных данных и набора шаблонов.

  • Next.js
  • Gatsby.js
  • Nuxt.js
  • Vuepress
  • Jekyll
  • Hugo
  • Gridsome
  • Eleventy

Фреймворки для разработки мобильных приложений

  • React Native
  • Native Script
  • Flutter
  • Ionic

Фреймворки для разработки десктопных приложений

  • Electron
  • Tauri

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

***

Следуйте карте, чтобы прокачивать навыки и повышать востребованность на рынке труда.

kak stat frontend razrabotchikom dorozhnaja karta 2022 0ab4fd9 - Как стать Frontend-разработчиком: дорожная карта 2022

Дорожная карта Фронтенд-разработчика на русском языке Карту можно посмотреть здесь. ***

Мне нужно оперативно погрузиться во фронтенд. Какой вариант самый быстрый и качественный?

Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:

  • освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
  • сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
  • поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
  • разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
  • углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
  • изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.

Интересно, хочу попробовать

  • 2 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close