01. Введение в веб-разработку

Введение в веб-разработку

Веб-разработка — это процесс создания сайтов и веб-приложений. Чтобы начать, достаточно компьютера, браузера и простого текстового редактора.

Что делает сайт «работающим»

  • HTML — описывает структуру страницы: заголовки, параграфы, изображения, списки.
  • CSS — задаёт внешний вид: цвета, шрифты, отступы, расположение элементов.
  • Bootstrap — это библиотека готовых стилей и компонентов (кнопки, карточки, сетка и т. д.), ускоряющая верстку.

Установка редактора кода

Самый удобный и бесплатный редактор для новичков — Visual Studio Code. Он лёгкий, понятный и поддерживает подсветку синтаксиса.

Шаги по установке:

  • Перейдите на сайт https://code.visualstudio.com/
  • Скачайте версию для вашей операционной системы (Windows, Linux, macOS).
  • Установите VS Code, следуя инструкциям установщика.

Настройка рабочего места

После установки откройте VS Code и создайте новую папку, например: 

C:\Users\ВашеИмя\Documents\my-first-site
Затем в VS Code выберите File → Open Folder и откройте эту папку.

Создание первой веб-страницы

Теперь создадим новый файл:
  • Нажмите File → New File
  • Сохраните его как 
    index.html

Вставьте следующий код: 


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Мой первый сайт</title>
</head>
<body>
  <h1>Привет, ITspecialist!</h1>
  <p>Это мой первый HTML-документ.</p>
</body>
</html>

Что здесь происходит

  • <!DOCTYPE html>
    — сообщает браузеру, что это документ в формате HTML5.
  • <html lang="ru">
    — начало страницы, язык документа — русский.
  • <head>
    — техническая информация: кодировка, название, подключаемые стили и скрипты.
  • <body>
    — всё, что видит пользователь: текст, изображения, ссылки и т. д.

Запуск страницы в браузере

Существует два способа:
  • Просто дважды щёлкните по файлу 
    index.html
    — он откроется в браузере.
  • Или установите расширение Live Server для VS Code — оно автоматически обновляет страницу при каждом сохранении.

Проверка результата

Вы должны увидеть белую страницу с надписью:
Привет, ITspecialist! Это мой первый HTML-документ.

Экспериментируем

Попробуйте изменить заголовок или добавить ещё один параграф: 

<h2>Мой первый шаг в веб-разработке</h2>
<p>Я учусь создавать сайты с нуля!</p>
Сохраните файл и обновите страницу — изменения появятся мгновенно.

Вывод

Поздравляю — вы создали свой первый сайт! Вы узнали:
  • Что такое HTML, CSS и Bootstrap.
  • Как установить редактор Visual Studio Code.
  • Как создать и запустить первую HTML-страницу.