Знакомство с курсом и компьютерная грамотность

Добро пожаловать на курс frontend-разработки! В этом уроке разберёмся, как устроено обучение и чем вам помогут менторы, освежим базовую компьютерную грамотность — файлы, папки, расширения, горячие клавиши, браузер — и подготовим рабочее место: установим VS Code, Google Chrome и полезные расширения. Без этой базы дальше будет трудно, поэтому не пропускайте урок, даже если кажется, что всё это вы уже знаете.

Как устроено обучение

Курс идёт по месяцам. Каждый месяц — отдельная большая тема: сначала вёрстка на HTML и CSS, потом JavaScript, затем React, TypeScript и подготовка к работе. Каждый урок построен одинаково:

1. Теория простыми словами — что это за инструмент и зачем он нужен.
2. Примеры кода — небольшие рабочие фрагменты, которые можно скопировать и запустить.
3. Разбор — что делает каждая строчка.
4. Практика — задания в конце урока, от простого к сложному.
5. Итоги — короткая шпаргалка, к которой удобно возвращаться.

Главное правило: программирование учится руками. Прочитать урок — это примерно 20% дела. Остальные 80% — написать код самому, ошибиться, найти ошибку и исправить её.

Роль менторов

Ментор — это опытный разработчик, который сопровождает вас во время обучения. Его задача не «решить задачу за вас», а помочь вам научиться решать её самостоятельно. Обычно ментор:

• объясняет непонятные места и отвечает на вопросы;
• проверяет практические задания и подсказывает, что можно улучшить;
• даёт дополнительную практику на занятиях;
• помогает не застрять надолго на одной проблеме.

Как именно проходят занятия, где задавать вопросы, в какие сроки сдавать задания и как проверяются работы — ментор расскажет на первой встрече. Запишите эти правила себе, чтобы не потерять.

Компьютерная грамотность

Разработчик весь день работает с файлами и папками. Если вы уверенно в них ориентируетесь, на код останется больше сил.

Файлы и папки

Файл — это именованный кусок данных на диске: текст, картинка, программа. Папка (директория) — «коробка», в которой лежат файлы и другие папки. Вместе они образуют дерево:

Документы/
└── frontend-course/
    ├── lesson-01/
    │   ├── index.html
    │   └── style.css
    └── lesson-02/
        └── index.html

Здесь frontend-course — папка курса, внутри неё папки уроков, а в них уже файлы с кодом.

Путь — это «адрес» файла, по которому его можно найти:

Windows: C:\Users\Aida\Documents\frontend-course\lesson-01\index.html
macOS:   /Users/aida/Documents/frontend-course/lesson-01/index.html

Windows разделяет папки обратной косой чертой \, а macOS и Linux — обычной /. В вебе (в HTML и CSS) всегда используется /.

Правила именования

Чтобы не ловить странные ошибки, называйте файлы и папки для кода так:

• только латинские буквы, цифры, дефис - и подчёркивание _;
• без пробелов: my-site, а не my site;
• маленькими буквами: index.html, а не Index.HTML.

Плохо:  Мой сайт/Главная Страница.html
Хорошо: my-site/index.html

Расширения файлов

Расширение — это часть имени после последней точки: index.html → .html. По расширению система и программы понимают, что за файл перед ними.

По умолчанию Windows и macOS прячут расширения. Из-за этого легко создать файл index.html.txt, который выглядит как index.html, но браузер откроет его как обычный текст. Включите показ расширений:

• Windows 11: Проводник → «Просмотр» → «Показать» → «Расширения имён файлов».
• macOS: Finder → «Настройки» → «Дополнения» → «Показывать все расширения имён файлов».

Горячие клавиши

Горячие клавиши экономят часы. Выучите хотя бы эти — они работают почти везде (на macOS вместо Ctrl нажимайте Cmd):

Браузер

Браузер — это программа, которая скачивает HTML, CSS и JavaScript с сервера (или с вашего диска) и превращает их в страницу, которую видит человек. Для frontend-разработчика браузер — главный инструмент проверки работы.

Самые популярные браузеры — Chrome, Firefox, Safari и Edge. В курсе мы используем Google Chrome: у него удобные инструменты разработчика (DevTools), и большинство примеров в интернете показаны именно в нём.

Что полезно знать о браузере

• Адресная строка показывает адрес страницы. Если открыть свой файл с диска, адрес будет начинаться с file:///.
• Обновить страницу — F5 или Ctrl + R (Cmd + R). Сбросить кэш и обновить — Ctrl + Shift + R.
• DevTools (инструменты разработчика) открываются клавишей F12 или Ctrl + Shift + I (Cmd + Option + I на macOS). Там можно посмотреть HTML-код страницы, поменять стили «на лету» и увидеть ошибки.
• Посмотреть код страницы — правый клик → «Просмотреть код» (Inspect).

Готовим рабочее место

Установка Google Chrome

1. Откройте сайт google.com/chrome в любом браузере.
2. Нажмите «Скачать Chrome» и запустите установщик.
3. После установки можно сделать Chrome браузером по умолчанию — тогда HTML-файлы будут открываться в нём двойным щелчком.

Установка VS Code

Visual Studio Code (VS Code) — бесплатный редактор кода от Microsoft. Это не Microsoft Word для программистов, а «умный блокнот»: он подсвечивает код разными цветами, подсказывает названия тегов и свойств, находит ошибки.

1. Откройте code.visualstudio.com и скачайте версию для своей системы.
2. Windows: запустите установщик. На шаге «Дополнительные задачи» отметьте «Добавить в PATH» и «Добавить действие "Открыть с помощью Code"» в контекстное меню — так папку проекта можно будет открыть правым кликом.
3. macOS: распакуйте архив и перетащите Visual Studio Code в папку «Программы».
4. Запустите VS Code. Интерфейс можно перевести на русский через расширение Russian Language Pack, но лучше сразу привыкать к английскому: все инструкции в интернете — на нём.

Первый проект в VS Code

1. Создайте папку frontend-course, а в ней папку lesson-01.
2. В VS Code: File → Open Folder и выберите lesson-01. Всегда открывайте именно папку проекта, а не отдельный файл.
3. Слева в панели Explorer нажмите на значок «New File» и создайте index.html.
4. Внутри файла наберите ! и нажмите Tab — VS Code сам вставит заготовку страницы (это встроенная функция Emmet).
5. Сохраните Ctrl + S.

Получится примерно такой код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Привет, мир!</h1>
</body>
</html>

Строку <h1>Привет, мир!</h1> допишите сами. Что значит каждая часть — подробно разберём в уроке HTML5: основные теги. Пока просто откройте файл в Chrome двойным щелчком — вы увидите крупный заголовок. Это ваша первая веб-страница.

Полезные горячие клавиши VS Code

На macOS Ctrl заменяется на Cmd, а Alt — на Option.

Полезные расширения VS Code

Расширения добавляют редактору новые возможности. Открыть магазин расширений — значок из четырёх квадратиков слева или Ctrl + Shift + X. Наберите название и нажмите Install.

После установки Live Server откройте index.html, кликните правой кнопкой по коду и выберите Open with Live Server. Страница откроется по адресу вида http://127.0.0.1:5500/index.html. Теперь меняйте текст, сохраняйте — и браузер обновится сам.

Чтобы Prettier форматировал код при каждом сохранении, откройте настройки (Ctrl + ,), найдите Format On Save и включите галочку. Затем в палитре команд выберите Format Document With… → Configure Default Formatter → Prettier.

Если хотите, настройки можно задать и текстом: палитра команд → Preferences: Open User Settings (JSON):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on"
}

• formatOnSave — форматировать при сохранении;
• defaultFormatter — каким расширением форматировать (идентификатор Prettier);
• tabSize — отступ в 2 пробела;
• wordWrap — переносить длинные строки, чтобы не листать вбок.

Как правильно задавать вопросы

Умение задать хороший вопрос — навык разработчика, а не только ученика. Хороший вопрос экономит время и вам, и ментору.

Сначала попробуйте сами

1. Перечитайте текст ошибки — часто там прямо написано, что не так.
2. Проверьте очевидное: сохранён ли файл, тот ли файл открыт в браузере, нет ли опечатки.
3. Поищите ошибку в интернете и в документации MDN.
4. Если за 20–30 минут не продвинулись — смело спрашивайте.

Из чего состоит хороший вопрос

• Что хотели сделать: «Хочу, чтобы картинка была по центру».
• Что сделали: код (текстом, а не фото экрана с телефона!).
• Что ожидали и что получилось: «Ожидала по центру, а она прижата влево».
• Что уже попробовали: «Пробовала text-align: center на самой картинке».

Пример плохого и хорошего вопроса:

Плохо:
"У меня не работает, помогите"

Хорошо:
"Подключила style.css, но стили не применяются.
В index.html пишу <link rel="stylesheet" href="styles.css">,
файл лежит рядом с index.html. В DevTools во вкладке Console
ошибка 404 на styles.css. Что я делаю не так?"

Во втором вопросе ментор сразу видит подсказку: файл называется style.css, а подключён styles.css.

Практика

1. Порядок на диске. Включите показ расширений файлов. Создайте папку frontend-course с подпапками lesson-01, lesson-02, lesson-03. Результат: в проводнике видна аккуратная структура, все имена латиницей и без пробелов.
2. Рабочее место. Установите Chrome и VS Code, а в VS Code — Live Server, Prettier и Auto Rename Tag. Результат: в списке расширений (Ctrl + Shift + X → Installed) видны все три.
3. Первая страница. В lesson-01 создайте index.html через ! + Tab, добавьте заголовок <h1> со своим именем и откройте через Live Server. Результат: страница обновляется сама после каждого Ctrl + S.
4. Горячие клавиши. В том же файле, не трогая мышь, продублируйте строку с заголовком три раза, переместите одну строку вверх и закомментируйте другую. Результат: вы сделали это только клавиатурой.
5. Вопрос ментору. Нарочно сломайте страницу: переименуйте index.html в Index.html.txt и попробуйте открыть. Опишите проблему по схеме «что хотел → что сделал → что ожидал → что получил». Результат: готовый текст вопроса, по которому другой человек поймёт проблему без уточнений.

Итоги

• Обучение строится на практике: читайте урок, но обязательно пишите код сами.
• Ментор помогает научиться решать задачи, а не решает их за вас; правила занятий уточните у ментора.
• Имена файлов для кода — латиницей, маленькими буквами, без пробелов; включите показ расширений.
• Chrome — браузер для проверки работы, DevTools открываются по F12.
• VS Code — основной редактор; всегда открывайте папку проекта целиком.
• Live Server и Prettier заметно ускоряют работу с первого дня.
• Хороший вопрос содержит цель, код, ожидание, результат и уже испробованные варианты.