1

Etapa 1

Знакомство

2

Etapa 2

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

3

Etapa 3

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

4

Etapa 4

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

5

Etapa 5

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

6

Etapa 6

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

7

Etapa 7

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

8

Etapa 8

Селекторы

9

Etapa 9

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

10

Etapa 10

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

11

Etapa 11

Фоны

12

Etapa 12

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

13

Etapa 13

Сетки

14

Etapa 14

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

15

Etapa 15

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

16

Etapa 16

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

1

Etapa 1

Знакомство

2

Etapa 2

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

3

Etapa 3

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

4

Etapa 4

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

5

Etapa 5

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

6

Etapa 6

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

7

Etapa 7

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

8

Etapa 8

Селекторы

9

Etapa 9

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

10

Etapa 10

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

11

Etapa 11

Фоны

12

Etapa 12

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

13

Etapa 13

Сетки

14

Etapa 14

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

15

Etapa 15

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

16

Etapa 16

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

19 febrero 2016
Con detalles Brevemente

El objetivo está desatendido

El autor lleva sin comentar el objetivo 8 años 12 días

Autor del objetivo

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

Enviar un mensaje

Añadir a amigos

General

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

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

 Criterio del fin

Курс пройден

 Recursos personales

Время

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

  • 5537
  • 19 febrero 2016, 21:20

El objetivo está en el grupo

Тренинги

  • 3152

    miembros

  • 5679

    objetivos
Registración

Las posibilidades
están ilimitadas.
Es la hora
de descubrir las suyas

Уже зарегистрированы?
Registración rápida a través de redes sociales
Entrada al sitio

Entre.
Está abierto.

¿Aún no está registrado?
 
Conéctese a cualquiera de sus cuentas, sus datos se tomarán de la cuenta.
¿Ha olvidado la contraseña?
Opciones

Widget para su objetivo

Grande (450×150 px)

Pequeño (250×100 px)

Para insertar un widget en su sitio web o blog, copia el código y incrustarla en el código html original a tu blog / sitio.

Sólo para PRO

Puedes comprar una < a href="/user/pro/" target="_blank">cuenta Pro< / a> o recibirla gratis invitando a 3 amigos a SmartProgress

Invitar a los amigos

Número ilimitado
de objetivos

Comprar la cueta PRO

Email for any cases

  • Maxim Malikov

    fundador

  • Sergey Zakharov

    fundador