Jak stworzyć pliki HTML i CSS?

Jak stworzyć pliki HTML i CSS?

Zanim zaczniesz pisać stronę wizytówkę, potrzebujesz dwóch podstawowych plików:

• index.html – główny plik strony z zawartością (tekst, nagłówki, sekcje)
• style.css – plik ze stylami, czyli wyglądem Twojej strony

W tej lekcji pokażemy Ci, jak stworzyć oba pliki i połączyć je ze sobą. To ważny krok, bo od teraz będziesz tworzyć swój własny projekt 💻

🔧 Jak utworzyć pliki na komputerze?

Jeśli korzystasz z edytora kodu (np. VS Code, Sublime Text, Notepad++), wykonaj następujące kroki:

1. Utwórz nowy folder, np. wizytowka
2. W środku stwórz plik: index.html
3. Obok niego utwórz drugi plik: style.css

Twoja struktura powinna wyglądać tak:

wizytowka/
├── index.html
└── style.css

📄 Szablon pliku index.html

Na początek możesz wkleić do pliku index.html poniższy kod:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moja wizytówka</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>Jan Kowalski</h1>
    <p>Frontend Developer</p>
  </header>

  <main>
    <section>
      <h2>O mnie</h2>
      <p>Mam na imię Jan i tworzę nowoczesne strony internetowe.</p>
    </section>
  </main>

  <footer>
    <p>© 2025 Jan Kowalski</p>
  </footer>

</body>
</html>

Ten kod tworzy bardzo prosty szkielet strony, który rozbudujesz w kolejnych lekcjach.

🎨 Plik style.css

W pliku style.css możesz dodać kilka podstawowych stylów:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  padding: 20px;
}

footer {
  background-color: #eee;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

Po zapisaniu plików, otwórz index.html w przeglądarce i zobacz efekt! 🎉

💡 Alternatywa – użyj JSFiddle

Jeśli nie chcesz instalować żadnego edytora, możesz od razu zacząć w JSFiddle. Wklej kod HTML do sekcji HTML, a kod CSS do sekcji CSS.

Dzięki temu możesz błyskawicznie testować swój projekt online bez zapisywania plików na dysku.

❓ Co jeśli coś nie działa?

Nie przejmuj się! Błędy są normalne. Jeśli masz problem z podłączeniem pliku CSS:

• Sprawdź, czy plik style.css znajduje się w tym samym folderze co index.html
• Upewnij się, że w <link> podałeś poprawną nazwę pliku
• Odśwież przeglądarkę (Ctrl + R)

W razie wątpliwości możesz wrócić do wcześniejszych lekcji z Modułu 1 i 2, gdzie uczyliśmy się tworzyć dokument HTML i podłączać CSS.

✅ Podsumowanie

• Stwórz dwa pliki: index.html i style.css
• Połącz je za pomocą znacznika <link> w sekcji <head>
• Koduj lokalnie (np. VS Code) lub online (JSFiddle)

➡️ W kolejnej lekcji zajmiemy się stylizacją strony wizytówki – kolory, czcionki, układ i responsywność. To będzie bardzo praktyczna i satysfakcjonująca część! 🚀