{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В мире веб-разработки HTML, CSS и JavaScript — это три кита, на которых держится всё. Если вы хотите создавать красивые, функциональные и интерактивные сайты, то без этих технологий не обойтись. Давайте разберёмся, что это за инструменты, как они работают вместе и с чего начать свой путь в веб-разработке.","type":"unstyled","key":"dmph6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDF39HTML: скелет вашего сайта\uD83C\uDF39","type":"header-three","key":"daa1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML (HyperText Markup Language) — это язык разметки, который отвечает за структуру веб-страницы. Представьте, что сайт — это дом. Тогда HTML — это его фундамент и стены. С помощью HTML вы создаёте заголовки, параграфы, списки, изображения, ссылки и другие элементы.","type":"unstyled","key":"8u3ag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример простого HTML-кода:","type":"unstyled","key":"8mgkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"31gvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"39d41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"b078j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Мой первый сайт ","type":"unstyled","key":"fae45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"638pv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"b1ted"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Привет, мир!

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

Это мой первый сайт.

","type":"unstyled","key":"4tsud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"2bd8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"39mme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Run HTML","type":"unstyled","key":"1gd5u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код создаст страницу с заголовком \"Привет, мир!\" и текстом \"Это мой первый сайт.\"","type":"unstyled","key":"1cl7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDF39CSS: стиль и красота\uD83C\uDF39","type":"header-three","key":"4m2p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если HTML — это скелет, то CSS (Cascading Style Sheets) — это кожа и одежда. CSS отвечает за внешний вид сайта: цвета, шрифты, отступы, анимации и многое другое. Благодаря CSS ваш сайт становится визуально привлекательным.","type":"unstyled","key":"3l0ka"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример CSS-кода:","type":"unstyled","key":"avjll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body { ","type":"unstyled","key":"euutf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #f0f0f0; font-family: Arial, sans-serif; ","type":"unstyled","key":"d0amm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} \nh1 { ","type":"unstyled","key":"2kpll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: #333; text-align: center;","type":"unstyled","key":"evg1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } \np { ","type":"unstyled","key":"7ht06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: #666; font-size: 18px; ","type":"unstyled","key":"pnmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"adub2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код сделает фон страницы светло-серым, заголовок — тёмным и выровненным по центру, а текст — серым и крупным.","type":"unstyled","key":"86l3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDF39JavaScript: оживляем сайт\uD83C\uDF39","type":"header-three","key":"70sp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript — это язык программирования, который добавляет интерактивность на ваш сайт. С его помощью можно создавать анимации, обрабатывать действия пользователя (например, клики), загружать данные без перезагрузки страницы и многое другое.","type":"unstyled","key":"98tfk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример простого JavaScript-кода:","type":"unstyled","key":"ei1bu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let button = document.querySelector('button');","type":"unstyled","key":"3c6kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button.addEventListener('click', function() { ","type":"unstyled","key":"112at"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" alert('Вы нажали на кнопку!'); ","type":"unstyled","key":"de835"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"unstyled","key":"4nf6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код добавит обработчик события на кнопку: при клике на неё появится всплывающее окно с сообщением.","type":"unstyled","key":"70v16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDF39Как начать изучать HTML, CSS и JavaScript?\uD83C\uDF39","type":"header-three","key":"a7aur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Практика, практика и ещё раз практика. Начните с простых проектов: Cоздайте страницу-визитку, блог или портфолио. Постепенно усложняйте задачи.","type":"ordered-list-item","key":"2ug13"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":12,"offset":49},{"key":1,"length":12,"offset":63},{"key":2,"length":10,"offset":78}],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Используйте онлайн-ресурсы. Такие платформы, как HTML Academy, freeCodeCamp и Codecademy, помогут вам освоить основы.","type":"ordered-list-item","key":"q54j"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":12,"offset":56}],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Изучайте документацию. Официальные документы, такие как MDN Web Docs, — это ваш лучший друг.","type":"ordered-list-item","key":"bse4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Смотрите видеоуроки. YouTube и платформы вроде Udemy предлагают множество бесплатных и платных курсов.","type":"ordered-list-item","key":"27d5l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Работайте над реальными проектами. Попробуйте сделать сайт для друга или участвуйте в открытых проектах на GitHub.","type":"ordered-list-item","key":"6db4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDF39Советы для новичков\uD83C\uDF39","type":"header-three","key":"43lsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Не бойтесь ошибаться. Ошибки — это часть процесса обучения. Чем больше вы экспериментируете, тем быстрее научитесь.","type":"unordered-list-item","key":"fu2kv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Разбирайте чужой код. Изучение кода других разработчиков поможет вам понять, как решать те или иные задачи.","type":"unordered-list-item","key":"efht2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Следите за трендами. Веб-разработка постоянно развивается. Узнавайте о новых технологиях, таких как Flexbox, Grid, ES6+ и фреймворках (React, Vue.js).","type":"unordered-list-item","key":"fddt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDF39Заключение\uD83C\uDF39","type":"header-three","key":"9jh77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML, CSS и JavaScript — это мощные инструменты, которые открывают двери в мир веб-разработки. Начните с малого, постепенно углубляйте свои знания и не бойтесь пробовать новое. Помните, что даже самые опытные разработчики начинали с простого \"Hello, World!\". Удачи в вашем пути! \uD83D\uDE80","type":"unstyled","key":"c09s3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вам понравилась статья, ставьте лайк и подписывайтесь на канал. До встречи!\uD83D\uDE0A","type":"unstyled","key":"9rsk5"},{"data":{"image":{"id":"67dd1adff805f534114376bb"},"contents":{"67dd1adff805f534114376bb":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ebjhd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fk66a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ToFCZoNOo5zSnaicHPPt"}],"entityMap":{"0":{"data":{"href":"https://htmlacademy.ru/","url":"https://htmlacademy.ru/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://www.freecodecamp.org/","url":"https://www.freecodecamp.org/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://www.codecademy.com/","url":"https://www.codecademy.com/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://developer.mozilla.org/ru/","url":"https://developer.mozilla.org/ru/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}