{"draftJsState":{"blocks":[{"data":{"image":{"id":"67c5a4224419276b4ff1f095"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"opll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e86e6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта тема объединяет методы организации и группировки контента для создания структурированных макетов с использованием блочных элементов.","type":"unstyled","key":"4alvj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.1. Как сделать контейнеры с использованием

?","type":"header-two","key":"ff00c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"f5ubi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Контент внутри контейнера.

","type":"unstyled","key":"eth3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"ac3ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"

– универсальный блочный элемент для группировки элементов.","type":"unordered-list-item","key":"2tbbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Классы:\nПрисваивание класса помогает стилизовать контейнеры через CSS.","type":"unordered-list-item","key":"csraa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"6eebj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте

для группировки, когда нет подходящего семантического тега.","type":"unordered-list-item","key":"c2tqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Организуйте классы так, чтобы структура была понятной и легко поддерживалась.","type":"unordered-list-item","key":"cm4h8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.2. Как создать блочную верстку с Flexbox?","type":"header-two","key":"ana0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"feja5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

Блок 1

Блок 2

Блок 3

","type":"unstyled","key":"3gi5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"et52o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"display: flex; превращает контейнер в flex-контейнер, позволяющий гибко распределять пространство.","type":"unordered-list-item","key":"2uufj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"justify-content: space-between; распределяет элементы равномерно.","type":"unordered-list-item","key":"f1q0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Стили для элементов: Задают фон, отступы и внешний вид.","type":"unordered-list-item","key":"1rh3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"55c9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Flexbox отлично подходит для создания адаптивных макетов.","type":"unordered-list-item","key":"5c404"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте медиазапросы для изменения параметров flex-контейнера на разных устройствах.","type":"unordered-list-item","key":"6gaf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.3. Как сделать макет с использованием CSS Grid?","type":"header-two","key":"1nnq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"1f8eq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

Ячейка 1

Ячейка 2

Ячейка 3

","type":"unstyled","key":"c8edh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"7lehh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"display: grid; активирует CSS Grid.","type":"unordered-list-item","key":"bm7f0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"grid-template-columns: 1fr 1fr 1fr; задаёт три равные колонки.","type":"unordered-list-item","key":"auft8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"gap: 10px; устанавливает промежуток между элементами.","type":"unordered-list-item","key":"8aja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"b97nm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Grid идеально подходит для сложных макетов.","type":"unordered-list-item","key":"2r1e9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экспериментируйте с настройками колонок и строк для достижения нужного дизайна.","type":"unordered-list-item","key":"b63a6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.4. Как разделить контент с помощью

?","type":"header-two","key":"6fi2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"8hnf4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

О нас

Описание компании, миссия и ценности.

Наши услуги

Описание предоставляемых услуг.

","type":"unstyled","key":"d3e4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"1dg4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"

используется для логического разделения контента.","type":"unordered-list-item","key":"12v33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"}],"text":"id позволяет создавать якорные ссылки для навигации внутри страницы.","type":"unordered-list-item","key":"71j6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"cd2u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте

для создания четкой структуры.","type":"unordered-list-item","key":"8vsb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляйте описательные заголовки для каждого раздела.","type":"unordered-list-item","key":"cvvfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.5. Как сделать верстку страницы с семантическими тегами?","type":"header-two","key":"7nmau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"ebku0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Название сайта

Статья 1

Основной контент статьи...

\n \n

\n","type":"unstyled","key":"1vuib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"ervt0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Семантические теги:\nИспользование