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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Руководства

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

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

Руководство по тёмному режиму

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

Gulp для новичков

Когда речь заходит о веб-разработке, то инструмент Gulp помогает выполнять разные задачи и часто используется для следующего: запуск веб-сервера; автоматическая перезагрузка браузера при каждом сохранении файла; использование препроцессоров, таких как Sass или LESS; оптимизация CSS, JavaScript и изображений.

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

Bootstrap 4 капитально переработал Bootstrap 3 и многое поменял в его функционировании. Множество изменений было внесено в компоненты, таких как таблицы, формы, сетки, выпадающие списки, панели навигации и многое другое.

Руководство по флексбоксам

Флексбоксы (Flexbox, от flexible box — гибкие блоки) дают веб-разработчикам контроль над расположением элементов, их выравниванием и размерами внутри контейнера.

Руководство по JSON

JSON (JavaScript Object Notation, Нотация объектов JavaScript) — это человекочитаемый текстовый формат, который облегчает обмен данными между различными языками программирования.