Lesson1

Lekcja 1: Wprowadzenie do CSS – Zróbmy z Twojego HTML-a Gwiazdę Internetu!

Wprowadzenie

Witaj, przyszły mistrzu projektowania stron! 🎨 W tej lekcji zagłębimy się w świat CSS (Cascading Style Sheets)—magii, która zmienia Twój nudny i bezbarwny HTML w coś eleganckiego, jak pierogi podane w najlepszej restauracji. Wyobraź sobie HTML jako podstawę ciasta, a CSS jako nadzienie, które czyni je nieodparcie smacznym!

Na końcu tej lekcji dowiesz się, jak połączyć CSS z HTML, stworzyć folder projektu i odpalić go przez Caddy (serwer, nie nalewkę!). Opanujesz też sztukę korzystania z edytorów tekstowych, takich jak Vim, VSCode czy nasz poczciwy Nano—jak prawdziwy majster z młotkiem i gwoździem w ręku. Gotowy, żeby Twój HTML przeszedł z trybu „szare mydło” do „gwiazda estrady”? To do dzieła!

Krok 1: Organizacja Projektu (Porządek musi być!)

Najpierw: trochę porządku (nie martw się, bez mopów i wiader). Oto jak stworzyć schludną przestrzeń dla Twojego HTML-a i CSS-a, tak aby potem wszystko było poukładane jak w szufladzie z przyprawami.

Otwórz terminal (spokojnie, żadnych zaklęć ani szamańskich sztuczek).
Przejdź do folderu, w którym chcesz trzymać swój projekt (coś w stylu „szuflada na dokumenty”):
```
cd ~/Documents
```
Stwórz nowy folder, aby pomieścić swój geniusz:
```
mkdir my-css-project
```
Wejdź do nowego folderu jak szef:
```
cd my-css-project
```
Stwórz dwa pliki: jeden na HTML i drugi na CSS (pomyśl o nich jak o marynarce i spodniach dla Twojej strony):
```
touch index.html styles.css
```

Teraz masz folder uporządkowany jak spiżarnia na zimę:

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

Krok 2: Wybierz Edytor (Kto ma dobry młotek, ten zrobi wszystko)

Teraz wybierasz swoje narzędzie do kodowania. To jak wybór noża do krojenia ogórków—VSCode dla nowoczesnych, Vim dla tradycjonalistów, a Nano dla tych, którzy cenią sobie prostotę. Ale jedno jest pewne—kod ma być jak oscypek: mocny i wyrazisty!

Korzystanie z Vim (Ninja-Klasyk):

Otwórz index.html:
```
vim index.html
```
Naciśnij i, aby przejść do trybu edycji, wpisz swój HTML, a potem wciśnij ESC i wpisz :wq, żeby zapisać i zamknąć jak mistrz.
To samo zrób dla styles.css:
```
vim styles.css
```

Korzystanie z VSCode (Nowoczesny Hipster):

Otwórz folder projektu:
```
code .
```
Teraz weź myszkę jak zawodowiec i otwórz index.html i styles.css z bocznego menu. Prosto, wygodnie, jak w Ikei.

Korzystanie z Nano (Klasyczny Minimalista):

Otwórz index.html:
```
nano index.html
```
Po napisaniu, naciśnij CTRL+O, żeby zapisać, a potem CTRL+X, żeby wyjść. Bez zbędnych bajerów—tylko Ty i Twój kod.

Krok 3: Napisz HTML i CSS (Pora na odrobinę stylu!)

Teraz czas, żeby nadać trochę charakteru Twojemu HTML-owi. Trzeba go trochę odpicować, jak wiejski obiad na rodzinnej imprezie. Oto, co musisz zrobić:

Wstaw do `index.html`:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja Pierwsza Strona CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Witaj w Świecie CSS!</h1>
    <p>To moja pierwsza strona z własnym stylem. Zobacz, jak teraz wyglądam!</p>
</body>
</html>

Gotowe! Twój HTML teraz jest na tyle przyzwoity, że nawet ciocia przy świątecznym stole pochwali. Czas dodać mu więcej stylu.

W pliku `styles.css` dodaj następujący kod:

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

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

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

Twój kod wygląda teraz jak prawdziwy szlachcic! Szary kolor tła—elegancja, niebieski nagłówek—pewność siebie, a paragraf—powaga i godność.

Krok 4: Uruchom Projekt z Caddy (Niech Każdy Zobaczy Twoje Dzieło!)

Czas pokazać światu Twój majstersztyk… no, przynajmniej sąsiadom w sieci lokalnej. Oto jak Caddy zrobi z tego show, bez zbędnego stresu.

Zainstaluj Caddy (jeśli jeszcze tego nie zrobiłeś): Postępuj zgodnie z Instrukcją Instalacji Caddy, a wszystko zadziała (prościej niż złożenie regału z Ikei, obiecuję).
Uruchom Swoją Stronę przez Caddy: Zapomnij o skomplikowanych konfiguracjach. Po prostu wklep:
```
caddy file-server --listen :8080
```
Gotowe, Twoje pliki są serwowane na porcie 8080.
Otwórz Stronę w Przeglądarce: Przejdź do przeglądarki i wpisz:
```
http://localhost:8080
```
Voilà! Twoja strona jest gotowa do podziwiania.

Szybka Porada: Gdy Twój Przeglądarka Upiera Się Jak Stary Wujek

Czasami przeglądarka zachowuje się jak stary wujek, który uparcie nosi te same flanelowe koszule, mimo że kupiłeś mu nowy garnitur. Zmieniasz style, a on ciągle pokazuje to samo – stary wygląd jakby to były czasy PRL-u!

Aby przypomnieć mu, że nadszedł czas na coś nowszego, naciśnij Ctrl + F5 (lub Cmd + Shift + R na Mac). To tak jak powiedzieć: „Halo, stary, pokaż mi prawdziwy styl!”. Jeśli po zapisaniu i odświeżeniu strony dalej wygląda tak samo, spróbuj Ctrl + F5 — to jak krzyknąć na przeglądarkę: „No już, albo mi pokazujesz nowe, albo dzwonię do cioci, żeby zrobiła porządek!”

Krok 5: Edytuj, Odświeżaj i Powtarzaj (Życie Artysty)

Teraz, kiedy Twoja strona już działa, kontynuuj eksperymentowanie (bo kreatywność nigdy się nie kończy). Wprowadzaj zmiany w CSS lub HTML i odśwież przeglądarkę, aby zobaczyć rezultaty.

Podsumowanie

Gratulacje, mistrzu stylu! Stworzyłeś swój pierwszy projekt HTML i CSS i odpaliłeś go za pomocą Caddy. Jesteś gotowy, aby podbić internet!

Do zobaczenia w następnej lekcji, gdzie odkryjemy selekcje i specyfikę. Gotowy na więcej przygód? Zostań z nami!