● Занятия проходят 2 раза в неделю в будни с 18:00 МСК● Программа построена от простого к сложному. На лекции и практические задания понадобится 7–10 часов в неделю● Записи вебинаров, лекции, тесты, тренажёр, презентации и другие полезные материалы хранятся в личном кабинете
JavaScript и PHP входят в топ-10 востребованных языков программирования в индексе TIOBE
JavaScript — основной язык создания функциональности и логики сайта или веб-приложения. Он работает на всех платформах и операционных системах, достаточно прост и подходит начинающим разработчикам.PHP отличается гибкостью и хорошей совместимостью. Он экономит время на разработку за счёт большого количества фреймворков и встроенных функций. На PHP написана сервисная часть таких сайтов, как Wikipedia, Ted, BlaBlaCar и Wordpress.
Часть 1. Frontend-разработка
HTML-вёрстка с нуля до первого макета
Научитесь верстать сайты на HTML и CSS и вносить изменения в существующую вёрстку. По итогам модуля вы самостоятельно сверстаете лендинг.
- Введение в вёрстку
- Контентные теги
- Теги для вёрстки структуры контента
- Позиционирование блочных элементов
- Вёрстка форм
- Нестандартные элементы форм
- Всплывающие элементы
- Позиционирование flex-элементов
- Проект: Вёрстка макета сайта Пример готовой работы
Адаптивная и мобильная вёрстка
Получите опыт, который позволит стать незаменимым звеном в проектировании и создании современных отзывчивых веб-интерфейсов. Сможете верстать сайты для всех типов устройств.
- Вёрстка резинового макета
- Резиновые изображения
- Введение в медиазапросы
- Медиафункции
- Особенности вёрстки для мобильных устройств
- Вёрстка адаптивного макета
- Адаптивная типографика
- Breakpoints
- Адаптивные изображения
- CSS Grid
- Кроссбраузерность и доступность
- Проект: Адаптивная мобильная версия макета сайта Пример готовой работы
Основы программирования
Познакомитесь с азами программирования, напишете первые строки кода и создадите первые простые проекты на популярном языке JavaScript. Разберётесь с видами языков программирования и поймёте, как выбрать свой с учётом личных интересов и профессиональных планов. В итоговом проекте вы разработаете онлайн-игру, похожую на «Монополию».
- Базовые понятия. Переменные и числа
- Логический тип и ветвление
- Строки. Алгоритмы. Как отлаживать код
- Массивы и базовые методы работы с ними
- Циклы
- Ассоциативные массивы
- Функция без параметров. Область видимости
- Параметры и возвращаемое значение
- Воркшоп по разработке логики игры «Виселица»
- Проект: Игра «Крестики-нолики» на JavaScript Пример готовой работы
Git — система контроля версий
Вы научитесь работать с системой Git и сервисом GitHub, сможете публиковать свои домашние работы и уже в процессе обучения сформируете первое портфолио — работодатели часто просят показать примеры вашего кода на GitHub.
- Предназначение системы контроля версий
- Основные операции: фиксация и откат изменений, поиск, история
- Работа с сервисом GitHub
- Ветки, слияние веток и разрешение конфликтов
- Командная работа
Основы JavaScript
Глубже погрузитесь в JavaScript — один из самых популярных и гибких языков программирования. Начнёте с азов синтаксиса, узнаете, как работает сайт, и за 8 занятий напишете своё первое веб-приложение — онлайн-сервис для торговли криптовалютой.Узнаете о дополнительных возможностях, которые даёт браузер. Подключив скрипт к HTML-документу, получите к нему доступ и сможете делать документ живым: изменять его и реагировать на действия пользователя.
- Основные понятия
- Функции
- Объекты
- Классы
- Обработка исключений и замыкания
- Асинхронность
- Функции-декораторы, call, apply
- Проект: Сайт-биржа по продаже криптовалюты Пример готовой работы
Основы JavaScript в браузере
Вы узнаете о дополнительных возможностях, которые даёт браузер — Web API. Подключите скрипт к HTML-документу и получите к нему доступ, чтобы сделать документ живым: изменять его и реагировать на действия пользователя.
- Возможности JavaScript в браузере
- Способы поиска нужного HTML-элемента
- Объект события
- DOM
- Работа с HTML-формами
- Изменение структуры HTML-документа
- Асинхронные запросы
- Хранение состояния на клиенте
- Проект: Веб-менеджер личных финансов Пример готовой работы
Продвинутый JavaScript
Научитесь работать с современным инструментом для организации рабочего окружения (npm, webpack) и разберётесь с наиболее сложными разделами языка: прототипной моделью, promises и асинхронным программированием (async/await). Это позволит выйти на новую ступень в сфере веб-разработки.
- Стандарты и рабочее окружение
- Модули и WebPack
- Платформы: браузер vs Node.js
- Тестирование и Continuous Integration
- Прототипы, конструкторы, классы и наследование
- Object, Reflection и Proxy
- Регулярные выражения
- Контейнеры
- ArrayBuffer
- Promises, async/await, timers & event loop
- Символы, итераторы, генераторы
- TypeScript
- Проект: Онлайн-игра «Ходилка» в стиле фэнтези Пример готовой работы
Продвинутый JavaScript в браузере
Освоите инструменты, ускоряющие работу. Научитесь на профессиональном уровне работать с формами: проводить валидацию, использовать продвинутые элементы: слайдеры, календари, файлы. Познакомитесь с API, предоставляемым браузером: геолокацией, нотификацией, медиа, веб-сокетами. Через анимацию добавите интерактивности в свои приложения.
- Рабочее окружение
- DOM (объектная модель документа)
- Обработка событий
- Организация тестирования
- Работа с HTML-формами
- Drag and drop. Files
- Работа с HTTP
- REST, Server-sent events, WebSockets
- Анимация и CSS
- Geolocation, Notification, Media
- RxJS
- WebWorkers, ServiceWorkers
- Проект: Бот для поиска и хранения информации Пример готовой работы
Библиотека React
Освоите одну из самых популярных библиотек на JavaScript — React. С её помощью вы сможете создавать интерактивные пользовательские интерфейсы. Вам достаточно описать, как части интерфейса приложения выглядят в разных состояниях. React будет своевременно их обновлять, когда данные изменяются. Вы сможете создавать инкапсулированные компоненты с собственным состоянием, а затем объединять их в сложные пользовательские интерфейсы.
- Библиотека React, компоненты
- События и состояние
- Props
- Работа с формами
- Композиция компонентов
- Жизненный цикл компонентов. HTTP
- Компоненты высшего порядка
- Hooks, Context API
- React Router
- Redux
- Redux Toolkit
- Redux Saga
- Проект: Интернет-магазин обуви Пример готовой работы