Quest: Selektory CSS

Przeanalizuj i zrozum kod:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Selektory CSS</title>
    <style>
        * {color: grey;}
        div { font-family: Arial, sans-serif;
              margin: 10px;
              padding: 20px;
              border-radius: 8px;
              border: 1px solid #ccc;}
        .box { background-color: lightgrey;}
        .strong { font-weight: bold;}
        #box1 { background-color: pink;}
        article > div > .strong { background-color: lightyellow;}
        article > #box4 { color: red;}
        #box5 + #box6 { background-color: lightblue;}
        #box7:last-child { background-color: lightgreen;}
    </style>
</head>
<body>
    <article>    
        <div class="box" id="box1">Div 1</div>
        <div class="box">Div 2</div>
        <div>
            <div class="box strong">Div 3</div>
        </div>
        <div class="box" id="box4">Div 4</div>
    </article>
    <div class="box strong" id="box5">Div 5</div>
    <div class="box" id="box6">Div 6</div>
    <div class="box" id="box7">Div 7</div>
</body>
</html>

Bez modyfikowania kodu HTML i CSS a jedynie dodając nowy kod CSS spraw, żeby biały div zawierający żółtego diva był niewidoczny (żółty ma wyglądać tak jak pozostałe).

Quest: Kalendarz

W PHP jest wiele funkcji wspomagających pracę z datami i czasem. Przejrzyj ich listę. Pobaw się nimi:

  • Wyświetl aktualną datę i czas
  • Wyświetl aktualną datę i czas w niedomyślnym formacie
  • Wypisz nazwę jutrzejszego dnia tygodnia
  • Wypisz nazwę poprzedniego miesiąca

Utwórz prosty kalendarz wyświetlający wszystkie dni z bieżącego miesiąca. Rozbuduj go dodając:

  • czerwone niedziele
  • nagłówki z nazwami dni tygodnia
  • szare tło dla bieżącego tygodnia
  • wyświetlanie wydarzeń z tablicy php bez możliwości dodawania nowych (początkowo)

Wariant

dla tych, którzy już wiedzą, że AI nie zrobi wszystkiego, więc trzeba rozumieć kod w pełni

Zacznij od tej wersji projektu. Podziel powyższe zadanie na drobne etapy i doprowadź do wyglądu ze zdjęcia powyżej. Możesz też dodać przycisk, który wyświetli dodatkowe tygodnie kalendarza Wykorzystaj zmienne $_GET[’wcz_tyg’] oraz $_GET[’nast_tyg’] i funkcję isset().

Quest: Krótki CSS

Te elementy formatowania w CSS są podstawowe. Najpierw upewnij się, że rozumiesz kod. Jest tu kilka nieoczywistych elementów:

  1. Niektóre style mają 2 lub 4 wartości. Co oznaczają poszczególne liczby?
  2. W kodzie są znaki . # > Co oznaczają?
  3. Nie wszystkie napisy są zielone. Dlaczego?

Żeby zrozumieć KAŻDY szczegół kodu poproś o pomoc przyjaciela. Jeśli nie masz takiego pod ręką – poproś AI.

<!DOCTYPE html>
<html>
<head>
    <style>
        #czerwony > p {
            width: 300px;
            margin: 10px 20px 30px 40px;
            padding: 20px 30px;
            border: 1px solid red;
            border-width: 25px 10px 14px 35px;
            background: rgba(0, 128, 0, 0.3)
        }
        p.pink {
            margin: 10px 20px 30px 40px;
            border-radius: 15px 50px 30px 5px;
            padding: 60px 60px;
            background: rgba(0, 128, 0, 0.3)
        }
    </style>
</head>
<body>
      <div id="czerwony">
        <p>Akapit 1</p>
        <p>Akapit 2</p>
        <section class="pink">
          <p>Akapit 3</p>
          Lorem ipsum.
        </section>
        <p>Akapit 4</p>
      </div>
      <div>
        <p class="pink">Akapit 5</p>
      </div>
    <p>Akapit 6</p>
</body>
</html>

Przerób kod tak, by wyglądał jak na zrzucie. To zadanie jest zbyt proste by robić je z przyjacielem. Zrób je sam.