Курс по HTML-верстке в TeenCoder

Описание

Мы не стали охватывать необъятное и решили сконцентрироваться только на верстке. Мы сделали это как можно глубже. Именно поэтому к концу полного курса не остается людей, которые не научились верстать. Но, это не главная наша фишка.

Мы считаем, что наша задача – направить на правильный путь, а пройти его должен ты! Ты столкнешься со множеством трудностей и у тебя будет что-то не получаться, но ты справишься. Мы уверены в тебе. Именно поэтому, после окончания курса, ты сможешь самостоятельно разбираться в технологиях и не бояться трудностей.

После прохождения курса ты:

Программа курса

Введение в HTML и CSS

Тезисы:

  • Определение HTML и CSS;
  • Теги;
  • Базовая структура страниц;
  • Каскад;
  • Селектор;
  • Специфичность селектора.

Классификация тегов

Тезисы:

  • Теги для верстки каркаса сайта;
  • Теги для верстки контента;
  • Формы;
  • Блочные теги;
  • Строчные теги.

Позиционирование элементов

Тезисы:

  • Свойство display;
  • Свойство float;
  • Свойство position;
  • Позиционирование элементов по горизонтали;
  • Позиционирование элементов по вертикали.

Методология верстки БЭМ

Тезисы:

  • Блок;
  • Элемент;
  • Модификатор;
  • Микс;
  • Соглашение по именованию сущностей.

"А как загружается сайт?"

Тезисы:

  • DNS;
  • Отправка запроса на сервер;
  • Роль серверного языка программирования (PHP, Python, Ruby и др.);
  • Роль Базы Данных (MySQL, PostgreSQL, MongoDB и др.);
  • Получение ответа от сервера;
  • Кэширование;
  • Chrome DevTools.

Первые шаги к оптимизации скорости загрузки сайта

Тезисы:

  • Chrome DevTools;
  • Google PageSpeed;
  • Инструменты для оптимизации графики;
  • Инструменты для оптимизации HTML, CSS и JS.

Работа с PSD-макетом

Тезисы:

  • Настройка Photoshop;
  • Размеры;
  • Цвета;
  • Тестовые слои;
  • Изображения.

Flexbox

Тезисы:

  • Главная и поперечная ось;
  • Переключение оси (свойство flex-direction);
  • Многострочный flexbox (свойство flex-wrap);
  • Позиционирование по осям (свойства justify-content, align-items, align-content, align-self);
  • Сжатие и растяжение элементов (свойства flex-grow, flex-shrink, flex-basis, flex);
  • Переключение порядка элементов (Свойство order);
  • Переход от float/inline-block раскладки к flexbox.

CSS-анимация

Тезисы:

  • Свойство transtion;
  • Принцип работы transition;
  • Свойство animation;
  • Принцип работы @keyframes;
  • Разница между transition и animation;
  • "А что под капотом браузера?";
  • Оптимизация анимации;
  • Chrome devTools.

Инструменты разработчиков интерфейса

Тезисы:

  • Системы контроля версий (GitHub);
  • Пакетные менеджеры (NPM);
  • Инструменты автоматизации (Gulp.js);
  • Линтеры (StyleLint).

CSS-препроцессоры

Тезисы:

  • Nesting;
  • Переменные;
  • Арифметические операции;
  • Миксины;
  • Импорт.

Адаптивная верстка

Тезисы:

  • Переход от фиксированных / резиновых макетов к адаптивным;
  • Отзывчивая типографика;
  • Отзывчивые изображения;
  • Особенности верстки под мобильные устройства;
  • Chrome devTools.

Accessibility. Доступность сайтов для пользователей

Тезисы:

  • Пользователи;
  • Устройства доступа к контенту;
  • WAI-ARIA 1.1;
  • Важность семантики.

"А как браузер отрисовывает страницу?"

Тезисы:

  • CSSOM-дерево;
  • DOM-дерево;
  • Render-дерево;
  • Reflow;
  • Repaint.

Расписание занятий

Тема занятия Тип
Интенсивная часть (бесплатная для жителей Пензы)
Введение в HTML и CSS Л
Классификация тегов Л
Позиционирование элементов Л
Позиционирование элементов Л
Верстка первого задания Л-П
Верстка первого задания П
Верстка первого задания П
Верстка первого задания П
Всего: 8 занятий (Л – 4, Л-П – 1, П - 3)
Л – теоретическое занатие Л-П – теоретическое занатие с активным участием учеников П – разбор домашней работы
Продвинутая часть (платная)
Методология верстки БЭМ Л
Верстка первого задания. БЭМ Л-П
Верстка первого задания. БЭМ П
"А как загружается сайт?" Л
Первые шаги к оптимизации скорости загрузки сайта Л
Работа с PSD-макетом Л
Верстка второго задания П
Верстка второго задания П
CSS-анимация Л
Верстка второго задания П
Flexbox Л
Инструменты разработчиков интерфейса Л
GitHub Л-П
NPM и Gulp.js Л-П
Верстка второго задания. Flexbox П
CSS-препроцессоры Л
Адаптивная верстка Л
Адаптивная верстка второго задания П
Accessibility. Доступность сайтов для пользователей Л
Адаптивная верстка второго задания П
"А как браузер отрисовывает страницу?" Л
Адаптивная верстка третьего задания П
Адаптивная верстка третьего задания П
Адаптивная верстка третьего задания П
Адаптивная верстка третьего задания П
Бонус
Всего: 25 занятий (Л – 11, Л-П – 3, П - 11)
Л – теоретическое занатие Л-П – теоретическое занатие с активным участием учеников П – разбор домашней работы