[HTML academy] Интенсивный онлайн‑курс «Базовый HTML и CSS» [Новый поток 04.2018]

Интенсивный онлайн‑курс
«Базовый HTML и CSS»



HTML Academy — стандарт в обучении фронтендеров. Наша задача — готовить полноценных и востребованных специалистов, готовых работать в веб-индустрии.​

Спойлер: Программа

ПЕРВАЯ НЕДЕЛЯ
Введение

Теоретический вебинар

Понедельник с 19:00 до 21:30
Ведущий: Александр Першин, к.т.н., опыт веб-разработки 11 лет
Вводная лекция про роль и место верстальщика в мире веб-технологий.


Как проходит курс. Организационные вопросы.

• Обзор личных проектов.
• Как работать с наставником.
• Критерии качества вёрстки.
• Защита личного проекта и получение сертификата.

Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?

• IP-адрес, сервер и веб-сервер, «виртуальные хосты».
• Доменные имена, URL-адреса и система DNS.
• Загрузка и «сборка» веб-страницы.
• Особенности HTTP и HTTPS. Протоколы HTTP/1.1 и HTTP/2.
• Приёмы оптимизации веб-страниц.

Инструменты веб-разработчика и рабочий процесс на интенсиве.

• Системы контроля версий.
• Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
• Немного о браузерах, браузерных движках и различиях между ними.

• 6 практических курсов для знакомства с HTML.
• Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы веб-браузеров и начать работать с системами контроля версий.

• Получаем наставника.
• Настраиваем инструменты разработки, получаем графические макеты и создаём репозитории проектов.
• Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в Гитхаб.

На выполнение заданий потребуется около шести часов. Вы можете выполнять их в любое удобное время.


Разметка

Теоретический вебинар
Четверг с 19:00 до 21:00
Ведущий: Александр Першин

Создадим логическую HTML-разметку страниц учебного и личного проектов. Попрактикуемся использовать подходящие теги, задавать имена классов, оценивать сложность разметки.

Введение в HTML.

• Синтаксис HTML, типы HTML-тегов.
• Структура простейшего HTML-документа.
• Как работать со спецификацией HTML.
• Обзор HTML-тегов из личных проектов.

Качественная разметка и стили кодирования.

• Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
• Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
• Модульность разметки или использование «пространств имён».
• Когда использовать <article>, <section> и <div>?
• Кодгайды для разметки.
• Алгоритмы создания разметки: «страница как документ», «страница как приложение», «дивянка».

Создаём разметку главной страницы учебного проекта.

Интерактивная демонстрация «Разметка главной страницы учебного проекта».

• 3 практических курса для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управления фоном.
• Статьи и кодгайды, которые помогут вам делать качественную разметку.

• Задания на тренировку разметки: «для выделенного элемента выберите тег или класс из списка».
• Задания на разметку страниц учебного и личного проектов.

На выполнение заданий потребуется около восьми часов.


ВТОРАЯ НЕДЕЛЯ
Фотошоп для верстальщика

Практический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Виталий Зюзин, опыт веб-разработки 8 лет
Разберём всё необходимое для работы верстальщика в Фотошопе. Подготовим графику для проектов.


Типовые задачи верстальщика в Фотошопе.

• Настройка интерфейса Фотошопа.
• Работа со слоями, типы слоёв.
• Получение параметров текста.
• Измерение размеров блоков, отступов, получение информации о цвете.
• Получение параметров сложных декоративных эффектов: тени и прочее.
• Экспорт графики, работа с повторяющимися паттернами.

Обзор форматов графики в вебе.

• Растровая графика — PNG, JPEG, GIF.
• Векторная графика — SVG.
• Как выбрать подходящий формат?
• Оптимизация графики.

Обзор альтернатив.

• Sketch.
• Avocode.
• Zeplin.

Разбор графических макетов проектов.

• 5 практических курсов о селекторах и каскадировании в СSS и формах в HTML.
• Статьи о работе в Фотошопе и особенностях графических форматов.

• Тренировочные задания на работу с графикой: определение подходящего формата графики, определение контентных и декоративных изображений.
• Задания на подготовку графики учебного и личного проектов.

На выполнение заданий потребуется около шести часов.

Доступность

Практический вебинар
Четверг с 19:00 до 21:00
Ведущий: Вадим Макеев
Научимся делать интерфейсы удобные и доступные для всех. Управление фокусом, важность семантики, тестирование и скринридеры.

Интерфейсы — не картинки.

• Какие есть слои интерфейса, кроме графики.
• Зачем нужные интерактивные элементы.
• Неочевидное использование интерфейсов.

Понятие доступности.

• Что мешает пользоваться интерфейсами.
• Ежедневные ситуации недоступности.
• Физиологические и ментальные особенности.

Взаимодействие с клавиатуры.

• Интерфейсы без указателя.
• Зачем нужен фокус на элементах.
• Как сделать элементы интерактивными.

Значимые элементы.

• Зачем семантика и как не подхватить диватоз.
• Почему не нужно переделывать элементы.
• Кнопки и ссылки, в чём разница?

Лейблы элементов.

• Кому нужны описания элементов.
• Разбор ошибок в реальных интерфейсах.
• Инспекторы доступности и скринридеры.

• 4 практических курса о продвинутых селекторах и декоративных возможностях CSS.
• Статьи про создание доступных веб-интерфейсов.

• Задания на шлифовку разметки учебного и личного проектов.

На выполнение заданий потребуется около шести часов.


ТРЕТЬЯ НЕДЕЛЯ
Введение в CSS

Практический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Александр Першин
Разберёмся с базовыми механизмами CSS и начнём стилизацию проектов.
Введение в CSS.

• Синтаксис CSS.
• CSS-селекторы, псевдоклассы и псевдоэлементы.
• Наследование, каскадность и приоритеты в CSS.
• Единицы измерения в CSS: абсолютные, относительные, для управления цветом.
• CSS-функции и директивы.

Практика стилизации.

• Зачем нужна нормализация.
• Пространства имён и независимые компоненты.
• Стили кодирования для CSS.
• Работа с нестандартными шрифтами.
• Стилизация состояний интерактивных элементов.

Начинаем стилизацию главной страницы учебного проекта.
Задаём глобальные стили документа, описываем текстовые параметры элементов и состояния интерактивных элементов.
Интерактивная демонстрация «Начинаем стилизацию учебного проекта».

• 4 практических курса для знакомства с блочной моделью документа, флексбоксами и приёмами построения сеток.
• Статьи, которые помогут вам разобраться с тонкостями использования CSS: нормализацией, подключением нестандартных шрифтов и доступной стилизацией интерактивных элементов.

Задания на базовую стилизацию учебного и личного проектов.
На выполнение заданий потребуется около шести часов.


Сетки

Теоретический вебинар
Четверг с 19:00 до 21:30
Ведущий: Александр Першин
Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов.
Поток документа и блочная модель документа.

• Понятие сетки и потока документа.
• Блочные и строчные элементы и их особенности.
• Свойства блочной модели: размеры, рамки и отступы.
• Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizingи другие.
• Свойство display. Управление типом элементов.

Создание сеток на флексбоксах.

• Введение во флексбокс.
• Флекс-контейнер, флекс-элементы, флекс-оси.
• Алгоритм расчёта размеров флекс-элементов.
• Выравнивание и распределение флекс-элементов вдоль осей.
• Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
• Особенности флексов при создании сеток.

Создаём сетку главной страницы учебного проекта.
Интерактивная демонстрация «Строим сетку учебного проекта». Поэкспериментируйте с сеткой самостоятельно.

• 5 практических курса по созданию сложных декоративных элементов.
• Статьи, которые помогут вам разобраться с особенностями блочной модели документа, флексбоксами и приёмами построения сеток.

Задания на создание сеток учебного и личного проектов на флексах.
На выполнение заданий потребуется около восьми часов.


ЧЕТВЁРТАЯ НЕДЕЛЯ
Декоративные элементы

Практический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Александр Першин

Познакомимся с приёмами создания декоративных элементов. Завершим вёрстку главных страниц учебного и личного проектов.

Позиционирование.

• Относительное позиционирование.
• Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
• Фиксированное позиционирование.
• Управление порядком слоёв.

Приёмы создания элементов интерфейса.

• Блочно-строчные элементы и их особенности.
• Борьба с пробелами между блочно-строчными элементами.
• Особенности флексов при создании элементов интерфейсов.
• Типовой приём «псевдоэлемент с абсолютным позиционированием».
• Использование CSS-графики для создания декоративных элементов.

Завершаем вёрстку главной страницы учебного проекта.

• Интерактивная демонстрация «Вёрстка главной страницы учебного проекта».
• Скринкасты про создание сложных декоративных элементов.

3 практических курса для закрепления навыков создания декоративных элементов.
Задания на создание декоративных элементов учебного и личного проектов.
На выполнение заданий потребуется около шести часов.


Оформление контента
Практический вебинар
Четверг с 19:00 до 21:00
Ведущий: Александр Першин
Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта.


Практикуемся в вёрстке элементов содержимого.

• Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать при наполнении страницы из CMS.
• Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
• Подготовим свёрстанный учебный макет к публикации или передаче заказчику.

Разбираем типовые случаи переполнения и способы борьбы с ними.
Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.

• Интерактивная демонстрация «Вёрстка текстовой страницы учебного проекта».
• Интерактивная демонстрация «Вёрстка всплывающих окон учебного проекта».
• Интерактивная демонстрация «Примеры переполнения».
• Демонстрации и скринкасты вёрстки сложных элементов личных проектов.

• 3 практических курса для знакомства с JavaScript и CSS-анимациями.
• Статьи о тонкостях оформления текстового содержимого и элементов форм.

Задания на завершение вёрстки учебного и личного проектов. Подготовка проектов к защите.

На выполнение заданий потребуется около двадцати часов, срок выполнения — до конца курса.

ПЯТАЯ НЕДЕЛЯ
Введение в JavaScript

Практический вебинар
Четверг с 19:00 до 21:00
Ведущий: Алексей Симоненко, опыт веб-разработки 17 лет
Познакомимся с JavaScript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки.


Язык программирования JavaScript.

• Роль программирования в жизни верстальщика.
• Что такое DOM и зачем нам объект document.
• Зачем нужен объект window.

Типовые случаи использования JavaScript

• Как найти любой элемент на странице.
• Как реагировать на события, происходящие на странице.
• Как менять CSS-стили у элементов.
• Как использовать анимацию на странице.

Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.
Интерактивная демонстрация «Добавляем JavaScript на главную страницу учебного проекта».
Статьи об опыте взаимодействия форм и особенностях работы JavaScript в браузере.
Задания по оживлению всплывающих окон и добавлению интерактивной карты в личный проект.
На выполнение заданий потребуется около четырёх часов.


Лучшие практики
Теоретический вебинар

Четверг с 19:00 до 21:00
Ведущий: Вадим Макеев

Узнаем как правильно применять практические знания, как учиться новому и развиваться в профессии.

Совместимая вёрстка.

• Прогрессивное улучшение.
• Постепенная деградация.
• Цена совместимости.
• Независимые слои улучшения.

Реальное тестирование.

• Многообразие браузеров и устройств.
• Инспекторы, эмуляторы, виртуальные машины.
• Слабые устройства и медленные сети.
• Минификация, сжатие, оптимизация.
• Эмпатия, приоритеты, сначала контент.

Корневые технологии.

• Веб-стандарты и фантазийные велосипеды.
• Ваниль против библиотек и фреймворков.
• Мода, хайп, вечное и светлое.

Развитие в профессии.

• Как не потерять актуальность знаний.
• Обмен знаниями, события, выступления.
• Пограничные дисциплины.