1

Этап 1

Знакомство

2

Этап 2

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

3

Этап 3

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

4

Этап 4

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

5

Этап 5

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

6

Этап 6

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

7

Этап 7

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

8

Этап 8

Формы и HTML5

9

Этап 9

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

10

Этап 10

Селекторы

11

Этап 11

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

12

Этап 12

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

13

Этап 13

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

14

Этап 14

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

15

Этап 15

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

16

Этап 16

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

17

Этап 17

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

18

Этап 18

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

19

Этап 19

Сетки

20

Этап 20

Фоны

21

Этап 21

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

22

Этап 22

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

23

Этап 23

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

24

Этап 24

Игра теней

25

Этап 25

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

26

Этап 26

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

27

Этап 27

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

28

Этап 28

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

1

Этап 1

Знакомство

2

Этап 2

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

3

Этап 3

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

4

Этап 4

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

5

Этап 5

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

6

Этап 6

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

7

Этап 7

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

8

Этап 8

Формы и HTML5

9

Этап 9

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

10

Этап 10

Селекторы

11

Этап 11

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

12

Этап 12

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

13

Этап 13

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

14

Этап 14

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

15

Этап 15

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

16

Этап 16

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

17

Этап 17

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

18

Этап 18

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

19

Этап 19

Сетки

20

Этап 20

Фоны

21

Этап 21

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

22

Этап 22

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

23

Этап 23

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

24

Этап 24

Игра теней

25

Этап 25

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

26

Этап 26

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

27

Этап 27

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

28

Этап 28

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

06 января 2016

Цель заморожена

Автор цели 14 января 2016 года заморозил цель

Общая

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

Это подцель основной цели

Чтобы в основной цели не было каши, решила курс вывеси в отдельную цель...

 Критерий завершения

Курс пройден

 Личные ресурсы

время, время, время

  1. Знакомство

    1. Поехали!

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

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

    4. Азы HTML

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

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

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

    8. Азы CSS

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

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

    11. Классы в CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  3. Знакомство с 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. Испытание: другой вариант главной

  4. Разметка текста с помощью 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. Испытание: рецепт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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. Испытание: итоговая таблица

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. Формы и 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. Испытание: через тернии к звёздам

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

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

    2. CSS-правила

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

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

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

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

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

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

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

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

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

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

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

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

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

  10. Селекторы

    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. Испытание. Дуэль.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  13. Селекторы. Часть 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. Испытание: вторая раскладка

  14. Селекторы. Часть 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-кит для формы

  15. Оформление текста с помощью 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

  16. Оформление текста с помощью 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. Испытание: поиграйся со шрифтами

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

    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. Последнее испытание

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

    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. Испытание: собери слово «вечность»

  19. Сетки

    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

  20. Фоны

    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

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

    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. Испытание: выпадающее меню

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

    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. Испытание: анонс поста

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

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

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

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

  24. Игра теней

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

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

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

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

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

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

    7. Цвет тени

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

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

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

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

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

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

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

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

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

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

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

    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путники

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

    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. Испытание: раскладка карт

  27. Мастерская: декоративные эффекты на 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. Испытание: щит Завтрамэна

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

  • 7533
  • 06 января 2016, 11:32
Регистрация

Регистрация

Уже зарегистрированы?
Быстрая регистрация через соцсети
Вход на сайт

Входите.
Открыто.

Еще не зарегистрированы?
 
Войти через соцсети
Забыли пароль?