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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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