Руководства по веб-технологиям

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

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

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

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

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

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

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

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

Структурные псевдоклассы

Структурные псевдоклассы позволяют выбрать элементы, основываясь на их положении в дереве документа и отношении к другим элементам. К примеру, :first-child выбирает первый элемент в группе братских элементов, т. е., имеющих одного родителя.

Псевдокласс :focus

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

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

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

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

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

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

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

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

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

float в теории и на практике

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

Самоучитель CSS

Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид.

Позиционирование элементов

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

Видеоуроки

Задача для самостоятельного решения

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

Рис. 1

Перейти к задаче