1. Pełna struktura strony według projektu
Implementacja wizualnego layoutu w kodzie musi opierać się na znacznikach strukturalnych, by ułatwić zrozumienie strony przez przeglądarki, roboty SEO oraz technologie asystujące (Dostępność WCAG).
- Nagłówek: sticky header z animacją logo i tytułu
- Hero/Baner: duży tytuł, animowany przycisk CTA
- Karty sekcji: podświetlane na hover, płynne cienie
- Galeria grafiki: efekt powiększenia obrazka w podglądzie
- Dropdown/FAQ: rozwijane sekcje omówienia projektu i kodu
- Stopka: efekt przejścia + dane kontaktowe i copyright
Jak kodować taką stronę?
2. Semantyka HTML5 i Dostępność (WCAG)
Zastosowanie znaczników semantycznych (np. <main> zamiast <div class="main">) informuje o roli danej sekcji na stronie. Jest to kluczowy wymóg dla Dostępności (WCAG) i SEO.
<header> / <footer>
Nagłówek i Stopka strony. Zawierają nawigację, logo, prawa autorskie. Stosowane raz na stronę (z wyjątkiem nagłówków w sekcjach).
<main>
Główna, unikalna treść dokumentu. Wszystko, co jest widoczne pomiędzy nagłówkiem a stopką. Powinna być tylko jedna na stronie.
<nav> / <menu>
Linki nawigacyjne. Używane do menu głównego, paska bocznego z linkami lub spisu treści.
<article> / <section>
<article> to niezależna treść (np. wpis na blogu). <section> grupuje powiązane tematy (np. Galeria, O nas).
<aside>
Treść powiązana z główną, ale poboczna (np. panel boczny, reklamy, dodatkowe linki).
alt i Kontrast
Dla dostępności (WCAG): obrazy muszą mieć alt. Kontrast tekstu do tła musi być wysoki.
RWD Semantyczne: W naszym kodzie używamy Media Query do zmiany układu (CSS Grid/Flex) elementu <aside> tak, by na telefonie był pod <main>, a nie obok niego.
3. Efekty CSS – przykłady
- Sticky header: zostaje u góry podczas przewijania.
- Animowane logo: lekko „unosi się” w górę i dół.
- Płynne podświetlanie kart: cień zmienia się na hover.
- Animowany przycisk: płynna zmiana koloru i rozmiaru na hover.
- Obrazek powiększający się przy najechaniu myszą:
- Dropdown FAQ: rozwiń by zobaczyć kod lub opis.
Efekt CSS: Kod dla animowanego logo
@keyframes logoFloat {
0% {transform: translateY(0);}
100% {transform: translateY(-12px);}
}
.logo {
animation: logoFloat 3s infinite alternate;
}
Efekt CSS: Kod dla powiększanego obrazka
.img-effect {
transition: transform .22s cubic-bezier(.42,1.3,.32,1),box-shadow .24s;
}
.img-effect:hover {
transform: scale(1.07);
box-shadow: 0 16px 44px #45dbc6;
}
Efekt CSS: Kod dla sticky header
.sticky-header {
position: sticky;
top: 0;
background: linear-gradient(90deg, var(primary), var(accent));
z-index: 999;
}