{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ctoq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Знакомо: хотите начать в веб‑разработке, но тонны информации пугают? Курсы, статьи, видео... А результат где?","type":"unstyled","key":"7gcm2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":2,"style":"BOLD"},{"length":12,"offset":86,"style":"BOLD"}],"text":"\uD83D\uDC49 Давайте сделаем иначе. Не будем читать 10 статей. Просто создадим красивую страницу прямо сейчас, а по пути разберем всё необходимое.","type":"unstyled","key":"7gk0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":73,"style":"BOLD"}],"text":"Я дам вам готовые файлы, которые вы скопируете → откроете в браузере → и увидите свой первый работающий проект. И заодно поймете главные принципы.","type":"unstyled","key":"8l7u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCE6 Что у нас получится","type":"header-three","key":"eoc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современная страница «Моя киноподборка» с:\n• Градиентным фоном\n• Стильным списком фильмов\n• Анимацией при наведении\n• Выделением любимых фильмов\n• Полной адаптивностью","type":"unstyled","key":"bh148"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выглядит солидно, а делается элементарно! ⬇️","type":"unstyled","key":"ehpn8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCDD Шаг 1: Создаём файлы","type":"header-three","key":"ol2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте Блокнот (или любой редактор) и создайте две папки:","type":"unstyled","key":"2g9dn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ваша_папка/\n├── index.html ← этот файл\n└── style.css ← и этот","type":"blockquote","key":"58n6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCC4 Шаг 2: Копируем HTML (index.html)","type":"header-three","key":"d82kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n Моя киноколлекция\n \n \n \n\n\n

\uD83C\uDFAC Фильмы, которые меня вдохновляют

Подборка, которая заставляет думать и чувствовать

\n \n

Побег из Шоушенка
Криминальное чтиво
Тёмный рыцарь
Начало
Форрест Гамп
Интерстеллар
Леон
Карты, деньги, два ствола

\n \n

\uD83D\uDCA1 Совет: добавьте свои фильмы! Просто откройте файл index.html в редакторе и вставьте новые названия между тегами <li>...</li>

\n \n \n

\n\n","type":"blockquote","key":"5qcmr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCBE Сохраните как index.html","type":"unstyled","key":"c4vo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFA8 Шаг 3: Копируем стили (style.css)","type":"header-three","key":"4qkcl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":1559,"style":"BOLD"},{"length":10,"offset":1611,"style":"BOLD"}],"text":"/* === Базовые настройки === */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Montserrat', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n min-height: 100vh;\n padding: 20px;\n line-height: 1.6;\n}\n\n/* === Главный контейнер === */\n.container {\n max-width: 800px;\n margin: 40px auto;\n background: rgba(255, 255, 255, 0.08);\n backdrop-filter: blur(12px);\n border-radius: 24px;\n padding: 40px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* === Шапка === */\nheader {\n text-align: center;\n margin-bottom: 40px;\n padding-bottom: 25px;\n border-bottom: 2px solid rgba(255, 255, 255, 0.15);\n}\n\nh1 {\n font-size: 2.5rem;\n color: #FFD700;\n text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);\n margin-bottom: 10px;\n}\n\n.subtitle {\n font-size: 1.1rem;\n opacity: 0.9;\n font-weight: 300;\n}\n\n/* === Список фильмов === */\n.movie-list {\n list-style: none;\n margin-bottom: 40px;\n}\n\n.movie-list li {\n background: rgba(255, 255, 255, 0.12);\n margin: 14px 0;\n padding: 18px 24px;\n border-radius: 14px;\n border-left: 6px solid #4CAF50;\n transition: all 0.35s ease;\n font-size: 1.1rem;\n display: flex;\n align-items: center;\n}\n\n.movie-list li:hover {\n transform: translateX(12px);\n background: rgba(255, 255, 255, 0.2);\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);\n}\n\n/* === Топ-фильмы (особые) === */\n.top-movie {\n border-left-color: #FF9800 !important;\n background: rgba(255, 152, 0, 0.18) !important;\n font-weight: 600;\n position: relative;\n}\n\n.top-movie::before {\n content: \"★\";\n color: #FFD700;\n margin-right: 12px;\n font-size: 1.2rem;\n}\n\n/* === Блок с советом === */\n.tip {\n background: rgba(41, 128, 185, 0.25);\n border-radius: 16px;\n padding: 22px;\n margin: 30px 0;\n border-left: 5px solid #2980b9;\n}\n\n.tip p {\n margin: 0;\n}\n\n/* === Подвал === */\nfooter {\n text-align: center;\n padding-top: 30px;\n border-top: 1px solid rgba(255, 255, 255, 0.15);\n opacity: 0.8;\n font-size: 0.95rem;\n}\n\n.hashtag {\n color: #81ecec;\n font-weight: 600;\n margin-top: 10px;\n letter-spacing: 1px;\n}\n\n/* === Адаптивность для телефонов === */\n@media (max-width: 768px) {\n .container {\n margin: 20px auto;\n padding: 25px;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .movie-list li {\n padding: 16px 20px;\n font-size: 1rem;\n }\n \n body {\n padding: 15px;\n }\n}","type":"blockquote","key":"bl5r7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCBE Сохраните как style.css","type":"unstyled","key":"964j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDE80 Шаг 4: Запускаем!","type":"header-three","key":"948c7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраните оба файла в одну папку","type":"ordered-list-item","key":"6hpok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":14,"style":"BOLD"}],"text":"Откройте файл index.html в браузере (просто кликните по нему дважды)","type":"ordered-list-item","key":"8hcqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Готово! Вы только что создали свой первый сайт","type":"ordered-list-item","key":"33nat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDD0D Что мы только что узнали (практически)","type":"header-three","key":"dn7au"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"},{"length":3,"offset":49,"style":"BOLD"},{"length":6,"offset":92,"style":"BOLD"},{"length":12,"offset":143,"style":"BOLD"},{"length":8,"offset":196,"style":"BOLD"}],"text":"✨ HTML — это структура (теги

,
,
)\n✨ CSS — это стили (цвета, шрифты, отступы)\n✨ Классы — как давать имена элементам (.top-movie)\n✨ Адаптивность — сайт сам подстраивается под телефон\n✨ Анимации — плавные эффекты при наведении","type":"unstyled","key":"6j3b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":102,"offset":0,"style":"BOLD"}],"text":"Вы не просто скопировали код — вы создали работающий проект и увидели, как технологии работают вместе.","type":"unstyled","key":"8hpla"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCC8 Что делать дальше?","type":"header-three","key":"evm6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Поэкспериментируйте — поменяйте цвета градиента в style.css (строки 10-11)","type":"ordered-list-item","key":"9je4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Добавьте свой фильм — вставьте новую строку
Ваш фильм
в список","type":"ordered-list-item","key":"5fbbn"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":16,"offset":28}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Измените шрифт — зайдите на fonts.google.com, выберите другой шрифт и замените ссылку в HTML","type":"ordered-list-item","key":"dt9d9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"},{"length":3,"offset":46,"style":"BOLD"},{"length":8,"offset":82,"style":"BOLD"}],"text":"Посмотрите «под капот» любых сайтов — нажмите F12 в браузере и исследуйте вкладку Elements","type":"ordered-list-item","key":"cf4l4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCA1 Важная мысль","type":"header-three","key":"fn1aj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":59,"style":"BOLD"}],"text":"Большинство курсов заставляют вас месяц изучать теорию. Но результат — лучшая мотивация. Теперь у вас есть:\n✓ Работающий проект в портфолио\n✓ Понимание связи HTML и CSS\n✓ Уверенность, что «это не так сложно»\n✓ Основа для экспериментов","type":"unstyled","key":"4p3hk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"Весь код — ваш. Меняйте, ломайте, улучшайте!","type":"unstyled","key":"44aid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFAF P.S. Если этот подход вам понравился — ставьте плюс и пишите в комментариях, что у вас получилось! Сделали свой вариант? Скидывайте скриншоты — самые интересные опубликую в следующем посте.","type":"unstyled","key":"23c63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Вопросы? Задавайте в комментариях, разберем вместе!","type":"unstyled","key":"2cq8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#вебразработка #html #css #первыйсайт #программирование #обучение #практика #код #frontend","type":"unstyled","key":"finit"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7qmdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"0fcmDQ8EEvYU6juBfHdR"}],"entityMap":{"0":{"data":{"href":"https://fonts.google.com/","url":"https://fonts.google.com/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}