Учебные курсы

Стилизация <meter>

Элемент <meter> применяется для наглядного представления числа, лежащего в заданном диапазоне. Его удобно использовать в инфографике для визуализации таких данных как дисковое пространство, заряд батареи, рейтинг и др.

С помощью CSS легко менять цвет такой шкалы, её размеры и даже выводить рядом текстовую информацию.

Стилизация кнопок

Кнопки — это элементы интерфейса, которые позволяют пользователям взаимодействовать с веб-страницей. Например, кнопка «Вход» используется для авторизации пользователей на сайте, а кнопка «Добавить в корзину» для добавления товара в корзину интернет-магазина. Кнопки также могут применяться для открытия окна, запуска видео, подписки на рассылки и др.

Стилизация ссылок

В HTML ссылки применяются для создания указателя на веб-страницу, файл или сайт. Сама ссылка может вести на определённое место этой же веб-страницы, на другую веб-страницу или другой сайт.

Изучаем селекторы CSS

В данном видеокурсе вы узнаете, что такое стилевой селектор и познакомитесь с базовыми селекторами CSS:

  • селекторами элемента;
  • классами;
  • идентификаторами;
  • универсальным селектором.

Блочная модель

Для определения размеров блока, его внешнего вида и положения браузер руководствуется алгоритмом, который описан блочной моделью CSS. Знание блочной модели помогает строить отдельные блоки и компоновать их в веб-страницы, что и является основой вёрстки.

Разделы веб-страницы

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

Руководства

Руководство по гридам

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

Руководство по адаптивному дизайну

Когда я слышу термин «адаптивный дизайн», то первое, что приходит мне в голову, — это устройства разных размеров. Эта мысль просто засела у меня в голове. Готов спорить, многие из вас, скорее всего, думают аналогично. Однако в наше время понятие «адаптивный дизайн» включает в себя множество разных смыслов.

Руководство по Bootstrap 5

Bootstrap — это бесплатный набор инструментов с открытым исходным кодом для создания сайтов и веб-приложений. Это самый популярный HTML, CSS и JavaScript-фреймворк для разработки адаптивных и ориентированных на мобильные устройства проектов в Интернете.

Погружение в псевдоэлементы ::before и ::after

Псевдоэлементы ::before и ::after — это невероятные универсальные помощники в наборе инструментов CSS. Их понимание поможет вам создать практичный CSS для разрешения самых разных ситуаций. Или же вы можете пойти дальше и использовать их для создания впечатляющих трюков CSS.

CSS-анимация для начинающих

Мы рассмотрим, зачем нужна анимация и познакомимся со свойствами transition и animation. Узнаем, как работают переходы и какими свойствами можно управлять для изменения движения. После этого мы рассмотрим свойство animation и научимся создавать ключевые кадры.

Переменные CSS с нуля

Переменные CSS (они же пользовательские свойства) поддерживаются в браузерах уже несколько лет. Я предпочитаю применять их в зависимости от проекта и ситуации. Переменные очень полезны и просты в работе, но часто фронтенд-разработчики не понимают как с ними работать или неверно их используют.