Итоговая работа

Чтение — около 7 минут· без учёта практики

Мы прошли путь от первого правила до раскладки, состояний и декоративных эффектов. В предыдущем уроке добавили радиальную подсветку. Теперь соберите оформление самостоятельно и проверьте, как решения работают вместе. Новых свойств в этой работе нет: выбирайте изученные приёмы под задачу, а не ради их количества.

Что дано

В редакторе ниже — та же HTML-основа, которой закончился курс: главная страница, фотоальбом игрушек, форма записи и страница маршрута, которая также открывается во фрейме главной. Ссылки, подписи, таблица, поля и изображения уже есть. HTML менять не требуется; работайте в css/style.css. В стартовом CSS оставлены только базовые ограничения размеров и каркас слоёв, поэтому страницы пока выглядят почти без оформления.

index.html — приветствие, оглавление, расписание, маршрут, видео, аудио и цитата;
pages/toys.html — фотоальбом с подписями и значком любимой карточки;
pages/signup.html — форма с подсказками, ошибками и разными состояниями полей;
pages/walks.html — отдельная страница маршрута;
css/style.css — общий файл оформления для всех страниц; изображения, шрифты и медиаресурсы лежат в assets при скачивании.

Если вы последовательно собирали свой my-site, можно завершить работу в нём: проверьте требования и организацию файла. Если хотите проверить себя с чистого листа, возьмите стартовый пример ниже. Не нужно заново писать тексты, разметку формы или искать изображения.

Требования к результату

Что должно работать
Часть сайта	Наблюдаемый результат
Текст и палитра	Текст хорошо читается, строки на широком экране не растянуты на всю страницу. Общие цвета заданы переменными по назначению. У заголовков есть запасной шрифт.
Меню и оглавление	Ссылки расположены с помощью Flexbox и доступны с клавиатуры. При нехватке места меню переносится или прокручивается внутри своей области; в образце с липкой шапкой используется прокрутка. Если навигация липкая, она не перекрывает цель перехода по якорю.
Фотоальбом	Grid меняет число колонок по доступному месту. Фото сохраняют пропорции, длинная подпись помещается, значок остаётся внутри карточки. Текст поверх изображения имеет читаемую подложку.
Расписание	Заголовки и строки различимы, отступы ячеек согласованы. При нехватке места таблица прокручивается внутри своего контейнера, а не расширяет всю страницу.
Форма	Подписи связаны с полями и не исчезают после ввода. Поля помещаются на узком экране. Фокус виден; состояния readonly и disabled различимы. Неверный ввод сопровождается текстовым пояснением.
Эффекты	Небольшой переход или анимация не скрывают информацию. При prefers-reduced-motion: reduce содержимое видно без движения. Тени и градиенты не мешают фокусу и чтению; сохраняется запасной фон.
Общий CSS	Один файл подключён ко всем четырём страницам. Базовые и компонентные правила распределены по слоям; обычных правил вне них нет. Исправления на одной странице не ломают остальные.

Цвета, отступы и точное число колонок не обязаны совпадать с решением. Оцениваем читаемость и поведение, а не совпадение строки CSS. Сложные 3D-эффекты, библиотеки и все виды градиентов не обязательны. Для обычного текста проверяйте контраст не ниже 4.5:1, для крупного — 3:1; тень текста сама по себе не заменяет достаточный контраст с фоном.

Порядок работы

Сначала настройте общие цвета, шрифты, межстрочный интервал, ширину содержимого и безопасные размеры изображений. Проверьте все страницы.
Соберите меню и фотоальбом. Начните с узкого окна, расширяйте его постепенно; точку медиазапроса выбирайте по моменту, когда содержимому нужна другая раскладка.
Оформите расписание и форму. Проверьте длинный текст, состояния полей и клавиатуру до добавления эффектов.
Добавьте умеренные переходы и декоративное оформление. Сразу предусмотрите вариант reduced-motion и запасные фоны.
Проведите проверку по списку ниже. Исправляйте причину переполнения или конфликта в DevTools; не скрывайте проблему глобальным overflow-x: hidden и не добавляйте !important наугад.

Если забыли синтаксис, вернитесь к уроку Grid, оформлению форм или организации CSS. Для проверки цвета подходит инструмент работы с цветами. Сначала попробуйте сформулировать правило сами, затем сверяйтесь со справочником.

Перенесите весь файл в слои

В уроке об организации CSS мы отложили полный перенос проекта в слои. Теперь сделайте его целиком: базовые ограничения, палитру и типографику поместите в base, ширину и поля общего контейнера — в layout, оформление компонентов, состояния, медиазапросы и эффекты — в components. В начале файла объявите порядок:

CSS

@layer base, layout, components;

@layer base {
  /* Общие правила и переменные. */
}

@layer layout {
  /* Общий контейнер страницы. */
}

@layer components {
  /* Меню, альбом, таблица, форма и их состояния. */
}

Для обычных авторских правил слой components здесь сильнее layout, а тот сильнее base. Обычное правило вне слоёв сильнее правил в именованных слоях, поэтому частичный перенос может неожиданно изменить результат. Не оставляйте старые дубликаты в конце файла. После переноса снова проверьте страницы; внутри каждого слоя продолжает действовать каскад. Порядок важных объявлений устроен иначе — в этой работе они не нужны.

Как проверить работу

Размеры окна. Откройте каждую из четырёх страниц на 320, 768 и 1280 CSS px, а также на промежуточной ширине. Страница не должна прокручиваться по горизонтали; локальная прокрутка широкой таблицы допустима. Узкое окно — не единственная проверка: увеличьте масштаб браузера до 200% и убедитесь, что текст и действия доступны. Дополнительно при исходной ширине области страницы 1280 CSS px проверьте масштаб 400%: доступная ширина станет около 320 CSS px. Отдельно увеличьте размер шрифта в настройках браузера — это проверяет поведение текста и размеров в rem, а не заменяет масштабирование всей страницы.
Длинное содержимое. Временно удлините подпись фотографии и пункт меню в DevTools. Текст должен перенестись, не выйти из карточки и не наложиться на значок.
Клавиатура. Используйте Tab, Shift+Tab, Enter и пробел. Проследите порядок фокуса в меню и форме, его видимость и доступность контейнера таблицы. Не убирайте outline без равноценной замены.
Форма. Оставьте обязательные поля пустыми, введите неверный адрес почты и число вне диапазона. Проверьте текст ошибки и обычное состояние после исправления. Это учебная форма: проверяем оформление и встроенные состояния браузера; отправка заявки на сервер в работу не входит.
Изображения и шрифты. Проверьте загрузку ресурсов в Network и запасной шрифт при блокировке веб-шрифта. Отключите фоновую картинку: текст остаётся понятным на однотонном фоне. Подписи фотографий читаются на самых светлых участках снимков.
Движение и страницы. Включите эмуляцию prefers-reduced-motion: reduce. Приветствие остаётся видимым, движения нет. Проверьте главную и все страницы по ссылкам, в том числе после изменения общих переменных.

Встроенный редактор помогает проверять CSS и переходы между страницами. Проверку масштаба браузера, загрузки ресурсов, шрифтов и полной клавиатурной навигации удобнее выполнить в скачанном проекте. Один удачный скриншот не подтверждает работу всех состояний.

Проверьте себя

Выполните итоговую работу

Ожидаемый результат: четыре согласованно оформленные страницы, которые соответствуют проверяемым требованиям. В решении — вариант знакомого сайта с мягкими тенями, подписями поверх фотографий и тёплой подсветкой. Это образец одного корректного оформления, а не единственный допустимый CSS.

Стартовый проект

css/style.css

CSS

/* Старт итоговой работы: базовые ограничения, оформление предстоит добавить самостоятельно. */
@layer base, layout, components;

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :root {
    /* Объявите палитру: --accent, --text, --text-muted. */
  }

  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  progress,
  meter,
  iframe,
  audio,
  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  fieldset {
    min-width: 0;
  }
}

@layer layout {
  main {
    /* Задайте ширину страницы, поля и центрирование. */
  }
}

@layer components {
  /* Оформите меню и оглавление с помощью Flexbox. */
  /* Постройте .gallery на Grid; сохраните подписи и .badge. */
  /* Оформите .table-wrap, таблицу и форму. */
  /* Проверьте focus-visible и prefers-reduced-motion. */
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
    <title>Сайт Тони</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
          <li><a href="pages/signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div class="intro">
        <h1 id="top">Привет! Меня зовут Тони</h1>
        <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
        <p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
        <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      </div>
      <ul class="toc">
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
        <li><a href="#schedule">Мой режим дня</a></li>
        <li><a href="#walks">Где я гуляю</a></li>
        <li><a href="#song">Песня для прогулок</a></li>
      </ul>
      <section class="toy">
        <h2 id="toy">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption>Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2>Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <section>
        <h2 id="schedule">Мой режим дня</h2>
        <div class="table-wrap" tabindex="0" role="region" aria-label="Режим дня Тони">
          <table>
            <caption>Режим дня Тони</caption>
            <thead>
              <tr>
                <th scope="col">Время</th>
                <th scope="col">Будни</th>
                <th scope="col">Выходные</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">07:00</th>
                <td>Прогулка, 20 минут</td>
                <td>Сплю</td>
              </tr>
              <tr>
                <th scope="row">08:00</th>
                <td colspan="2">Завтрак</td>
              </tr>
              <tr>
                <th scope="row">13:00</th>
                <td>Жду хозяина и сплю</td>
                <td>Прогулка в парке, 1 час</td>
              </tr>
              <tr>
                <th scope="row">19:00</th>
                <td colspan="2">Ужин</td>
              </tr>
              <tr>
                <th scope="row">21:00</th>
                <td colspan="2">Вечерняя прогулка</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
      <section>
        <h2 id="progress">Мои успехи</h2>
        <p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
        <p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
      </section>
      <section>
        <h2 id="walks">Где я гуляю</h2>
        <p>Я люблю гулять в сквере у дома.</p>
        <p>
          <a href="pages/walks.html" target="walk">Маршрут</a> |
          <a href="assets/tony.png" target="walk">Фото с прогулки</a>
        </p>
        <iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
        <h3>Видео с прогулки</h3>
        <p>Субтитры помогут, если вы смотрите видео без звука.</p>
        <video width="180" height="320" poster="assets/walk.jpg" controls>
          <source src="assets/walk.mp4" type="video/mp4">
          <track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
          <p><a href="assets/walk.mp4">Скачать видео</a></p>
        </video>
        <h3>Как я лаю</h3>
        <p>Так я разговариваю с хозяином — у нас целый диалог!</p>
        <audio controls>
          <source src="assets/bark.mp3" type="audio/mpeg">
          <p><a href="assets/bark.mp3">Скачать запись</a></p>
        </audio>
      </section>
      <section>
        <h2 id="song">Песня для прогулок</h2>
        <p>Хозяин включает эту песню, когда мы выходим гулять.</p>
        <iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
        <p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
      </section>
      <section>
        <h2>Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
        <figure>
          <blockquote>
            <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
          </blockquote>
          <figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
        </figure>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/signup.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Запишитесь на совместную прогулку с карликовым пинчером Тони.">
    <title>Запись на прогулку с Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Запись на прогулку</h1>
      <p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
      <p><a href="../index.html#walks">Где мы гуляем</a></p>
      <form>
        <fieldset>
          <legend>О вас</legend>
          <p>
            <label for="owner">Ваше имя</label>
            <input type="text" id="owner" name="owner" autocomplete="name" required aria-describedby="owner-error">
            <span class="field-error" id="owner-error">Введите ваше имя.</span>
          </p>
          <p>
            <label for="email">Электронная почта</label>
            <input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required aria-describedby="email-error">
            <span class="field-error" id="email-error">Введите адрес электронной почты, например anna@example.com.</span>
          </p>
        </fieldset>
        <fieldset>
          <legend>Ваша собака</legend>
          <p>
            <label for="breed">Порода</label>
            <input type="text" id="breed" name="breed" list="breeds">
            <datalist id="breeds">
              <option value="Карликовый пинчер"></option>
              <option value="Такса"></option>
              <option value="Йоркширский терьер"></option>
              <option value="Беспородная"></option>
            </datalist>
          </p>
          <p>
            <label for="dogs">Сколько собак придёт</label>
            <input type="number" id="dogs" name="dogs" min="1" max="3" value="1" aria-describedby="dogs-error">
            <span class="field-error" id="dogs-error">Укажите число собак от 1 до 3.</span>
          </p>
        </fieldset>
        <fieldset>
          <legend>Когда гулять</legend>
          <p>
            <label for="date">Дата</label>
            <input type="date" id="date" name="date" required aria-describedby="date-error">
            <span class="field-error" id="date-error">Выберите дату прогулки.</span>
          </p>
          <label><input type="radio" name="time" value="morning" checked> Утром</label>
          <label><input type="radio" name="time" value="evening"> Вечером</label>
        </fieldset>
        <fieldset>
          <legend>Прогулка</legend>
          <p>
            <label for="leader">Ведёт прогулку</label>
            <input type="text" id="leader" name="leader" value="Тони" readonly>
          </p>
          <p>
            <label for="route">Маршрут</label>
            <select id="route" name="route">
              <optgroup label="В городе">
                <option value="square">Сквер у дома</option>
                <option value="pond" selected>Пруд с утками</option>
              </optgroup>
              <optgroup label="За городом">
                <option value="forest">Лес</option>
                <option value="river" disabled>Берег реки — закрыт до весны</option>
              </optgroup>
            </select>
          </p>
          <p>
            <label for="wishes">Пожелания</label>
            <textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
          </p>
        </fieldset>
        <fieldset>
          <legend>Что взять с собой</legend>
          <label><input type="checkbox" name="take" value="ball"> Мячик</label>
          <label><input type="checkbox" name="take" value="rope"> Канат</label>
        </fieldset>
        <p>
          <button type="submit">Записаться на прогулку</button>
          <button type="reset">Очистить форму</button>
        </p>
      </form>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/toys.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Любимые игрушки Тони и правила игры в канат.">
    <title>Игрушки Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul class="toy-list">
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <section>
        <h2 id="album">Мой фотоальбом</h2>
        <ul class="gallery">
          <li>
            <figure>
              <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
              <figcaption>Я в детстве</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
              <figcaption>С плюшевой белкой</figcaption>
            </figure>
            <span class="badge">Любимая</span>
          </li>
          <li>
            <figure>
              <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
              <figcaption>В худи для холодной погоды</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
              <figcaption>Шлейка надета — идём гулять!</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
              <figcaption>Смеюсь над шуткой хозяина</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
              <figcaption>После прогулки</figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/walks.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом.">
    <title>Где гуляет Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <h1>Мой маршрут</h1>
    <ol>
      <li>Сквер у дома.</li>
      <li>Пруд с утками.</li>
      <li>Поляна для игры с канатом.</li>
    </ol>
  </body>
</html>

Сохраните и проверьте в VS Code

Скачайте ZIP из редактора и распакуйте его в отдельную папку, например my-site-final, чтобы сохранить предыдущую работу. Откройте проект в VS Code, затем index.html через локальный сервер. Если ещё не запускали его, воспользуйтесь инструкцией из учебника HTML. Проверьте все четыре страницы по списку выше. Кнопка скачивания сохраняет текущие файлы; для архива решения сначала измените CSS, затем выберите «Показать решение» и скачайте ZIP. Сравните причины отличий со своим вариантом, после чего вернитесь к своим файлам и исправьте найденное.

Когда работа готова

Подготовьте папку проекта с четырьмя страницами, общим CSS и ресурсами. Добавьте короткий отчёт: какие ширины и страницы проверили, как прошла работа с клавиатуры и reduced-motion, что исправили и какие ограничения остались. Отдельно объясните выбор раскладки, поведение слоёв и назначение пользовательских свойств. Не выдавайте непроверенный сценарий за пройденный.

Работа готова, когда требования соблюдаются на всех страницах, а вы можете объяснить свои решения и найти правило, которое определяет вид элемента. Если отдельный пункт пока не получается, вернитесь к соответствующему уроку и проверьте его на небольшом примере. Финальная цель — самостоятельно управлять оформлением и проверять результат.