Стать фронт-енд-разработчиком

1. Basic JavaScript
2. ES6
3. Regular Expressions
4. Debugging
5. Basic Data Structures
6. Basic Algorithm Scripting
7. Object Oriented Programming
8. Functional Programming
9. Intermediate Algorithm Scripting
10. JavaScript Algorithms and Data Structures Projects

• Пройти уроки на https://githowto.com

1. 1 - 10 уроки 8 июня
2. 10 - 25 уроки 9 июня
3. 25 - 40 уроки 10 июня
4. 40 - 51 уроки 11 июня

• Поиграться на https://learngitbranching.js.org/?demo

1. Введение
2. Едем дальше
3. Перемещаем труды туда-сюда
4. Сборная солянка
5. Продвинутый уровень
6. Push & Pull - удалённые репозитории в Git!
7. Через origin – к звёздам. Продвинутое использование Git Remotes

• Написать конспект по пройденной теме (статья, гайд, блог-запись) 11-12 июня 2019

1. Basic HTML and HTML5
2. Basic CSS
3. Applied Visual Design
4. Applied Accessibility
5. Responsive Web Design Principles
6. CSS Flexbox
7. CSS Grid
8. Responsive Web Design Projects:

• Build a Tribute Page
• Build a Survey Form
• Build a Product Landing Page
• Build a Technical Documentation Page
• Build a Personal Portfolio Webpage

• Лекция 1: Вводный
• Урок 2. Инструменты разработчика Chrome DevTools
• Урок 3. Как сделать репозиторий из любого проекта
• Урок 4. Как установить Git и работать в консоли
• Урок 5. Откуда берутся конфликты и что с ними делать
• Урок 6. Что делать, если всё пошло не так
• Урок 7. Лекция 2: Разметка
• Урок 8. Разметка каталога проекта «Барбершоп»
• Урок 9.Разметка карточки товара проекта «Барбершоп»
• Урок 10. Лекция 3: Фотошоп для верстальщика
• Урок 11. Экспорт графики из Фотошопа
• Урок 12. Лекция 4: Доступность
• Урок 13. Доступная разметка страниц проекта "Барбершоп"
• Урок 14. Лекция 5: CSS
• Урок 15. Базовая стилизация карточки товара проекта «Барбершоп»
• Урок 16. Базовая стилизация карточки товара проекта «Барбершоп»
• Урок 17. Лекция 6: Сетки
• Урок 18. Сетки карточки товара проекта «Барбершоп»
• Урок 19. Сетки страницы каталога проекта «Барбершоп»
• Урок 20. Декоративные элементы
• Урок 21. Оформление контента
• Урок 22. Введение в JavaScript
• Урок 23. Лучшие практики
• Урок 24. Как не потеряться на рынке труда
• Урок 25. Инструменты разработчика
• Урок 26. Использование Emmet

1. Bootstrap
2. jQuery
3. Sass

пока отдыхаю от компьютера или не имею доступа к нему, на планшете в приложении

Документ

• Браузерное окружение, спецификации
• DOM-дерево
• Навигация по DOM-элементам
• Поиск: getElement*, querySelector*
• Свойства узлов: тип, тег и содержимое
• Атрибуты и свойства
• Изменение документа
  
• Стили и классы
• Размеры и прокрутка элементов
• Размеры и прокрутка окна
• Координаты (реши задачи)
  

Введение в события

• Введение в браузерные события (реши задачи)
• Всплытие и погружение
• Делегирование событий
• Действия браузера по умолчанию
• Генерация пользовательских событий

Интерфейсные события

• Основы событий мыши
• Движение мыши: mouseover/out, mouseenter/leave
• Drag'n'Drop с событиями мыши
• Клавиатура: keydown и keyup
• Прокрутка

Формы, элементы управления

• Свойства и методы формы
• Фокусировка: focus/blur
• События: change, input, cut, copy, paste
• Отправка формы: событие и метод submit

Загрузка документа и ресурсов

• Страница: DOMContentLoaded, load, beforeunload, unload
• Скрипты: async, defer
• Загрузка ресурсов: onload и onerror

Разное

• MutationObserver: наблюдатель за изменениями
• Selection и Range
• Событийный цикл: микрозадачи и макрозадачи

Введение

• Введение в JavaScript
• Справочники и спецификации
• Редакторы кода
• Консоль разработчика

Основы JavaScript

• Привет, мир!
• Структура кода
• Строгий режим — "use strict"
• Переменные
• Типы данных
• Преобразование типов
• Операторы
• Операторы сравнения
• Взаимодействие: alert, prompt, confirm
• Условные операторы: if, '?'
• Логические операторы
• Циклы while и for
• Конструкция "switch"
• Функции
• Function Expression и функции-стрелки
• Особенности JavaScript

Качество кода

• Отладка в браузере Chrome
• Советы по стилю кода
• Комментарии
• Ниндзя-код
• Автоматическое тестирование c использованием фреймворка Mocha
• Полифилы

Объекты: основы

• Объекты
• Сборка мусора
• Тип данных Symbol
• Методы объекта, "this"
• Преобразование объектов в примитивы
• Конструкторы, создание объектов через "new"

Типы данных

• Методы у примитивов
• Числа
• Строки
• Массивы
• Методы массивов
• Перебираемые объекты
• Map и Set
• WeakMap и WeakSet
• Object.keys, values, entries
• Деструктурирующее присваивание
• Дата и время
• Формат JSON, метод toJSONПродвинутая работа с функциями

Рекурсия и стек

• Остаточные параметры и оператор расширения
• Замыкание
• Устаревшее ключевое слово "var"
• Глобальный объект
• Объект функции, NFE
• Синтаксис "new Function"
• Планирование: setTimeout and setInterval
• Декораторы и переадресация вызова, сall/apply
• Привязка контекста к функции
• Повторяем стрелочные функции

Свойства объекта, их конфигурация

• Флаги и дескрипторы свойств
• Прототипы, наследовани

Прототипы, наследование

1. Прототипное наследование
2. F.prototype
3. Встроенные прототипы
4. Методы прототипов, объекты без свойства __proto__

Классы

• Класс: базовый синтаксис
• Наследование классов
• Статические свойства и методы
• Приватные и защищённые методы и свойства
• Расширение встроенных классов
• Проверка класса: "instanceof"
• Примеси

Обработка ошибок

1. Обработка ошибок, "try..catch"
2. Пользовательские ошибки, расширение Error

Промисы, async/await

• Введение: колбэки
• Промисы
• Цепочка промисов
• Промисы: обработка ошибок
• Promise API
• Промисификация
• Микрозадачи
• Async/await

Генераторы, продвинутая итерация

• Генераторы
• Асинхронные итераторы и генераторы

Модули

• Модули, введение
• Экспорт и импорт
• Динамические импорты

Разное

• Proxy и Reflect
• Eval: выполнение строки кода
• Каррирование
• Побитовые операторы
  
• Intl: интернационализация в JavaScript

Фреймы и окна

• Открытие окон и методы window
• Общение между окнами
• Атака типа clickjacking

Бинарные данные и файлы

• ArrayBuffer, бинарные массивы
• TextDecoder и TextEncoder
• Blob
• File и FileReader

Сетевые запросы

• Fetch
• FormData
• Fetch: ход загрузки
• Fetch: прерывание запроса
• Fetch: запросы на другие сайты
• Fetch API
• Объекты URL
• XMLHttpRequest
• Возобновляемая загрузка файлов
• Длинные опросы
• WebSocket
• Server Sent Events

Хранение данных в браузере

• Куки, document.cookie
• LocalStorage, sessionStorage
• IndexedDB

Регулярные выражения

• Введение: шаблоны и флаги
• Символьные классы
• Юникод: флаг "u" и класс \p{...}
• Якоря: начало строки ^ и конец $
• Многострочный режим якорей ^ $, флаг "m"
• Граница слова: \b
• Экранирование, специальные символы
• Наборы и диапазоны [...]
• Квантификаторы +, *, ? и {n}
• Жадные и ленивые квантификаторы
• Скобочные группы
• Обратные ссылки в шаблоне: \N и \k<имя>
• Альтернация (или) |
• Опережающие и ретроспективные проверки
• Катастрофический возврат
• Поиск на заданной позиции, флаг "y"
• Методы RegExp и String

Анимация

• Кривые Безье
• CSS-анимации
• JavaScript-анимации

Веб-компоненты

• С орбитальной высоты
• Пользовательские элементы (Custom Elements)
• Shadow DOM
• Элемент "template"
• Слоты теневого DOM, композиция
• Настройка стилей теневого DOM
• Теневой DOM и события

CSS для JavaScript-разработчика

• О чём пойдёт речь
• Единицы измерения: px, em, rem и другие
• Все значения свойства display
• Свойство float
• Свойство position
• Центрирование горизонтальное и вертикальное
• Свойства font-size и line-height
• Свойство white-space
• Свойство outline
• Свойство box-sizing
• Свойство margin
• Лишнее место под IMG
• Свойство overflow
• Особенности свойства height в %
• Знаете ли вы селекторы?
• CSS-спрайты
• Правила форматирования CSS

01. Course Introduction & Learning Philosophy

02. What we'll be building

03. OUT NOW: The React Bootcamp

04. Why use React

05. ReactDOM & JSX

06. ReactDOM & JSX Practice

07. React Functional Components

08. React Functional Components Practice

09. OUT NOW: The React Bootcamp

10. Move Components into Separate Files

11. React Parent/Child Components

12. React Parent/Child Component Practice

13. React Todo App - Phase

14. Styling React with CSS Classes

15. Some Caveats

16. JSX to JavaScript and Back

17. React Inline Styles with the Style Property

18. React Todo App - Phase 2

19. React Props Part 1: Understanding the Concept

20. React Props Part 2: Reusable Components

21. React Props

22. React Props and Styling Practice

23. Mapping Components in React

24. Mapping Components Practice

25. React Todo App: Phase 3

26. Class-based Components

27. Class-based Components Practice

28. React State

29. React State Practice

30. React State Practice

31. React Todo App: Phase

32. Handling Events in React

33. React Todo App: Phase 5

34. React setState: Changing the State

35. React Todo App: Phase 6

36. React Todo App: Phase 6.1

37. React Lifecycle Methods Part 1

38. React Lifecycle Methods Part 2

39. Lifecycle Methods Part 3 - componentDidUpdate

40. React Conditional Render

41. React Conditional Render Part 2

42. React Conditional Render Practice

43. React Todo App: Phase 7

44. Fetching data from an API with React

45. React Forms Part 1

46. React Form Part 2

47. React Form Practice

48. React Container & Component Architecture

49. React Meme Generator Capstone Project

50. Writing Modern React Apps

51. Hooks Intro1:44

52. useState() Part 1 - Creating State7:18

53. useState() Part 2 - Changing State7:45

54. useEffect() Part 18:01

55. useEffect() Part 210:16

56. React Project Ideas for Practicing0:43

57. Conclusion - React Tutorial

React & Redux #0 Введение в курс (Introduction)

React & Redux #1 Плагины и окружение (Plugins & Environment)

React & Redux #2 Компоненты (Components)

React & Redux #3 Локальный стейт (State)

React & Redux #4 Пропсы и их валидация (Props & PropTypes. Part I)

React & Redux #5 Пропсы и их валидация (Props & PropTypes. Part II)

React & Redux #6 События (Handling Events)

React & Redux #7 Условный рендеринг (Conditional Rendering)

React & Redux #8 Списки и ключи (Lists & keys)

React & Redux #9 Фрагменты и стили (Fragments & CSS)

React & Redux #10 Формы (Forms)

React & Redux #11 Методы жизненного цикла (Lifecycle methods)

React & Redux #12 Ссылки (Refs)

React & Redux #13 Компоненты высшего порядка (High Order Components)

React & Redux #14 Порталы (Portals)

React & Redux #15 Контекст (Context)

React & Redux #16 Работа с реальным API (React: work with API. Part I)

React & Redux #17 Работа с реальным API (React: work with API. Part II)

React & Redux #18 Роутер (React router. Part I)

React & Redux #19 Роутер (React router. Part II)

React & Redux #20 Введение в Редакс (Redux Introduction)

React & Redux #21 Приложение и Редакс модули (Application & Redux - modules)

React & Redux #22 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part I)

React & Redux #23 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part II)

React & Redux #24 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part III)

React & Redux #25 Анимации (React Animations)

1. нарисовать, хотя бы на бумажке, расположение компонентов

2. сделать SPA

очень хвалят

1. Introduction
2. 0. Set Up Your Development Environment
3. 1. Get to Know Gatsby Building Blocks
4. 2. Introduction to Styling in Gatsby
5. 3. Creating Nested Layout Components
6. 4. Data in Gatsby
7. 5. Source Plugins and Rendering Queried Data
8. 6. Transformer Plugins
9. 7. Programmatically Create Pages from Data
10. 8. Preparing a Site to Go Live

https://github.com/typescript-cheatsheets/react-ty...

https://github.com/piotrwitek/react-redux-typescri...
https://github.com/typescript-eslint/typescript-es...
https://github.com/plantain-00/type-coverage

для задания школы RSSchool

Использована в https://belarus-writers.netlify.com/

Основные понятия

• 1. Привет, мир
• 2. Знакомство с JSX
• 3. Рендеринг элементов
• 4. Компоненты и пропсы
• 5. Состояние и жизненный цикл
• 6. Обработка событий
• 7. Условный рендеринг
• 8. Списки и ключи
• 9. Формы
• 10. Подъём состояния
• 11. Композиция против наследования
• 12. Философия React

Продвинутые темы

• Доступность контента
• Разделение кода
• Контекст
• Предохранители
• Перенаправление рефов
• Фрагменты
• Компоненты высшего порядка
• Взаимодействие со сторонними библиотеками
• JSX в деталях
• Оптимизация производительности
• Порталы
• API для компонента Profiler
• React без ES6
• React без JSX
• Согласование
• Рефы и DOM
• Рендер-пропсы
• Статическая типизация
• Строгий режим
• Проверка типов с помощью PropTypes
• Неуправляемые компоненты
• Веб-компоненты

FAQ

• AJAX и обращение к API
• Babel, JSX и этапы сборки
• Передача функций в компоненты
• Состояние компонента
• Стилизация и CSS
• Структура файлов
• Политика версионирования
• Виртуальный DOM и детали его реализации в React

Bootstrap

jQuery

Sass

React

Redux

React and Redux