Веб-разработчик с нуля от Бруноям

О школе

Бруноям — это практический подход к образованию. Школа создает курсы для тех, кто хочет получить новую профессию, сменить сферу деятельности или решить свою бизнес-задачу. На собеседовании стали спрашивать не наличие диплома, а навыки, которыми человек обладает. В Бруноям как раз и дают те самые навыки и умения, которые позволяют попробовать себя в новой профессии или совершенствоваться. Бруноям — это образование для тех, кто хочет и готов пробовать новое, меняться, искать себя и свою работу мечты

Программа обучения

8 месяцев обучения
1 год поддержки наставника после обучения
1 итоговый проект в портфолио

Блок 1. Основы веб-технологий

• Постановка личных целей на курс
• Типы сайтов, функциональность
• Этапы создания сайта, основные профессии индустрии
• Сетевые технологии и протоколы Интернета: TCP/IP, HTTP, HTTPS, FTP
• Хостинг и домен, система DNS
• Модель «Клиент и сервер»
• Роль браузера и редакторов кода
• Настройка рабочей области
• Системы контроля версий. Git

Блок 2. HTML

• Знакомство с HTML: Понятие тега и атрибута
• Кодировка текста HTML
• Теги для формирования текста
• Гиперссылки и адреса файлов
• Якорные ссылки
• Ссылка на вызов и отправку email
• Таблицы в HTML
• Тег img и его атрибуты. Правила размещения картинок. Форматы изображений: какие выбрать

Блок 3. CSS

• Основы синтаксиса CSS
• Основные виды селекторов: идентификаторы, классы, псевдоклассы
• Баллы специфичности и приоритеты правил
• Каскад и наследование свойств
• Контекстный и универсальный селектор
• Свойства текста и шрифта в CSS
• Подключение внешних шрифтов
• Цвета HEX и RGB. Добавление однородного фона к элементам. Фоновая картинка для страницы, настройка фона

Блок 4. Блочная модель и макет веб-страницы

• Понятие блочных и строчных элементов
• Ключевые свойства блоков
• Как рассчитывается размер блока и box-sizing: border-box
• Что такое блочная модель
• Применение блоков для построения макета
• Строчно-блочные элементы
• Свойство display
• Устаревшие способы построение макета: знать, нельзя использовать

Блок 5. Многоколоночные макеты с Flexbox

• Семантические теги для вёрстки макета
• Основы Flexbox: контейнеры и элементы
• Выравнивание элементов по основной и поперечной оси
• Смена осей и вертикальное выравнивание элементов
• Проблемы применения flexbox

Блок 6. Основы графических редакторов для верстальщика

• Работа с картинками: кадрирование, тримминг
• Сохранение: формат, качество, вес
• Как узнать код цвета
• Инструменты для работы со шрифтом
• Копирование готового CSS
• Измерение расстояний: инструменты, настройки
• Эффекты и их копирование
• Встраивание карт и видео

Блок 7. Позиционирование

• Виды позиционирования: статическое, абсолютное, относительное, фиксированное
• Особенности разных видов позиционирования
• z-index и контекст наложения
• Когда и как использовать позиционирование
• Пример выпадающего многоуровневого меню
• Решение типовых задач с позиционированием

Блок 8. Формы обратной связи

• Основные элементы формы: input, select, textarea, button
• Состояние полей и псевдоклассы
• Элементы выбора checkbox, radio, select
• Группировка элементов: fieldset и legend
• Стили для псевдоэлемента placeholder
• Правила написания стилей для форм
• Стилизация кнопок

Блок 9. Отзывчивый и адаптивный веб-дизайн

• Понятие адаптивного и отзывчивого веб-дизайна
• Медиа-запросы
• Параметры области просмотра и тег Meta viewport
• Проблемы кроссбраузерной верстки
• Валидность кода, валидаторы
• Особенности многостраничных сайтов
• Правила вёрстки для seo-продвижения

Блок 10. Анимация с помощью HTML5 и CSS3

• Плавные переходы для создания анимационных эффектов
• Анимация с помощью keyframes
• Трансформация элементов
• Добавление базовых элементов анимации на сайт

Блок 11. Основы JavaScript

• Введение JavaScript
• Переменные и типы данных
• Математические операторы и преобразование типов
• Логические операторы
• Ветвления и условные операторы
• Встроенные функции для взаимодействия с пользователем

Блок 12. Циклы и массивы в JavaScript

• Массивы
• Методы для работы с массивами
• Циклы for и while
• Вложенные массивы
• Работа с консолью

Блок 13. Функции

• Определение функции. Стрелочная функция и её отличия от обычной. Function Expression и Function Declaration.
• Область видимости. Как она работает. LexicalEnvironment.
• Таймеры и замыкание. Функции setInterval, setTimeout, clearInterval, clearTimeout. Что такое замыкание и как его можно использовать.
• Функции обратного вызова

Блок 14. Объекты. DOM. События

• Объекты и словари. Как создавать объекты. Ключевое слово this. Получение, изменение и удаление свойств объекта. Ссылки на объекты.
• Прототипное наследование. Как работает наследование свойств и методов. Конструкторы.
• Классы. Определение классов и преимущества использования. Расширение классов. Приватные методы и публичные. Геттеры и сеттеры. Пример создания программы с применением классов и архитектура MVP.
• DOM. Объектная модель страницы и зачем она нужна. Поиск элементов на странице и их получение. Перебор элементов и основные свойства.
• События

Блок 15. Анимация и эффекты в JavaScript

• JavaScript-анимации. Изменение CSS свойств элементов. Кривая Безье. Примеры анимаций.
• Рендеринг в браузере. Оптимизированные свойства. Функция requestAnimationFrame.
• Библиотеки с анимациями

Блок 16. Интерактивные элементы

• Слайдер
• Аккордион
• Тултип

Блок 17. Node.js

• Введение в Node.js. Возможности Node.js. Кратко о модулях и их предназначениях: fs, child_process, https.
• NPM. Основные команды пакетного менеджера npm. Инициализация проекта и установка первых пакетов. Структура package.json.
• Основы Webpack. Зачем нужны сборщики и какие этапы можно автоматизировать. Первый конфиг Webpack и автоматизация сборки: минификация кода, конкатенация модулей и использование препроцессора SCSS.
• Препроцессор SCSS. Преимущества препроцессоров. Краткий обзор различий между некоторыми: SCSS, SASS, Less, post-css. Основные конструкции: переменные, миксины, функции.

Блок 18. Основы React

• Promise API
• Обращение к серверу и класс XMLHttpRequest
• Метод fetch
• Библиотека Axios

Блок 19. Основы React

• Компоненты и JSX
• Состояние компонентов
• Хуки
• Стилизация компонентов
• React-Router

Блок 20. Основы TypeScript

• Статическая типизация
• Интерфейсы и типы
• Перечисляемые типы Enum

Блок 21. Обзор дорожной карты JS-разработчика

Кратко о том, как развиваться разработчику дальше и что изучать.

Блок 22. Основы PHP-программирования

• Назначение серверных технологий
• Локальный веб-сервер и домен
• Создание динамических веб-страниц
• Понятие CMS-систем
• Размещение сайта на хостинге
• Протокол FTP для загрузки файлов
• Подведение итогов и завершение проекта