Projekt 2: landing page sekcji hero + karty

Cel projektu

Celem jest zbudowanie pierwszego widoku landing page dla produktu edukacyjnego. Sekcja ma od razu komunikować, dla kogo jest oferta, co użytkownik otrzyma i jaki jest następny krok.

• Hero ma mieć jeden mocny nagłówek, lead i maksymalnie dwie akcje.
• Karty pod hero mają wspierać decyzję, nie powtarzać tej samej treści.
• Layout ma startować od jednej kolumny i rozszerzać się na większych ekranach.
• CTA i linki muszą mieć dostępne stany hover, active i focus-visible.
• Sekcja nie może powodować poziomego overflow na szerokości 390px.

Brief projektu

Zaprojektuj landing page dla mini kursu „CSS Sprint”. Pierwszy ekran ma zachęcać początkującego developera do wejścia w uporządkowany program nauki. Po hero pokaż trzy karty: plan, praktykę i feedback.

Kryteria sukcesu

Dobry landing page działa wtedy, gdy użytkownik rozumie ofertę bez przewijania i może wygodnie przejść dalej.

• Nagłówek hero opisuje produkt albo ofertę, a nie ogólne hasło.
• Lead dopowiada konkretną wartość w jednym krótkim akapicie.
• CTA główne jest wizualnie mocniejsze od akcji drugorzędnej.
• Karty mają spójną strukturę: etykieta, tytuł, opis i mały detal pomocniczy.
• Układ kart używa Grida albo Flexboxa bez sztywnych szerokości.
• Kolory, odstępy, promienie i cienie są kontrolowane przez tokeny komponentu.

Architektura sekcji

Landing page powinien mieć czytelną hierarchię. Najpierw decyzja użytkownika, potem argumenty wspierające.

• Hero: eyebrow, H1, lead, akcje i element wizualny.
• Karty wartości: trzy krótkie argumenty, które wyjaśniają sposób działania produktu.
• Rytm: spójne odstępy między grupami treści, bez przypadkowego ścisku.
• Semantyka: jedna sekcja z nagłówkiem i artykułami jako kartami.

Struktura HTML

Zacznij od struktury, która ma sens bez CSS. Hero jest sekcją z nagłówkiem, a karty są listą powtarzalnych elementów treści.

Kopiuj<section class="landing-project" aria-labelledby="landing-title">
  <div class="landing-project__hero">
    <div class="landing-project__copy">
      <p class="landing-project__eyebrow">CSS Sprint</p>
      <h2 id="landing-title">Zbuduj pierwszą sekcję landing page.</h2>
      <p>Przejdź od briefu do responsywnego hero i kart wartości.</p>
      <div class="landing-project__actions">
        <a class="landing-project__button landing-project__button--primary" href="#">Zacznij sprint</a>
      </div>
    </div>
  </div>
</section>

Nie zaczynaj od dekoracji. Treść, kolejność i semantyka powinny obronić projekt zanim powstanie warstwa wizualna.

Tokeny i baza

Projekt landing page szybko rośnie. Lokalne tokeny pomagają utrzymać spójność między hero, CTA i kartami.

Kopiuj.landing-project {
  --landing-bg: #f8fafc;
  --landing-panel: #ffffff;
  --landing-text: #0f172a;
  --landing-muted: #526173;
  --landing-accent: #2563eb;
  --landing-focus: #93c5fd;

  color: var(--landing-text);
  background: var(--landing-bg);
}

Tokeny powinny opisywać rolę w interfejsie. Nazwa --landing-accent jest łatwiejsza do utrzymania niż --blue.

Layout mobile-first

Na telefonie hero powinno być liniowe: komunikat, akcje, panel wizualny, karty. Taki porządek jest czytelny i nie wymaga sztucznych wyjątków.

Kopiuj.landing-project__hero {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2rem);
}

.landing-project__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

Mobile-first nie oznacza „mały desktop”. Oznacza, że najpierw projektujesz naturalny przepływ treści, a dopiero potem dodajesz szerszy układ.

Układ kart

Karty wartości są powtarzalnym komponentem. Najbezpieczniej dać im siatkę, która sama dobierze liczbę kolumn do dostępnego miejsca.

Kopiuj.landing-project__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

.landing-project__card {
  display: grid;
  gap: .65rem;
}

Unikaj ręcznego ustawiania trzech kolumn na stałe. Karty powinny działać także wtedy, gdy tekst jest dłuższy.

Responsywność

Na szerszym ekranie hero może stać się dwukolumnowe. Przełącz układ dopiero wtedy, gdy panel wizualny nie ściska tekstu.

Kopiuj@media (min-width: 52rem) {
  .landing-project__hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr);
    align-items: center;
  }
}

Breakpoint ma wynikać z treści. Jeśli nagłówek łamie się źle albo panel zabiera za dużo miejsca, breakpoint jest za niski.

Stany i dostępność

Landing page ma prowadzić do akcji. Każdy link i przycisk musi być widoczny dla użytkownika myszy, klawiatury i ekranu dotykowego.

Kopiuj.landing-project__button {
  min-height: 2.75rem;
  transition: transform .18s ease, box-shadow .18s ease;
}

.landing-project__button:hover {
  transform: translateY(-1px);
}

.landing-project__button:focus-visible {
  outline: 3px solid var(--landing-focus);
  outline-offset: 3px;
}

Jeśli efekt hover jest subtelny, focus musi być jednoznaczny. Klawiatura nie może zgadywać, gdzie znajduje się aktywny element.

Demo projektu

Poniżej znajduje się kompletne demo kierunku wizualnego: hero z CTA, panel produktu i trzy karty wartości. Układ zachowuje naturalną kolejność na mobile i przechodzi w dwie kolumny na większych ekranach.

Najczęstsze błędy początkujących

• Nagłówek hero brzmi jak slogan, ale nie mówi, czego dotyczy produkt.
• W hero jest za dużo CTA, przez co użytkownik nie wie, co jest najważniejsze.
• Karty powtarzają ten sam argument innymi słowami zamiast rozwijać decyzję.
• Układ zaczyna się od desktopu i wymaga wielu poprawek na mobile.
• Panel wizualny ma sztywną szerokość i powoduje poziome przewijanie.
• Przyciski mają hover, ale nie mają widocznego :focus-visible.

Zadanie projektowe

Zbuduj własną sekcję landing page dla małego produktu edukacyjnego, narzędzia SaaS albo usługi portfolio.

• Napisz brief: odbiorca, problem, obietnica i jedna główna akcja.
• Utwórz semantyczną sekcję hero z nagłówkiem, leadem, CTA i panelem wizualnym.
• Dodaj trzy karty wartości pod hero jako osobne article.
• Zdefiniuj lokalne tokeny dla tła, paneli, tekstu, obramowań, akcentu i fokusu.
• Zacznij od jednej kolumny mobile-first i dodaj szerszy layout przez media query.
• Dodaj stany hover, active i focus-visible dla CTA oraz linków.
• Sprawdź widok na szerokościach 390px, 768px i 1280px.

Checklista jakości

• H1 albo H2 hero jasno opisuje ofertę, a nie tylko nastrój marki.
• Lead ma rozsądną długość i nie tworzy zbyt długich linii tekstu.
• Główne CTA jest łatwe do rozpoznania i ma większy ciężar wizualny.
• Akcja drugorzędna nie konkuruje z akcją główną.
• Karty mają spójny rytm, ale mogą mieć różną długość tekstu bez psucia layoutu.
• Na 390px nie ma poziomego overflow.
• Fokus klawiatury jest widoczny na każdym elemencie interaktywnym.
• Breakpointy wynikają z treści i nie są dodane tylko dlatego, że istnieje popularny rozmiar urządzenia.

Podsumowanie projektu

Landing page z hero i kartami to pierwszy projekt, w którym CSS musi służyć decyzji użytkownika. Liczy się hierarchia treści, jasne CTA, stabilny layout, dostępne stany i responsywność bez nadmiaru wyjątków.

Kolejny krok roadmapy to projekt panelu dashboardu.