1

Этап 1

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

21 октября—22 октября

2

Этап 2

Селекторы

23 октября—24 октября

3

Этап 3

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

25 октября—26 октября

4

Этап 4

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

27 октября—29 октября

5

Этап 5

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

30 октября—31 октября

6

Этап 6

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

01 ноября—02 ноября

7

Этап 7

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

03 ноября—04 ноября

8

Этап 8

Сетки

05 ноября—06 ноября

9

Этап 9

Фоны

07 ноября—08 ноября

10

Этап 10

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

09 ноября—10 ноября

11

Этап 11

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

11 ноября—13 ноября

12

Этап 12

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

14 ноября—16 ноября

1

Этап 1

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

21 октября—22 октября

2

Этап 2

Селекторы

23 октября—24 октября

3

Этап 3

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

25 октября—26 октября

4

Этап 4

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

27 октября—29 октября

5

Этап 5

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

30 октября—31 октября

6

Этап 6

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

01 ноября—02 ноября

7

Этап 7

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

03 ноября—04 ноября

8

Этап 8

Сетки

05 ноября—06 ноября

9

Этап 9

Фоны

07 ноября—08 ноября

10

Этап 10

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

09 ноября—10 ноября

11

Этап 11

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

11 ноября—13 ноября

12

Этап 12

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

14 ноября—16 ноября

20 октября 2014 16 ноября 2014
Цель завершена 12 декабря 2014
Общая

Пройти базовые курсы на сайте HTML ACADEMY

Очень хороший русскоязычный ресурс. Я уже прошел часть уроков и закрепил знания, которые у меня есть. Кроме того обязательно буду читать книги и практиковать

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

Пройти все контрольные задания.

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

    Вводный курс, в котором рассматриваются базовые понятия CSS: селекторы, каскадность, наследование, приоритеты. Вы познакомитесь с некоторыми CSS-свойствами для оформления текста, создания сетки страницы, позиционирования элементов.

    1. Введение в CSS
    2. CSS-правила
    3. Продвинутые селекторы
    4. Свойства для оформления текста
    5. Свойства для задания размеров и отступов
    6. Позиционирование элементов
    7. Создание сетки страницы
    8. Декоративные свойства
    9. Каскадность
    10. Каскадность. Переопределение стилей
    11. Каскадность и приоритеты
    12. Каскадность. Коктейль из классов
  2. Селекторы

    Курс посвящен одному из важнейших механизмов CSS — селекторам. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их. Курс тематический — он посвящен биатлону.

    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. Испытание. Дуэль.
  3. Наследование и каскадирование

    Наследование, каскадирование, специфичность: что это и как их правильно использовать?

    1. Иерархическое дерево
    2. Наследование
    3. Наследование «на пальцах»
    4. Еще немного про наследование
    5. Наследуемые свойства
    6. Ненаследуемые свойства
    7. Принудительное наследование
    8. Каскадирование
    9. Битва за курочку
    10. Битва за курочку. Раунд второй
    11. Битва за курочку. Раунд третий
    12. Битва за курочку. Борьба накаляется
    13. Битва за курочку. Запрещённый приём
    14. Еще одна задачка на специфичность
    15. Расчет значения специфичности
    16. Еще задачка на порядок кода
    17. Перекрестное наследование
    18. Испытание: взломанный котопрофайл
  4. Промежуточные испытания

    1. Испытание 1: фигурное катание, спортивные пары
    2. Испытание 2: медальный зачёт
    3. Испытание 3: фильтры по цене
  5. Оформление текста с помощью 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
  6. Блочная модель документа

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

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

    В курсе разбираются понятие потока документа, тонкости свойства float и блочно-строчных элементов, отрабатываются основные приёмы построения сеток.

    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
  9. Фоны

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

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

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

  • 8754
  • 20 октября 2014, 18:37
Регистрация

Регистрация

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

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

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