1

Step 1

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

2

Step 2

Селекторы, часть 1

3

Step 3

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

4

Step 4

Оформление текста, часть 1

5

Step 5

Фоны, часть 1

6

Step 6

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

7

Step 7

Сетки

8

Step 8

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

9

Step 9

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

10

Step 10

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

1

Step 1

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

2

Step 2

Селекторы, часть 1

3

Step 3

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

4

Step 4

Оформление текста, часть 1

5

Step 5

Фоны, часть 1

6

Step 6

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

7

Step 7

Сетки

8

Step 8

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

9

Step 9

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

10

Step 10

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

22 August 2016
completed_date
Details Briefly

Goal author

Алексей Щукин

Russia, Москва

38 years old

Send message

Add to friends

General

Базовый CSS от htmlacademy

 Goal Accomplishment Criteria

Пройти курсы до конца

 Personal resources

Личное время

 Goal ecological compatibility

Стать веб-разработчиком

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

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

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

    2. CSS-правила

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. Селекторы, часть 1

    Опробуем один из самых важнейших механизмов 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

    Разберёмся с самыми распространёнными 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

  5. Фоны, часть 1

    Научимся использовать фоновые изображения и задавать цвета фона. Разберёмся с популярными форматами изображений и взглянем на некоторые приёмы создания декоративных эффектов.

    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

  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. Сетки

    Попробуем поймать поток документа и разобраться что это такое. Взглянем на тонкости свойства 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

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

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

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

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

    Создадим с нуля несколько типовых навигационных меню: вертикальное, горизонтальное, многоуровневое и с выпадающим подменю. Это прикладной курс, в котором вы будете использовать знания и навыки, полученные в предыдущих курсах.

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

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

    Создадим с нуля различные декоративные элементы: социальные кнопки, переключатели страниц, блоки комментариев и так далее. Это прикладной курс, в котором вы будете использовать знания и навыки, полученные в предшествующих курсах.

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

  • 2530
  • 22 August 2016, 12:37

The goal is in the group

Веб-разработка

  • 1715

    members

  • 2436

    goals
Sign up

Signup

Уже зарегистрированы?
Quick sign-up through social networks.
Sign in

Sign in.
Allowed.

Not registered yet?
 
Log in through social networks
Forgot your password?
Settings

Widget for your goal

Big (450×150 px)

Small (250×100 px)

To insert a widget on your website or blog, copy the code and embed it in the original html-code to your blog/site.

For PRO only

only_for_pro_descr

Invite friends

Raising
goals up

Buy PRO-account

Email for any cases

  • Maxim Malikov

    founder

  • Sergey Zakharov

    founder