Front-end

По мотивам статьи схема успешного развития веб-разработчика в 2019 году описаны источники для изучения. Некоторые момент дополняются и обновляются для поддержания актуального состояния.

HTML

  • Изучение основ
  • Написание семантики HTML
  • Базовое SEO
  • Доступность

CSS

  • Изучение основ
  • Создание макетов
    • floats
    • positioning
    • display
    • box model
    • css grid
    • flex box
  • Медиа-запросы
  • Изучение CSS3

Базовый JavaScript

  • Синтаксис и базовые конструкции
  • Изучение DOM
  • Изучение fetch API / Ajax (XHR)
  • ES6+ и модули JavaScript
  • Понимание концепций
    • hosting
    • event bubbling
    • scope prototype
    • shadow dom
    • strict
    • как работают браузеры
    • dns
    • http

Менеджеры пакетов

CSS pre-processors

  • SASS
  • PostCSS
  • LESS

CSS frameworks

  • Bootstrap
  • Materialize CSS
  • Bulma
  • Semantic UI

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

  • BEM
  • OOCSS
  • SMACSS

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

  • Линтеры и форматтеры
  • Module bundlers
    • Webpack
    • Parcel
    • Rollup
  • Task runners
    • npm scripts
    • gulp

Выбор фреймворка

  • React.js
    • Redux
    • MobX
  • Angular
    • RxJS
    • ngrx
  • Vue.js
    • Vuex

CSS и JS

  • Styled Components
  • CSS Moduels
  • Emotion
  • Radium
  • Glamorous

Тестирование приложения

  • Jest
  • Enzyme
  • Cypress
  • Mocha
  • Chai
  • Ava
  • Karma
  • Jasmine
  • Protractor
  • Unit
  • Integration
  • Functional

Прогрессивные Web приложения

  • PRPL Pattern
  • RAIL Model
  • Perfomance Metrics
  • Using Light House
  • Using DevTools
  • Storage
  • Web Sockets
  • Service Workers
  • Расположение
  • Уведомление
  • Ориентация устройства
  • Платежи
  • Учетные данные

Type Checkers

  • TypeScript
  • Flow

Серверная сторона

  • React.js
    • Next.js
    • After.js
  • Angular
    • Universal
  • Vue.js
    • Nuxt.js

Статические генераторы сайтов

  • GatsbyJS

Десктопные приложения

  • Electron
  • Proton Native
  • Carlo

Мобильные приложения

Web Assembly