Пройти курс HTML Academy

Знакомство

1. Поехали!

2. CSS в действии

3. Закрепление

4. Азы HTML

5. Одиночные HTML-теги

6. Атрибуты HTML-тегов

7. Ищем ошибки

8. Азы CSS

9. Другие способы подключения CSS

10. Селекторы в CSS

11. Классы в CSS

12. Свойства и значения CSS

13. Работа над ошибками

14. Первое испытание

Структура HTML-документа

1. С чего начинается HTML

2. Простейшая HTML-страница

3. Заголовок HTML-страницы

4. Кодировка HTML-страницы

5. Ключевые слова

6. Описание содержания страницы

7. HTML-комментарии

8. Подключение стилей

9. Тайна CSS-редактора

10. Подключение внешних стилей

11. Подключение скриптов

12. Подключение внешних скриптов

13. Первое итоговое задание

14. Второе итоговое задание

Знакомство с HTML5

1. Хедер и футер. Тэги header и footer

2. Основное содержание. Тэг main

3. Разделы страницы. Тэги article и section

4. Изображения в формате SVG

5. Навигация. Тэг nav

6. Завершаем футер

7. Использование нестандартных шрифтов

8. Подробнее о шрифтах. Правило @font-face

9. Дополнительное содержание. Тэг aside

10. Еще раз про article. Анонс поста

11. Завершаем главную: наполнение

12. Внутренняя страница: структура поста

13. Даты для людей и машин. Тэг time

14. Картинки с подписями. Тэги figure и figcaption

15. Видео. Тэг video

16. Форматы и источники видео

17. Аудио. Тэг audio

18. Форматы и источники звука

19. Испытание: другой вариант главной

Разметка текста с помощью HTML

1. Абзацы

2. Заголовки и подзаголовки

3. Неупорядоченный список

4. Упорядоченный список

5. Многоуровневый список

6. Ещё более многоуровневый

7. Список определений

8. Важность. Теги strong и b

9. Акцентируем внимание. Теги em и i

10. Переносы и разделители. Теги br и hr

11. Цитаты

12. Верхние и нижние индексы

13. Помечаем изменения. Теги del и ins

14. Преформатированный текст

15. Просто выделенный текст

16. Испытание: разметка статьи

17. Испытание: рецепт

Ссылки и изображения

1. Что такое ссылка?

2. Задаём адрес ссылки

3. Абсолютные адреса

4. Относительные адреса

5. Ссылка на файл

6. Ссылка на изображение

7. Ссылка с якорем

8. Всплывающая подсказка

9. Добавим изображение

10. Размеры изображения

11. Альтернативный текст

12. Изображение-ссылка

13. Фоторепортаж

Знакомство с таблицами

1. Простейшая таблица

2. Добавляем строки

3. Добавляем столбцы

4. Задаём рамки с помощью CSS

5. Улучшаем отображение рамок

6. Горизонтальные и вертикальные рамки

7. Отступы внутри ячеек

8. Отступы между ячейками

9. Испытание: простая, но аккуратная таблица

10. Ячейки-заголовки

11. Заголовок таблицы

12. Объединяем ячейки в строках

13. Объединяем ячейки в столбцах

14. Закрепление colspan

15. Закрепление rowspan

16. Комбо: colspan + rowspan

17. Испытание: таблица посложнее

18. Выравнивание содержимого в ячейках

19. Добавим цвета

20. Раскрашиваем строки

21. Задаём размеры таблицы

22. Задаём размеры отдельных ячеек и столбцов

23. Испытание: итоговая таблица

Знакомство с формами

1. Первая форма

2. Текстовое поле ввода

3. Идентификатор и значение по умолчанию

4. Подпись для поля ввода

5. Связываем подпись и поле по id

6. Добавим ещё одно поле

7. Поле для ввода пароля

8. Кнопка отправки формы

9. Многострочное поле ввода

10. Чекбокс или «галочка»

11. Испытание: форма регистрации

12. Переключатель или «радиобаттон»

13. Группа переключателей

14. Раскрывающийся список или «селект»

15. «Мультиселект»

16. Поле для загрузки файлов

17. Скрытое поле

18. Испытание: редактирование профиля

Формы и HTML5

1. Испытание: формы — вспомнить всё

2. Сброс введенных значений

3. Простая кнопка

4. Кнопка-изображение

5. Альтернативный способ задания кнопок

6. Обязательные поля

7. Поле выбора даты

8. Поле выбора времени

9. Список возможных значений

10. Поле ввода числового значения

11. Поле поиска

12. Автофокус

13. Другие поля для ввода дат

14. Выбор из диапазона

15. Область для вывода результата

16. Группировка полей формы

17. Паттерны значений полей

18. Поле ввода телефона

19. Подсказка при заполнении полей

20. Поля ввода адресов сайтов и email

21. Поле выбора цвета

22. Группировка элементов списка

23. Запрет редактирования полей

24. Управление автозаполнением полей

25. Переключение между полями

26. localStorage

27. Проверяем работу localStorage

28. Испытание: через тернии к звёздам

Знакомство с CSS

1. Введение в CSS

2. CSS-правила

3. Продвинутые селекторы

4. Свойства для оформления текста

5. Свойства для задания размеров и отступов

6. Позиционирование элементов

7. Создание сетки страницы

8. Декоративные свойства

9. Каскадность

10. Каскадность. Переопределение стилей

11. Каскадность и приоритеты

12. Каскадность. Коктейль из классов

13. Наследование

14. Ненаследуемые свойства

15. Испытание: макет-прототип

Селекторы

1. Нелёгкая жизнь без селекторов

2. Селекторы по тегам

3. Селекторы по классам

4. Отрабатываем селекторы по классам

5. Контекстные селекторы

6. Соседние селекторы

7. Контекстные и соседние селекторы

8. Дочерние селекторы

9. Псевдоклассы

10. Псевдокласс :nth-child

11. :nth-child и контекстные селекторы

12. Псевдокласс :hover

13. Динамические эффекты с помощью :hover

14. Псевдоклассы :link, :visited и :active

15. Псевдокласс :focus

16. Селекторы атрибутов

17. Селектор по id

18. Испытание. Дуэль.

Наследование и каскадирование

1. Иерархическое дерево

2. Наследование

3. Наследование «на пальцах»

4. Еще немного про наследование

5. Наследуемые свойства

6. Ненаследуемые свойства

7. Принудительное наследование

8. Каскадирование

9. Битва за курочку

10. Битва за курочку. Раунд второй

11. Битва за курочку. Раунд третий

12. Битва за курочку. Борьба накаляется

13. Битва за курочку. Запрещённый приём

14. Еще одна задачка на специфичность

15. Расчет значения специфичности

16. Еще задачка на порядок кода

17. Перекрестное наследование

18. Испытание: взломанный котопрофайл

Промежуточные испытания

1. Испытание 1: фигурное катание, спортивные пары

2. Испытание 2: медальный зачёт

3. Испытание 3: фильтры по цене

Селекторы. Часть 2

1. Объединение селекторов

2. Псевдокласс :not

3. Комбинируем :not

4. Псевдокласс :nth-last-child

5. Псевдокласс :first-of-type

6. Псевдокласс :last-of-type

7. Псевдокласс :nth-of-type

8. Псевдокласс :nth-last-of-type

9. Cелектор последующих элементов

10. Псевдокласс :empty

11. Псевдокласс :only-child

12. Псевдокласс :only-of-type

13. Псевдоэлемент :before

14. Псевдоэлемент :after

15. Позиционирование псевдоэлементов

16. Фон для псевдоэлементов

17. Псевдоэлементы :first-line и :first-letter

18. Испытание: псевдоэлементы

19. Испытание: первая раскладка

20. Испытание: вторая раскладка

Селекторы. Часть 3

1. Ищем в начале строки: [foo^="bar"]

2. Ищем в конце строки: [foo$="bar"]

3. Поиск подстроки везде: [foo*="bar"]

4. Поиск слов внутри строки: [foo~="bar"]

5. Поиск префиксов: [foo|="bar"]

6. Поиски котов. Часть 1

7. Поиски котов. Часть 2

8. Котография 9 на 12

9. Псевдоклассы :enabled и :disabled

10. Псевдоклассы :read-only и :read-write

11. Псевдокласс :required

12. Псевдокласс :optional

13. Псевдокласс :checked

14. Псевдоклассы :invalid и :valid

15. Псевдоклассы :in-range и :out-of-range

16. Объединяй и властвуй

17. Чудеса с ~ и :checked

18. Испытание: UI-кит для формы

Оформление текста с помощью CSS

1. Главный текстовый тег — span

2. Свойство font-size: задаем размер шрифта

3. Свойство font-weight: толщина начертания

4. Свойство font-style: курсив

5. Свойство font-family: шрифт

6. Свойство color: цвет текста

7. Свойство text-decoration: подчеркивание и другие эффекты

8. Декоративное подчеркивание

9. Задаем регистр символов с помощью text-transform

10. Управляем пробелами: white-space

11. Горизонтальное выравнивание текста: text-align

12. Вертикальное выравнивание: vertical-align

13. Верхние и нижние индексы на CSS

14. Свойство line-height: управляем высотой строки

15. Вертикальный ритм текста

16. Испытание: рецепт на CSS

Оформление текста с помощью CSS. Часть 2

1. Unicode-символы

2. Свойство text-shadow

3. Смещение текстовой тени по горизонтали

4. Смещение текстовой тени по вертикали

5. Размытие текстовой тени

6. Цвет текстовой тени

7. Эффект вдавленного текста

8. Декоративная ретро-тень

9. Испытание: психоделическая тень

10. Логотип: нестандартный шрифт

11. Логотип: иконочный шрифт

12. Логотип: выравнивание размеров

13. Декоративная стилизация строки, шаг 1

14. Декоративная стилизация строки, шаг 2

15. Свойство text-indent

16. Псевдоэлемент ::first-letter

17. Псевдоэлемент ::first-line

18. Колоночная разметка: свойство column-count

19. Колоночная разметка: свойство column-width

20. Колоночная разметка: свойство column-gap

21. Направление текста

22. Направление текста и таблицы

23. Переполнение текста

24. Интервал между словами

25. Испытание: why so serious?

26. Испытание: поиграйся со шрифтами

Блочная модель документа

1. Блочные элементы

2. Строчные элементы

3. Ширина и высота

4. Внутренние отступы, свойство padding

5. Внешние отступы, свойство margin

6. Рамки

7. Стандартная блочная модель

8. Первое испытание

9. «Схлопывание» внешних отступов

10. «Выпадание» внешних отступов

11. Как отцентровать элемент?

12. Блочная модель и строчные элементы

13. Ширина 100% и ширина по умолчанию

14. Проблемы обычной блочной модели

15. Изменяем блочную модель, свойство box-sizing

16. Второе испытание

17. Управление типом элемента, свойство display

18. display: inline-block

19. display: table

20. display: table-row

21. display: table-cell

22. display: none

23. Последнее испытание

Позиционирование

1. Поток документа

2. Относительное позиционирование

3. position:relative и top

4. position:relative и left

5. position:relative и bottom

6. position:relative и right

7. Относительное позиционирование на практике

8. Абсолютное позиционирование

9. Абсолютное позиционирование и строчные элементы

10. position:absolute и left

11. position:absolute и top

12. position:absolute и right

13. position:absolute и bottom

14. Точка отсчета координат

15. Тренируемся задавать координаты

16. Неявная точка отсчета

17. Абсолютное позиционирование на практике

18. Фиксированное позиционирование

19. z-index или кто кого перекроет

20. Испытание: собери слово «вечность»

Сетки

1. Пробуем управлять потоком

2. Управление потоком, шаг 2

3. Управление потоком, шаг 3

4. Создадим другой поток

5. Другой поток, шаг 2

6. Другой поток, шаг 3

7. Другой поток, финал

8. Погружение в флоаты

9. float и ширина

10. float и выпадание из потока

11. Флоат рядом с флоатом

12. Когда флоатов много, а места мало

13. Испытание: паззл на флоатах

14. Свойство clear

15. Борьба с выпаданием флоатов: распорки

16. Борьба с выпаданием флоатов: псевдораспорки

17. Простейшая сетка, шаг 1

18. Простейшая сетка, шаг 2

19. Простейшая сетка, финал

20. Сетка посложнее, шаг 1

21. Сетка посложнее, шаг 2

22. Сетка посложнее, шаг 3

23. Сетка посложнее, добавляем содержание

24. Последняя сетка, шаг 1

25. Последняя сетка, шаг 2

26. Последняя сетка завершена

27. Испытание: строим сетку

28. Погружение в inline-block

29. float vs inline-block

30. Простая сетка на inline-block

31. inline-block и пробелы в коде

32. Испытание: котогалерея на inline-block

Фоны

1. Cвойство background-color

2. Свойство background-image

3. Свойство background-repeat

4. Свойство background-position

5. Ещё немного background-position

6. Свойство background-attachment

7. Свойство background

8. Испытание: котокомикс

9. Формат JPEG

10. Формат PNG-8

11. Формат PNG-24

12. Формат GIF

13. Несколько фонов

14. Эффекты с повторяющимся фоном

15. Спрайты

16. Испытание: CAT Academy

Мастерская: создаём меню

1. Создаём вертикальное меню

2. Добавляем ссылки

3. Сбрасываем стили списка

4. Оформляем контейнер меню

5. Оформляем пункты, простой вариант

6. Более сложное оформление пунктов

7. Добавляем разделители

8. Оформляем состояния пунктов

9. Испытание: вертикальное меню

10. Многоуровневое вертикальное меню

11. Устраняем проблемы оформления

12. Переносим рамки, задаем отступы подменю

13. Оформляем пункты подменю

14. Тестируем на большой вложенности

15. Испытание: многоуровневое меню

16. Горизонтальное меню

17. Что делать, если пункты не влезают?

18. Усложненное оформление пунктов

19. Завершаем оформление пунктов

20. Испытание: горизонтальное меню

21. Вертикальное меню с выпадающим подменю

22. Позиционируем выпадающее подменю

23. Отображаем подменю при наведении

24. Горизонтальное меню с выпадающим подменю

25. Оформляем выпадающее меню

26. Включаем механизм выпадания

27. Состояние «открытое подменю»

28. Испытание: выпадающее меню

Мастерская: декоративные элементы

1. Социальные кнопки, шаг 1

2. Социальные кнопки, шаг 2

3. Социальные кнопки, шаг 3

4. Переключатель страниц, шаг 1

5. Переключатель страниц, шаг 2

6. Переключатель страниц, шаг 3

7. Переключатель страниц, шаг 4

8. Переключатель страниц, тестирование

9. Испытание: карточка курса

10. Контакты, шаг 1

11. Контакты, шаг 2

12. Контакты, шаг 3

13. Комментарии, шаг 1

14. Комментарии, шаг 2

15. Комментарии, шаг 3

16. Комментарии, шаг 4

17. Комментарии, шаг 5

18. Испытание: анонс поста

Завершающие испытания

1. Испытание 1: красивая форма входа

2. Испытание 2: слайдер

3. Испытание 3: товары в каталоге

Игра теней

1. Свойство box-shadow

2. Смещение тени по горизонтали

3. Смещение тени по вертикали

4. Размытие тени

5. Растяжение тени

6. Размытие + растяжение

7. Цвет тени

8. Внутренняя тень

9. Испытание: тусклые тени

10. Полупрозрачная теньТень только с одной стороны

11. Тень только с одной стороны

12. Множественные тени

13. Несколько рамок у одного элемента

14. Теневое искусство – 1

15. Теневое искусство – 2

16. Теневое искусство – 3

17. Испытание: зловещие тени

Линейные градиенты

1. Hello, linear-gradient!

2. Направление градиента

3. Градиенты по диагоналям

4. Градиенты под углом

5. Диагонали против градусов

6. Испытание: иконки iOS

7. Nyan cat наносит ответный удар

8. Пропорции цветов и колорстопы

9. Резкие переходы цветов

10. Псевдоколонки на градиентах

11. Испытание: флаги

12. Цветовые переходы в px

13. Полупрозрачные градиенты

14. Повторяющийся линейный градиент

15. Строим сложный фон — часть 1

16. Строим сложный фон — часть 2

17. Строим сложный фон — часть 3

18. Строим сложный фон — финал

19. Кнопки — часть 1

20. Кнопки — часть 2

21. Кнопки — часть 3

22. Испытание: орнамент из сюрикенов

23. Испытание: cпутники

Двумерные трансформации

1. Перемещение по горизонтали

2. Перемещение по вертикали

3. Тренировка фаерболов

4. Увеличение, уменьшение

5. Защита города

6. Начало путешествия

7. Лабиринт

8. Битва — часть 1

9. Битва — часть 2

10. Испытание: таинственная карта

11. Битва — часть 3

12. Испытание: расколотый кристалл

13. Финальная битва

14. Особенности transform-origin — часть 1

15. Особенности transform-origin — часть 2

16. Особенности transform-origin — часть 3

17. Особенности transform-origin — часть 4

18. Центровка с помощью transform:translate

19. Поворот текста в блоках

20. Поворот текста в фоне

21. Нестандартные тени

22. Эффекты при наведении: кнопки — часть 1

23. Эффекты при наведении: кнопки — часть 2

24. Эффекты при наведении: кнопки — часть 3

25. Эффекты при наведении: галерея

26. «Стопка» карт

27. Круговое меню, подготовка

28. Круговое меню, шаг 1

29. Круговое меню, шаг 2

30. Круговое меню, шаг 3

31. Круговое меню, финал

32. Испытание: раскладка карт

Мастерская: декоративные эффекты на HTML5 и CSS3

1. Маска при наведении, шаг 1

2. Маска при наведении, шаг 2

3. Маска при наведении, шаг 3

4. Маска при наведении, шаг 4

5. Выдвигающееся описание, шаг 1

6. Выдвигающееся описание, шаг 2

7. Выдвигающееся описание, шаг 3

8. Эффектные ссылки, шаг 1

9. Эффектные ссылки, шаг 2

10. Эффектные ссылки, шаг 3

11. Эффектные ссылки, шаг 4

12. Эффектные ссылки, шаг 5

13. Эффектные ссылки, шаг 6

14. Эффектные ссылки: все вместе

15. Закруглённые внутрь углы, шаг 1

16. Закруглённые внутрь углы, шаг 2

17. Закруглённые внутрь углы, шаг 3

18. Закруглённые внутрь углы, шаг 4

19. Испытание: статистика браузеров

20. Слайдер на CSS, шаг 1

21. Слайдер на CSS, шаг 2

22. Слайдер на CSS, шаг 3

23. Слайдер на CSS, шаг 4

24. Хлебные крошки, шаг 1

25. Хлебные крошки, шаг 2

26. Хлебные крошки, шаг 3

27. Хлебные крошки, шаг 4

28. Хлебные крошки, шаг 5

29. Маркер на карте, шаг 1

30. Маркер на карте, шаг 2

31. Испытание: щит Завтрамэна

Итоговое испытание!!!