{"draftJsState":{"blocks":[{"data":{"image":{"id":"6a86d55d0ff67261dfe82a75"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"amqt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d87r7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет! Если ты сейчас думаешь «а вдруг у меня не получится», то вот хорошая новость: получится. Сегодня мы сделаем самую простую страницу: заголовок, пару абзацев и одну красивую карточку. И сразу добавим немного стилей, чтобы это выглядело не как «тестовая страница», а как настоящий кусочек сайта.","type":"unstyled","key":"7d0d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что понадобится","type":"header-two","key":"fp08n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Любой текстовый редактор (Блокнот, Notepad++, VS Code — не важно).","type":"unordered-list-item","key":"ant42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер (Chrome, Яндекс и т. д.).","type":"unordered-list-item","key":"8oi1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1. Создаём файл","type":"header-two","key":"21t8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создай на рабочем столе папку, например my-first-site.","type":"unordered-list-item","key":"955a7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри создай файл index.html. Если редактор не показывает расширения файлов, просто создай текстовый файл и переименуй его в index.html (важно, чтобы в конце было именно .html, а не .txt).","type":"unordered-list-item","key":"besce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открой этот файл в редакторе.","type":"unordered-list-item","key":"bc7e1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2. Пишем HTML (структуру)","type":"header-three","key":"2nhua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скопируй этот код и вставь в файл:","type":"unstyled","key":"4u4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html.","type":"unstyled","key":"fsk41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n \n \n Моя первая страница\n \n \n

Привет, это мой первый сайт!

\n\n

Я только учусь верстать, но уже могу сделать простую страницу.

Карточка проекта

Это пример блока, который мы стилизуем чуть ниже.

\n \n

\n\n \n \n","type":"unstyled","key":"dicpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохрани файл (Ctrl+S или Cmd+S).","type":"unstyled","key":"h36g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3. Добавляем CSS (стили)","type":"header-three","key":"eiou6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть два пути: быстрый и правильный. Для первой статьи сделаем быстрый — добавим стили прямо в HTML.","type":"unstyled","key":"56sad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Между тегами и добавь этот блок:","type":"unstyled","key":"eqa81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ejahk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь полный код выглядит так (всё вместе):","type":"unstyled","key":"479d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n \n \n Моя первая страница\n \n \n \n

Привет, это мой первый сайт!

\n\n

Я только учусь верстать, но уже могу сделать простую страницу.

Карточка проекта

Это пример блока, который мы стилизуем чуть ниже.

\n \n

\n\n \n \n","type":"unstyled","key":"aj2u2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 4. Смотрим результат","type":"header-two","key":"39f9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохрани файл.","type":"ordered-list-item","key":"7dvmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зайди в папку и дважды кликни по index.html — он откроется в браузере.","type":"ordered-list-item","key":"7lgic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ты увидишь аккуратную страницу с карточкой и кнопкой.","type":"ordered-list-item","key":"2dfto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поздравляю: ты только что сверстал свою первую страницу! \uD83C\uDF89","type":"unordered-list-item","key":"esb56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разбор: что тут важного","type":"header-two","key":"72k4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

— заголовок первого уровня. На странице он обычно один, это главный заголовок.","type":"unordered-list-item","key":"asqsk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
— абзац текста.","type":"unordered-list-item","key":"a6imm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
— контейнер (блок), к которому мы применили стили.","type":"unordered-list-item","key":"fdka7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class=\"card\" — это «метка», по которой CSS понимает, к какому блоку применять стили.","type":"unordered-list-item","key":"fuf20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В CSS .card — значит «всё, что имеет класс card».","type":"unordered-list-item","key":"4kkcq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Частые ошибки новичков (и как их быстро исправить)","type":"header-two","key":"burkp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Файл открывается как текст. Скорее всего, ты сохранил его как .txt. Переименуй в index.html.","type":"unordered-list-item","key":"69lcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Ничего не меняется после сохранения. Попробуй обновить страницу в браузере (F5 или Ctrl+R).","type":"unordered-list-item","key":"31iua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Кнопка не красивая. Проверь, что блок