Front End разработчик [TeachMeSkills]

Front End разработчик [TeachMeSkills]



Курсы Front End с нуля позволяют начинающим разработчикам создавать интерфейсы, с которыми взаимодействуют пользователи. Он знает HTML, CSS и JavaScript – язык, который работает на всех платформах и единственный язык программирования для браузеров.

Мы предлагаем полный курс Front End: HTML, CSS и JavaScript с нуля. На курсе ты научишься верстать адаптивные и кроссбраузерные приложения и сайты, напишешь свое первое приложение на JavaScript, изучишь популярную сегодня библиотеку React и разработаешь web-приложение на ней.
​

Спойлер: Программа курса

208 академических часов
Составлена практикующими IT специалистами для новичков в Front End. Это лучший курс по JavaScript, HTML и CSS для начинающих.​

1. Введение в веб-разработку

• Знакомимся с HTML
• Hello, world

2. HTML и введение в CSS
Работа с:

• списками
• формами
• таблицам
• CSS: селекторы, margin, padding

3. Оформление элементов

• Работа со шрифтами и фоном
• Блочная модель
• Float, inline-block
• Flex-модель

4. Состояние и позиционирование элементов

• Hover, active и focus элементов
• Псевдоэлементы
• Позиционирование элементов

5. Углубление в HTML5 и CSS3

• Семантика
• Аудио и видео
• Новые стили в CSS3
• Анимации

6. Анимация элементов

• Линейная анимация transition
• Цикличная анимация keyframes

7. Формы

• Работа с формами
• Работа с полями ввода

8. Адаптивная и резиновая верстка

• Сетка сайта
• Adaptive, responsive
• Мобильная верстка

9. Grid

• Grid-контейнер
• Grid-линии
• Grid-области

10. Bootstrap

• Bootstrap

11. Эволюция CSS

• Основы препроцессоров LESS, SASS/SCSS, Stylus
• BEM и его альтернативы

12. Проектирование

• Практическое занятие
• Подробные индивидуальные консультации с преподавателем

13. Введение в FrontEnd. Git

• Введение в FrontEnd
• СКВ Git: команды

14. Введение в JavaScript

• Типы данных
• Переменные (let, const, var)
• Базовые операторы

15. Основы JavaScript

• Условия (if, switch, тернарный оператор)
• Приведение типов: явное и неявное
• Циклы (while, for, for ... in, for … of)

16. Объекты и массивы.
Часть 1

• Копирование объектов и массивов. Rest/Spread оператор
• Деструктуризация
• Массивы как частный случай объектов
• Доступ к свойствам
• Итераторы

17. Объекты и массивы.
Часть 2

• Методы для работы
• Цикл vs forEach
• Map/Reduce

18. Введение в функции

• Способы объявления функции
• Аргументы
• Return
• Стрелочные функции

19. Функции: LevelUP

• Arguments, значения по умолчания
• CallStack, Scope, замыкания
• Тестирование кода
• Функция как инструмент тестирования

20. DOM

• Element, document
• Document.createElement
• Append vs appendChild
• QuerySelector
• Динамическая верстка через DOM

21. События

• Атрибуты
• Свойства элемента для работы с событиями
• addEventListener / removeEventListener
• Жизненный цикл события, всплытие и поднятие
• PreventDefault и stopPropagation
• This и колбэки

22. BOM

• Объектная модель браузера (BOM)
• localStorage, sessionStorage, indexedDB

23. Взаимодействие с сетью + Ajax

• XMLHttpRequest, fetch
• Ajax
• Обработка ошибок в запросах.
• Web-сокеты. Ивент-сорсинг
• REST

24. Асинхронность в JavaScript. Часть 1

• Что такое асинхронность
• Сравнение синхронного и асинхронного кода
• Введение в promise

25. Асинхронность в JavaScript. Часть 2

• Продолжаем с promise
• Promise chaining
• Обработка ошибок

26. Асинхронность в JavaScript. Часть 3

• Async/await
• Event loop

27. Основы ООП

• ООП: инкапсуляция, наследование, полиморфизм
• Абстракция и интерфейсы
• Классы и наследование
• ограничение в JS
• Решение задач через ООП
• BDD и DDD (Behavior Driven Development/Domain Driven Design)

28. Классы в JavaScript

• Функция как класс
• new и this
• this, call/apply/bind
• Стрелочные функции
• Прототипы
• Наследование
• ES6 class

29. DOM. Своя фабрика компонентов без фреймворка

• Шаблоны проектирования
• Модуль, прокси, адаптер

30. Практика и выбор дипломного проекта

• Выбор проекта для повышения навыков
• Выполнение проекта, реализация, практика

31. Git

• Ретроспектива
• Оценка знаний
• Git, продвинутый уровен

32. Основы тестирования

• Для чего нужны тесты и какую проблему решают
• Уровни тестирования (модульное, интеграционное, etc)
• Инструменты для тестирования JS модулей (Jest, Mocha, Chai)

33. Структуры данных

• Хэш-таблица, стэк, очередь, куча
• List, Set
• Map/WeakMap
• Деревья
• Базовые алгоритмы
• Шаблоны задач, связанных с определенными структурами

34. Immutable своими руками

• Immutable своими руками

35. Npm: работаем с зависимостями

• Что такое require?
• Постигаем package.json
• Lint (style guides - airbnb, google. eslint, prettier

36. Свои компоненты

• Проверка типов
• Виртуальный DOM

37. Основы webpack. Часть 1

• Устанавливаем webpack
• Настройка

38. Основы webpack. Часть 2

• Плагины
• Лоудеры

39. MVC-концепция

• MVC/MVVM
• Роутинг, History API
• Events
• 1-way vs 2-way data-binding
• Реактивное программировании

40. Свой SPA (Single Page App) без фреймворка.

• Теория MVC
• Пишем свой SPA
• Собираем проект webpack'ом

41. Начинаем работать с React. Настройка create-react-app

• Что такое React
• Где html и что такое JSX
• props, state
• Stateless и stateful компоненты
• Настройка create-react-app
• Виртуальный DOM

42. Функциональное программирование

• JavaScript - функциональный язык программирования?

43. Жизненный цикл и компоненты в React

• Что такое хуки?
• HOC(Higher-Order Components)
• Stateless и stateful компоненты

44. Продолжаем изучать React. Часть 1

• Узнаем про React Context
• Где использовать Refs

45. Продолжаем изучать React. Часть 2

• Route, browser-router, маршрутизация
• NavLink
• Route exact
• Тестирование React компонентов

46. Redux

• Добавляем к нашему проекту Redux

47. Продолжаем изучать Redux: Dispatch, Action

• Добавляем к нашему проекту Redux
• Action creator
• Action type
• reducer

48. Redux-middleware

• Продолжаем изучать Redux
• Redux-thunk
• Покрытие тестами reducer-ов и saga-s

49. TypeScript. Знакомство. Описание. Настройка рабочего окружения

• Базовые типы (number, string, boolean)
• Массивы, кортежи, перечисленя
• Другие простейшие типы (Any, Unknow, Never, Void)
• Преобразования типов
• Защитники типов и различение типов
• Интерфейсы (свойства, расширения)
• Объединённые и пересекающиеся типы, литеральные типы
• Функции (аргументы, контекст, перегрузка функции

50. TypeScript. Продолжаем изучение. Классы. Generics. Продвинутые типы

• Классы (наследование, публичные, скрытые и защищённые модификаторы)
• Классы (статичные свойства, абстрактные классы, классы в качестве интерфейсов)
• Generics
• Утилиты (Pick, Omit, ReturnType, etc.)

51. День консультаций по дипломному проекту

• Делаем дипломный проект на выбор

52. Онлайн-тренинг "Трудоустройство в IT"

• Составление резюме (теория + практика)
• Составление профиля на LinkedIn (теория + практика)
• Прохождение интервью
• Soft skills, которые важны в рамках интервью
• Проведение пробного интервью

Продажник