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="uk">
<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 — швидко, просто і зручно.
Запустіть Сайт через Caddy: Забудьте про складні конфігурації, просто введіть:
```
caddy file-server --listen :8080
```
І все, ваші файли вже на порту 8080.
Відкрийте Сторінку в Браузері: Відкрийте браузер і введіть:
```
http://localhost:8080
```
І вуаля! Ваш стильний сайт готовий до перегляду.

Порада: Коли Ваш Браузер Впертий Як Мій Дід

Іноді ваш браузер впертий, як дідусь, який відмовляється викинути старі шкарпетки, навіть коли ви йому купили нові. Ви змінюєте стилі, а він показує вам старий вигляд. Скільки разів не тисни “Оновити”, все одно залишається у своїй старій сорочці (як і дід, що носить капці на босу ногу).

Щоб нагадати браузеру, що пора вже йти в ногу з модою, натисніть Ctrl + F5 (або Cmd + Shift + R на Mac). Це ніби говорите йому: “Ану-ка, показуй мені все як є!”. Якщо після збереження і оновлення сторінки ваш сайт виглядає так само, спробуйте натиснути Ctrl + F5 — це наче виклик браузеру на серйозну розмову: “Чуєш, друже, оновися, а то зараз бабця ще й віником піджене!”

Висновок

Вітаю, майстре стилю! Ви створили свій перший проект HTML і CSS і показали його через Caddy. Ви готові до нових звершень!

Зустрінемося у наступному уроці, де ми розберемося з селекторами і специфікою. Готові стати ще кращими? Залишайтеся з нами!