Рабочее место: редактор, предпросмотр и проверки

Рабочее место веб-разработчика — редактор файла, предпросмотр, где браузер рисует страницу, и проверки. Инструменты разработчика (F12) показывают её дерево.

Три окна

Практика устроена одинаково во всех уроках, и три окна, которые вы увидите, это всё, что нужно:

1. Редактор. Это текстовое поле, где вы пишете и правите файл. Он подсвечивает код цветом, чтобы было легче читать, но в остальном это обычный текст.
2. Предпросмотр. Рядом показано, как браузер рисует ваш файл. Через долю секунды после того, как вы перестали печатать, он обновляется сам.
3. Проверки. Под предпросмотром список того, чего ждёт задача: «есть заголовок», «в нём название вашего проекта» и так далее. Что получилось, помечено галочкой.

Так же устроена работа вебмастера: пишете, смотрите, правите. Только здесь рядом сидит помощник, который сразу говорит, что уже есть.

Если вы запутались, под редактором есть кнопка «Начать заново» (она вернёт исходный текст) и «Показать решение» (с подтверждением, чтобы вы не нажали случайно). Решение показано как разница с вашим файлом: видно, что добавить и что убрать.

Проверьте себя: как устроен цикл работы в практике?

Вы правите файл, предпросмотр обновляется, проверки читают страницу, и вы смотрите, какие из них ещё не прошли.

Файлы

Сайт состоит из файлов. Пока он простой, в нём один файл: index.html, страница. Когда в урок придут стили и сценарии, появятся ещё два: styles.css для оформления и script.js для поведения. В редакторе они будут вкладками. Имя index.html не случайно: так по умолчанию называется главная страница любого сайта.

Ваша работа сохраняется сама, в браузере. Закройте вкладку и вернитесь завтра: всё будет на месте. Каждая эпоха курса хранит свою версию сайта отдельно.

Проверки читают страницу, а не буквы

Проверки не сверяют ваш текст с образцом. Они смотрят на готовую страницу, как её собрал браузер: есть ли на ней заголовок, что в нём написано, какой у блока цвет. Поэтому одну и ту же задачу можно решить по-разному, и проверки это примут.

А ещё проверки знают ваш проект. Если вы вписали в настройках своё название, задача попросит именно его. Проверка не придирается к чужим словам: ей нужно, чтобы ваши были на месте.

Песочница

Код, который вы пишете, выполняется в «песочнице»: изолированной коробке. Страница видна в окне, но она ничего не может отправить в интернет и не видит ничего, кроме себя. Это не недоверие к вам. Просто привычка веба: любой код, пришедший не от вас, запускают в ограничении, а то, что вы написали сами или переписали с форума, тоже может ошибиться. Так можно пробовать смело.

Инструменты разработчика

У каждого браузера есть встроенный набор для тех, кто делает сайты, и он есть и у вас, ничего ставить не нужно. Открыть можно клавишей F12, сочетанием Ctrl+Shift+I (на Mac Cmd+Option+I) или правым щелчком по странице и пунктом «Исследовать».

Три вкладки, которые пригодятся первыми:

• Элементы. Дерево страницы: из каких элементов она состоит, и какие стили на них действуют. Если вы щёлкнете по элементу в дереве, он подсветится на странице. И наоборот: можно навести на страницу и найти ей соответствующий элемент.
• Консоль. Сюда браузер пишет сообщения и ошибки страницы. Пока сайт простой, там пусто, и это хорошо.
• Сеть. Список запросов, которые сделала страница: что скачано, сколько весит, как долго. Это пригодится в первой части, когда мы разберём, как страница путешествует по сети.

Одно важное свойство: в инструментах вы можете менять страницу. Дважды щёлкните по тексту в дереве и перепишите его, и страница изменится. Но менять вы будете только свою копию в своём браузере. Обновите страницу, и всё вернётся. Для пробы это безопасно: ничего не сломать.

Попробуйте сами на схеме: нажмите на строку, элемент или узел дерева, а потом «забудьте» закрывающий тег и посмотрите, что произойдёт.

Забыть закрывающий тег </h1> Нажмите на строку, на элемент или на узел дерева: он подсветится везде.

Файл

1. <!doctype html>
2. <html lang="ru">
3. <body>
4. <h1>Ваш проект</h1>
5. <p>Кто вы и что делаете</p>
6. </body>
7. </html>

Предпросмотр

Ваш проект Кто вы и что делаете

Дерево элементов

• html lang="ru"
• body
• h1
• p

• ✓ На странице есть один h1: выполнено
• ✓ Текст заголовка совпадает с названием проекта: выполнено
• ✓ Есть абзац с описанием, отдельный от заголовка: выполнено

Проверьте себя: меняет ли правка в инструментах разработчика чужой сайт?

Нет. Вы меняете только свою копию в своём браузере, и после обновления страницы всё возвращается.

Небольшое введение в разметку

Для первой практики вам нужна ровно одна идея. Страница это текст, в котором пометками отмечено, что в нём главное. Пометка пишется в угловых скобках и называется тегом. Заголовок первого уровня оборачивают в <h1> и </h1>, абзац в <p> и </p>. Косая черта в закрывающем теге говорит: элемент закончился.

<h1>Название проекта</h1>
<p>Одна фраза о том, кто вы.</p>

Всё, что есть в этих трёх строках: открывающий тег, текст, закрывающий тег. Подробнее в части 2, а сейчас нужно только почувствовать, как текст становится страницей.

Практика

Ниже ваша первая страница. В ней уже написано название вашего проекта и описание из вашего брифа, но просто текстом. Разметьте их, и проверки загорятся. Потом откройте инструменты разработчика, найдите свой заголовок в дереве и щёлкните по нему.

Подсказка: страница находится внутри окна предпросмотра. В дереве раскройте элемент iframe и ниже его body.