Цель заморожена
Автор цели 14 января 2016 года заморозил цель
Пройти курс HTML Academy
Это подцель основной цели
Чтобы в основной цели не было каши, решила курс вывеси в отдельную цель...
Критерий завершения
Курс пройден
Личные ресурсы
время, время, время
-
Знакомство
-
Поехали!
-
CSS в действии
-
Закрепление
-
Азы HTML
-
Одиночные HTML-теги
-
Атрибуты HTML-тегов
-
Ищем ошибки
-
Азы CSS
-
Другие способы подключения CSS
-
Селекторы в CSS
-
Классы в CSS
-
Свойства и значения CSS
-
Работа над ошибками
-
Первое испытание
-
-
Структура HTML-документа
-
С чего начинается HTML
-
Простейшая HTML-страница
-
Заголовок HTML-страницы
-
Кодировка HTML-страницы
-
Ключевые слова
-
Описание содержания страницы
-
HTML-комментарии
-
Подключение стилей
-
Тайна CSS-редактора
-
Подключение внешних стилей
-
Подключение скриптов
-
Подключение внешних скриптов
-
Первое итоговое задание
-
Второе итоговое задание
-
-
Знакомство с HTML5
-
Хедер и футер. Тэги header и footer
-
Основное содержание. Тэг main
-
Разделы страницы. Тэги article и section
-
Изображения в формате SVG
-
Навигация. Тэг nav
-
Завершаем футер
-
Использование нестандартных шрифтов
-
Подробнее о шрифтах. Правило @font-face
-
Дополнительное содержание. Тэг aside
-
Еще раз про article. Анонс поста
-
Завершаем главную: наполнение
-
Внутренняя страница: структура поста
-
Даты для людей и машин. Тэг time
-
Картинки с подписями. Тэги figure и figcaption
-
Видео. Тэг video
-
Форматы и источники видео
-
Аудио. Тэг audio
-
Форматы и источники звука
-
Испытание: другой вариант главной
-
-
Разметка текста с помощью HTML
-
Абзацы
-
Заголовки и подзаголовки
-
Неупорядоченный список
-
Упорядоченный список
-
Многоуровневый список
-
Ещё более многоуровневый
-
Список определений
-
Важность. Теги strong и b
-
Акцентируем внимание. Теги em и i
-
Переносы и разделители. Теги br и hr
-
Цитаты
-
Верхние и нижние индексы
-
Помечаем изменения. Теги del и ins
-
Преформатированный текст
-
Просто выделенный текст
-
Испытание: разметка статьи
-
Испытание: рецепт
-
-
Ссылки и изображения
-
Что такое ссылка?
-
Задаём адрес ссылки
-
Абсолютные адреса
-
Относительные адреса
-
Ссылка на файл
-
Ссылка на изображение
-
Ссылка с якорем
-
Всплывающая подсказка
-
Добавим изображение
-
Размеры изображения
-
Альтернативный текст
-
Изображение-ссылка
-
Фоторепортаж
-
-
Знакомство с таблицами
-
Простейшая таблица
-
Добавляем строки
-
Добавляем столбцы
-
Задаём рамки с помощью CSS
-
Улучшаем отображение рамок
-
Горизонтальные и вертикальные рамки
-
Отступы внутри ячеек
-
Отступы между ячейками
-
Испытание: простая, но аккуратная таблица
-
Ячейки-заголовки
-
Заголовок таблицы
-
Объединяем ячейки в строках
-
Объединяем ячейки в столбцах
-
Закрепление colspan
-
Закрепление rowspan
-
Комбо: colspan + rowspan
-
Испытание: таблица посложнее
-
Выравнивание содержимого в ячейках
-
Добавим цвета
-
Раскрашиваем строки
-
Задаём размеры таблицы
-
Задаём размеры отдельных ячеек и столбцов
-
Испытание: итоговая таблица
-
-
Знакомство с формами
-
Первая форма
-
Текстовое поле ввода
-
Идентификатор и значение по умолчанию
-
Подпись для поля ввода
-
Связываем подпись и поле по id
-
Добавим ещё одно поле
-
Поле для ввода пароля
-
Кнопка отправки формы
-
Многострочное поле ввода
-
Чекбокс или «галочка»
-
Испытание: форма регистрации
-
Переключатель или «радиобаттон»
-
Группа переключателей
-
Раскрывающийся список или «селект»
-
«Мультиселект»
-
Поле для загрузки файлов
-
Скрытое поле
-
Испытание: редактирование профиля
-
-
Формы и HTML5
-
Испытание: формы — вспомнить всё
-
Сброс введенных значений
-
Простая кнопка
-
Кнопка-изображение
-
Альтернативный способ задания кнопок
-
Обязательные поля
-
Поле выбора даты
-
Поле выбора времени
-
Список возможных значений
-
Поле ввода числового значения
-
Поле поиска
-
Автофокус
-
Другие поля для ввода дат
-
Выбор из диапазона
-
Область для вывода результата
-
Группировка полей формы
-
Паттерны значений полей
-
Поле ввода телефона
-
Подсказка при заполнении полей
-
Поля ввода адресов сайтов и email
-
Поле выбора цвета
-
Группировка элементов списка
-
Запрет редактирования полей
-
Управление автозаполнением полей
-
Переключение между полями
-
localStorage
-
Проверяем работу localStorage
-
Испытание: через тернии к звёздам
-
-
Знакомство с CSS
-
Введение в CSS
-
CSS-правила
-
Продвинутые селекторы
-
Свойства для оформления текста
-
Свойства для задания размеров и отступов
-
Позиционирование элементов
-
Создание сетки страницы
-
Декоративные свойства
-
Каскадность
-
Каскадность. Переопределение стилей
-
Каскадность и приоритеты
-
Каскадность. Коктейль из классов
-
Наследование
-
Ненаследуемые свойства
-
Испытание: макет-прототип
-
-
Селекторы
-
Нелёгкая жизнь без селекторов
-
Селекторы по тегам
-
Селекторы по классам
-
Отрабатываем селекторы по классам
-
Контекстные селекторы
-
Соседние селекторы
-
Контекстные и соседние селекторы
-
Дочерние селекторы
-
Псевдоклассы
-
Псевдокласс :nth-child
-
:nth-child и контекстные селекторы
-
Псевдокласс :hover
-
Динамические эффекты с помощью :hover
-
Псевдоклассы :link, :visited и :active
-
Псевдокласс :focus
-
Селекторы атрибутов
-
Селектор по id
-
Испытание. Дуэль.
-
-
Наследование и каскадирование
-
Иерархическое дерево
-
Наследование
-
Наследование «на пальцах»
-
Еще немного про наследование
-
Наследуемые свойства
-
Ненаследуемые свойства
-
Принудительное наследование
-
Каскадирование
-
Битва за курочку
-
Битва за курочку. Раунд второй
-
Битва за курочку. Раунд третий
-
Битва за курочку. Борьба накаляется
-
Битва за курочку. Запрещённый приём
-
Еще одна задачка на специфичность
-
Расчет значения специфичности
-
Еще задачка на порядок кода
-
Перекрестное наследование
-
Испытание: взломанный котопрофайл
-
-
Промежуточные испытания
-
Испытание 1: фигурное катание, спортивные пары
-
Испытание 2: медальный зачёт
-
Испытание 3: фильтры по цене
-
-
Селекторы. Часть 2
-
Объединение селекторов
-
Псевдокласс :not
-
Комбинируем :not
-
Псевдокласс :nth-last-child
-
Псевдокласс :first-of-type
-
Псевдокласс :last-of-type
-
Псевдокласс :nth-of-type
-
Псевдокласс :nth-last-of-type
-
Cелектор последующих элементов
-
Псевдокласс :empty
-
Псевдокласс :only-child
-
Псевдокласс :only-of-type
-
Псевдоэлемент :before
-
Псевдоэлемент :after
-
Позиционирование псевдоэлементов
-
Фон для псевдоэлементов
-
Псевдоэлементы :first-line и :first-letter
-
Испытание: псевдоэлементы
-
Испытание: первая раскладка
-
Испытание: вторая раскладка
-
-
Селекторы. Часть 3
-
Ищем в начале строки: [foo^="bar"]
-
Ищем в конце строки: [foo$="bar"]
-
Поиск подстроки везде: [foo*="bar"]
-
Поиск слов внутри строки: [foo~="bar"]
-
Поиск префиксов: [foo|="bar"]
-
Поиски котов. Часть 1
-
Поиски котов. Часть 2
-
Котография 9 на 12
-
Псевдоклассы :enabled и :disabled
-
Псевдоклассы :read-only и :read-write
-
Псевдокласс :required
-
Псевдокласс :optional
-
Псевдокласс :checked
-
Псевдоклассы :invalid и :valid
-
Псевдоклассы :in-range и :out-of-range
-
Объединяй и властвуй
-
Чудеса с ~ и :checked
-
Испытание: UI-кит для формы
-
-
Оформление текста с помощью CSS
-
Главный текстовый тег — span
-
Свойство font-size: задаем размер шрифта
-
Свойство font-weight: толщина начертания
-
Свойство font-style: курсив
-
Свойство font-family: шрифт
-
Свойство color: цвет текста
-
Свойство text-decoration: подчеркивание и другие эффекты
-
Декоративное подчеркивание
-
Задаем регистр символов с помощью text-transform
-
Управляем пробелами: white-space
-
Горизонтальное выравнивание текста: text-align
-
Вертикальное выравнивание: vertical-align
-
Верхние и нижние индексы на CSS
-
Свойство line-height: управляем высотой строки
-
Вертикальный ритм текста
-
Испытание: рецепт на CSS
-
-
Оформление текста с помощью CSS. Часть 2
-
Unicode-символы
-
Свойство text-shadow
-
Смещение текстовой тени по горизонтали
-
Смещение текстовой тени по вертикали
-
Размытие текстовой тени
-
Цвет текстовой тени
-
Эффект вдавленного текста
-
Декоративная ретро-тень
-
Испытание: психоделическая тень
-
Логотип: нестандартный шрифт
-
Логотип: иконочный шрифт
-
Логотип: выравнивание размеров
-
Декоративная стилизация строки, шаг 1
-
Декоративная стилизация строки, шаг 2
-
Свойство text-indent
-
Псевдоэлемент ::first-letter
-
Псевдоэлемент ::first-line
-
Колоночная разметка: свойство column-count
-
Колоночная разметка: свойство column-width
-
Колоночная разметка: свойство column-gap
-
Направление текста
-
Направление текста и таблицы
-
Переполнение текста
-
Интервал между словами
-
Испытание: why so serious?
-
Испытание: поиграйся со шрифтами
-
-
Блочная модель документа
-
Блочные элементы
-
Строчные элементы
-
Ширина и высота
-
Внутренние отступы, свойство padding
-
Внешние отступы, свойство margin
-
Рамки
-
Стандартная блочная модель
-
Первое испытание
-
«Схлопывание» внешних отступов
-
«Выпадание» внешних отступов
-
Как отцентровать элемент?
-
Блочная модель и строчные элементы
-
Ширина 100% и ширина по умолчанию
-
Проблемы обычной блочной модели
-
Изменяем блочную модель, свойство box-sizing
-
Второе испытание
-
Управление типом элемента, свойство display
-
display: inline-block
-
display: table
-
display: table-row
-
display: table-cell
-
display: none
-
Последнее испытание
-
-
Позиционирование
-
Поток документа
-
Относительное позиционирование
-
position:relative и top
-
position:relative и left
-
position:relative и bottom
-
position:relative и right
-
Относительное позиционирование на практике
-
Абсолютное позиционирование
-
Абсолютное позиционирование и строчные элементы
-
position:absolute и left
-
position:absolute и top
-
position:absolute и right
-
position:absolute и bottom
-
Точка отсчета координат
-
Тренируемся задавать координаты
-
Неявная точка отсчета
-
Абсолютное позиционирование на практике
-
Фиксированное позиционирование
-
z-index или кто кого перекроет
-
Испытание: собери слово «вечность»
-
-
Сетки
-
Пробуем управлять потоком
-
Управление потоком, шаг 2
-
Управление потоком, шаг 3
-
Создадим другой поток
-
Другой поток, шаг 2
-
Другой поток, шаг 3
-
Другой поток, финал
-
Погружение в флоаты
-
float и ширина
-
float и выпадание из потока
-
Флоат рядом с флоатом
-
Когда флоатов много, а места мало
-
Испытание: паззл на флоатах
-
Свойство clear
-
Борьба с выпаданием флоатов: распорки
-
Борьба с выпаданием флоатов: псевдораспорки
-
Простейшая сетка, шаг 1
-
Простейшая сетка, шаг 2
-
Простейшая сетка, финал
-
Сетка посложнее, шаг 1
-
Сетка посложнее, шаг 2
-
Сетка посложнее, шаг 3
-
Сетка посложнее, добавляем содержание
-
Последняя сетка, шаг 1
-
Последняя сетка, шаг 2
-
Последняя сетка завершена
-
Испытание: строим сетку
-
Погружение в inline-block
-
float vs inline-block
-
Простая сетка на inline-block
-
inline-block и пробелы в коде
-
Испытание: котогалерея на inline-block
-
-
Фоны
-
Cвойство background-color
-
Свойство background-image
-
Свойство background-repeat
-
Свойство background-position
-
Ещё немного background-position
-
Свойство background-attachment
-
Свойство background
-
Испытание: котокомикс
-
Формат JPEG
-
Формат PNG-8
-
Формат PNG-24
-
Формат GIF
-
Несколько фонов
-
Эффекты с повторяющимся фоном
-
Спрайты
-
Испытание: CAT Academy
-
-
Мастерская: создаём меню
-
Создаём вертикальное меню
-
Добавляем ссылки
-
Сбрасываем стили списка
-
Оформляем контейнер меню
-
Оформляем пункты, простой вариант
-
Более сложное оформление пунктов
-
Добавляем разделители
-
Оформляем состояния пунктов
-
Испытание: вертикальное меню
-
Многоуровневое вертикальное меню
-
Устраняем проблемы оформления
-
Переносим рамки, задаем отступы подменю
-
Оформляем пункты подменю
-
Тестируем на большой вложенности
-
Испытание: многоуровневое меню
-
Горизонтальное меню
-
Что делать, если пункты не влезают?
-
Усложненное оформление пунктов
-
Завершаем оформление пунктов
-
Испытание: горизонтальное меню
-
Вертикальное меню с выпадающим подменю
-
Позиционируем выпадающее подменю
-
Отображаем подменю при наведении
-
Горизонтальное меню с выпадающим подменю
-
Оформляем выпадающее меню
-
Включаем механизм выпадания
-
Состояние «открытое подменю»
-
Испытание: выпадающее меню
-
-
Мастерская: декоративные элементы
-
Социальные кнопки, шаг 1
-
Социальные кнопки, шаг 2
-
Социальные кнопки, шаг 3
-
Переключатель страниц, шаг 1
-
Переключатель страниц, шаг 2
-
Переключатель страниц, шаг 3
-
Переключатель страниц, шаг 4
-
Переключатель страниц, тестирование
-
Испытание: карточка курса
-
Контакты, шаг 1
-
Контакты, шаг 2
-
Контакты, шаг 3
-
Комментарии, шаг 1
-
Комментарии, шаг 2
-
Комментарии, шаг 3
-
Комментарии, шаг 4
-
Комментарии, шаг 5
-
Испытание: анонс поста
-
-
Завершающие испытания
-
Испытание 1: красивая форма входа
-
Испытание 2: слайдер
-
Испытание 3: товары в каталоге
-
-
Игра теней
-
Свойство box-shadow
-
Смещение тени по горизонтали
-
Смещение тени по вертикали
-
Размытие тени
-
Растяжение тени
-
Размытие + растяжение
-
Цвет тени
-
Внутренняя тень
-
Испытание: тусклые тени
-
Полупрозрачная теньТень только с одной стороны
-
Тень только с одной стороны
-
Множественные тени
-
Несколько рамок у одного элемента
-
Теневое искусство – 1
-
Теневое искусство – 2
-
Теневое искусство – 3
-
Испытание: зловещие тени
-
-
Линейные градиенты
-
Hello, linear-gradient!
-
Направление градиента
-
Градиенты по диагоналям
-
Градиенты под углом
-
Диагонали против градусов
-
Испытание: иконки iOS
-
Nyan cat наносит ответный удар
-
Пропорции цветов и колорстопы
-
Резкие переходы цветов
-
Псевдоколонки на градиентах
-
Испытание: флаги
-
Цветовые переходы в px
-
Полупрозрачные градиенты
-
Повторяющийся линейный градиент
-
Строим сложный фон — часть 1
-
Строим сложный фон — часть 2
-
Строим сложный фон — часть 3
-
Строим сложный фон — финал
-
Кнопки — часть 1
-
Кнопки — часть 2
-
Кнопки — часть 3
-
Испытание: орнамент из сюрикенов
-
Испытание: cпутники
-
-
Двумерные трансформации
-
Перемещение по горизонтали
-
Перемещение по вертикали
-
Тренировка фаерболов
-
Увеличение, уменьшение
-
Защита города
-
Начало путешествия
-
Лабиринт
-
Битва — часть 1
-
Битва — часть 2
-
Испытание: таинственная карта
-
Битва — часть 3
-
Испытание: расколотый кристалл
-
Финальная битва
-
Особенности transform-origin — часть 1
-
Особенности transform-origin — часть 2
-
Особенности transform-origin — часть 3
-
Особенности transform-origin — часть 4
-
Центровка с помощью transform:translate
-
Поворот текста в блоках
-
Поворот текста в фоне
-
Нестандартные тени
-
Эффекты при наведении: кнопки — часть 1
-
Эффекты при наведении: кнопки — часть 2
-
Эффекты при наведении: кнопки — часть 3
-
Эффекты при наведении: галерея
-
«Стопка» карт
-
Круговое меню, подготовка
-
Круговое меню, шаг 1
-
Круговое меню, шаг 2
-
Круговое меню, шаг 3
-
Круговое меню, финал
-
Испытание: раскладка карт
-
-
Мастерская: декоративные эффекты на HTML5 и CSS3
-
Маска при наведении, шаг 1
-
Маска при наведении, шаг 2
-
Маска при наведении, шаг 3
-
Маска при наведении, шаг 4
-
Выдвигающееся описание, шаг 1
-
Выдвигающееся описание, шаг 2
-
Выдвигающееся описание, шаг 3
-
Эффектные ссылки, шаг 1
-
Эффектные ссылки, шаг 2
-
Эффектные ссылки, шаг 3
-
Эффектные ссылки, шаг 4
-
Эффектные ссылки, шаг 5
-
Эффектные ссылки, шаг 6
-
Эффектные ссылки: все вместе
-
Закруглённые внутрь углы, шаг 1
-
Закруглённые внутрь углы, шаг 2
-
Закруглённые внутрь углы, шаг 3
-
Закруглённые внутрь углы, шаг 4
-
Испытание: статистика браузеров
-
Слайдер на CSS, шаг 1
-
Слайдер на CSS, шаг 2
-
Слайдер на CSS, шаг 3
-
Слайдер на CSS, шаг 4
-
Хлебные крошки, шаг 1
-
Хлебные крошки, шаг 2
-
Хлебные крошки, шаг 3
-
Хлебные крошки, шаг 4
-
Хлебные крошки, шаг 5
-
Маркер на карте, шаг 1
-
Маркер на карте, шаг 2
-
Испытание: щит Завтрамэна
-
-
Итоговое испытание!!!
- 7620
- 06 января 2016, 11:32
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением