Шкала навыков с помощью HTML & CSS шаг за шагом || using pure HTML & CSS step by step

Всем привет!

В этом видео я покажу, как сделать шкалу навыков, используя HTML и CSS шаг за шагом.

Итак, приступим к созданию шкалы навыков.

У нас есть файл индекс.html, стили, стили подключены, можем приступать.

Создаем div с классом skills и внутри него добавим следующую структуру.

Создаем параграф.

Внутри него будет надпись HTML.

После параграфа будет div с классом skillBar.

Внутри skillBar будет div с классом skillPercentage.

Если вы не знаете, как создавать такие структуры с помощью Emmet в одну строку, у меня есть на эту тему отдельное видео.

Ссылку добавлю вверху справа.

Если интересно, можете ознакомиться.

Итак, давайте продолжим.

Скопируем эту структуру.

Точнее, перед этим еще добавим сюда атрибут со значением 90%.

Этот атрибут нам понадобится, когда мы будем добавлять наш псевдоэлемент before.

И также добавим еще style и укажем width ширина 90%.

Теперь скопируем эту структуру и вставим еще два раза.

Здесь поменяем на CSS и JavaScript.

И внутри здесь также меняем на 70%.

и 60, здесь также в стилях 70 и 60.

Это готово, теперь можем переходить к стилям.

Обратимся к универсальному селектору и обнулим марджины, пэддинги и добавим box sizing border-box.

Также обратимся к body и укажем ширина 100vh, дисплей

flex align-item-center justify-content-center и добавим background черного цвета откроем браузер и мы видим у нас есть готовая структура которую мы задавали в html и css

наши элементы спозиционированы по центру с помощью этих свойств и значений теперь будем продолжать обращаемся к skills классу skills и указываем ширина 100 процентов и ширина 700 пикселей также добавим пэддинги на 0 и 20 пикселей теперь обращаемся

к нашему параграфу и застилизуем наши подписи html css и javascript добавим белый цвет для них укажем font-size 20 пикселей сделаем больше размер укажем font-weight на 700 и добавим текст transform uppercase чтобы каждая буква была большой

И также добавим margin 15 пикселей и 0.

Сверху и снизу будет отступ на 15 пикселей, справа и слева по нулям.

Теперь обращаемся к классу skill-bar и задаем следующее значение.

Высота 12 пикселей.

Background у нас будет серого цвета.

И добавим Border Radius на 4 пикселя.

Это готово.

Теперь обращаемся к классу Skill.

Percentage.

Наши проценты.

Высота также будет 12 пикселей.

Background будет

синего цвета border-radius добавим также на 4 пикселя и добавим position-relative наша шкала почти готова еще нужно добавить вот эти вот элементы которые указывают на сколько процентов есть

знаний по html css и javascript давайте их добавим сюда мы добавляем position relative и обращаемся к skill percentage и псевдоэлементу before задаем контент и указываем сюда

attribute и то, что мы указывали в атрибуте, вот эти вот значения, наш атрибут добавляем сюда в скобки a. И у нас вот добавились эти значения, которые были в каждом из атрибутей и в каждом из блоков.

Теперь мы добавим position absolute.

Background сделаем серого.

Добавим пэддинги на 4 пикселя и 6 пикселей.

Вот наши элементы добавились.

Добавим фон сайз на 12 пикселей.

Сделаем меньше шрифт.

И добавим фон вейболт жирный, чтобы выделялось.

Также добавим бордер радиус на 4 пикселя для скругления углов.

наших элементов и укажем top минус 30 пикселей элементы поднимутся вверх и укажем right 0 они станут с правой стороны также нам нужно еще добавить transform translate x на 50 процентов

Теперь обращаемся к SkillPercentage и псевдоэлементу автора.

Зададим вот здесь небольшую стрелочку, маленькую, чтобы она указывала к нашему SkillBar.

Для этого мы указываем Content пустой, указываем Position Absolute.

Добавляем ширину 8 пикселей.

Высоту на 8 пикселей.

Также сделаем этот блок.

Добавим background на серый цвет.

Вот эти элементы уже здесь появились.

Теперь нам нужно их разместить с этой стороны.

Мы указываем в топ минус 13 пикселей.

Справа на 0.

Не переместятся на эту сторону.

И нам нужно трансформировать

Этот квадратик мы обращаемся к Transform и указываем Translate.

X 50% смещение сделаем по центру и добавим Rotate на 45 градусов.

И у нас появилась такая вот стрелочка.

Наша шкала навыков готова.

Использовали мы HTML и CSS.

Шаг за шагом.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.