Уроки по тегу «Верстка»

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

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

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

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

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

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

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

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

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

Узнаем о плюсах и минусах Bootstrap. Увидим, где используется Bootstrap и для чего его можно применять

Познакомимся с фреймворком Bootstrap и изучим план курса

Изучим концепцию сеток в Bootstrap. Узнаем виды контейнеров

Узнаем о принципах адаптивности в Bootstrap. Научимся адаптировать сетку

Научимся подключать Bootstrap к странице. Узнаем о разных способах подключения и инструментах для этого

Научимся работать с таблицами, используя возможности Bootstrap. Узнаем о доступности таблиц

Узнаем об утилитах. Изучим принципы работы, строение и когда стоит использовать утилиты в Bootstrap

Изучим возможности при работе с текстом в Bootstrap

Научимся использовать иконки из библиотеки Bootstrap Icons

Узнаем о компонентах Bootstrap и изучим устройство их работы

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

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

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

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

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

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

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

Рекомендуемые курсы по теме «Верстка» для начинающих

Нашли 7 курсов по тегу «Верстка»
курс
Позиционирование элементов на странице с помощью CSS. Управление потоком, создание модальных окон, плавающих элементов
9 часов  
Старт в любое время
курс
Разработка гибких макетов с помощью CSS Flex. Адаптивность, гибкие элементы менающие высоту и ширину
10 часов  
Старт в любое время
курс
Основы работы с препроцессором SASS для создания крупных проектов и дизайн-систем на CSS
4 часа  
Старт в любое время
курс
Основы верстки сайтов HTML, стилизация с помощью CSS, отладка кода, редакторы верстки и плагины
9 часов  
Старт в любое время
курс
Знакомство с фреймворком Bootstrap для создания адаптивных сайтов. Использование готовых компонентов и собственных наработок
9 часов  
Старт в любое время
курс
Верстка контента на HTML и CSS. Стили, анимации, таблицы, медиа и фоны
22 часа  
Старт в любое время
курс
Углубленное изучение Bootstrap. Создание собственных компонентов и утилит. Подключение отдельных компонентов и кастомизация
7 часов  
Старт в любое время