{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ig7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":102,"style":"BOLD"},{"length":3,"offset":109,"style":"BOLD"}],"text":"Веб‑разработка — это огромный мир, где каждый элемент имеет своё место. Если вы начинаете свой путь с HTML и CSS, этот чек‑лист станет вашей картой сокровищ!","type":"unstyled","key":"64b0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":25,"style":"BOLD"}],"text":"Я собрал ключевые идеи в удобный конспект-путеводитель, который можно сразу применять на практике. Каждый блок — это шаг к вашему первому сайту.","type":"unstyled","key":"638ej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Поехали! \uD83D\uDC47","type":"unstyled","key":"ebokf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCD0 1. HTML — Скелет вашей страницы","type":"header-three","key":"a7jv0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"✨ Что это?","type":"header-three","key":"824m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"},{"length":9,"offset":61,"style":"BOLD"}],"text":"HTML (HyperText Markup Language) — язык разметки. Он создаёт структуру: заголовки, абзацы, картинки, ссылки. Без HTML страница — просто сплошной текст.","type":"unstyled","key":"fgfk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFD7️ Базовая структура ВСЕГДА такая:","type":"header-three","key":"pgsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n\n \n Мой первый сайт \n \n\n\n \n

Привет, мир!

\n\n","type":"unstyled","key":"82tfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCDD 6 главных тегов, которые нужно знать сразу:","type":"header-three","key":"9ugrm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"#1 Заголовки —

Главный заголовок

до

\n• Чем меньше цифра, тем важнее заголовок\n• h1 должен быть один на странице","type":"unstyled","key":"4mol9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"#2 Абзац —
Это текст абзаца.
\n• Для основного текста","type":"unstyled","key":"6hk8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"#3 Ссылка — Яндекс\n• Обязательный атрибут href — куда ведёт ссылка","type":"unstyled","key":"ad6rf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"#4 Картинка — $\"Милый$ \n• src — путь к картинке\n• alt — описание (обязательно!)","type":"unstyled","key":"soa3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"#5 Списки —
(маркированный) или
(нумерованный)\n• Каждый пункт —
Пункт списка
","type":"unstyled","key":"1kuph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"#6 Блок-контейнер —
...
\n• Основной строительный элемент\n• Сам по себе не виден, нужен для группировки","type":"unstyled","key":"1p53s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFA8 2. CSS — Одеваем скелет в стильный костюм","type":"header-three","key":"e21cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDD04 Как подключить стили?","type":"header-three","key":"ebtfi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте файл style.css и подключите в HTML:","type":"unstyled","key":"5jroi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"75gpv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"✅ Зачем отдельный файл? Чище код, легче править, страница грузится быстрее.","type":"unstyled","key":"ficde"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFA8 Три способа задать цвет:","type":"header-three","key":"12or9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* 1. HEX (самый популярный) /\ncolor: #FF5733;\n\n/ 2. RGB /\ncolor: rgb(255, 87, 51);\n\n/ 3. По названию /\ncolor: tomato;","type":"unstyled","key":"4pun9"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":31,"offset":22}],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"},{"length":31,"offset":22,"style":"ITALIC"}],"text":"\uD83D\uDD17 Ресурс для подбора: htmlcolorcodes.com/color-picker","type":"unstyled","key":"9rgbq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Классы — ваше супероружие!","type":"header-three","key":"1g681"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML:","type":"unstyled","key":"fvus2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Важное сообщение!
\n","type":"unstyled","key":"atcv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В CSS (ставим точку перед именем класса):","type":"unstyled","key":"997nl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"css","type":"unstyled","key":"3n4fn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".important-text {\n color: red;\n font-weight: bold;\n}\n\n.beautiful-button {\n background-color: blue;\n color: white;\n border-radius: 10px;\n padding: 15px;\n}","type":"unstyled","key":"91j62"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"✨ 7 самых нужных свойств для старта:","type":"header-three","key":"ffgii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":3,"offset":30,"style":"BOLD"},{"length":3,"offset":72,"style":"BOLD"},{"length":3,"offset":108,"style":"BOLD"},{"length":3,"offset":151,"style":"BOLD"},{"length":3,"offset":196,"style":"BOLD"},{"length":3,"offset":231,"style":"BOLD"}],"text":"1. color: #333; — цвет текста\n2. background-color: #f5f5f5; — цвет фона\n3. font-size: 18px; — размер шрифта\n4. font-family: Arial, sans-serif; — шрифт\n5. text-align: center; — выравнивание текста\n6. margin: 20px; — внешние отступы\n7. padding: 10px; — внутренние отступы","type":"unstyled","key":"c278j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDD93 Подключаем красивый шрифт с Google Fonts:","type":"header-three","key":"1qvig"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":16,"offset":11}],"inlineStyleRanges":[{"length":16,"offset":11,"style":"BOLD"}],"text":"Зайдите на fonts.google.com","type":"ordered-list-item","key":"9p26m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":25,"style":"BOLD"}],"text":"Выберите шрифт → нажмите Select style","type":"ordered-list-item","key":"1tvnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скопируйте или @import","type":"ordered-list-item","key":"19o8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте в CSS:","type":"ordered-list-item","key":"8crkv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"css","type":"unstyled","key":"6n06b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {\n font-family: 'Roboto', sans-serif;\n}","type":"unstyled","key":"e1b6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAC 3. Практика: Создаём «Список любимых фильмов»","type":"header-three","key":"81td"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCC1 Структура проекта:","type":"unstyled","key":"3ar3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"мой_проект/\n├── index.html\n├── style.css\n└── images/","type":"unstyled","key":"ddbbe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"},{"length":1,"offset":17,"style":"BOLD"}],"text":"\uD83D\uDCC4 Файл index.html:","type":"unstyled","key":"4i3v8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n Мой киносписок\n \n \n\n\n
\n
\uD83C\uDFAC Моя личная киноподборка
\n
Фильмы, которые изменили моё восприятие мира:
\n \n
\n
Побег из Шоушенка
\n
Криминальное чтиво
\n
Тёмный рыцарь
\n
Начало
\n
Форрест Гамп
\n
\n \n
Обновлено сегодня! \uD83D\uDCC5
\n
\n\n","type":"unstyled","key":"fsjn6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"},{"length":1,"offset":16,"style":"BOLD"}],"text":"\uD83C\uDFA8 Файл style.css:","type":"unstyled","key":"74ht4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":1035,"style":"BOLD"},{"length":10,"offset":1109,"style":"BOLD"}],"text":"/ Подключаем шрифт /\nbody {\n font-family: 'Montserrat', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n}\n\n/ Центрируем контент /\n.container {\n max-width: 600px;\n margin: 40px auto;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n padding: 30px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);\n}\n\n/ Заголовок /\nh1 {\n text-align: center;\n color: #FFD700;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n}\n\n/ Список фильмов /\n.movie-list {\n list-style: none;\n padding: 0;\n}\n\n.movie-list li {\n background: rgba(255, 255, 255, 0.2);\n margin: 10px 0;\n padding: 15px;\n border-radius: 10px;\n border-left: 5px solid #4CAF50;\n transition: all 0.3s ease;\n}\n\n.movie-list li:hover {\n transform: translateX(10px);\n background: rgba(255, 255, 255, 0.3);\n}\n\n/ Особое выделение для топ-фильмов */\n.top {\n border-left-color: #FF9800 !important;\n font-weight: bold;\n background: rgba(255, 152, 0, 0.2) !important;\n}\n\n.footer {\n text-align: center;\n margin-top: 30px;\n opacity: 0.8;\n}","type":"unstyled","key":"bn5vs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDF89 Результат: современная страница с градиентным фоном, анимированным списком и выделенными любимыми фильмами. Просто скопируйте код и запустите в браузере!","type":"unstyled","key":"8oep7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCDA 4. Куда двигаться дальше?","type":"header-three","key":"ch021"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF CSS-мастерство\n• Flexbox и Grid для сложных макетов\n• Анимации и переходы\n• Адаптивная вёрстка (чтобы сайт работал на телефоне)","type":"unstyled","key":"ung8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":12,"offset":13,"style":"BOLD"},{"length":10,"offset":50,"style":"BOLD"},{"length":15,"offset":90,"style":"BOLD"}],"text":"\uD83D\uDD17 Ресурсы:\n• MDN Web Docs — лучшая документация\n• CSS-Tricks — готовые решения и статьи\n• Frontend Mentor — реальные проекты для портфолио","type":"unstyled","key":"4de87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"⚡ JavaScript\n• Оживление страницы\n• Работа с формами\n• Взаимодействие с сервером","type":"unstyled","key":"bq0tn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":20,"offset":15,"style":"BOLD"},{"length":14,"offset":67,"style":"BOLD"}],"text":"\uD83D\uDC65 Сообщество\n• HW School в Telegram — поддержка и обратная связь\n• Stack Overflow — ответы на вопросы","type":"unstyled","key":"a28gc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDC8E Золотые правила начинающего фронтендера","type":"header-three","key":"72pfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDDC2️ Разделяй и властвуй — HTML, CSS и JS в разных файлах","type":"ordered-list-item","key":"fji7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFF7️ Именуй понятно — .movie-list лучше, чем .block1","type":"ordered-list-item","key":"anda2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDD0D Смотри на код других — используйте «Inspect Element» на любимых сайтах","type":"ordered-list-item","key":"8bmir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDC1B Не бойтесь ошибок — консоль браузера (F12) ваш лучший друг","type":"ordered-list-item","key":"1s2ts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"✨ Экспериментируйте — меняйте цвета, шрифты, отступы","type":"ordered-list-item","key":"4u5dd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Самый важный шаг — не просто прочитать, а СДЕЛАТЬ. Скопируйте код выше, запустите в браузере, поменяйте что-то своё!","type":"unstyled","key":"1ik5c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":144,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF P.S. Этот конспект — лишь первый шаг. Сохраните его себе, чтобы возвращаться к основам. Дальше — JavaScript и настоящая магия интерактивности!","type":"unstyled","key":"q25a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":85,"offset":0,"style":"BOLD"}],"text":"А вы уже написали свою первую строку HTML? Покажите в комментариях, что получилось! \uD83D\uDC47","type":"unstyled","key":"29tae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#вебразработка #html #css #frontend #программирование #сайт #учеба #конспект","type":"unstyled","key":"btm8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3etsd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"sIkN9XO3kPLh6EACPah4"}],"entityMap":{"0":{"data":{"href":"https://htmlcolorcodes.com/color-picker","url":"https://htmlcolorcodes.com/color-picker"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://fonts.google.com/","url":"https://fonts.google.com/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}