Курс по HTML-верстке "Верстальщик"

Описание

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

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

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

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

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

Тезисы:

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

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

Тезисы:

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

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

Тезисы:

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

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

Тезисы:

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

Работа с 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.

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

Тезисы:

  • Переход от фиксированных / резиновых макетов к адаптивным;
  • Единицы измерения: em, rem, %, vw, vh;
  • Отзывчивые изображения.

NPM и Gulp.js

Тезисы:

  • Node Package Manager;
  • Gulp.js.

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

Тезисы:

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

Браузеры

Тезисы:

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

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

Тезисы:

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

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

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