{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание сайта с помощью кода — это отличный способ научиться веб-разработке и получить полный контроль над дизайном и функционалом. Вот пошаговая инструкция для начинающих:","type":"unstyled","key":"ceavu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5jvg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" 1. **Подготовьте инструменты**","type":"unstyled","key":"a3i6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- **Текстовый редактор**: VS Code, Sublime Text, Atom (для написания кода).","type":"unstyled","key":"d98t1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- **Браузер**: Chrome, Firefox (для тестирования).","type":"unstyled","key":"8cao3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- **Локальный сервер** (опционально): XAMPP или Live Server (расширение для VS Code).","type":"unstyled","key":"f7cir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ehf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. **Создайте структуру файлов**","type":"unstyled","key":"ee4n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте папку для проекта и внутри нее добавьте файлы:","type":"unstyled","key":"cogs8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"1ke07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ваш_сайт/","type":"unstyled","key":"7t1t0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ├── index.html # Главная страница","type":"unstyled","key":"dk93k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ├── style.css # Стили","type":"unstyled","key":"9ea86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ├── script.js # Скрипты","type":"unstyled","key":"dju9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" └── images/ # Папка для изображений","type":"unstyled","key":"2nnnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"47fio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" 3. **Напишите HTML-каркас**","type":"unstyled","key":"4nav5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте `index.html` и добавьте базовую разметку:","type":"unstyled","key":"87fbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```html","type":"unstyled","key":"4kotu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"chf2s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"28j0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1s8ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"cr0r4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"dg44u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Мой первый сайт","type":"unstyled","key":"8d4g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"44o1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"94ih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7d2ph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"doqro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Привет, мир!

","type":"unstyled","key":"3gbcd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"ebffo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"u4h0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это мой сайт, написанный вручную.

","type":"unstyled","key":"bhnha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7j4j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"h9rq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"355hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"90uif"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1hb0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"a6n7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" 4. **Добавьте стили (CSS)**","type":"unstyled","key":"8vr9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В файле `style.css` задайте оформление:","type":"unstyled","key":"381g6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```css","type":"unstyled","key":"83bo3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {","type":"unstyled","key":"d8q94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-family: Arial, sans-serif;","type":"unstyled","key":"5cgrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin: 0;","type":"unstyled","key":"fvlbq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 20px;","type":"unstyled","key":"cdfuf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #f0f0f0;","type":"unstyled","key":"av19o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"cd7sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ajpi0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"header {","type":"unstyled","key":"b8hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #333;","type":"unstyled","key":"3pq7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: white;","type":"unstyled","key":"2md7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 1rem;","type":"unstyled","key":"b4s1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center;","type":"unstyled","key":"co5qd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"eequg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"86eni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button {","type":"unstyled","key":"2liif"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 10px 20px;","type":"unstyled","key":"40jj5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #4CAF50;","type":"unstyled","key":"46fl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: white;","type":"unstyled","key":"1r87f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: none;","type":"unstyled","key":"agthp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" cursor: pointer;","type":"unstyled","key":"ehk66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"clmfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5opk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button:hover {","type":"unstyled","key":"44s23"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #45a049;","type":"unstyled","key":"7q9ot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"9djap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"3sj2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"28mqq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" 5. **Добавьте интерактивность (JavaScript)**","type":"unstyled","key":"de31h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В файле `script.js` напишите простой скрипт:","type":"unstyled","key":"7s8m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```javascript","type":"unstyled","key":"26soi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('myButton').addEventListener('click', function() {","type":"unstyled","key":"f4hqu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" alert('Кнопка работает! \uD83C\uDF89');","type":"unstyled","key":"egd4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"unstyled","key":"8k04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"aca8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9mul9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. **Протестируйте сайт локально**","type":"unstyled","key":"7reru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Откройте файл `index.html` в браузере (двойной клик по файлу).","type":"unstyled","key":"13af9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Используйте **инструменты разработчика** (F12 в браузере) для отладки.","type":"unstyled","key":"6ckr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9b8ct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" 7. **Адаптируйте под мобильные устройства**","type":"unstyled","key":"fdo8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте в `style.css` медиа-запросы:","type":"unstyled","key":"ajdb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```css","type":"unstyled","key":"2pgqu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@media (max-width: 768px) {","type":"unstyled","key":"4sc55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" body {","type":"unstyled","key":"3ek5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 10px;","type":"unstyled","key":"crvp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"d1h0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" h1 {","type":"unstyled","key":"cg3cc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-size: 1.5rem;","type":"unstyled","key":"f5ggc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"d8p15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"cckn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"e9tl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5867j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"---","type":"unstyled","key":"e13d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"66lfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8. **Добавьте больше страниц (опционально)**","type":"unstyled","key":"e4hbu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте новые HTML-файлы (например, `about.html`, `contact.html`) и свяжите их через меню:","type":"unstyled","key":"83o38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```html","type":"unstyled","key":"2qol3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"70bh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"5v2s1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6rr5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"---","type":"unstyled","key":"2q1lu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bqihj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9. **Оптимизируйте и опубликуйте сайт**","type":"unstyled","key":"1fssp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хостинг и домен:","type":"unstyled","key":"62bsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- **Бесплатные варианты**: GitHub Pages, Netlify, Vercel.","type":"unstyled","key":"d3qg1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- **Платные**: Bluehost, Hostinger (для сложных проектов).","type":"unstyled","key":"3r4lf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8rmha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как залить на GitHub Pages:","type":"unstyled","key":"ahb4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Создайте репозиторий на GitHub.","type":"unstyled","key":"boc8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Загрузите файлы через Git или интерфейс GitHub.","type":"unstyled","key":"3kkms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. В настройках репозитория активируйте GitHub Pages (ветка `main`, папка `/root`).","type":"unstyled","key":"afu9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"65jv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ваш сайт будет доступен по адресу: `ваш_логин.github.io/название_репозитория`.","type":"unstyled","key":"344gh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"qagm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10. **Дополнительные возможности**","type":"unstyled","key":"es675"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- **Фреймворки**: ","type":"unstyled","key":"7s05k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" - Для фронтенда: React, Vue.js, Angular.","type":"unstyled","key":"ckqtb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" - Для бэкенда: Node.js + Express, Django, Ruby on Rails.","type":"unstyled","key":"2ak3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- **Препроцессоры**: Sass (для CSS), TypeScript (для JavaScript).","type":"unstyled","key":"540u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- **Сборщики**: Webpack, Gulp (для автоматизации задач).","type":"unstyled","key":"5r2kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b79u4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Пример сложной структуры для продвинутых проектов:","type":"unstyled","key":"4pevr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"e3hg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"проект/","type":"unstyled","key":"74l4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ├── src/","type":"unstyled","key":"1feh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" │ ├── index.html","type":"unstyled","key":"23ona"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" │ ├── styles/","type":"unstyled","key":"2tf3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" │ │ ├── main.scss","type":"unstyled","key":"2fl6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" │ │ └── _variables.scss","type":"unstyled","key":"71ams"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" │ └── scripts/","type":"unstyled","key":"d2hum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" │ └── app.js","type":"unstyled","key":"bdets"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ├── public/ # Готовые файлы после сборки","type":"unstyled","key":"6qn5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" └── package.json # Конфигурация зависимостей","type":"unstyled","key":"5l3cb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"23tns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"69h44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"unstyled","key":"ba6vs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. **Изучите основы**: HTML, CSS, JavaScript — база для любого сайта.","type":"unstyled","key":"1561v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. **Практикуйтесь**: Создавайте мини-проекты (например, todo-лист, галерею изображений).","type":"unstyled","key":"5ec2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. **Используйте документацию**: MDN Web Docs, W3Schools, freeCodeCamp.","type":"unstyled","key":"b4g3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. **Вдохновляйтесь**: Анализируйте код популярных сайтов через «Инспектор» в браузере (F12).","type":"unstyled","key":"aei9p"},{"data":{"image":{"id":"67fa4d5832525752e798c451"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7bmg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e0bne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Даже крупные сайты вроде Google или Facebook начинались с простых HTML-страниц. Главное — начать и не бояться экспериментировать! \uD83D\uDCBB\uD83D\uDE80","type":"unstyled","key":"3tv0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"jyFfeqq5t8wfwp3S4OEo"}],"entityMap":{}},"mentions":[]}