Ćwiczenia HTML i CSS – Formularze, Layout, Nawigacja

🧪 Ćwiczenie 1: Stylizacja formularza kontaktowego

🎯 Cel: Formatowanie formularza HTML za pomocą CSS.

📝 Instrukcja:

Utwórz formularz z polami: imię, email, wiadomość.
Stylizuj go za pomocą CSS (kolory, marginesy, hover).

✅ Przykładowy kod:

<style>
form {
  width: 300px;
  margin: 20px auto;
  padding: 20px;
  border: 2px solid #444;
  background-color: #f0f0f0;
  border-radius: 10px;
}
input, textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 1em;
}
button {
  background-color: #333;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #555;
}
</style>

<form>
  <label>Imię:</label>
  <input type="text" name="name" />

  <label>Email:</label>
  <input type="email" name="email" />

  <label>Wiadomość:</label>
  <textarea name="message"></textarea>

  <button type="submit">Wyślij</button>
</form>

🧪 Ćwiczenie 2: Trzy kolumny na stronie

🎯 Cel: Układ kolumnowy za pomocą float.

📝 Instrukcja:

Utwórz 3 kolumny o równej szerokości.
Zastosuj `float: left` i klasę `.clearfix`.

✅ Przykładowy kod:

<style>
.kolumna {
  width: 30%;
  float: left;
  padding: 10px;
  margin: 1%;
  background-color: #e3e3e3;
  border: 1px solid #ccc;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>

<div class="clearfix">
  <div class="kolumna">Lewa kolumna</div>
  <div class="kolumna">Środkowa kolumna</div>
  <div class="kolumna">Prawa kolumna</div>
</div>

🧪 Ćwiczenie 3: Pasek nawigacyjny

🎯 Cel: Tworzenie poziomego menu.

📝 Instrukcja:

Utwórz pasek z linkami.
Zastosuj `display: inline-block`, styl `hover`.

✅ Przykładowy kod:

<style>
nav a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #222;
  color: white;
  text-decoration: none;
  margin-right: 5px;
}
nav a:hover {
  background-color: #444;
}
</style>

<nav>
  <a href="#">Strona główna</a>
  <a href="#">O nas</a>
  <a href="#">Kontakt</a>
</nav>

🧪 Ćwiczenie 4: Przyklejony nagłówek

🎯 Cel: Użycie `position: sticky`.

📝 Instrukcja:

Dodaj nagłówek `header` z `position: sticky` i `top: 0`.
Dodaj długi tekst pod spodem.

✅ Przykładowy kod:

<style>
header {
  position: sticky;
  top: 0;
  background-color: #000;
  color: white;
  padding: 15px;
  font-size: 1.2em;
  z-index: 1000;
}
</style>

<header>
  To jest przyklejony nagłówek
</header>

<p>Lorem ipsum dolor sit amet... (dużo tekstu do przewijania)</p>

🧪 Ćwiczenie 5: Efekt hover na obrazkach

🎯 Cel: Tworzenie efektu powiększenia obrazka po najechaniu.

📝 Instrukcja:

Dodaj obrazek i zastosuj efekt `transform: scale()` w CSS.
Użyj `transition`, aby efekt był płynny.

✅ Przykładowy kod:

<style>
img {
  width: 300px;
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.1);
}
</style>

<img src="https://via.placeholder.com/300" alt="Przykład obrazu">

🧪 Ćwiczenie 6: Stylizowana tabela danych

🎯 Cel: Formatowanie tabeli i podświetlanie wierszy.

📝 Instrukcja:

Stwórz tabelę z trzema kolumnami.
Zastosuj kolory tła naprzemienne i efekt hover na wierszach.

✅ Przykładowy kod:

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 12px;
  border: 1px solid #555;
}
tr:nth-child(even) {
  background-color: #222;
}
tr:hover {
  background-color: #333;
}
</style>

<table>
  <tr><th>Imię</th><th>Nazwisko</th><th>Ocena</th></tr>
  <tr><td>Jan</td><td>Kowalski</td><td>5</td></tr>
  <tr><td>Anna</td><td>Nowak</td><td>4</td></tr>
</table>

🧪 Ćwiczenie 7: Layout Flexbox (galeria)

🎯 Cel: Stworzenie elastycznego układu obrazków za pomocą Flexboxa.

📝 Instrukcja:

Dodaj kilka obrazków w kontenerze `display: flex`.
Ustaw marginesy i rozciąganie.

✅ Przykładowy kod:

<style>
.galeria {
  display: flex;
  gap: 10px;
}
.galeria img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}
</style>

<div class="galeria">
  <img src="https://via.placeholder.com/100" alt="">
  <img src="https://via.placeholder.com/100" alt="">
  <img src="https://via.placeholder.com/100" alt="">
</div>

🧪 Ćwiczenie 8: Prosta animacja tekstu

🎯 Cel: Stworzenie animowanego efektu w CSS.

📝 Instrukcja:

Użyj `@keyframes`, aby animować kolor tekstu lub jego przesunięcie.

✅ Przykładowy kod:

<style>
@keyframes przesuwanie {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); color: lime; }
  100% { transform: translateX(0); }
}
.animowany {
  animation: przesuwanie 2s infinite;
  font-size: 1.5em;
}
</style>

<p class="animowany">Witaj na stronie ćwiczeń!</p>

🧪 Ćwiczenie 9: Layout CSS Grid (siatka)

🎯 Cel: Ułożenie elementów w siatce 2x2 za pomocą Grid.

Stwórz kontener z `display: grid`.
Dodaj cztery elementy i rozmieszczaj je w kolumnach i wierszach.

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.grid-item {
  background: #444;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

🧪 Ćwiczenie 10: Responsywność z Media Queries

🎯 Cel: Zmiana stylów elementu zależnie od szerokości ekranu.

Dodaj nagłówek z kolorem tła.
Za pomocą `@media` zmień kolor tła poniżej 600px szerokości.

<style>
h1 {
  background-color: darkred;
  color: white;
  padding: 20px;
}
@media (max-width: 600px) {
  h1 {
    background-color: navy;
  }
}
</style>

<h1>Nagłówek responsywny</h1>

🧪 Ćwiczenie 11: Stylowanie formularzy (focus i validacja)

🎯 Cel: Stylowanie stanu aktywnego pola i poprawności danych.

Dodaj pola tekstowe z `required` i `type="email"`.
Stylizuj pole w stanie `:focus` i `:valid`.

<style>
input {
  padding: 10px;
  border: 2px solid gray;
}
input:focus {
  border-color: lime;
}
input:valid {
  background-color: #1f1;
}
</style>

<form>
  <input type="text" placeholder="Twoje imię" required><br>
  <input type="email" placeholder="Email" required>
</form>

🧪 Ćwiczenie 12: Przełącznik trybu ciemnego i jasnego

🎯 Cel: Włączenie/wyłączenie stylu za pomocą przycisku.

Stwórz przycisk z funkcją JavaScript zmieniającą klasę `dark`.
W CSS stylizuj `body.dark` oraz `body`.

<style>
body {
  background: white;
  color: black;
  transition: 0.3s;
}
body.dark {
  background: #111;
  color: white;
}
button {
  margin-top: 20px;
  padding: 10px;
}
</style>

<button onclick="document.body.classList.toggle('dark')">Przełącz tryb</button>

🧪 Ćwiczenie 13: Prosta animacja (hover + transition)

🎯 Cel: Stworzenie przycisku z animacją po najechaniu.

<style>
.button {
  padding: 12px 24px;
  background: crimson;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.button:hover {
  background: darkred;
  transform: scale(1.1);
}
</style>

<button class="button">Najedź mnie</button>

🧪 Ćwiczenie 14: Formularz kontaktowy z walidacją

🎯 Cel: Formularz, który wymusza poprawne dane i stylizuje błędy.

<style>
input:invalid {
  border: 2px solid red;
}
input:valid {
  border: 2px solid green;
}
</style>

<form>
  <label>Imię: <input type="text" required></label><br>
  <label>Email: <input type="email" required></label><br>
  <label>Wiadomość: <textarea required></textarea><br>
  <input type="submit" value="Wyślij">
</form>

🧪 Ćwiczenie 15: Szablon strony z nagłówkiem, treścią i stopką

🎯 Cel: Utworzenie prostego układu strony z CSS Flexbox.

<style>
body {
  margin: 0;
  font-family: sans-serif;
}
header, footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 20px;
}
main {
  padding: 20px;
}
</style>

<header>Nagłówek strony</header>
<main>
  <h2>Witaj na stronie</h2>
  <p>Tutaj znajduje się treść.</p>
</main>
<footer>Stopka © 2025</footer>

🧪 Ćwiczenie 16: Hamburger menu (dla urządzeń mobilnych)

🎯 Cel: Menu rozwijane po kliknięciu przycisku.

<style>
nav {
  background: #222;
  color: white;
  padding: 10px;
}
.menu {
  display: none;
  flex-direction: column;
}
.menu a {
  padding: 10px;
  color: white;
  text-decoration: none;
}
.hamburger {
  background: none;
  border: 2px solid white;
  color: white;
  padding: 10px;
  cursor: pointer;
}
@media (min-width: 600px) {
  .menu {
    display: flex !important;
    flex-direction: row;
  }
  .hamburger {
    display: none;
  }
}
</style>

<nav>
  <button class="hamburger" onclick="document.querySelector('.menu').classList.toggle('show')">☰ Menu</button>
  <div class="menu">
    <a href="#">Start</a>
    <a href="#">O nas</a>
    <a href="#">Kontakt</a>
  </div>
</nav>

<script>
  // Pokazuje/ukrywa menu mobilne
  document.querySelector('.menu').classList.remove('show');
</script>

🧪 Ćwiczenie 17: Pasek boczny (sidebar)

🎯 Cel: Utworzenie bocznego menu nawigacyjnego z wykorzystaniem Flexbox.

<style>
body {
  margin: 0;
  display: flex;
}
aside {
  width: 200px;
  background-color: #2f2f2f;
  color: white;
  height: 100vh;
  padding: 20px;
}
main {
  flex-grow: 1;
  padding: 20px;
}
</style>

<aside>
  <h3>Menu</h3>
  <ul>
    <li><a href="#" style="color:white;">Strona główna</a></li>
    <li><a href="#" style="color:white;">O nas</a></li>
    <li><a href="#" style="color:white;">Kontakt</a></li>
  </ul>
</aside>
<main>
  <h1>Witaj na stronie!</h1>
  <p>Tutaj znajduje się główna zawartość.</p>
</main>

🧪 Ćwiczenie 18: Galeria zdjęć z siatką (CSS Grid)

🎯 Cel: Stworzenie galerii zdjęć z układem siatki.

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
</style>

<div class="gallery">
  <img src="https://via.placeholder.com/150" alt="Obrazek 1">
  <img src="https://via.placeholder.com/150" alt="Obrazek 2">
  <img src="https://via.placeholder.com/150" alt="Obrazek 3">
  <img src="https://via.placeholder.com/150" alt="Obrazek 4">
</div>

🧪 Ćwiczenie 19: Karta z cieniem i zaokrągleniami

🎯 Cel: Stylizowanie bloku z użyciem cienia, marginesów i zaokrągleń.

<style>
.card {
  background: white;
  padding: 20px;
  margin: 20px auto;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  max-width: 400px;
}
</style>

<div class="card">
  <h3>Informacje</h3>
  <p>To jest przykładowa karta z treścią.</p>
</div>

🧪 Ćwiczenie 20: Stylizowany blok cytatu

🎯 Cel: Wyróżnienie cytatu z pomocą stylów CSS.

<style>
blockquote {
  font-style: italic;
  border-left: 4px solid #555;
  padding-left: 15px;
  margin: 20px;
  color: #333;
  background: #f9f9f9;
}
</style>

<blockquote>
  "Nie pytaj, co twój kraj może zrobić dla ciebie – zapytaj, co ty możesz zrobić dla swojego kraju."
</blockquote>

Ćwiczenia z HTML i CSS

🧪 Ćwiczenie 1: Stylizacja formularza kontaktowego

🧪 Ćwiczenie 2: Trzy kolumny na stronie

🧪 Ćwiczenie 3: Pasek nawigacyjny

🧪 Ćwiczenie 4: Przyklejony nagłówek

🧪 Ćwiczenie 5: Efekt hover na obrazkach

🧪 Ćwiczenie 6: Stylizowana tabela danych

🧪 Ćwiczenie 7: Layout Flexbox (galeria)

🧪 Ćwiczenie 8: Prosta animacja tekstu

🧪 Ćwiczenie 9: Layout CSS Grid (siatka)

🧪 Ćwiczenie 10: Responsywność z Media Queries

🧪 Ćwiczenie 11: Stylowanie formularzy (focus i validacja)

🧪 Ćwiczenie 12: Przełącznik trybu ciemnego i jasnego

🧪 Ćwiczenie 13: Prosta animacja (hover + transition)

🧪 Ćwiczenie 14: Formularz kontaktowy z walidacją

🧪 Ćwiczenie 15: Szablon strony z nagłówkiem, treścią i stopką

🧪 Ćwiczenie 16: Hamburger menu (dla urządzeń mobilnych)

🧪 Ćwiczenie 17: Pasek boczny (sidebar)

🧪 Ćwiczenie 18: Galeria zdjęć z siatką (CSS Grid)

🧪 Ćwiczenie 19: Karta z cieniem i zaokrągleniami

🧪 Ćwiczenie 20: Stylizowany blok cytatu