ВЕРСТКА САЙТОВ
ЭКСПЕРТ КУРСА
При создании практически любого сайта есть следующие этапы:
 дизайн, когда дизайнер готовит макеты
 и верстка, когда верстальщик по этим макетам собирает html страницы
Одно из самых распространенных заблуждений, по крайней мере в нашей стране, — дизайнеру не обязательно разбираться в верстке, а верстальщику — в дизайне. Наверное никто не станет спорить, что промышленный дизайнер должен хорошо разбираться в технологиях изготовления тех материалов, которые он использует в своих проектах. Или графический дизайнер — в технологиях печати и цветопередачи. Точно так же и веб-дизайнер должен разбираться в том, что происходит «под капотом» работающего сайта. Об этом и пойдет речь на курсе по верстке — о вещах, знание которых поможет делать дизайн не только красивым и удобным, но и технологичным.
Арт-директор Redmadrobot
Продолжительность курса: 3,5 месяца
Продолжительность занятия: 1 час 20 минут
Количество домашних заданий: 13 заданий
Технические требования:
1. Скачать редактор кода Atom
2. Установить браузер Google Chrome
3. Зарегистрироваться на GitHub
ПРОГРАММА КУРСА
№ 1: ВВОДНАЯ ЛЕКЦИЯ
Кто такой верстальщик
Принципы работы браузеров
Синтаксис HTML5
Семантическая разметка
№ 2: ИНСТРУМЕНТЫ ВЕБ-РАЗРАБОТЧИКА
Инструменты: Sublime / Atom, Emmet, Filezilla
Расширения в браузерах (Pixel Perfect, Colorzila), инспектор разработчика
Файловая структура проекта
Стиль кода
№ 3: ФОТОШОП ДЛЯ ВЕРСТАЛЬЩИКА: ШРИФТЫ. СПРАЙТЫ
Тонкости работы с макетами от дизайнеров
Настройки рабочей области фотошопа для верстальщика
Различия форматов графики в вебе
Градиенты, способы их построения
Подключение шрифтов на сайт
Иконочные шрифты
Что такое спрайт и как правильно его собирать
№ 4: ОСНОВЫ CSS3
Синтаксис CSS3
Правила написания и именования классов
Наследование, каскадность и приоритеты в CSS
Сброс стилей по умолчанию: reset / normalize
Точные и относительные единицы измерения (em, rem, %)
№ 5: ПОЗИЦИОНИРОВАНИЕ
Виды позиционирования
Управление порядком слоев
Создание псевдоэлементов
Модальные окна
№ 6: МАСТЕРСКАЯ: ВЕРСТАЕМ МЕНЮ
— Создание нескольких типовых навигационных меню: вертикальное, горизонтальное, многоуровневое и с выпадающим подменю
№ 7: СЕТКИ И КРОССБРАУЗЕРНАЯ ВЕРСТКА
Модульные сетки
Кроссбраузерная верстка
№ 8: МАСТЕРСКАЯ: CSS-АНИМАЦИЯ
— Основы анимации на CSS
Движение, поворот и видоизменение объектов
№ 9: МАСТЕРСКАЯ: CSS-ФИЛЬТРЫ
— Применение фильтров к различным элементам, их комбинирование и анимация
№ 10: АДАПТИВНЫЙ ДИЗАЙН: ПЕРВАЯ ЧАСТЬ
Как сделать сайт максимально удобным для пользователей, независимо от устройств, с которого его просматривают
№ 11: АДАПТИВНЫЙ ДИЗАЙН: ПЕРВАЯ ЧАСТЬ
Продолжение
№ 12: ФРЕЙМВОРКИ
Приемы использования Twitter Bootstrap — свободного набора инструментов для создания сайтов
№ 13: ЧАСТЫЕ ОШИБКИ И ПОЛЕЗНЫЕ ПРИЕМЫ
Публикация проекта, хостинг, FTP
Частые ошибки верстальщиков
Универсальные решения для частых проблем верстки