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