Projektowanie strony wymaga metodycznego podejścia, od struktury po zaawansowaną stylizację:
<header>, <nav>, <main>, <aside>, <article>, <section>, <footer>), aby nadać znaczenie treści, co poprawia SEO i dostępność.<h1>–<h6>), używaj list (<ul>, <ol>) i paragrafów (<p>).Flexbox jest modułem jednowymiarowego układu, który pozwala na elastyczne rozmieszczanie elementów wzdłuż jednej osi (głównej lub poprzecznej). Stosujemy go do komponentów interfejsu (np. menu nawigacyjne, paski boczne).
display: flex;: Włącza tryb flex.justify-content: <wartość>;: Wyrównuje elementy wzdłuż osi głównej (np. space-between, center).align-items: <wartość>;: Wyrównuje elementy wzdłuż osi poprzecznej (np. center, stretch).flex-direction: <wartość>;: Definiuje oś główną (row, column).Stwórz menu nawigacyjne, które na dużych ekranach wyświetla elementy w poziomie (row), a na małych w pionie (column), używając flex-direction i @media.
Zadbaj, aby linki były wyśrodkowane w pionie i miały równe odstępy (space-around).
Grid jest modułem dwuwymiarowego układu. Umożliwia definiowanie rzędów i kolumn oraz precyzyjne umieszczanie elementów w tych komórkach. Idealny do tworzenia głównej struktury strony (layoutu).
display: grid;: Włącza tryb grid.grid-template-columns: <definicja>;: Definiuje liczbę i szerokość kolumn (np. 1fr 1fr 1fr lub repeat(3, 1fr)).grid-template-rows: <definicja>;: Definiuje wysokość rzędów.gap: 20px;: Określa odstępy między komórkami.grid-column: 1 / 3;: Element zajmuje kolumny od linii 1 do 3.grid-area: nazwa;: Nazwanie obszaru w siatce dla łatwiejszego umieszczania.Zbuduj layout strony głównej używając Grid. Zdefiniuj trzy obszary:
header (cała szerokość).sidebar (1/4 szerokości).content (3/4 szerokości).Użyj grid-template-areas oraz jednostek fr (np. 1fr 3fr) do definiowania kolumn.
Responsywny design polega na tym, że strona automatycznie dostosowuje swój układ i elementy do rozmiaru ekranu użytkownika.
Aby przeglądarka poprawnie skalowała stronę na urządzeniach mobilnych, musisz mieć w sekcji <head>:
<meta name="viewport" content="width=device-width,initial-scale=1" />Pozwalają na stosowanie różnych stylów CSS w zależności od cech urządzenia, najczęściej od szerokości ekranu.
/* Style dla ekranów do 600px */
@media screen and (max-width: 600px) {
body {
background-color: lightcoral;
}
.grid {
/* Na małych ekranach kolumny są jedna pod drugą */
grid-template-columns: 1fr;
}
}
/* Style dla ekranów od 601px do 900px */
@media screen and (min-width: 601px) and (max-width: 900px) {
/* ... inne style dla tabletów ... */
}Napisz zapytanie mediów, które zmienia rozmiar czcionki nagłówka <h1> na 24px, jeśli szerokość ekranu jest **mniejsza niż 768px** (typowa granica dla tabletów).
Dodatkowo, dla ekranów mniejszych niż 768px, ustaw padding kontenera (.container) na 15px, aby lepiej wykorzystać przestrzeń mobilną.
Przejścia i animacje poprawiają doświadczenie użytkownika (UX), dodając płynności do interakcji.
Służą do płynnej zmiany wartości CSS po zmianie stanu elementu (np. najechaniu myszą :hover).
.card {
background-color: var(--card);
box-shadow: var(--shadow);
/* Określenie, że przejście ma trwać 0.4s dla wszystkich zmiennych */
transition: all 0.4s ease-in-out;
}
.card:hover {
background-color: #f0faff; /* Nowy kolor */
box-shadow: 0 10px 30px rgba(10,102,194,0.2); /* Nowy cień */
transform: translateY(-5px); /* Lekkie podniesienie */
}Pozwalają na zdefiniowanie sekwencji stylów w różnych punktach czasowych (procentowo: 0%, 50%, 100%).
Zdefiniuj prostą animację @keyframes o nazwie pulsuj, która zmienia krycie (opacity) elementu z 1 na 0.5 i z powrotem. Następnie zastosuj tę animację do przycisku (.btn-primary) na 2s i ustaw ją jako nieskończoną (infinite).
rem, em, %, vw) zamiast sztywnych px, co ułatwia responsywność i skalowanie.:root wszystkie główne kolory, fonty i odstępy. Poprawia to spójność i przyspiesza modyfikacje (jak w bieżącym kodzie :root).alt do **wszystkich** elementów <img>.Poniżej przedstawiono standardowy, responsywny szablon, łączący techniki Grid (do głównej struktury) i Flexbox (do komponentów wewnątrz, np. nawigacji).
Oto jak wygląda struktura strony, w której używamy CSS Grid do definicji głównych obszarów (Header, Menu, Content, Footer) i Flexbox do zarządzania wewnętrznym układem (np. w Menu).
Definicja obszarów strony za pomocą grid-template-areas oraz ustawienie dwóch kolumn: sidebar (250px) i content (resztę).
.wrapper {
display: grid;
/* Definicja obszarów: Header zawsze cała szerokość */
grid-template-areas:
"header header"
"nav content"
"footer footer";
/* 250px na sidebar, reszta (1fr) na content */
grid-template-columns: 250px 1fr;
gap: 20px;
min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.content { grid-area: content; }
.footer { grid-area: footer; }Gdy ekran jest wąski, zmieniamy układ na jedną kolumnę, gdzie wszystkie elementy układają się pionowo.
@media (max-width: 800px) {
.wrapper {
/* Wszystkie elementy w jednej kolumnie */
grid-template-columns: 1fr;
/* Nowa definicja obszarów dla mobile (nav idzie pod header) */
grid-template-areas:
"header"
"nav"
"content"
"footer";
}
}Wewnątrz obszaru .nav (nawigacja) wykorzystujemy Flexbox, aby elementy menu były równomiernie rozmieszczone w pionie lub poziomie.
.nav ul {
list-style: none;
padding: 0;
display: flex; /* Włącza Flexbox */
flex-direction: column; /* Ustawia elementy w kolumnie (np. dla sidebara) */
gap: 10px;
}
@media (max-width: 800px) {
.nav ul {
flex-direction: row; /* Zmienia na wiersz na mobile */
justify-content: space-around; /* Równomierne rozłożenie w poziomie */
}
}