Need learn to be a web developer

[dobernike]

Если нужна конкретика, то посмотрите ниже, это оцифровка roadmaps:

_Базовое для Web -

• [x] Git - контроль версий
• [x] Базовое использование терминала
• [x] Алгоритмы и структуры данных
• [x] SOLID, KISS, YAGNI, DRY, WET
• [x] GitHub
• [x] Лицензии
• [x] Semantic Versioning
• [x] SSH
• [x] HTTP/HTTPS and APIs
• [x] Шаблоны проектирования
• [x] Кодировка символов

_Frontend -

HTML:

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

CSS:

• [x] Изучение основ
• [x] Создание макетов
• • [x] Floats
• • [x] Positioning
• • [x] Display
• • [x] Box Model
• • [x] CSS Grid
• • [x] Flex Box
• [x] Медиа-запросы
• [x] Изучение CSS 3

Базовый JavaScript:

• [x] Синтаксис и базовые конструкции
• [x] Изучение DOM
• [x] Изучение Fetch API / Ajax (XHR)
• [x] ES6+ и модули Javascript
• [x] Понимание концепций
• • [x] Hoisting
• • [x] Event Bubbling
• • [x] Scope Prototype
• • [x] Shadow DOM
• • [x] strict
• • [x] Как работают браузеры
• • [x] DNS
• • [x] HTTP

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

• [x] npm
• [x] yarn npm значительно улучшился, но по-прежнему остает от yarn в некоторых функциях. Выбирайте любой.

CSS Pre-processors:

• [x] SASS
• [x] PostCSS
• [x] Less PostCSS не является препроцессором, но может быть использован как таковой. Можно перейти на SASS, а потом вернуться к PostCSS.

CSS Frameworks:

• [ ] Bootstrap
• [ ] Materialize CSS
• [ ] Bulma
• [ ] Semantic UI

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

• [x] BEM
• [ ] OOCSS
• [ ] SMACSS В современных front-end фреймворках, вам почти не придется знать методологии JS и CSS. Тем не менее, вы все равно должны знать BEM для долгосрочной перспективы.

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

• [x] Линтеры и форматтеры
• • [x] Prettier
• • [x] ESLint
• • [x] JSHint
• • [x] JSLint
• • [x] JSCS
• [x] Task runners
• • [x] npm scripts
• • [x] gulp
• [x] Module bundlers
• • [x] Webpack
• • [x] Parcel
• • [ ] Rollup

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

• [x] React.js
• • [x] Redux
• • [ ] MobX Не являются специфичными для React, хотя могут использоваться в любом фреймворке или приложении.
• [ ] Angular
• • [ ] RxJS
• • [ ] ngrx
• [ ] Vue.js
• • [ ] Vuex Перед тем, как вы начнете этот раздел, вы должны хорошо разбираться в "одностраничниках", как они работают, знать их плюсы и минусы.

CSS и JS:

• [x] Styled Components
• [x] CSS Modules
• [ ] Emotion
• [ ] Radium
• [ ] Glamorous

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

• [x] Jest
• [x] Enzyme
• [ ] Cypress Вы можете заполнить все свои потребности в тестировании этими 3-мя вариантами.
• [x] Unit
• [ ] Integration
• [ ] Functional Знание разных видов тестирования и изучение процесса написания тестов на каждом из них.
• [x] Mocha
• [x] Chai
• [ ] Ava
• [ ] Karma
• [ ] Jasmine
• [ ] Protractor

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

• [x] Storage
• [ ] Web Sockets
• [ ] Service Workers
• [x] Расположение
• [ ] Уведомления
• [ ] Ориентация устройства
• [ ] Платежи
• [ ] Учетные данные Изучение различных Web APIs использующихся в PWAs
• [ ] PRPL Pattern
• [ ] RAIL Model
• [x] Performance Metrics
• [x] Using Light House
• [x] Using DevTools Расчет, измерение и улучшение производительности.

Type Checkers:

• [x] TypeScript
• [ ] Flow

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

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

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

• [ ] GatsbyJS

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

• [ ] Electron
• [ ] Proton Native
• [ ] Carlo

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

• [ ] React Native
• [ ] NativeScript

Web Assembly: Web Assembly или WASM - это бинарные инструкции, генерируемые высокоуровневыми языками такими, как Go, C, C++ или Rust. Эти инструменты быстрее JavaScript, а WASM 1.0 добавлен во все современные браузеры.

Продолжайте обучение...

React -

Обозначения: Обязательно для изучения Полезно знать Вариант на будущее

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

• [x] Состояние компонента \ Контекст
• [x] Redux
• • [ ] Data persistence
• • • [x] Redux Persist
• • • [ ] Redux Phoenix
• • [ ] Библиотеки-помощники
• • • [ ] rematch
• • • [x] reselect
• • [ ] Асинхронные действия
• • • [x] Redux Thunk
• • • [ ] Redux Better Promise
• • • [x] Redux Saga
• • • [ ] Redux Observable
• [ ] MobX

Проверка типов:

• [x] PropTypes
• [x] TypeScript
• [ ] Flow

Вспомогательные библиотеки для форм:

• [ ] Redux Form
• [x] Formik
• [ ] Formsy
• [ ] Final Form

Маршрутизация:

• [x] React-Router
• [ ] Router5
• [ ] Redux-First Router
• [x] Reach Router

API-клиенты:

• [ ] REST
• • [x] fetch
• • [ ] SuperAgent
• • [x] axios
• [ ] GraphQL
• • [ ] Apollo
• • [ ] Relay
• • [ ] urql

Утилитарные библиотеки:

• [ ] Lodash
• [ ] Moment
• [x] classnames
• [ ] Numeral
• [ ] RxJS
• [ ] ImmutableJS
• [ ] Ramda

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

• [ ] Модульное тестирование
• • [x] Jest
• • [x] Enzyme
• • [ ] Sinon
• • [x] Mocha
• • [x] Chai
• • [ ] AVA
• • [ ] Tape
• [ ] Интеграционное тестирование
• • [ ] Karma
• [ ] Сквозное (end-to-end) тестирование
• • [ ] Selenium
• • [ ] Cypress
• • [ ] Puppeteer
• • [ ] Cucumber.js
• • [ ] Nightwatch.js

Локализация:

• [ ] React Intl
• [x] React i18next

Отрисовка на стороне сервера:

• [ ] Next.js
• [ ] After.js
• [ ] Rogue

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

• [ ] Gatsby

Разработка мобильных приложений:

• [x] React Native
• [ ] Cordove/Phonegap

Интеграция с бэкенд-фреймворками:

• [ ] React on Rails

Разработка десктопных приложений:

• [ ] Proton Native
• [ ] Electron
• [ ] React Native Windows

Виртуальная реальность:

• [ ] React 360

Продолжай учится...

Vue -

Обозначения: Обязательно для изучения Полезно знать Вариант на будущее

Styling

• [ ] Css frameworks
• • [ ] Tailwind
• [ ] CSS in JS
• • [ ] Single File Components

State Management

• [ ] Component State
• [ ] Vuex
• • [ ] Data persistence
• • • [ ] vuex-persist
• • • [ ] vuex-persistedstate
• • [ ] vuex-shared-mutations
• • [ ] vuex-loading

Type Checkers

• [ ] Prop Types
• [ ] TypeScript

Routing

• [ ] vue-router

API Clients

• [ ] Rest
• • [ ] fetch
• • [ ] axios
• [ ] GraphQL
• • [ ] Apollo

Utility Libraries

• [ ] Lodash
• [ ] Moment

Testing

• [x] Jest
• [ ] Vue Test Utils
• [ ] Karma
• [ ] E2E testing
• • [ ] Selenium
• • [ ] Cypress
• • [ ] Puppeteer
• • [ ] Cucumber.js

i18n

• [ ] vue-i18n

Server Side Rendering

• [ ] Nuxt.js

Desktop

• [ ] Electron

Keep Learning...

---

Конкретика:

Front-end:

HTML5

1) htmlbook.ru

• [x] "Самоучитель HTML 4"
• [x] "Введение в HTML 5" 2) htmlacademy.ru
• [x] Интерактивный курс по HTML 5 3) webref.ru
• [x] Самоучитель HTML 5 4) Плагины:
• [ ] Emmet 5) Редактор кода:
• [ ] Изучить все горячие клавиши в VS CODE 6) Книги:
• [ ] "Погружение HTML5" - Марк Пилигрим 7) W3C
• [x] Валидатор HTML кода 8) Понятия:
• [x] Семантика
• [x] Структура
• [x] Форматирование
• [x] Микроразметка

CSS3

1) htmlbook.ru

• [x] "Самоучитель CSS"
• [x] "Введение в CSS3" 2) htmlacademy.ru
• [x] Основы CSS 3) webref.ru
• [x] Основы CSS
• [x] Блочная модель в CSS
• [x] Текст в CSS
• [x] Позиционирование в CSS
• [x] Продвинутый CSS 4) Препроцессоры
• [x] SCSS 5) uroki-css.ru
• [x] Введение в анимацию CSS3 6) Youtube:
• [ ] DevTips 7) Книги:
• [ ] "Большая книга CSS3" - Дэвид Макфарланд
• [ ] "CSS. Каскадные таблицы стилей. Подробное руководство." - Эрик Мейер 8) Фреймворки:
• [ ] Bootstrap
• [ ] Foundation 9) Понятия и умения:
• [x] Язык CSS
• [x] Блочная верстка
• [x] Препроцессоры, какие бывают и зачем нужны
• [x] CSS библиотеки
• [x] Работа с Google Fonts
• [x] Адаптивность
• [x] Табличная верстка (Email Templates)
• [x] Позиционирование
• [x] Разница между static, absolute и relative
• [x] Очистка float
• [x] Flexbox
• [x] Mobile First
• [ ] Table of contents
• [x] Методологии
• [x] Верстать макеты из PSD
• [x] Gulp
• [x] Livereload
• [x] Autoprefixer
• [x] Минификация
• [ ] gzip сжатие
• [ ] Правило 14 килобайт
• [ ] OOCSS
• [x] БЭМ
• [x] Знать как браузер разбирает CSS код и какие свойства заставляют его перерисовывать контент, вызывая очередную нагрузку
• [x] Бандлить CSS тасками сборщика

JavaScript

1) learn.javascript.ru

• [x] Современный самоучитель по JavaScript 2) Книги:
• [ ] "JavaScript. Подробное руководство" - Дэвид Флэнаган 3) Библиотеки:
• [ ] JQuery 4) Научиться :
• [ ] Слайдеры
• [ ] Табы
• [ ] Аккордеоны
• [ ] Модальные окна 5)Библиотеки 2.0:
• [ ] Slick
• [ ] Owl Carousel
• [ ] Flickity
• [ ] Masonry pkgd
• [ ] JQuery UI Sortable
• [ ] PhotoSwipe
• [ ] Magniffic Popup
• [ ] Cute Slider
• [ ] JQuery Form Validation
• [ ] Select2
• [ ] JQuery JSON Editor
• [ ] Face Detection
• [ ] Progress.js
• [ ] Tooltipister
• [ ] Typehead
• [ ] FitText
• [ ] PrettyEmbed
• [ ] Fitvids
• [ ] fullPage.js
• [ ] Velocity.JS
• [ ] Tree.JS
• [ ] MatchHeight
• [ ] Slideout.js
• [ ] FocusPoint
• [ ] Liquid Images
• [ ] Vide
• [ ] Swipe
• [ ] AutocompleteJS
• [ ] Swiper
• [ ] Template7
• [ ] JsBarcode
• [ ] InputMask
• [ ] Remodal
• [ ] glDatePicker
• [ ] Chart.JS
• [ ] EasyTabs 6) Фреймворки:
• [x] React (Эффективные пользовательские интерфейсы)
• [ ] Angular 2 (Полноценный MVVM, SPA)
• [ ] Vue.js (Замена Angular 2) 7) Научиться работать с:
• [x] Webpack
• [ ] Jade
• [ ] Font Ninja
• [ ] Visual Event
• [ ] ! Node.js ! 8) Опционально:
• [ ] CoffeeScript
• [x] TypeScript

После изучения всего приведенного

• [ ] Умения разбираться в веб-дизайне в сфере UI/UX
• [x] Тестинг
• [x] Принцип работы Сети
• [x] Принцип работы браузерного движка
• [x] Эффективно пользоваться инструментами для работы
• [x] Эффективно работать с гитхабом
• [ ] Адаптировать шаблоны под популярные CMS
• [x] Перейти на использование IDE WebStorm
• [ ] Посмотреть лекцию Виталия Фридмана, Москва, Mail@Ru
• [ ] Его лекцию "Dirty little front-end tricks" JSConf iceland в 2016

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Back-end:

PHP

1) Книги:

• [ ] "PHP 7: Дмитрий Котеров, Игорь Симдянов"
• [ ] Книга SQL 2) Хауди PHP за час(4 часа):
• [x] https://www.youtube.com/watch?v=a6xtQQqx1tg
• [x] https://www.youtube.com/watch?v=vJRL_MKoX9M
• [x] https://www.youtube.com/watch?v=xihMCwARRpk 3) php.su
• [ ] PHP 7.x и PHP 5.x 4) Фреймворки:
• [ ] Laravel
• [ ] Yii
• [ ] Kohana
• [ ] Phalcon
• [ ] CodeIgniter
• [ ] Symfony 5) Репозиторий пакетов:
• [ ] Packagist
• [ ] Composer 6) CMS
• [ ] WordPress
• [ ] DLE
• [ ] Drupal
• [ ] Joomla
• [ ] vBulletin
• [ ] inVision Power Board
• [x] ModX
• [ ] Open Cart
• [ ] Magento
• [ ] LiveStreet
• [ ] Social Engine
• [ ] PrestShop
• [ ] phpBB 7) Скорость языка:
• [ ] Кэширования байт кода как Python
• [ ] Кэш по типу Memcached или другие
• [ ] Включить Sphinx
• [ ] RabbitMQ для работы с AMQP (Вместо HTTP)
• [ ] Легковестные дебаггеры, такие как XHProf

Python

1) Книги:

• [ ] "ByteOfPython"
• [ ] "Learn Python the Hard Way" 2) Фреймворки:
• [ ] ! Django !
• [ ] Flask
• [ ] Web2Py
• [ ] CherryPy 3) Django:
• [ ] docs.djangoproject.com 4) Репозиторий библиотек:
• [ ] PyPi 5) Пакетный менеджер:
• [ ] PiP 6) Версии:
• [ ] 2.x
• [ ] ! 3.x !

JavaScript (Node.js)

1) nodejs.org

• [ ] Документация 2) Видео
• [ ] learn.javascript.ru/screencast/nodejs 3) nodeguide.ru/doc/felix/beginner
• [ ] Руководство для начинающих по Node.js от Felix`а 4) other
• [ ] nodebeginner.ru
• [ ] nodeguide.ru 5) Фреймворк
• [ ] Express 6) Субд вместо MySQL:
• [ ] MongoDB
• [ ] noSQL 7) Пакетный менеджер
• [x] Node Package Manager (NPM) npmjs.com
• [x] Yarn

Итого, после завершения 1 из языков:

• [ ] Уметь работать с СУБД MySQL
• [x] Основы синтаксиса SQL (SELECT, UPDATE, DELETE, INSERT, JOIN, GROUP BY, ORDER BY, LIMIT)
• [ ] Экспортировать/импортировать базы данных
• [ ] Индексы MySQL, для чего нужны
• [ ] Знать язык, который изучен, его синтаксис и команды, а также базовый набор функций
• [ ] Понимать в чём разница между интерпретатором и компилятором
• [ ] Уметь работать с базой данных из выбранного ЯП
• [x] Понимать типы данных
• [ ] Понимать как создаются сайты
• [ ] Без проблем уметь создать свой собственный блог с нуля
• [ ] Уметь создавать регистрацию и авторизацию на сайте
• [ ] Уметь создавать возможность авторизованному пользователю редактировать свой профиль и загружать аватарку
• [ ] Уметь создавать административную панель для владельца вебсайта в которой он сможет управлять вебсайтом, смотреть зарегистрированных пользователей и т.д.
• [ ] Уметь писать пагинацию
• [ ] Уметь работать с Timestamp
• [ ] Уметь подключать кассу для приёма платежей на сайте, например, как Robokassa
• [ ] Уметь работать с API Вконтакте
• [ ] Уметь работать с cURL
• [ ] Уметь работать с .htaccess и в частности с mod_rewrite
• [ ] Уметь работать с Ajax для связи с сервером
• [ ] Понимать, что такое паттерн программирования
• [ ] Знать паттерны программирования MVC и HMVC
• [ ] Уметь работать и понимать что такое Memcached
• [ ] Уметь работать с файлами
• [ ] Уметь работать с изображениями
• [ ] Разбираться в GD
• [ ] Понимать и уметь использовать файловые замки
• [ ] Уметь использовать Crontab на хостинге и понимать что это и для чего нужно
• [ ] Уметь работать с Cloudflare
• [ ] Понимать зачем нужен HTTPS
• [ ] Понимать и уметь работать с JSON данными
• [ ] Уметь работать с XML
• [ ] Уметь защищать свой вебсайт от XSS атак
• [ ] Уметь защищать свой вебсайт от SQL инъекций
• [ ] Уметь защищать свой вебсайт от CSRF атак
• [ ] Уметь делать защиту от дурака
• [ ] Уметь пользоваться xDebug и бэктрейсами для дебага кода
• [x] Уметь работать с регулярными выражениями
• [ ] Уметь работать с библиотекой xCRUD
• [ ] Уметь работать с Memcached и Redis

Дополнительно для PHP :

• [ ] Понимать и уметь работать с Composer
• [ ] Понимать, что PHP является транслирующим интерпретатором
• [ ] Уметь работать с какой-нибудь ORM, к примеру с RedBeanPHP
• [ ] Уметь парсить вебсайты посредством библиотеки PHP Simple HTML DOM Parser
• [ ] Понимать и уметь использовать PDO
• [ ] Уметь работать с PHAR архивами

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Дополнительная инфа/практика

• Free Code Camp (Реальные задачи)
• Packagist или codetriage.com (Open Source)
• catchafire.org (Благотворительность)

[azim-creat]

Круто я тоже составил список только на бумаге. Вот не могу догнать что такое Бандлить CSS тасками сборщика? можешь подсказать?

[dobernike]

@azim-creat Например: в gulp указать как собирать множество css файлов в 1.

[github-actions[bot]]

Stale issue message