Уроки по тегу «CSS3»
Изучаем один из самых полезных плагинов для верстальщика — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.
При верстке сайта важно вовремя найти ошибки или понять, как правильно преобразовать нужный нам блок. Ранее это делалось преимущественно вручную. Сейчас современные браузеры имеют функцию веб-инспектора. Рассмотрим возможности одного из них – Chrome DevTools.
Курс «Основы современной верстки» является базой для изучения основ верстки сайтов HTML и CSS. В этом уроке мы кратко расскажем о том, что узнаем на курсе и как эти знания можно применять на практике.
Какие элементы отвечают за каркас страницы, а какие помогают в процессе ее стилизации или добавления функциональных частей? Знакомимся с блочными и строчными элементами HTML и изучаем влияние стилей на итоговую ширину элементов.
Урок посвящен HTML верстке с нуля. Говорим о роли атрибутов и изучаем общую схему описания HTML тегов.
Для визуального оформления веб-страницы создан язык CSS. Изучаем базовые возможности языка, разбираемся, как их использовать вместе с HTML. Учимся подключать CSS файлы и знакомимся с базовыми типами селекторов.
Чтобы сохранять результаты работы, вам потребуется редактор кода. В этом уроке разберем, как установить 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. Узнаем о RFS и изменении стандартных шрифтов проекта
Научимся использовать иконки из библиотеки Bootstrap Icons