Вёрстка текста. Списки — HTML Basics: Урок 3 [Хекслет]

БЕСПЛАТНЫЕ курсы по основам вёрстки
══════════════════
══════════════════
Онлайн-курс «Базовые основы HTML» познакомит вас с основными концепциями HTML и научит правильно размечать страницы.

В этом уроке мы разберём вёрстку текста с помощью HTML. Изучим понятия блочных и строчных элементов. Снова погрузимся в тему вложенности HTML тегов.

Изучим все виды списков, которые есть в HTML: нумерованные, маркированные и списки определений.

══════════════════
══════════════════
0:00 — Вступление
0:09 — Темы урока
0:36 — Блочные и строчные элементы
3:59 — Вложенность строчных элементов
4:24 — Вложенность блочных элементов
5:10 — Нумерованные и маркированные списки
6:26 — Вложенные списки
7:36 — Списки определений
9:37 — Заключение
══════════════════

#HTML #Hexlet #Вёрстка #IT

[jnygqqw]

Отличный урок, в дз авторы курсов дали нам возможность самим решить, где использовать маркированный вложенный список, а где не маркированный, пока все достаточно понятно и легко закрепляется на практике. Спасибо!

[frstartr]

Спасибо за уроки и домашние задания. Прекрасно дополняют материал в рамках курса на Хекслете

[olbbode]

Спасибо Никита. Для меня только только начинающего это очень понятно

[Albertzykov]

Пробовал много разных ресурсов, хекслет самый интересный и доступный. Советую всем сазу переходить на него

[dzjmsdz]

Спасибо за урок. Очень доступно для понимания даже детей. Чётко и по делу!

[devgeny]

Никита, зрители, прошу уточнить одну деталь по домашнему заданию:
правильно я понимаю, чтобы термин и его определение были в одной строке надо использовать <style>? и знак '-' между ними это часть контекста внутри тега <dd>/<dt>? либо есть более правильные варианты такого написания?

[damir-n]

С вами Хекслет, у микрофона Никита. Примите ванну, выпейте чашечку кофе. Располагайтесь поудобнее. :))) Это прекрасно!!

[MsXeks]

Блин. Домашку делаю) Вроде всё так же, как и на видео, но когда я обозначала определения (ставила внутрь списка, в рамках тега li) - термины не выделились жирным, как в видео. Почему это может быть? Теги проставлены точно так, как в видео, - перепроверила.

[ya_mi_ya]

а чего у тебя два логотипа на видео ))

[vhebmkr]

<ol>


<li>HTML
<ul>

<li>Семантический HTML</li>
<li>Доступность</li>
</ul>
<!-- Список определений -->
<dl>
<dt>Семантический HTML</dt>
<dd>Разметка с помощью семантических тегов и Schema.org</dd>
<dt>Доступность</dt>
<dd>Разметка страницы для людей с ограниченными возможностями</dd>
</dl>

</li>
<li>CSS
<ul>
<li>Основы
<li>Селекторы</li>
<li>Каскадность</li>
<li> Базовые правила для работы с текстом</li>
<li>Базовая адаптивность с использованием * медиазапросов</li>
<li>Базовая анимация с использованием transition</li>
<li> Псевдоклассы</li>
<li> Псевдоэлементы</li>
</ul>
</li>
<li> Модули
<ul>
<li>CSS Flexible Box Layout Module</li>
<li>CSS Grid Layout Module</li>
<li>CSS Multi-column Layout Module</li>
</ul>
</li>

<li>Инструменты
<ul>
<li>HTML</li>
<ul>
<li>PUG</li>
<li>Emme</li>
</ul>
<li>CSS</li>
<ul>
<li> SASS</li>
<li>PostCSS</li>
<li>Stylelint</li>
</ul>
<li>Другое</li>
<ul>
<li>Bash</li>
<li>Git</li>
<li>NPM</li>
<li>DevTools</li>
<li>Code Editors (VSCode/Sublime Text/Atom/WebStorm)</li>
<li>Gulp</li>
</ul>
</li>

</ol>

[vhebmkr]

<ol>


<li>HTML
<ul>

<li>Семантический HTML</li>
<li>Доступность</li>
</ul>
<!-- Список определений -->
<dl>
<dt>Семантический HTML</dt>
<dd>Разметка с помощью семантических тегов и Schema.org</dd>
<dt>Доступность</dt>
<dd>Разметка страницы для людей с ограниченными возможностями</dd>
</dl>

</li>
<li>CSS
<ul>
<li>Основы
<li>Селекторы</li>
<li>Каскадность</li>
<li> Базовые правила для работы с текстом</li>
<li>Базовая адаптивность с использованием * медиазапросов</li>
<li>Базовая анимация с использованием transition</li>
<li> Псевдоклассы</li>
<li> Псевдоэлементы</li>
</ul>
</li>
<li> Модули
<ul>
<li>CSS Flexible Box Layout Module</li>
<li>CSS Grid Layout Module</li>
<li>CSS Multi-column Layout Module</li>
</ul>
</li>

<li>Инструменты
<ul>
<li>HTML</li>
<ul>
<li>PUG</li>
<li>Emme</li>
</ul>
<li>CSS</li>
<ul>
<li> SASS</li>
<li>PostCSS</li>
<li>Stylelint</li>
</ul>
<li>Другое</li>
<ul>
<li>Bash</li>
<li>Git</li>
<li>NPM</li>
<li>DevTools</li>
<li>Code Editors (VSCode/Sublime Text/Atom/WebStorm)</li>
<li>Gulp</li>
</ul>
</li>

</ol>