Уроки по тегу «HTML5»

Что такое каскадность, и как она работает в CSS? Урок посвящен различиям в приоритетах селекторов и умению использовать это в своих проектах.

Любой HTML-документ имеет базовую структуру, состоящую из тегов и служебных элементов. Они нужны браузеру для корректного отображения информации. В данном уроке разберемся с каждой строчкой этой структуры

Основная цель любой HTML-верстки — передача смысла блоков. В этом уроке мы рассмотрим возможности последнего стандарта HTML5 в области семантики и узнаем о доступности в веб.

Какие элементы отвечают за каркас страницы, а какие помогают в процессе ее стилизации или добавления функциональных частей? Знакомимся с блочными и строчными элементами HTML и изучаем влияние стилей на итоговую ширину элементов.

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

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

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

Курс «Основы современной верстки» является базой для изучения основ верстки сайтов HTML и CSS. В этом уроке мы кратко расскажем о том, что узнаем на курсе и как эти знания можно применять на практике.

Чтобы выложить проект в интернет, нужно воспользоваться хостингом — специальным сервером, который будет хранить файлы и предоставит доступ к ним через доменное имя. В этом уроке мы рассмотрим бесплатный хостинг GitHub.

Изучаем один из самых полезных плагинов для верстальщика — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.

Урок посвящен HTML верстке с нуля. Говорим о роли атрибутов и изучаем общую схему описания HTML тегов.

Чтобы сохранять результаты работы, вам потребуется редактор кода. В этом уроке разберем, как установить Visual Studio Code. Это мощный инструмент, который можно использовать не только для верстки, но и для программирования на любом языке.

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

К этому уроку были изучены и опробованы простые селекторы, которые позволяли выбирать элементы по классу, идентификатору или тегу. А как еще можно выбрать элемент на странице? В этом уроке разберем родственные и соседние селекторы, научимся использовать селекторы по атрибуту

Формы — важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Изучим, как создаются формы, добавляются текстовые поля, поля для выбора, списки и кнопки. Затронем тему доступности форм для людей с ограниченными возможностями

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

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

Верстальщик довольно часто сталкивается с необходимостью стилизовать не только конкретные элементы, такие как таблицы, списки, текст, медиаэлементы, формы. Порой нужно также стилизовать и блоки, внутри которых они находятся. Для этого можно установить фон для блока с контентом, а как это сделать, с помощью свойства background, узнаем в этом уроке. Изучим свойства для установки цвета, изображения, научимся позиционировать фон и устанавливать его размеры

Не хватило элементов на странице? На помощь приходят псевдоэлементы — элементы, созданные с помощью CSS. В этом уроке разберемся с тем, как создаются псевдоэлементы, зачем они нужны и какие особенности имеют. Увидим, как стилизуют маркеры списка в CSS

Какие CSS свойства влияют на размеры элементов при отображении на странице? Вспомним понятие блочной модели и изучим работу свойств margin, padding и border для установки внешних/внутренних отступов и видимых границ элемента. Познакомимся со свойством box-sizing, с помощью которого изменяется стандартное поведение блочной модели

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

Слышали фразу «Поиграйся со шрифтами»? Настало время этим заняться. Учимся подключать шрифты с помощью CSS, управлять размером текста, оформлением и устанавливать межстрочные интервалы. В конце урока изучим обобщенное свойство font, с помощью которого можно установить сразу 6 разных стилей текста

Как и в реальном мире, в мире верстки используются единицы измерения для обозначения размеров элементов, отступов, размера текста и так далее. В этом уроке познакомимся с базовыми единицами измерения и их взаимосвязи с элементами на сайте. Изучим понятие относительных и абсолютных единиц и выявим разницу между единицами em и rem

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

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

Работа с контентом — базовая часть при создании проекта. За красивыми анимациями, блоками и картинками скрывается контент. За ним приходит пользователь на сайт или открывает приложение. В этом уроке кратко рассмотрим темы, которые будут изучаться на протяжении курса