[Академия вёрстки] Базовый НТМL, 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