1

Step 1

Знакомство

2

Step 2

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

3

Step 3

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

4

Step 4

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

5

Step 5

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

6

Step 6

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

7

Step 7

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

8

Step 8

Селекторы

9

Step 9

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

10

Step 10

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

11

Step 11

Фоны

12

Step 12

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

13

Step 13

Сетки

14

Step 14

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

15

Step 15

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

16

Step 16

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

1

Step 1

Знакомство

2

Step 2

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

3

Step 3

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

4

Step 4

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

5

Step 5

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

6

Step 6

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

7

Step 7

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

8

Step 8

Селекторы

9

Step 9

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

10

Step 10

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

11

Step 11

Фоны

12

Step 12

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

13

Step 13

Сетки

14

Step 14

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

15

Step 15

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

16

Step 16

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

19 February 2016
Details Briefly

Goal abandoned

The author does not write in the goal 8 years 12 days

Goal author

Данияр Ожакаев

Send message

Add to friends

General

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

Решил освоить HTML и CSS, это будет очень полезно для SEO, да и умение верстать сайты не будет лишним.

 Goal Accomplishment Criteria

Курс пройден

 Personal resources

Время

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2. CSS-правила

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. Селекторы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  11. Фоны

    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

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

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

  13. Сетки

    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

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

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

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

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

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

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

  • 5536
  • 19 February 2016, 21:20

The goal is in the group

Тренинги

  • 3152

    members

  • 5679

    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

You can buy a PRO account, or get it for free by inviting 3 friends to SmartProgress

Invite friends

Team
goal

Buy PRO-account

Email for any cases

  • Maxim Malikov

    founder

  • Sergey Zakharov

    founder