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

Базовый 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