Frontend development
Комплексный курс по frontend-разработке, который научит кодить на JavaScript, верстать с помощью HTML и CSS, строить приложения с использованием библиотек React и Redux, работать с API и системами контроля версий. На выходе студенты получат практические навыки, портфолио с проектом и карьерный план для старта в высокооплачиваемой IT-индустрии.
*курс преподается на украинском языке
*знание английского на уровне Intermediate и выше
Научитесь кодить на JavaScript, работать с инструментами CSS, описывать логику обращений к элементам HTML. В результате ― сможете закрывать задачи frontend-разработчика и повысить уровень зарплаты.
Напишите свой первый код JavaScript, ознакомитесь с экосистемой языка и библиотеками. Систематизируете знания и получите практику на реальных проектах, что поможет понять, в каком направлении развиваться дальше.
Ознакомитесь с основами разработки и поймете принципы оформления сайтов и веб-приложений. Научитесь создавать интерактивные элементы сайта, наконец найдете общий язык с frontend-разработкой ― или же сами начнете создавать сайты.
Сегодня frontend-разработка является одним из популярнейших направлений в IT-индустрии. Задача разработчика ― сделать сайты красивыми, функциональными и быстрыми в сотрудничестве с дизайнерами.
Мы разработали шестимесячную программу, которая научит вас не только современным языкам и технологиям, но и мыслить как frontend-разработчик. На каждом занятии будет важная теория и максимум практики с фидбеком преподавателя. Получите практические знания, научитесь общаться с заказчиком ― и уже через три месяца сможете работать по специальности.
Узнаете, как устроена экосистема JavaScript; научитесь писать чистый рабочий код, добавлять поведение для элементов на странице, а также строить интерактивные приложения с помощью современной библиотеки React.
Разберетесь в принципах построения сайтов и веб-приложений, жизненном цикле разработки и этапах создания программного обеспечения. Научитесь использовать HTML и CSS, описывать логику обращений к элементам HTML.
Овладеете всеми необходимыми техническими навыками: научитесь пользоваться системой контроля версий, сможете самостоятельно разрабатывать сайты и комплексные приложения в браузере. Закрепите материал из HTML, CSS и React на двух воркшопах. Будете готовы брать проекты на фрилансе еще во время учебы, чтобы понять, в каком направлении развиваться дальше.
Разработаете роадмап профессионального развития, получите рекомендации по оформлению CV и профессионального профиля в соцсетях. Получите советы от лектора и рекрутера, которые помогут пройти интервью на позицию Intern / Junior Frontend Developer.
- Знакомство. Общий обзор курса
- Основные определения: что такое Клиент, Сервер, HTML, CSS, Фреймворк, Система контроля версий
- Краткая история: от гипертекста для научных работ до комплексных SaaS-решений в браузере
- Небольшое овервью: как работает интернет и клиент-серверные приложения
- Обзор: из чего состоит приложение в браузере
- Этапы разработки приложения: техническое задание, разработка архитектуры, кодирование, тестирование, цикличность этапов
- Инструменты для работы: редактор кода
- Установка
- Настройка
- Инструменты для работы: DevTools
- Инструменты для работы: система контроля версий
- Что такое контроль версий и зачем это нужно
- GitHub и установка git
- Что такое репозиторий. Создание репозитория. Клонирование репозитория
- Основные команды для работы: pull, push
- Ветви и работа с ними. Команды branch, merge. Переключение между бранчами
- Что такое HTML. Понятие документа, тега, атрибута
- Структура HTML-документа. Теги doctype, html, head, title, meta, body
- Ссылки. Тег a
- Оформление текста. Заголовки (теги h1–h6), теги p, strong, em, br
- Оформление списков. Теги ul, ol, dl, li, dt, dd
- Изображение. Тег img
- Основы семантики. Теги header, main, section, article, footer. Блок div
- Создание таблицы в HTML. Работа со столбцами и строчками
- Заголовок и тело таблицы. Оформление заголовков
- Работа с ячейками: положение текста в ячейке, объединение ячеек
- Оформление таблицы. Работа с рамками
- Что такое форма и зачем она нужна
- Элементы формы: input, textarea, button, submit, radiobutton, checkbox, select
- Валидация данных формы
- Оформление формы: теги label и fieldset
- Что такое стили и что они позволяют делать
- Подключение стилей к странице
- Селекторы стилей. Каскад
- Основные стили для оформления текстов и ссылок
- Работа со шрифтами
- Работа с фоном. Цвет и картинки
- Работа с рамками. Типы рамок. Цвет рамок
- Работа с отступами. Внутренние и внешние отступы
- Работа с размерами блока
- Единицы измерения при работе с размерами
- Типы позиционирования элементов на странице
- Отличие блочных и строчных элементов
- Позиция элементов относительно других элементов на странице. Float
- Позиция дочерних элементов. Тип flex и grid
- Скрытие элементов на странице
- Понятие макета
- Как работать с макетом. Инспектор элементов
- Работа с прототипами
- Логическая разбивка элементов на странице
- Работа с flexbox
- Стилизация форм
- Комплексные селекторы для стилизации элементов
- Стилизация checkbox и radiobox
- Стилизация выпадающих списков
- Свойство position. Разновидности позиционирования на странице
- Слоение элементов на странице
- Отношение элементов на странице между собой в зависимости от типа позиции
- Работа с z-index
- Что такое переменная и для чего она используется
- Использование переменных в CSS
- Область видимости переменной
- Переопределение переменной
- Понятие адаптивной верстки
- Обзор методов, используемых для адаптивной верстки
- Нюансы работы с мобильными устройствами. Понятие ориентации
- Media-запросы
- Работа с тенью элементов
- Работа с округлениями
- Прозрачность
- Работа с трансформацией объектов (сдвиг, поворот, скейлинг и др.)
- Для чего нужны анимации
- Пути анимирования элементов на странице
- Для чего нужны препроцессоры
- Работа с интерпретаторами препроцессоров
- Общие понятия: переменные, вложенность, миксины, наследование
- Идея фреймворка. Какие проблемы решает и когда мы должны использовать их
- Основы построения. Обзор фреймворков tailwind и bootstrap
- Присоединение фреймворка к документу
- Основные элементы фреймворка. Строительство сетки, стилизация элементов
- Рассмотреть макет интернет-магазина
- Сделать его нарезку в Figma
- Сверстать главную страницу
- Сверстать карту товара
- Сверстать форму заказа
- На всех этапах работы использовать git
типы данных, базовые операторы
- Что такое JS и для чего он используется
- Как подключить скрипт на страницу
- Hello, world
- Взаимодействие с пользователем
- Переменные. Типы данных. Константы
- Приведение типов
- Базовые операторы
Условные операторы. Логические операторы
- Операторы сравнения. Сравнение переменных разных типов. Строгое сравнение (без приведения типов)
- Условные выражения (if, switch). Тернарный оператор
- Логические операторы
- Создание нового массива
- Работа с циклами. Циклы while и for
- Операции с элементами массива в цикле
- Концепция функции. Объявление функции
- Работа с локальным и внешними переменными
- Настройки функции. Параметры по умолчанию
- Возврат значения
- Концепция объекта. Примеры использования объекта
- Методы создания объекта
- Область видимости
- Копирование объекта и ссылка
- Сбор «мусора»
Функция-конструктор. Оператор new
- Описание логики создания нового объекта. Функция-конструктор
- Создание нового объекта с помощью конструктора. Оператор new
- Передача контекста (bind, call, apply). Наследование конструкторов
- Браузерные элементы. DOM-дерево
- Создание, вставка и модификация элементов на странице
- Поиск элемента на странице
- Атрибуты элементов. Динамическая работа со стилями и классами
- Размеры и прокрутка элементов
Общение пользователя со скриптом
- Понятие события. Понимание того, как пользователь взаимодействует со скриптом
- Обработчик событий (events handlers). Способы добавления событий к элементу
- События, задаваемые мышью (click, mouseup, mouseout)
- Работа с клавиатурой
- Обзор возможностей DevTools для поиска ошибок
- Логирование работы кода
- Основы дебагинга: выполнение кода пошагово, брейк-пойнт, вход в функцию, вывод промежуточного результата
- Концепция тестирования. Ручное тестирование
- Код для проверки кода. Написание тестов. Автоматическое тестирование
- Проблемы, которые могут возникнуть при написании тестов
- Как JS работает в браузере
- Понятие асинхронности, коллбэка
- EventLoop. Приоритетность выполнения кода
- Примеры асинхронных функций. setTimeout, setInterval
- Как приложение коммуницирует с удаленным сервером
- Какие инструменты коммуникации существуют
- Первый запрос и обработка результатов
- HTTP-методы
- Концепция прототипа. Прототипное наследование
- F.prototype
- Встроенные прототипы
- Концепция класса. Базовый синтаксис
- Наследование классов
- Геттеры и сеттеры
- Проверка класса instanceof
- Используя макет из урока 20, добавим загрузку товаров с помощью API
- Добавим работу с корзиной и сделаем корзину динамической
- Добавим работу с отзывами о товаре
- В процессе углубленно рассмотрим действия с массивами, классами, работой DOM и событиями
- Что такое веб-приложение и чем оно отличается от веб-страницы
- Какие инструменты нужны для построения веб-приложений
- Понятие фреймворка. Обзор популярных решений (React, Angular)
- Выбор фреймворка для работы
- npm и инфраструктура для работы
- Настройка окружения для работы
- Презентация темы для выпускного проекта. Консультация по этапам его выполнения
- Что такое React. Понятие реактивности
- Virtual Dom (общее понятие)
- create-react-app
- Первый компонент
- Props
- Переиспользование компонентов
- Дочерние компоненты. children
- Углубление в реактивность. Понятие состояния. Понятие хука
- Добавление состояния к компоненту
- Использование состояния, влияние состояния на отрисовку компонента
- Работа с элементами формы. Контролируемые элементы
Работа с API. Доступ к DOM-элементам
- Жизненный цикл компонента
- Работа с жизненным циклом. Хук useEffect
- Работа с API в React-приложениях
- Работа с DOM-элементами. Хук useRef
- Какие виды коммуникации бывают между компонентами
- Прокидывание props
- Работа с контекстом. createContext и useContext
- Зачем нужны state-менеджеры
- Что такое Redux и как он работает? Понятие стора
- Actions, reducers
- Связывание компонента и стора
Используя Gmail API, напишем приложение, которое будет отображать письма, сможет прочитать отдельное письмо и позволит создать и отправить новое письмо.
Команды будут представлять проекты. Кроме рабочего проекта и кода на GitHub должна быть также презентация о команде (роли) и, собственно, сам проект.
- Ознакомитесь с подходами к развитию карьеры
- Найдете свои сильные и слабые стороны, определите зоны для развития
- Узнаете, как junior-специалисту получить свой первый оффер
- Ознакомитесь с организационной структурой современных IT-компаний
- Получите overview ресурсов для поиска работы и заказчиков
- Узнаете, как разработать стратегию поиска работы под свои скилы
- Поймете, зачем вам профиль в LinkedIn, и узнаете, как правильно оформить аккаунт в социальных сетях так, чтобы рекрутеры его замечали
- Изучите структуру резюме
- На примерах разберете самые распространенные ошибки при составлении резюме
- Получите рекомендации по написанию сопроводительного письма и узнаете, почему иногда сопроводительное письмо важнее резюме
- Узнаете, из каких этапов состоит процесс привлечения новых сотрудников в компанию
- Ознакомитесь со структурой интервью
- Подготовитесь к интервью с рекрутером
- Узнаете, какие вопросы необходимо задать рекрутеру и hiring-менеджеру во время интервью
- Научитесь вести переговоры при заключении job-оффера