Ćwiczenia z HTML, CSS i JavaScript

Ćwiczenia z HTML, CSS i JavaScript

• 1. Responsywna strona internetowa (HTML + CSS)
  • Stwórz stronę internetową, która będzie dostosowywać swój wygląd do różnych rozdzielczości ekranu (desktop, tablet, telefon).
  • Użyj mediów (media queries) w CSS. Dostosuj rozmiary obrazków, nagłówków i tekstu w zależności od wielkości ekranu.
• 2. Formularz rejestracji użytkownika (HTML + CSS + JavaScript)
  • Stwórz formularz rejestracji użytkownika, który będzie miał walidację danych po stronie klienta (np. sprawdzanie, czy pole e-mail jest w odpowiednim formacie).
  • Formularz powinien zawierać: imię, nazwisko, e-mail, hasło, powtórz hasło.
  • Zastosuj walidację przy pomocy JavaScriptu. Użyj CSS do estetycznego wyświetlenia formularza.
• 3. Gra w zgadywanie liczb (JavaScript)
  • Stwórz prostą grę, w której komputer losuje liczbę w zakresie od 1 do 100, a użytkownik musi zgadnąć, jaka to liczba.
  • Gra powinna informować gracza, czy jego zgadnięcie było za małe, za duże, czy poprawne.
  • Użyj eventów w JavaScript do obsługi kliknięć przycisków.
• 4. Galeria zdjęć z efektem hover (HTML + CSS)
  • Stwórz galerię zdjęć, w której przy najechaniu kursorem na zdjęcie pojawia się delikatny efekt przejścia (np. rozmycie lub zmiana rozmiaru).
  • Użyj flexboxa lub grid do rozmieszczenia zdjęć. Stwórz efekt zmiany rozmiaru lub przezroczystości przy najechaniu na zdjęcie.
  • Dodaj opóźnienie w animacji.
• 5. System kart z animacją (HTML + CSS + JavaScript)
  • Stwórz system kart (np. produktowych lub informacyjnych), które będą się animować przy przejściu kursora.
  • Karty powinny być wyświetlane w układzie siatki (CSS grid). Przy najechaniu na kartę, powinna ona się "przechylić" lub "podświetlić".
  • Animacja powinna być płynna, bez szarpania.
• 6. Strona z systemem oceniania produktów (HTML + CSS + JavaScript)
  • Na stronie umieść listę produktów, a obok każdego produktu pole z możliwością wystawienia oceny w formie gwiazdek (1–5).
  • Zastosuj JavaScript do zapisania ocen.
  • Użyj CSS do estetycznego wyświetlenia gwiazdek. Użyj eventów do zapisywania ocen.