[Академия вёрстки] Базовый HTML, CSS (Артем Исламов)

01. Установка софта и настройка рабочего места верстальщика.
– Установка редактора кода (На примере Sublime text 3)
– Установка необходимых плагинов для ускорения вёрстки
– Установка графического редактора (Adobe Photoshop)
– Программа для быстрой смены раскладки клавиатуры (Punto Switcher)

02. Этапы создания сайта и работа в команде.
– 6 этапов создания сайтов
– Как совместной вести работу (Trello и другие Task менеджеры)
– Установка графического редактора (Adobe Photoshop)
– Обзор программ и сервисов для создания прототипов
– Создаем и выгружаем свой прототип

03. Работа с дизайн-макетом.
– Почему дизайн сайта должны делать не Вы?
– Требования к дизайн-макету перед версткой
(Правильная ширина холста и контента, разбивка по слоям и папкам, исходники шрифтов и графики, соблюдение сетки в 12 колонок (bootstrap) отрисованные эффекты при наведении)
– Работа с дизайн-макетом для верстальщика
(Создание документа, быстрые клавиши для удобной работы, работа по слоям и папкам, работа со смарт-объектами и векторной графикой, шрифты и начертания в макете, как правильно вырезать графику (SVG, PNG, JPEG), как векторизировать иконки, как правильно подобрать формат для графики, ускорение процесса, пишем свой первый макрос)

04. Подготовка проекта к верстке.
– Директория (папка) с сайтом
– Папки внутри главной директории
– Установка node.js
– Автообновление страницы (LiveReload и Browser-sync)

05. Знакомство с html
– Что такое html разметка и как писать код правильно?
– Теги в html. Виды тегов (Парные, не парные)
– “Голова” документа – скрытая часть. Служебные теги
– “Тело” документа – видимая часть
– Атрибуты тегов (обязательные, общие и тд)
– HTML5 теги (header, nav, section, article, footer и др)
– Где посмотреть список всех тегов. Справочники html

06. Текстовые теги HTML
– Как писать текст в html
– Теги заголовков и абзацев
– Теги марикрованных и нумерованных списков
– Преображения текста (подчеркнутый, зачеркнутый текст)

07. Работа со ссылками в html
– Для чего нужны ссылки и что они могут
– Методы доступа по ссылке
– Абсолютный и относительный путь
– Якорные ссылки, что такое якорь
– Что можно завернуть в ссылку
– Ссылки на телефон, скайп и почту
– Атрибуты ссылок

08. Изображения в html
– Тег img, атрибуты, параметры
– Адрес изображения
– Форматы графических элементов
– Размеры изображения
– Тег MAP, активная карта
– Тег AREA, объекты нма активной карте

09. html таблицы
– Как создать таблицу
– Строки (ряды) в таблице
– Ячейка заголовка таблицы
– Ячейка тела таблицы
– Как добавить описание (заголовок) таблицы
– Группировка столбцов и строк таблицы
– Атрибуты элементов таблицы
– Пример создания таблицы

10. html формы
– Тег form и его атрибуты
– Создание полей формы input
– Текстовые поля для ввода textarea
– Раскрывающийся список select
– Подписи к полям формы label
– Кнопки button
– Флажки и переключатели в формах

11. Основы CSS
– Виды таблиц стилей (внешние, внутренние, встроенные)
– Виды селекторов в CSS
– Комбинация селекторов в CSS
– Группировка селекторов
– Наследование и каскад в CSS + специфичность

12. Форматирование текста в CSS
– Горизонтальное выравнивание text-align
– Отступы и местрочный интервал
– Высота строки и выравнивание по вертикали

13. Шрифты на сайте
– Подключение шрифтов с сайта Google fonts
– Как подготовить нестандартный шрифт (конвертация)
– Семейство шрифтов font-family
– Стиль начертания шриафта, вариант начертания
– Насыщенность шрифта, размер шрифта

14. Блочные и строчные элементы в CSS
– Модель визуальной разметки и восприятия
– Блочная модель
– Блочные элементы и контейнеры

15. Цвета в CSS. Градиенты в CSS
– Форматы цветов в CSS (HEX, RGB, RGBA)
– Как задать цвет для текста
– Цвет фона для блоков и элементов
– Прозрачность цвета. Прозрачность элементы

16. Градиенты в CSS
– Линейный градиентв, радиальный градиент
– Повтор градиента, кроссбраузерный градиент
– Комбинация градиента и фонового изображения

17. Позиционирование элементов в CSS
– Типы позиционирования, способы применения
– Тонкости свойства position
– Свойства смещения
– Позиционирование дочерних элементов
– Проблемы позиционирования из практики
– Свободное перемещение элементов
– Отмена обтекания элементов

18. Ссылки в CSS
– Псевдоклассы состояний гиперссылок
– Выборка отдельных ссылок в CSS
– Подчеркивание ссылок
– Внешний вид курсора и поведение на ссылках
– Использование фонового изображения ссылки
– Ссылки кнопки
– Примеры оформления ссылок

19. Таблицы в CSS
– Границы таблицы, параметр border, как задать ширину и высоту таблицы
– Фон для нашей таблицы
– Заголовок для таблицы
– Промежутки и отступы между элементами таблицы
– Столбцы таблицы
– Скрытые элементы таблицы
– Компоновка макета таблицы при помощи table-layout

20. Списки в CSS
– Тип маркера списка, как стилизовать список под себя
– Изображения для элементов списка
– Местоположения маркеров в списках
– Краткая форма записи всех свойств списка
– Примеры оформленных списков

21. CSS фон
– Цвет фона в CSS, фоновое изображение
– Повтор фонового изображения, паттерны
– Позиционирование фонового изображения
– Фиксация фонового изображения
– Заполнение фоном отступов и границ элемента
– Положение фонового изображения относительно родительского элемента
– Размер фонового изображения

22. Рамки в CSS
– Стиль рамки border-style, цвет рамки, ширина рамки
– Изображение для элементов списка
– Сокращенная форма записи стилей рамки
– Одна из сторон рамки, внешний контур outline
– Стили и оформление внешнего контура, смещение внешней рамки
– Закругление краев в CSS
– Рамки изображения

23. Content в CSS
– Добавление (спец символа, текста, изображения, блочного содержимого, значения, атрибута)
– Свойства display: List-item

24. CSS3 тени
– Тень текста и ее параметры
– Тени для блочных элементов
– Тени при наведении
– Примеры теней

25. Переходы в CSS3
– Название переходов
– Продолжительность перехода
– Функция перехода
– Задержка перехода
– Краткая запись переходов

26. CSS3 Трансформации
– 2D и 3D трансформации элементов
– Функции трансформаций
– Точка трансформации
– Множественные трансформации
– Примеры на практике (ленточки с акциями)

27. Большой урок по анимации на CSS3
– Правило @keyframes
– Название анимации animation-name
– Продолжительность анимации
– Временная функция animation-timing-function
– Анимация с задержкой animation-delay
– Повтор анимации animation-iteration-count
– Направление анимации

28. CSS генераторы
– Генераторы теней
– Выравнивание по центру
– Генераторы цветов, градиенты в CSS

29. Медиа запросы в CSS
– Структура медиа запроса
– Логические операторы в медиа запросах
– Тип носителя
– Характеристики носителя
– На какие разрешения экранов нужно ориентироваться

30. Проверка кода на валидность
– Стандарты W3С и для чего их нужно соблюдать
– Как проверить свой HTML код на валидность
– Как пройти валидацию CSS