Создай свой первый сайт вместе с нами

Урок 1. Введение в мир веб-разработки

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

Веб-разработка — одна из самых востребованных IT-профессий. С каждым годом количество сайтов и веб-приложений растёт, а вместе с ними — и потребность в квалифицированных специалистах. Современная веб-разработка делится на три основных направления:

  1. Frontend — создание видимой части сайта (интерфейс, анимации, взаимодействие с пользователем).
  2. Backend — программирование серверной логики (базы данных, API, безопасность).
  3. Fullstack — работа и с frontend, и с backend.

В этой статье мы разберём основы frontend-разработки, научимся создавать HTML-страницы и работать в Visual Studio Code — одном из лучших редакторов кода.

Что нужно для старта?

1. Текстовый редактор: Visual Studio Code

Visual Studio Code (VS Code) — бесплатный, мощный и удобный редактор кода от Microsoft. Он поддерживает все популярные языки программирования, имеет встроенный терминал, отладчик и тысячи расширений для ускорения разработки.

Почему именно VS Code?

  • Бесплатный и с открытым исходным кодом.
  • Кроссплатформенный (Windows, macOS, Linux).
  • Поддержка Git (удобная работа с версиями кода).
  • Огромное количество расширений (Emmet, Live Server, Prettier и др.).
  • Интеллектуальное автодополнение (IntelliSense).

Как установить?

  1. Перейдите на официальный сайт.
  2. Скачайте версию для вашей ОС.
  3. Запустите установщик и следуйте инструкциям.

2. Браузер для тестирования

Любой современный браузер (Chrome, Firefox, Edge) подойдёт для проверки HTML-страниц. Рекомендуется использовать Google Chrome с инструментами разработчика (F12), чтобы анализировать код и исправлять ошибки.

3. Основы HTML

HTML (HyperText Markup Language) — язык разметки, который определяет структуру веб-страницы. Без него не существовало бы ни одного сайта.

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

1. Открываем проект

  1. Запустите VS Code
  2. Нажмите File → Open Folder и создайте новую папку для проекта.
  3. Добавьте файл index.html(это будет главная страница)

2. Базовая структура HTML

Вставьте этот код в файл index.html:

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

Привет, мир!

Это моя первая HTML-страница.

Разберём структуру:

  • <!DOCTYPE html> — объявление типа документа (HTML5).
  • <html> — корневой элемент страницы.
  • <head> — служебная информация (кодировка, заголовок, стили).
  • <meta charset="UTF-8"> — правильное отображение кириллицы.
  • <title> — заголовок вкладки браузера.
  • <body> — видимая часть страницы.

3. Запуск страницы

  1. Сохраните файл (Ctrl + S).
  2. Откройте его в браузере (правой кнопкой → Open with Live Server, если установлено расширение).

Основные HTML-теги

1. Заголовки (<h1>–<h6>)

<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>
<h3>Менее важный заголовок</h3>

Главный заголовок

Подзаголовок

Менее важный заголовок

2. Абзацы и текст (<p>,<d>,<i>)

<p>Это абзац текста.</p>
<p><b>Жирный текст</b></p>
<p><i>курсив</i></p>

Это абзац текста.

Жирный текст

курсив

3. Ссылки (<a>) и изображения (<img>)

<a href="https://google.com" target="_blank">Открыть Google</a>
<img src="image.jpg" alt="Описание картинки">
Открыть Google Описание картинки

Списки (<ul>,<ol>,<li>)

<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
</ul>
<ol>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
</ol>
  • Пункт 1
  • Пункт 2
  1. Первый пункт
  2. Второй пункт

Заключение

Visual Studio Code — идеальный редактор для начинающих и профессионалов. В этой статье мы разобрали основы HTML и настройку VS Code для комфортной работы. Дальше — только практика!

Попробуйте прямо сейчас:

  1. Установите VS Code.
  2. Создайте файл index.html.
  3. Напишите простую страницу и откройте её в браузере

Удачи в обучении!

Видеоурок