1

Этап 1

Знакомство

2

Этап 2

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

3

Этап 3

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

4

Этап 4

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

5

Этап 5

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

6

Этап 6

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

7

Этап 7

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

8

Этап 8

Селекторы

9

Этап 9

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

10

Этап 10

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

11

Этап 11

Фоны

12

Этап 12

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

13

Этап 13

Сетки

14

Этап 14

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

15

Этап 15

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

16

Этап 16

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

1

Этап 1

Знакомство

2

Этап 2

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

3

Этап 3

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

4

Этап 4

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

5

Этап 5

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

6

Этап 6

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

7

Этап 7

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

8

Этап 8

Селекторы

9

Этап 9

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

10

Этап 10

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

11

Этап 11

Фоны

12

Этап 12

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

13

Этап 13

Сетки

14

Этап 14

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

15

Этап 15

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

16

Этап 16

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

19 февраля 2016
Подробно Кратко

Цель заброшена

Автор не отписывался в цели 7 лет 5 месяцев 22 дня

Автор цели

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

Отправить сообщение

Добавить в друзья

Общая

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

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

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

Курс пройден

 Личные ресурсы

Время

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

  • 5109
  • 19 февраля 2016, 21:20

Цель состоит в группе

Тренинги

  • 3120

    участников

  • 5610

    целей
Регистрация

Регистрация

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

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

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

Виджет вашей цели

Большой (450×150 px)

Маленький (250×100 px)

Чтобы вставить виджет на ваш сайт или блог, скопируйте код и внедрите его в исходный html-код вашего блога/сайта.

Только для PRO

Вы можете купить PRO аккаунт, либо получить его бесплатно, пригласив 3 друзей на SmartProgress

Пригласить друзей

Поднятие
целей наверх

Купить

Email на все случаи и по любым вопросам

  • Максим Маликов

    основатель

  • Сергей Захаров

    основатель