Front-end
разработчик
Что входит в курс
Сколько зарабатывают Front-end разработчики
Как проходит обучение
Чему вы научитесь
Верстать сайты и создавать интерфейсы для всех типов устройств
Вы освоите различные концепции и техники вёрстки. Также научитесь создавать сложные интерфейсы для веб-приложений и адаптировать проект для любых типов устройств.
Создавать сложные веб-приложения на React
React – самая популярная и перспективная библиотека для создания веб-приложений. Вы научитесь создавать на React веб-приложения любой сложности и изучите, в каких областях применима эта библиотека.
Готовить проекты для запуска в Production
Вы изучите различные системы сборки веб-приложений, которые упрощают разработку и соберёте Production-версию собственного проекта. Также научитесь перемещать проект на Production-сервер. Благодаря этому навыку вы освоите весь цикл разработки веб-приложения: от создания до запуска.
Какие технологии вы освоите
Программа курса
- Краткая история Web и как устроен интернет
- Как устроен браузер и как он получает страницы по сети
- Что такое Git
- Создание первого репозитория
- О файле .gitignore
- Настройка рабочей среды
- Краткая история HTML
- Типы тегов и атрибуты
- Теги для работы с текстом
- Создание собственной страницы
- Основы ветвления в Git
- Создание pull request на GitHub
- Мета-теги
- Мнемоники
- Теги для работы со списками
- Теги для работы с таблицами
- Теги для работы с формами
- div и span
- Краткая история CSS
- Подключение стилей
- CSS-селекторы
- CSS-свойства
- Наименование CSS-классов
- Декларация !important
- Приоритеты стилей в CSS
- Отступы, границы и box-sizing
- Flexbox
- Pixel perfect
- Типографика в Web
- Шрифты и способы их подключения
- Свойства для работы с текстом
- Текстовые эффекты
- Favicon
- Тег img и его атрибуты
- Изображение как фон
- Способы работы с цветом
- Градиенты
- CSS Sprites
- Иконочные шрифты
- Canvas – краткий обзор
- SVG как продвинутый инструмент
- SVG Sprites
- Методология BEM
- Основные термины
- Использование медиа - запросов
- Блочная модель. Контейнеры
- Переменные в CSS
- Построение адаптивной сетки на flexbox
- CSS Grid Layout
- Способы построения адаптивной сетки на Grid Layout
- Использование единиц изменения в адаптивной вёрстке и доступности
- Псевдоклассы и псевдоэлементы
- Позиционирование элементов
- Тени
- CSS-фигуры
- Трансформация элементов
- Семантика в HTML
- Работа с аудио и видео
- Анимация
- Введение в NPM
- Современная сборка Front-end
- Boilerplate
- Работа с Pug
- Обзор препроцессоров
- Подключение stylelint
- NPM - скрипты
- Bootstrap
- Foundation
- Semantic UI
- UIkit
- Materialize
- Material Design Lite
- Предварительное демо проекта
- Вопрос/ответ по проекту
- Разбор вопросов к собеседованию
- Демонстрация курсовых проектов
- Краткая история JavaScript
- Работа в терминале
- Погружение в Git
- SSH аутентификация
- Подключение ESLint
- Работа с Husky
- Переменные и типы данных
- Преобразование типов
- Базовые операторы
- Значения Infinity, NaN, undefined, null
- Условия и циклы
- Синтаксис функций
- Способы объявления функций
- arguments, rest и return
- Самовызывающиеся функции
- Глобальные функции
- Рекурсия
- Отладка
- Обработка ошибок
- Стек вызовов
- Области видимости
- Замыкания
- Основы unit-тестирования
- Методы для работы со строками
- Базовый поиск в строке
- Регулярные выражения
- Сравнение строк
- Создание массива
- Копирование массива
- Методы для работы с массивами
- Способы перебора массивов
- Деструктуризация массива
- spread у массивов
- Создание объекта
- Копирование объекта
- Оператор delete
- Геттеры и сеттеры
- Методы для работы с объектами
- Способы перебора объектов
- Деструктуризация объектов
- spread у объектов
- Метод Object.defineProperties
- Основы ООП
- this
- Функция конструктор
- Оператор new
- Прототип
- Статические методы
- Методы call, apply, bind
- Что такое class, extends, constructor, super, static
- Коллекции объектов по ключу
- JSON
- Математические вычисления
- Работа с датой
- Итераторы
- Создание элементов
- Работа с атрибутами и контентом
- Навигация по элементам
- Поиск элементов
- Стили и классы
- Размеры, прокрутка, координаты
- Типы событий
- addEventListener и addRemoveListener
- Всплытие и погружение
- Делегирование событий
- Действия браузера по умолчанию
- События форм и их элементов
- Интерфейсные события
- События загрузки
- MutationObserver
- Таймеры
- Promise
- Event loop
- HTTP
- AJAX
- fetch vs XMLHttpRequest
- CORS
- Знакомство с REST
- Знакомство с GraphQL
- async/await
- Функции-генераторы
- callbacks
- BOM в контексте window
- screen
- navigator
- location
- history
- Browser storages
- Отправка файлов на сервер из формы
- File API
- Принцип работы с Canvas
- Обзор возможностей Canvas
- MIME types
- DataURL и что такое Base64
- Значимость алгоритмов для Front-end разработчика
- Базовые математические алгоритмы
- Базовые алгоритмы работы со строками
- Базовые алгоритмы поиска
- Базовые алгоритмы сортировки
- Оценка сложности алгоритма
- Значимость структур данных для Front-end разработчика
- Связные списки
- Очередь
- Стек
- Хэш таблицы
- Куча
- Деревья
- Графы
- Введение в концепцию шаблонов проектирования
- Порождающие шаблоны (Creational)
- Структурные шаблоны (Structural)
- Поведенческие(Behavioral)
- Клиент-сервер
- Компонентная
- Событийная
- REST
- MV*
- Однонаправленные потоки данных
- Предварительное демо проекта
- Вопрос/ответ по проекту
- Разбор вопросов к собеседованию
- Демонстрация курсовых проектов
- Повторение пройденного материала
- Stash
- Тэгирование
- Rebase
- Chery-pick
- Популярные приемы работы с ветками
- Single-page application
- Повторение HTML5 History API
- Web Components
- Краткий обзор современных инструментов разработки SPA
- Краткая история развития React
- Краткий обзор react-create-app
- JSX
- Работа с props
- Работа со списками
- React Developer Tools
- Установка
- Настройка конфиг-файлов
- Обзор и установка плагинов
- Babel
- Первый build и запуск dev-сервера
- Stateless и Stateful компоненты
- Обработка событий
- Стадии жизненного цикла
- Методы жизненного цикла
- PureComponent и React.memo
- Введение в React Hooks
- Компонент с использованием Hooks vs классовый компонент
- Обзор встроенных Hooks
- Создание собственных Hooks
- Работа с Context
- Работа с Refs
- Компоненты высшего порядка
- React-Router
- Настройки WebpackDevServer
- React-Router hooks
- Создание layouts
- Введение в Redux
- Создание Actions
- Создание Reducers
- Работа со Store
- React Redux
- connect
- Redux hooks
- Redux DevTools
- Redux-Actions
- Middleware: определение, примеры, создание
- Middleware в режиме разработки
- Подключение Redux-Saga
- Углубление в CSS-in-JS
- Обзор CSS-in-JS библиотек
- Создание тем
- Подключение стилей
- Предварительное демо проекта
- Вопрос/ответ по проекту
- Разбор вопросов к собеседованию
- Демонстрация курсовых проектов
- Обзор дипломных проектов
- Предварительное демо проекта
- Вопрос/ответ по проекту
- Демонстрация дипломных проектов
- Полчение сертификатов
Что будет после обучения
Преподаватель
Автор курсаАндрей Богомолов- 💪9 лет занимается разработкой
- 😌Работал в аутсорсинговых и продуктовых компаниях
- 😎Возглавлял команду Front-end разработки в аутсорсинговой компании
- 👏Помог стать программистами 50+ студентам
Учитесь в Intellect Fox и получайте подарки
Стоимость обучения
Лайт
Самостоятельно в своём темпеВсё сам(а)
Поддержка ментора + дедлайныЯ с группой
Поддержка ментора + дедлайны + созвоныЧасто задаваемые вопросы
Наш курс разработан не только для тех, кто уже что-то изучал, но и для тех, кто хочет освоить профессию с нуля. Главное, чтобы вам было это интересно и вы могли уделять обучению минимум 3-4 часа в день (не включая просмотр занятий): выполнять теоретические и практические задания, читать дополнительные материалы, которые мы рекомендуем.
Мы рекомендуем идти на курс с базовыми знаниями английского. Занятия проходят на русском языке, но большинство материалов для изучения мы даём на английском. Также в требованиях большинства вакансий "Junior Front-end developer" минимальный уровень английского Pre-intermediate (A2).
При получении сертификата на курсе мы поможем вам правильно составить резюме, профиль в LinkedIn и расскажем, как подготовиться к собеседованию. Также после окончания обучения у вас останется доступ к чату группы, где мы будем оставаться на связи и по возможности помогать вам.
Если у вас не получится пройти курс до конца, выполнить все курсовые работы и дипломный проект, то мы выдадим вам справку. В ней будет указана информация о прохождении определённого количества часов по курсу «Front-end разработчик» и основные навыки, которые вы получили в процессе обучения. Также у вас останется доступ ко всем материалам занятий курса.
Да, на все тарифы действует рассрочка на 3 месяца от нашей школы: 40% до начала занятий, 30% через месяц после начала занятий и 30% ещё через месяц.
Если вы готовы уделять обучению минимум 3-4 часа каждый день, не включая просмотр занятий, всё должно получиться.