Кекстаграм: Эпилог. JavaScript / Кекстаграм: разметка [1/27]
×

Кекстаграм: разметка [1/27]

Теперь вы знаете о фильтрах достаточно, чтобы помочь Кексу в одном маленьком деле. На досуге он ведёт аккаунт HTML Academy в Instagram. И вот однажды ему захотелось как настоящему программисту написать свой аналог. Назвать его он решил Кекстаграм.

В этой серии заданий мы будем помогать Кексу с его проектом, применяя полученные знания на практике. В итоге вместе мы построим свой Кекстаграм с помощью HTML, CSS и JavaScript.

В процессе мы создадим несколько фильтров, которые будут применяться к фотографии в блоке .photo. Переключатели фильтров мы разместим в блоке .toggle-controls, а само переключение будет работать на JavaScript.

Cначала подготовим разметку для нашего будущего фотоприложения. Ну и, конечно же, подключим пока пустой файл script.js, который открыт в третьей вкладке.

Подробно фильтры CSS рассматриваются в предыдущем курсе «Кекстаграм: Начало. CSS-фильтры».


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Кекстаграм: разметка</title> <base href="/assets/course98/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="keksta"> <div class="photos"> <div class="photo"></div> </div> <ul class="toggle-controls"> <li></li> </ul> </body> </html>
.photo { background-image: url("img/spb-4.jpg"); }
HTML Academy
  1. Блоку .photo добавьте второй класс walden.
  2. Первому элементу списка .toggle-controls добавьте классы walden и active,
  3. а внутрь него добавьте текст walden.
  4. Перед закрывающим тегом body подключите скрипт script.js.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.