Lesson1

Урок 1: Введение в CSS — Преображаем Ваш HTML в Настоящую Звезду Интернета!

Обзор

Приветствую, будущий мастер веб-дизайна! 🎨 В этом уроке мы погрузимся в волшебный мир CSS (Cascading Style Sheets)—магии, которая превращает ваш простенький и унылый HTML в нечто элегантное, как если бы вы из картошки сделали салат оливье. Представьте себе HTML как скелет (ну, не куриный, а скорее железный), а CSS — как роскошный костюм, который превращает его в главного героя на сцене.

В конце этого урока вы научитесь связывать CSS с HTML, создавать проектную папку и запускать её через Caddy (сервер, а не водка!). А также освоите искусство использования редакторов кода, таких как Vim, VSCode или наш старый добрый Nano—с умением и сноровкой, как открыть банку сгущёнки одной ложкой. Готовы сделать ваш HTML настоящим шедевром? Тогда закатываем рукава и вперёд!

Шаг 1: Организуем Проект (Порядок—Прежде Всего!)

Первым делом: нужно навести порядок в вашей цифровой мастерской. Это как убрать гараж перед началом сборки нового проекта—без этого никуда! Вот как создать аккуратное пространство для вашего HTML и CSS, чтобы потом всё блестело, как у бабушки на кухне после генеральной уборки.

Откройте терминал (спокойно, ломиков и волшебных палочек не понадобится).
Перейдите в папку, где вы хотите хранить свой проект (что-то вроде вашего рабочего шкафа):
```
cd ~/Documents
```
Создайте новую папку для своего шедевра:
```
mkdir my-css-project
```
Войдите в созданную папку как хозяин:
```
cd my-css-project
```
Создайте два файла: один для HTML и один для CSS (представьте их как рубашку и брюки вашего сайта):
```
touch index.html styles.css
```

Теперь у вас есть аккуратная папка, как свежевымытый пол на кухне:

my-css-project/
    ├── index.html
    └── styles.css

Шаг 2: Выбираем Редактор (Инструмент Мастера—Дело Серьёзное)

Теперь выбираем ваш секретный инструмент для написания кода. Это как выбирать нож для резки хлеба—VSCode для модников, Vim для староверов, а Nano для минималистов. Главное, чтобы всё резало, точнее, кодилось как по маслу.

Используем Vim (Ниндзя-Старожил):

Откройте index.html:
```
vim index.html
```
Нажмите i, чтобы войти в режим вставки, введите ваш HTML, затем нажмите ESC и наберите :wq, чтобы сохранить и выйти, как ниндзя, оставив следов.
То же самое проделайте для styles.css:
```
vim styles.css
```

Используем VSCode (Модный Гуру):

Откройте папку проекта:
```
code .
```
Теперь используйте мышь, как истинный профессионал, и откройте index.html и styles.css из боковой панели. Просто, модно, молодёжно.

Используем Nano (Простой и Надёжный):

Откройте index.html:
```
nano index.html
```
После написания, нажмите CTRL+O, чтобы сохранить, а затем CTRL+X, чтобы выйти. Без лишних движений—эффективно и по-нашему.

Шаг 3: Пишем HTML и CSS (Время Навести Лоск!)

Пришло время придать вашему 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>Мой Первый CSS-Сайт</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Добро Пожаловать в Мир CSS!</h1>
    <p>Это моя первая страничка с персональным стилем. Посмотрите, какой я теперь стильный!</p>
</body>
</html>

Вот и всё! Теперь ваш HTML достаточно красив, чтобы занять место на обеденном столе. Давайте добавим ему немного стиля.

Добавьте в `styles.css` следующие строки:

body {
    background-color: #f0f0f0;
    font-family: 'Arial', sans-serif;
}

h1 {
    color: #3498db;
    font-size: 48px;
}

p {
    color: #2c3e50;
    font-size: 20px;
}

Ваш сайт перешёл от «только что проснулся» к «готов выйти на улицу и покорять сердца». Серый фон — это классика, синий заголовок — ярко, а параграф — солидный джентльмен.

Шаг 4: Запускаем Проект с Caddy (Пусть Все Увидят!)

Пора вывести ваш шедевр в свет… ну, хотя бы в локальную сеть. Встречайте Caddy—самый простой способ сделать так, чтобы ваш сайт засиял, как новогодняя гирлянда.

Установите Caddy (если ещё не установили): Следуйте Инструкции по Установке Caddy, и будет вам счастье (легче, чем собирать шкаф из IKEA, честное слово).
Запустите Ваш Сайт через Caddy: Забудьте про сложные настройки, просто введите:
```
caddy file-server --listen :8080
```
Всё, ваши файлы уже готовы на порту 8080.
Откройте Страницу в Браузере: Перейдите в браузер и введите:
```
http://localhost:8080
```
Вуаля! Ваш сайт готов к просмотру.

Советы: Когда Браузер Упрямится, Как Ванька на Распродаже

Иногда ваш браузер ведет себя, как Ванька, который отказывается снять свои старые штаны, даже если вы ему новые купили. Обновляете стили, а он всё показывает старую версию (ну прямо как Ванька в той самой телогрейке с 90-х!).

Чтобы заставить его перестать упорствовать, нажмите Ctrl + F5 (или Cmd + Shift + R на Mac). Это как сказать ему: “Эй, давай-ка, покажи-ка мне всё по-честному!” Если после сохранения и обновления страницы сайт выглядит по-старому, жмите Ctrl + F5 — это как будто крикнуть браузеру: “Давай, родной, перестань старьё показывать, иначе тебе бабка все куки вычистит!”

Шаг 5: Редактируем, Обновляем и Повторяем (Жизнь Настоящего Мастера)

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

Заключение

Поздравляю, мастер! Вы создали свой первый проект HTML и CSS и запустили его через Caddy. Теперь вы готовы завоевать интернет!

До встречи на следующем уроке, где мы разберём селекторы и специфику. Готовы стать ещё круче? Оставайтесь с нами!