Сайт начинающего верстальщика

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7kvkk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":173,"offset":0,"style":"ITALIC"}],"text":"Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. В этом выпуске разберёмся, как и в чём написать и запустить HTML-код на своём компьютере.","type":"unstyled","key":"e8set"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Шаг 1. Качаем текстовый редактор","type":"header-two","key":"6lhlo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.","type":"unstyled","key":"1vdq5"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":30,"offset":11}],"inlineStyleRanges":[{"length":30,"offset":11,"style":"UNDERLINE"}],"text":"Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.","type":"unstyled","key":"emftl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b7a90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.","type":"unstyled","key":"edjj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Шаг 2. Запускаем редактор и осматриваемся","type":"header-two","key":"3i3vr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.","type":"unstyled","key":"77f2l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.","type":"unstyled","key":"898gh"},{"data":{"image":{"id":"5e8ef05875036f20b2446741"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"hs94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По шагам на скриншоте:","type":"unstyled","key":"anfe8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Add workspace folder — открывает меню выбора папки.","type":"unordered-list-item","key":"4rqm2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим новую папку personal_page в любом удобном месте и зайдём в неё.","type":"unordered-list-item","key":"ce35s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажмём Add.","type":"unordered-list-item","key":"4lvit"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.","type":"unstyled","key":"edph4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Шаг 3. Добавляем файлы","type":"header-two","key":"ernum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.","type":"unstyled","key":"9kp2b"},{"data":{"image":{"id":"5e8ef07a282cfa7ad137cfbb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2nhod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8bhpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Шаг 4. Делаем работу удобнее","type":"header-two","key":"f8b72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.","type":"unstyled","key":"5mc9m"},{"data":{"image":{"id":"5e8ef089aecc1b2535da00d1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"40urb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"70fkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Шаг 5. Добавляем код","type":"header-two","key":"d8l4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.","type":"unstyled","key":"bnj3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":"index.html","type":"unstyled","key":"634cg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"9qrhk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"32l1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"2c0cn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Сайт начинающего верстальщика ","type":"unstyled","key":"1ku9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"c71pl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"31lbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"betqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

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

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

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

","type":"unstyled","key":"8etrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" День первый. Как я забыл покормить кота ","type":"unstyled","key":"dh26c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить. ","type":"unstyled","key":"7fvh0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота. ","type":"unstyled","key":"1e8as"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"9nt64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"3069g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"417qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"boa15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7n3kd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"4628q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fa7v4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"ITALIC"}],"text":"style.css","type":"unstyled","key":"acvdf"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":54,"offset":34}],"inlineStyleRanges":[{"length":54,"offset":34,"style":"UNDERLINE"}],"text":"Скопируем код со стилями из файла https://htmlacademy.ru/assets/courses/299/outlines.css — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.","type":"unstyled","key":"7l0nq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Шаг 6. Запускаем код и смотрим на результат","type":"header-two","key":"47hf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.","type":"unstyled","key":"5kc3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.","type":"unstyled","key":"67l78"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":19,"offset":187}],"inlineStyleRanges":[{"length":19,"offset":187,"style":"UNDERLINE"}],"text":"Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.","type":"unstyled","key":"85j51"},{"data":{"image":{"id":"5e8ef1143e82e40c5e57c28f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8621o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.","type":"unstyled","key":"rlve"},{"data":{"image":{"id":"5e8ef121753f45590b48c3fb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"26ffj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы запустить код, нажмите кнопку Go Live на нижней панели.","type":"unstyled","key":"71t4r"},{"data":{"image":{"id":"5e8ef131282cfa7ad137cfcb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"deoap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.","type":"unstyled","key":"71chk"},{"data":{"image":{"id":"5e8ef14226b22d0e0e61c9c2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8e9lj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"gs0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Что мы сделали","type":"header-two","key":"eqfuu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установили и настроили редактор кода.","type":"unordered-list-item","key":"99inl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создали рабочую папку и добавили туда файлы нашего проекта.","type":"unordered-list-item","key":"4a0pe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Научились редактировать и сохранять файлы с кодом.","type":"unordered-list-item","key":"3isir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установили расширение, чтобы сразу видеть результат вёрстки.","type":"unordered-list-item","key":"dnrm"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":13,"offset":129}],"inlineStyleRanges":[{"length":13,"offset":129,"style":"UNDERLINE"},{"length":1,"offset":182,"style":"ITALIC"}],"text":"В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.\n","type":"unstyled","key":"dcbpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"7rLzwJQj4ZHhSsdVTB9b"}],"entityMap":{"0":{"data":{"href":"https://code.visualstudio.com/","url":"https://code.visualstudio.com/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://htmlacademy.ru/assets/courses/299/outlines.css","url":"https://htmlacademy.ru/assets/courses/299/outlines.css"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer","url":"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"http://l.htmlacademy.ru/digest?utm_source=yandex_dzen&utm_medium=special&utm_campaign=how_to_run_html_09042020"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}