HTML Academy | Продвинутый
Пора двигаться дальше на пути к профессиональному фрилансу во frontend разработке.
Что мне необходимо изучить для профессиональной работы:
- Адаптивная верстка (decktop, tablet, mobile)
- Резиновая верстка
- Кроссбраузерная верстка
- Применение методологии БЭМ
- Препроцессоры LESS, SASS и PostCSS
- Адаптивная и векторная графика
- Флексбоксы
- Производительность вёрстки
- Погружение в автоматизацию
- Инструменты ускорения вёрстки
Критерий завершения
адаптивные 2 макета сверстаны, все платные интерактивные курсы пройдены
Личные ресурсы
руки, зрение, мозг, комп, время :)
-
1 раздел: организация рабочего процесса
Теория
- Как будет организован учебный процесс на интенсиве.
- Введение в Гит.
- Базовый рабочий процесс в Гите: фиксация изменений и синхронизация репозиториев.
- Работа с ветками: создание, синхронизация, слияние.
- Конфликты и их разрешение.
- Инструменты для работы с Гитом.
- Обзор Гитхаба.
ПрактикаПошагово разбираем процесс выполнения практических заданий на интенсиве:
- cоздание мастер-репозитория личного проекта,
- cоздание форка мастер-репозитория,
- создание ветки для выполнения задания,
- фиксация изменений и синхронизация репозиториев,
- создание пулреквеста из форка в мастер-репозиторий.
Узнаём, как получать изменения из мастер-репозитория в форк.
Результат:
Создан репозиторий личного проекта, настроены инструменты работы с Гитхабом, закреплён рабочий процесс «ветка в форке → пулреквест из форка в мастер-репозиторий → слияние пулреквеста в мастер-репозиторий».
-
2 раздел: методологии вёрстки
Теория
- Вёрстка независимыми блоками — БЭМ.
- Альтернативные методологии.
- Работа с инспектором.
- Как верстать, чтобы не ломалось.
Практика
- Размечаем главную страницу учебного проекта по методологии БЭМ.
Результат:
Создана разметка страниц личного проекта в соответствии методологией БЭМ.
-
3 раздел: CSS-препроцессоры
Теория
- Вёрстка с препроцессорами LESS, SASS и PostCSS.
- Возможности препроцессоров: переменные, вложенность правил, импорты, миксины и другие полезные функции.
- Сборка файлов препроцессора в стилевой файл.
- Автоматизация сборки препроцессоров.
Практика
- Настраиваем автоматическую компиляцию файлов препроцессора при сохранении.
Результат:
Свёрстана сетка мобильной версии личного проекта с использованием выбранного препроцессора: LESS, SASS или PostCSS.
-
4 раздел: резиновая и адаптивная вёрстка
Теория
- Резиновые сетки. Переход от «фикса» к «резине».
- Принцип «перестройки сетки».
- «Проблема двух вьюпортов» на мобильных.
- Мета-тег <viewport>.
- Медиавыражения, макро- и микробрейкпоинты.
- Как организовать код разных версий: мобильной, планшетной, десктопной.
- Единицы измерения vh и vw: примеры использования, проблема «100vw».
- Адаптивность с фиксированными и резиновыми сетками.
Практика
- Создаём адаптивную фиксированную сетку учебного проекта.
- Переходим от фиксированной сетки учебного проекта к резиновой.
Результат:
Свёрстана адаптивная сетка трёх версий личного проекта: мобильной, планшетной и десктопной.
-
5 раздел: флексбокс
Теория
- Основные понятия: флекс-контейнер и флекс-элемент, главная и поперечная оси.
- Управление осями, выравнивание и распределение флекс-элементов.
- Многострочный флекс-контейнер.
- Управление размерами и «гибкостью» флекс-элементов.
- Изменение порядка флекс-элементов.
Практика
- Создаём адаптивную сетку учебного проекта на флексбоксе.
- Создаём адаптивные элементы содержания учебного проекта на флексбоксе.
Результат:
Завершена адаптивная вёрстка трёх версий личного проекта: мобильной, планшетной и десктопной.
-
6 раздел: адаптивная и векторная графика
Теория
- Экранные и CSS-пиксели.
- «Ретина» или экраны с повышенной плотностью пикселей.
- Приёмы ретинизации содержимого веб-страницы.
- Адаптивная графика, тег <picture>.
- Типовые случаи использования <picture>.
- Векторная графика в вебе, формат SVG.
- Внешний и встроенный SVG, адаптивный SVG, SVG-спрайты.
- Горькая правда об иконочных шрифтах: достоинства и недостатки.
Практика
- Получаем «ретиновую» и векторную графику личного проекта из мастер-репозитория.
- Ретинизируем растровую графику учебного проекта.
- Подключаем в учебный проект векторную графику, используем векторные спрайты.
- Используем адаптивные изображения в учебном проекте.
Результат:
Завершена ретинизация личного проекта, использованы векторная графика и адаптивные изображения.
-
7 раздел: производительность вёрстки
Теория
- Какие CSS-свойства тяжёлые, а какие быстрые.
- Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами.
- Что нужно знать о перерисовке (repaint) и перекомпоновке (reflow) страниц.
- Отличается ли быстродействие сайта на десктопе от мобильного.
Практика
- Тестируем производительность вёрстки учебного проекта, находим «узкие места» и оптимизируем их.
Результат:
Произведена оптимизация вёрстки личного проекта.
-
8 раздел: погружение в автоматизацию
Теория
- Разберёмся, что лучше для автоматизации Grunt или Gulp.
- Оптимизация кода и графики.
- Следуем кодгайду автоматически.
- Как держать код для разработчика удобным, а для остальных — быстрым.
Практика
- Настраиваем сборку учебного проекта.
- Готовим учебный проект к публикации.
Результат:
Настроена сборка личного проекта. Проект подготовлен к защите.
-
9 раздел: инструменты ускорения вёрстки
Теория
- Что помогает верстать быстрее.
- Обзор фреймворков, использование на любых проектах.
- Кросспроектные библиотеки компонентов.
-
Платные интерактивные курсы
![]()
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением
