JavaScript. Профессиональная разработка веб-интерфейсов c 26 мая по 29 июля 2020По цене 21 800
1/2

Как добавить на сайт блок с навыками

Уровень: для новичков

Вернуться назадСледующий шаг

Подключение на страницу блока с навыками

Мы продолжаем работать с наполнением нашего сайта-портфолио. На этом шаге мы добавим блок, в котором вы сможете указать, какими технологиями владеете и в какой степени. Приступим.

Список навыков будет располагаться внутри блока intro. Там уже есть ваша фотография, краткая биография и рассказ о том, чем вы можете быть полезны работодателю. Блок навыков мы вставим под ними.

Скриншот с кодом
Сюда мы добавим блок навыков

Новый блок мы создадим с помощью тега <div> с классом skills. Внутрь добавим заголовок третьего уровня «Мои навыки».

Скриншот страницы с новым блоком
Создаём блок и добавляем заголовок

Под заголовком создадим список определений с классом skills-list. В нём перечислим освоенные технологии, например HTML и CSS. В качестве «терминов» будут выступать сами технологии, а в «определениях» мы запишем уровень навыка и обернём значение в дополнительный <div>. Вы уже создавали похожий список в главе Основы CSS.

<div class="skills">
  <h3>Мои навыки</h3>
  <dl class="skills-list">
    <dt>HTML</dt>
    <dd><div>60%</div></dd>
    <dt>CSS</dt>
    <dd><div>40%</div></dd>
  </dl>
</div>

Добавим классы тегам <dt>. Для навыка HTML это будет класс skill-html, а для CSS — класс skill-css. Тегам <dd> добавим класс level.

<div class="skills">
  <h3>Мои навыки</h3>
  <dl class="skills-list">
    <dt class="skill-html">HTML</dt>
    <dd class="level"><div>60%</div></dd>
    <dt class="skill-css">CSS</dt>
    <dd class="level"><div>40%</div></dd>
  </dl>
</div>

Теперь осталось сделать так, чтобы полоска, указывающая на уровень навыка, была той же ширины, что и указанный в качестве значения процент. Для этого используем атрибут style.

<div class="skills">
  <h3>Мои навыки</h3>
  <dl class="skills-list">
    <dt class="skill-html">HTML</dt>
    <dd class="level"><div style="width: 60%;">60%</div></dd>
    <dt class="skill-css">CSS</dt>
    <dd class="level"><div style="width: 40%;">40%</div></dd>
  </dl>
</div>

Готово!

Скриншот страницы с готовым блоком навыков
Блок навыков готов!

Не забудьте изменить процент владения технологиями, когда научитесь чему-то новому!

Вернуться назадСледующий шаг