0: Добро пожаловать обратно. Давай теперь напишем нашу самую 1 строку кода и создадим нашу самую 1, очень маленькую веб страницу смол.

1: Итак, вот мы вернулись в vs code и давайте теперь закроем все это, а затем перейдём вот к этой 1 вкладке вот эта вкладка проводника так вот, в vs code нам всегда нужно находиться внутри какой-то папки.

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

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

4: Я называю эту папку Ван и тест Зиро Ван энд тест.

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

6: Как вы видите, у нас появился новый экран приветствия и здесь мы можем нажать на кнопку создать файл, чтобы добавить наш 1 файл в проект. Или мы могли бы также сделать это, наведя курсор. Вот на

7: Левую боковую панель и нажав здесь на значок нового файла. Итак, это 2 разных способа создания новых файлов в Папке проекта. И на самом деле я предпочитаю вот этот. Итак, мы собираемся создать наш

8: Самую 1 веб страницу, а веб страница это по сути просто html файл. Давайте назовём это индексом, это html, так что по сути это просто файл с расширением html файл.

9: И мы называем его индекс, потому что это имя по умолчанию для 1 страницы любого web сайта. Так что индекс это, по сути, всегда точка входа на любой веб сайт. И поэтому всем веб проектам всегда нужен индекс.

10: Это html все в порядке, так что имей это ввиду всегда обращайся к указателю самой 1 страницы, это html сейчас моя цель в этой лекции ещё не состоит в том, чтобы по настоящему научить тебя html прям.

11: Сейчас все, что я хочу сделать, это создать этот файл и добавить в него немного кода, а затем посмотреть результат в браузере, просто чтобы ты мог написать свою 1 строку кода и увидеть результат написания этого кода в реальном времени.

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

13: Код для этого просто поставьте восклицательный знак. Вот так. А затем нажмите тёп на клавиатуре или просто нажмите здесь таким образом.

14: Мы получаем очень простую и почти пустую html структуру, так что у неё есть голова и приятель, но ещё раз повторю, что мы узнаем обо всем этом чуть позже, на данный момент все, что меня здесь интересует.

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

16: Затем давай заглянем внутрь тела. Так вот, на самом деле это та часть, которую мы сможем увидеть в браузере. А здесь просто напишите этот знак меньше, чем затем. Н, что означает заголовок 1, а затем символ больше, чем

17: Вот так же, как вот здесь, и ты видишь, что тогда vs code фактически автоматически поместил сюда эту другую часть, так что, по сути, закрываемая часть.

18: Но опять же, на данный момент это не имеет особого значения, давай просто напишем здесь немного текстового контента и я напишу hello, world, что является своего рода стандартом, когда ты пишешь свою 1 строку кода на любом языке программирования.

19: Так что привет. Мир это действительно давняя традиция. Давай попробуем ещё раз. Ещё раз повторю, что это не просто символ. А теперь давай попробуем букву р, которая обозначает абзац и опять же вру.

20: Под автоматически закрывает абзац для нас.

21: Так что давайте представим, что меня зовут джонас, а вы, конечно же, будете использовать своё собственное имя, и это моя самая 1 веб страница вери фест.

22: Теперь все в порядке, теперь мы можем сохранить его, нажав команд или ctrl с. Или же вы можете перейти сюда в меню файл, и у нас также активировано автоматическое сохранение, так что.

23: То если мы просто покинем эту вкладку, например, щёлкнув здесь to fail, также будет автоматически сохранён. Так что давай действительно попробуем это сделать. И вот мы здесь. Итак, теперь файл сохранён и

24: Возможно, ты также заметил, что здесь немного изменилось форматирование, и это произошло из за красивого расширения, которое мы установили в последнем видео. Так что помни, что самое красивое расширение это автоматическое форматирование или кодирование при

25: Каждом сохранении именно это сейчас и произошло.

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

27: Гарантирует, что ваш код всегда будет выглядеть так же, как этот код на видео. Отлично. Итак, мы только что написали нашу 1 строку кода или на самом деле первые 2 строки кода. И вот теперь у нас есть этот индекс. Вот

28: Файл, и мы можем открыть его в браузере. Так что давай перейдём в папку нашего проекта, где находится этот файл. И в моём случае не забывай, что это находится на рабочем столе, так что я могу просто открыть его. И вот теперь у

29: У нас есть этот индекс, вот html файл, который мы ранее создали в vs code, и теперь, чтобы открыть его в google chrome или в любом другом браузере, нам просто нужно дважды щёлкнуть по файлу, или мы можем просто щёлкнуть по нему правой кнопкой мыши и затем.

30: Открыть в google chrome, google chrome. Давай так и сделаем. Вот и все. Вот наша самая 1 веб страница, которую мы только что создали вручную в vs code, это здорово, и это действительно потрясающе.

31: Если хочешь знать моё мнение, так что поздравляю и желаю успехов в работе над твоей самой 1 веб страницей. Здесь давай просто немного отодвинем её в сторону, а затем перейдём к vs code с другой стороны, так?

32: Что с этого момента наш код всегда будет находиться здесь слева, а затем справа в браузере, чтобы мы могли видеть наши изменения, и чтобы у нас здесь было немного больше места, мы можем снова нажать на эту вкладку здесь, а затем свернуть эту боковую панель и дайте нам

33: Больше места для нашего реального кода. Итак, ты видишь, что здесь у нас написано? Привет мир крупным и жирным шрифтом. Так вот здесь это соответствует 1 элементу, а ниже у нас

34: Есть этот абзац, который переведён в этот визуальный элемент. У нас также есть фактическое название страницы здесь в заголовке этой вкладки. Итак, моя 1 веб страница это то, что мы имеем

35: Здесь, и это именно то, что мы ввели здесь в элемент заголовка, верно, right ещё раз повторю код, который мы написали здесь, в нашем html документе теперь отображается в реальном мире, в этом реальном веб браузере.

36: Кстати, о веб браузере. Я использую google кроум для тестирования всего кода, который мы собираемся написать на протяжении всего курса. И поэтому я действительно советую вам также использовать google кроум для постоянной проверки кода.

37: Который вы пишите, это ещё раз гарантирует, что вы получите точно такие же результаты, какие вы видите в видеороликах курса. Хорошо. И этого на самом деле достаточно для этого самого 1 видео с кодированием. И я

38: Я надеюсь, что ты действительно усвоил идеи, которые я хотел показать тебе в этой лекции, так что, по сути начнём с создания папки проекта, а затем откроем эту папку проекта в vs code. Итак, вот в этой пап

39: Тестовой папки. Затем внутри неё создадим html файл, затем добавим в этот файл некоторый код и, наконец, откроем html. Документ в реальном браузере. Например, как в google chrome, где мы затем видим этот результат.

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