Уроки по тегу «CSS3»
Поговорим о связи абсолютного и относительного позиционирования
Учимся позиционировать элемент относительно самого браузера
Поговорим о наложении элементов, связи позиционирования и наложения
Выясняем, как браузеры отображают HTML и что такое «нормальный поток документа»
Выясняем, как выдернуть элемент из нормального потока
Учимся использовать относительное позиционирование
Поговорим о плавающих элементах и их особенностях
Поговорим о способах выравнивания элементов по поперечной оси внутри флекс-контейнера, познакомимся со свойством align-items
Поговорим о способах переноса элементов внутри флекс-контейнера и научимся пользоваться свойством flex-wrap
Поговорим о свойствах для работы с элементами внутри флекс-контейнеров, изучим свойства flex-shrink, flex-basis, flex
Знакомимся с флекс-контейнерами и возможностями определения главной оси для рендера элементов
Поговорим о способах выравнивания элементов по главной оси внутри флекс-контейнера, познакомимся со свойством justify-content
Поговорим о свойствах для работы с элементами внутри флекс-контейнеров, изучим свойства order и align-self
Поговорим о концепции Flex, преимуществах и сценариях использования
Поговорим о свойствах для работы с элементами внутри флекс-контейнеров, изучим свойство Flex-grow
Выясняем, что такое мета-тег viewport и как он помогает в адаптивности
Познакомимся с версткой с использованием процентов
Выясняем, как проверить ваш сайт на различных устройствах
Разбираемся в возможностях Flex при создании адаптивных макетов
Знакомимся с одним из самых мощных инструментов для создания адаптивных сайтов — Media Queries
Выясняем, для каких устройств возможно применять свои стили
Любой HTML-документ имеет базовую структуру, состоящую из тегов и служебных элементов. Они нужны браузеру для корректного отображения информации. В данном уроке разберемся с каждой строчкой этой структуры
Изучаем один из самых полезных плагинов — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.
Курс «Основы современной верстки» является базой для изучения основ верстки сайтов HTML и CSS. В этом уроке мы кратко расскажем о том, что узнаем на курсе и как эти знания можно применять на практике.
Чтобы сохранять результаты работы, вам потребуется редактор кода. В этом уроке разберем, как установить Visual Studio Code. Это мощный инструмент, который можно использовать не только для верстки, но и для программирования на любом языке.
Урок посвящен HTML верстке с нуля. Говорим о роли атрибутов и изучаем общую схему описания HTML тегов.
На рынке существует несколько основных редакторов. Некоторые из них специфичны только для одной операционной системы, другие имеют возможность установки на любую из них. В этом разделе посмотрим на основные действия при работе с онлайн-редактором Figma.
Для визуального оформления веб-страницы создан язык CSS. Изучаем базовые возможности языка, разбираемся, как их использовать вместе с HTML. Учимся подключать CSS файлы и знакомимся с базовыми типами селекторов.
При верстке сайта важно вовремя найти ошибки или понять, как правильно преобразовать нужный нам блок. Ранее это делалось преимущественно вручную. Сейчас современные браузеры имеют функцию веб-инспектора. Рассмотрим возможности одного из них – Chrome DevTools.
Основная цель любой HTML-верстки — передача смысла блоков. В этом уроке мы рассмотрим возможности последнего стандарта HTML5 в области семантики и узнаем о доступности в веб.
Чтобы выложить проект в интернет, нужно воспользоваться хостингом — специальным сервером, который будет хранить файлы и предоставит доступ к ним через доменное имя. В этом уроке мы рассмотрим бесплатный хостинг GitHub.
Что такое каскадность, и как она работает в CSS? Урок посвящен различиям в приоритетах селекторов и умению использовать это в своих проектах.
Какие элементы отвечают за каркас страницы, а какие помогают в процессе ее стилизации или добавления функциональных частей? Знакомимся с блочными и строчными элементами HTML и изучаем влияние стилей на итоговую ширину элементов.
Поговорим отличия явной и неявной сетки, изучим свойства grid-auto-rows и grid-auto-columns
Знакомимся с понятиями сеток и их составлящими в CSS Grid Layout
Изучаем влияние свойств позиционирования и z-index при использовании внутри сетки
Изучаем отступы между полосами и выравнивание полос сетки
Знакомимся с концепцией Grid, говорим о ключевых моментах и отличиях от Flex
Поговорим о свойствах, позволяющие создавать сетки с помощью CSS Grid Layout
Изучаем свойства, позволяющие произвольно располагать элементы внутри сетки
Узнаем о плюсах и минусах Bootstrap. Увидим, где используется Bootstrap и для чего его можно применять
Научимся подключать Bootstrap к странице. Узнаем о разных способах подключения и инструментах для этого
Узнаем об утилитах. Изучим принципы работы, строение и когда стоит использовать утилиты в Bootstrap
Изучим концепцию сеток в Bootstrap. Узнаем виды контейнеров
Узнаем о принципах адаптивности в Bootstrap. Научимся адаптировать сетку
Научимся работать с таблицами, используя возможности Bootstrap. Узнаем о доступности таблиц
Познакомимся с фреймворком Bootstrap и изучим план курса