Witaj witaj nie sraj

zapierdalaj do nauki zapierdalaj do nauki zapierdalaj do nauki

HTML

Dowiesz się tu podstaw HTML.

1. Szkielet i semantyka

  • Struktura dokumentu

  • Typografia i hierarchia

  • Listy

  • Linki i kotwice

  • Obrazy i video

  • Kontenery i grupowanie treści

2. Warstwa interakcji

  • Formularze

  • Formularze i przyciski

  • Walidacja danych

3. Tabele

  • Tabele – podstawy

  • Struktura tabeli

  • Łączenie komórek

4. Id, klasy i atrybuty

  • 4.1 Atrybuty globalne

  • 4.2 Atrybuty języka i danych

  • 4.3 Dobre praktyki

1.1. Struktura dokumentu

Te elementy definiują "tożsamość" pliku. Przeglądarka musi wiedzieć, że czyta kod HTML5, w jakim języku jest treść, oraz co ma wyświetlić na karcie (tytuł).

Lista tagów

  • <!DOCTYPE html> – Deklaracja informująca przeglądarkę o użyciu standardu HTML5.

  • <html> – Główny kontener całego dokumentu (tag "korzeń").

  • <head> – Sekcja z informacjami technicznymi strony (nie są one bezpośrednio widoczne w oknie przeglądarki).

  • <meta charset="UTF-8"> – Deklaracja kodowania znaków (pozwala na poprawne wyświetlanie polskich znaków).

  • <title> – Tekst wyświetlany na pasku karty w przeglądarce.

  • <body> – Sekcja zawierająca całą widoczną treść strony.

Witaj!

To jest treść widoczna w przeglądarce.

1.2. Typografia i hierarchia

Te tagi budują szkielet informacyjny strony. Nagłówki tworzą hierarchię (jak w spisie treści książki), co jest kluczowe dla SEO i czytników ekranu. Akapity i elementy liniowe pozwalają zarządzać blokami tekstu oraz wyróżniać konkretne frazy bez zmiany układu strony.

Lista tagów

  • <h1> – Najważniejszy tytuł strony (tylko jeden na dokument).

  • <h2> – Główny nagłówek sekcji.

  • <h3> – Podtytuł/podrozdział.

  • <h4> do <h6> – Nagłówki niższego rzędu.

  • <p> – Akapit (podstawowy blok tekstowy).

  • <span> – Element liniowy (do objęcia konkretnego słowa, np. by nadać mu kolor w CSS później).

  • <br> – Wymuszenie przełamania linii (nowa linia bez tworzenia nowego akapitu).

  • <hr> – Pozioma linia (tematyczne oddzielenie treści).

Tytuł Główny

Sekcja o mnie

To jest akapit, w którym specjalnie wyróżniam fragment tekstu.

Moje zainteresowania

Pierwsza linia tekstu.
Druga linia tekstu (przełamanie).

Podtytuł techniczny

Treść końcowa.

1.3. Listy

Listy pozwalają uporządkować informacje w sposób czytelny i estetyczny, prosty do kontroli potem.

Lista tagów

  • <ul> – Lista nieuporządkowana (wypunktowana), gdy kolejność nie ma znaczenia.

  • <ol> – Lista uporządkowana (numerowana), gdy ważna jest kolejność kroków.

  • <li> – Pojedynczy element (musi być dzieckiem <ul> lub <ol>).

Lista zakupów:

  • Chleb
  • Mleko

Instrukcja:

  1. Otwórz edytor.
  2. Napisz kod.

1.4. Linki i kotwice

Linki pozwalają na nawigację między różnymi stronami lub sekcjami wewnątrz tej samej strony, co nazywamy kotwicami.

Tag linka

  • <a> – Hiperłącze / link.

Atrybuty linka

  • <href="..."> – Atrybut docelowy (URL zewnętrzny lub nazwa kotwicy).

  • <target="_blank"> – Otwiera link w nowej karcie przeglądarki.

  • <id="..."> – Atrybut nadawany elementowi, do którego chcemy „skoczyć” (np. <id="kontakt">).

Strona pomocna w html css js
Skocz do kolejnej sekcji

1.5. Obrazy i multimedia

Służą do wyświetlania grafik oraz odtwarzania plików wideo bezpośrednio w oknie przeglądarki. Są to elementy typu „samozamykającego się” (nie potrzebują osobnego tagu zamykającego).

Tag obrazka

  • <img> – Tag do osadzania obrazu.

Atrybuty obrazka

  • src="..." – Ścieżka do pliku (adres URL lub lokalizacja na dysku).

  • alt="..." – Tekst alternatywny (kluczowy dla dostępności – wyświetli się, jeśli obrazek się nie załaduje) oraz dla osób korzystających z czytników ekranu (np. niewidomych).

  • width / height – Szerokość i wysokość w pikselach (określenie wymiarów poprawia wydajność ładowania).

  • loading="lazy" – Atrybut, który wstrzymuje ładowanie obrazka, dopóki użytkownik do niego nie przewinie (oszczędność transferu).

ikona servera ikona servera

Tag wideo

  • <video> – Tag do osadzania wideo.

Atrybuty wideo

  • controls – Dodaje pasek odtwarzacza (play, pauza, głośność).

  • src="..." – Źródło pliku wideo.

  • autoplay – Uruchamia film automatycznie (często blokowane przez przeglądarki bez muted).

  • muted – Wycisza film.

1.6. Kontenery i grupowanie treści

Niektóre elementy HTML nie mają własnego znaczenia (semantyki/stylowania większego), ale służą do organizowania i grupowania innych elementów. Są one szczególnie przydatne przy stylowaniu strony (CSS) oraz manipulacji elementami (JavaScript).

Do takich elementów należą <div> i <span>. Różnią się one sposobem działania: jeden jest blokowy, a drugi liniowy.

Tag div

  • Element blokowy (zaczyna się od nowej linii i zajmuje całą szerokość?).

  • Służy do grupowania większych fragmentów strony.

  • Najczęściej używany do budowy layoutu i sekcji.

Sekcja strony

To jest tekst w kontenerze div.

Drugi blok treści.

Tag span

  • Element liniowy (nie łamie linii)

  • Działa wewnątrz tekstu

  • Służy do wyróżniania fragmentów

To jest ważne słowo w zdaniu.

Możemy wyróżnić fragment tekstu.

2.1. Formularze

Formularze pozwalają użytkownikowi na wprowadzenie własnych danych (np. imię, komentarz, hasło) i wysłanie ich na serwer. To "punkt styku" między stroną a użytkownikiem.

Tag form

  • <form> – Kontener całego formularza.

Atrybuty form

  • action="..." – Adres strony, na którą dane zostaną wysłane.
  • method="..." – Metoda wysyłki: GET (dane widoczne w pasku adresu) lub POST (dane ukryte, bezpieczniejsze).

Tag label

  • <label> – Etykieta pola. Atrybut for musi pasować do id konkretnego pola (dzięki temu kliknięcie w napis zaznacza pole).

Tag input

  • <input> – Pole wejściowe (typ definiuje się przez atrybut type).

typy inputa

  • type="text" – Zwykły tekst.
  • type="email" – Sprawdza, czy wpisano poprawny adres e-mail.
  • type="password" – Maskuje wpisywane znaki.
  • type="checkbox" – Pole wyboru (wiele opcji).
  • type="radio" – Wybór jednej opcji z grupy.

Formularz z text, email, password







Wybierz zainteresowania:



Wybierz płeć:



2.2. Formularze cz.2

tag textarea

  • <textarea> – Pole na dłuższy tekst (treść wpisuje się między znacznikami, nie przez value)

  • <rows="..."> - Liczba widocznych wierszy tekstu.

  • <cols="..."> - Szerokość pola w liczbie znaków (nie jest to dokładna szerokość w pikselach).

  • <placeholder="..."> - Tekst podpowiedzi wyświetlany, gdy pole jest puste.

  • <maxlength="..."> - Maksymalna liczba znaków, które można wpisać.

tag select

  • <select> – Lista rozwijana z możliwością wyboru jednej opcji. <option> – Pojedyncza opcja w liście rozwijanej (dziecko <select>).

  • <selected> - Oznacza domyślnie wybraną opcję.

  • <value="..."> - Wartość opcji, która zostanie przesłana do serwera.

tag button

  • <button> – Przycisk, wywołujący akcje.

  • <type="button"> - Zwykły przycisk, który sam z siebie nic nie robi (można go użyć do np. wywołania funkcji JavaScript).

  • <type="submit"> - Przycisk, który wysyła formularz (domyślnie, jeśli jest w formie).

  • <type="reset"> - Przycisk, który resetuje wszystkie pola formularza do wartości początkowych.

  • <disabled> - Atrybut, który dezaktywuje przycisk (nie można go kliknąć).

tag fieldset i legend

  • <fieldset> – Grupuje powiązane elementy formularza.

  • <legend> – Tytuł grupy elementów formularza.

  • <disabled> - Wyłącza wszystkie elementy formularza wewnątrz <fieldset>.

Dane użytkownika

Imię: __________

Email: __________

2.3. Walidacja danych

Pozwalaja przeglądarce sprawdzić, czy dane wpisane przez użytkownika spełniają określone wymagania, jeszcze zanim trafią na serwer, mimo to trzeba sprawdzić dane po stronie serwera, ponieważ da się modyfikować dane po stronie klienta.

Lista atrybutów

  • <required> – Wymusza wypełnienie pola formularza.

  • <min / max> – Ustawia minimalną i maksymalną wartość dla pola formularza.

  • <step> – Skok (np. co 0.5 lub co 10).

  • <pattern="..."> – Wymusza wpisanie danych zgodnych z określonym wyrażeniem regularnym (np. dla numeru telefonu).

3.1. Tabele – podstawy

Tabele w HTML służą do przedstawiania danych w wierszach i kolumnach. Używa się ich wtedy, gdy informacje mają układ tabelaryczny, np. plan lekcji, cennik, wyniki lub zestawienie danych.

Tag table

  • <table> – Główny kontener tabeli.

Tag tr

  • <tr> – Wiersz tabeli.

Tag td

  • <td> – Zwykła komórka tabeli.

Tag th

  • <th> – Komórka nagłówkowa tabeli.

Prosta tabela

Imię Wiek
Anna 22
Jan 25

3.2 Struktura tabeli

Większe tabele można podzielić na część nagłówkową, główną i stopkę. Dzięki temu kod jest bardziej uporządkowany i czytelny.

Tag thead

  • <thead> – Górna część tabeli, zwykle zawiera nagłówki kolumn.

Tag tbody

  • <tbody> – Główna część tabeli z danymi.

Tag tfoot

  • <tfoot> – Dolna część tabeli, np. podsumowanie.

Tabela z thead, tbody i tfoot

Produkt Cena
Klawiatura 100 zł
Myszka 50 zł
Razem 150 zł

3.3 Łączenie komórek

W tabelach można łączyć komórki w poziomie i pionie. Służą do tego atrybuty colspan oraz rowspan.

Atrybuty

  • colspan="..." – Łączy komórki w poziomie.
  • rowspan="..." – Łączy komórki w pionie.

Tabela z colspan

Dane ucznia
Imię Kasia
Klasa 3A

Tabela z rowspan

Imię Przedmiot
Marek Matematyka
Informatyka

4.1. Atrybuty globalne

Atrybuty globalne to takie, których można używać w wielu różnych elementach HTML. Pozwalają identyfikować elementy, grupować je, dodawać podpowiedzi, ukrywać treść lub ustawiać podstawowe informacje o zawartości.

Atrybut id

  • id="..." – Unikalny identyfikator elementu. Na jednej stronie dana wartość id powinna wystąpić tylko raz.

Atrybut class

  • class="..." – Nadaje elementowi jedną lub więcej klas. Klasy służą głównie do stylowania w CSS i wybierania elementów w JavaScript.

Atrybut title

  • title="..." – Dodatkowa podpowiedź wyświetlana po najechaniu kursorem na element.

Atrybut hidden

  • hidden – Ukrywa element na stronie.

Atrybut style

  • style="..." – Pozwala nadać styl bezpośrednio w elemencie (tzw. styl inline).

Przykład z id, class, title, hidden i style

To jest akapit z identyfikatorem.

To jest akapit z klasą.

Ten tekst ma kolor czerwony.

4.2. Atrybuty języka i danych

Niektóre atrybuty globalne służą do określenia języka treści albo do przechowywania własnych danych, które mogą być później wykorzystane np. w JavaScript.

Atrybut lang

  • lang="..." – Określa język treści elementu lub całego dokumentu.

Atrybuty data-*

  • data-* – Pozwalają zapisać własne dane w elemencie HTML, np. data-id, data-role, data-category.

Przykład z lang i data-*

To jest tekst po polsku.

Użytkownik administracyjny

4.3. Dobre praktyki

Niektóre atrybuty są bardzo często używane, dlatego warto znać kilka podstawowych zasad.

Lista zasad

  • id powinno być unikalne w całym dokumencie.
  • class może być używane wielokrotnie w wielu elementach.
  • style lepiej stosować rzadko – zwykle lepiej przenosić style do CSS.
  • hidden ukrywa element całkowicie.
  • data-* dobrze nadają się do przechowywania dodatkowych informacji dla JavaScript.

CSS

Ta część jest o tym, jak nadać stronie wygląd i układ. Najpierw ustawiasz kolor i tekst, potem odstępy i rozmiary, a na końcu uczysz się układać elementy obok siebie i reagować na różne szerokości ekranu.

1. Start

  • 1.1 Podłączenie i składnia

  • 1.2 Selektory id, class, tag

  • 1.3 Zmienne CSS i JS

2. Kolory i tekst

  • 2.1 Kolory

  • 2.2 Kolor czcionki i tła

  • 2.3 Czcionka i rozmiar tekstu

  • 2.4 Wyrównanie i dekoracja tekstu

3. Odstępy, obramowania, rozmiar

  • 3.1 Margin i padding

  • 3.2 Border

  • 3.3 Width, height, box-sizing

  • 3.4 Jednostki

4. Układy

  • 4.1 Display: block, inline, inline-block, flex, grid

  • 4.2 Flexbox: kierunek, wyrównanie i odstępy

  • 4.3 Grid

  • 4.4 Responsywność i media queries

5. Responsywność

  • 5.1 Responsywność — o co chodzi

  • 5.2 Viewport i meta viewport

  • 5.3 Elastyczne podstawy bez media queries

  • 5.4 Co najczęściej psuje układ

  • 5.5 Media queries — składnia i działanie

  • 5.6 max-width, min-width i zakresy

  • 5.7 Mobile-first

  • 5.8 Co zmienia się w praktyce

  • 5.9 Przykłady responsywnych układów

  • 5.10 Typowe błędy i dobre praktyki

  • 5.11 Na przyszłość

1.1. Podłączenie i składnia

Są trzy podstawowe sposoby na użycie CSS

atrybut style w elemencie html

  • style="" – atrybut pozwalający na przypisanie stylów bezpośrednio do elementu.

  • Najlepiej unikać tego sposobu, ponieważ miesza treść z wyglądem i utrudnia zarządzanie stylem, również nie pozwala na ponowne wykorzystanie tych samych stylów w wielu elementach.

Ten tekst jest czerwony.

ELEMENT STYLE w DOKUMENCIE HTML

  • <style></style> – element ten powinno umieszczać się w sekcji <head>, choć sama używam w <body>. Pozwala on na zdefiniowanie stylów CSS, które będą stosowane do elementów na stronie.

Ten tekst jest czerwony.

style w dokumencie css

  • Głównym sposobem przechowywania stylów jest umieszczenie ich w osobnym pliku z rozszerzeniem .css.

  • Podłączasz go do dokumentu HTML za pomocą elementu <link> w sekcji <head>.

  • Możesz rozdzielać style na kilka plików (np. style.css, layout.css, theme.css) i podłączać je wszystkie.

  • Ten sposób jest najbardziej zalecany, ponieważ oddziela treść od wyglądu, ułatwia zarządzanie stylami i pozwala na ponowne wykorzystanie tych samych stylów na wielu stronach.

Ten tekst jest czerwony.

1.2. Selektory id, class, tag...

Style można podłączać na bardzo wiele sposobów, ponieważ to co naprwadę cię ogranicza to to co wstawisz w html.

id

  • id="" – Selektor id pozwala na stylowanie konkretnego elementu o unikalnym identyfikatorze. W CSS używa się go z prefiksem #, np. #moj-id.

  • Identyfikator powinien być unikalny w całym dokumencie, więc ten sposób jest dobry do stylowania pojedynczych elementów.

Fioletowy napis po id.

class

  • class="" – Selektor class pozwala na stylowanie wielu elementów jednocześnie. W CSS używa się go z prefiksem ., np. .moja-klasa.

  • Możesz opisywać nimi nawet elementy jak button typu .button-warning i np. by oznaczało że każdy z 50 przyciskow z taka klasa by byly czerwone, jako ostrzezenie

czerwony tekst po klasie. drugi czerwony tekst po klasie.

tagi

  • Możesz korzystać z selektorów tagów, np. p do stylowania wszystkich akapitów, h1 do stylowania wszystkich nagłówków pierwszego poziomu itd.

  • Raczej nie jest to typowy sposób użycia, jak już to do ustawienia domyślnych stylów, albo np w konkretnym div ale to potem wiecej powiem o np. #sekcja-a > p {}, co oznacza, że w elemencie o id #sekcja-a każdy paragraf będzie miał styl, który ustawimy w nawiasach klamrowych. Jest dużo innych takich możliwości, co czasem pozwala nawet na unikanie javascriptu do pewnych rzeczy.

Jeden zielony span. Drugi zielony span.

1.3. Zmienne CSS i połączenie z JS

Zmienne CSS pozwalają zapisać wartość raz i używać jej w wielu miejscach. To wygodne przy kolorach, odstępach, promieniach zaokrągleń i motywach strony, ponieważ np. masz jakiś kolor główny dla strony to potem możesz w jednym miejscu zmienić kolor i zmieni się na całej stronie nawet w 200 miejscach. Zwłaszcza, że możesz też dać jakiś główny kolor i w niektórych miejscach użyć go z jakimś nasyceniem, co teoretycznie może pozwolić, że zmiana pięciu kolorów pozwoli całą stronę zmienić kolorystycznie.

Element i zapis

  • Zmienne zwykle zapisuje się w :root, żeby były dostępne globalnie.

  • Tworzysz je przez --nazwa-zmiennej, a używasz przez var(--nazwa-zmiennej).

Połączenie z JavaScript

  • JS może zmienić wartość zmiennej, np. dla motywu jasny/ciemny.

  • Prosty przykład zmiany: document.documentElement.style.setProperty('--main-color', 'tomato').

  • Prosty odczyt: getComputedStyle(document.documentElement).getPropertyValue('--main-color').

Przykład zmiany:

Przykład odczytu:

Pełny przykład interaktywny (kliknij przycisk):

Kolor i tło mogą pochodzić ze zmiennych CSS.

2.1. Kolory

Kolory w CSS można zapisywać na kilka sposobów. Najczęściej spotkasz gotowe nazwy kolorów, zapis hex, rgb, rgba oraz transparent.

Nazwy kolorów

CSS ma wbudowane gotowe nazwy kolorów. To najprostszy zapis i dobry na start.

  • red – czerwony

  • blue – niebieski

  • green – zielony

  • black – czarny

  • white – biały

  • gray – szary

  • orange – pomarańczowy

  • tomato – gotowa nazwa odcienia czerwono-pomarańczowego

  • purple – fioletowy

  • pink – różowy

Hex

Hex to zapis szesnastkowy poprzedzony znakiem #. Jest bardzo popularny w projektach i często używany w edytorach graficznych oraz figmie.

  • #ff0000 – czerwony

  • #0000ff – niebieski

  • #00ff00 – zielony

  • #000000 – czarny

  • #ffffff – biały

  • #7c3aed – przykładowy fiolet

  • #f59e0b – przykładowy pomarańczowy

RGB

RGB zapisuje kolor przez ilość czerwieni, zieleni i niebieskiego. Każda wartość jest z zakresu od 0 do 255.

  • rgb(255, 0, 0) – czerwony

  • rgb(0, 0, 255) – niebieski

  • rgb(0, 255, 0) – zielony

  • rgb(0, 0, 0) – czarny

  • rgb(255, 255, 255) – biały

  • rgb(220, 38, 38) – ciemniejszy czerwony

RGBA

RGBA działa jak RGB, ale ma jeszcze czwartą wartość – przezroczystość. Ostatnia liczba jest z zakresu od 0 do 1.

  • rgba(255, 0, 0, 1) – pełny czerwony bez przezroczystości

  • rgba(255, 0, 0, 0.5) – czerwony z połową przezroczystości

  • rgba(0, 0, 255, 0.3) – lekko przezroczysty niebieski

  • rgba(37, 99, 235, 0.7) – niebieski z lekką przezroczystością

Transparent

transparent oznacza całkowicie przezroczysty kolor. Przydaje się np. przy tłach, obramowaniach albo efektach hover.

  • transparent – całkowicie przezroczysty kolor

Tekst w kolorze z nazwy.

Tekst w kolorze hex.

Tekst w kolorze rgb.

Tekst w kolorze rgba.

Tło może być transparent.

2.2. Kolor czcionki i tła

Jedne z najczęściej używanych właściwości CSS to kolor tekstu i tła elementu. Po dodaniu odstępów i bordera to więkoszść efektu wizualnego jaki potrzebujemy.

Właściwości

  • color – ustawia kolor tekstu.

  • background-color – ustawia kolor tła elementu.

To jest prosty box z kolorem tekstu i tła.

2.3. Czcionka i rozmiar tekstu

CSS pozwala ustawić rodzinę fontów, wielkość, pogrubienie i wysokość linii. Dzięki temu tekst staje się czytelniejszy i bardziej uporządkowany.

Właściwości

  • font-family – wybór kroju pisma.

  • font-size – rozmiar tekstu.

  • font-weight – grubość tekstu.

  • line-height – wysokość linii.

Większy i mocniejszy nagłówek tekstowy

To jest zwykły akapit, ale ma wygodniejszą wysokość linii, więc czyta się go przyjemniej.

2.4. Wyrównanie i dekoracja tekstu

Poza kolorem i rozmiarem możesz ustawić też ułożenie tekstu oraz dodatkowe ozdobniki, takie jak podkreślenie czy przekreślenie.

Właściwości

  • text-align – wyrównanie tekstu w poziomie, np. do lewej, środka, prawej albo obustronnie.

  • text-decoration – dekoracja tekstu, np. underline, line-through albo overline.

  • text-transform – zmiana wielkości liter.

  • vertical-align – wyrównanie w pionie, ale tylko w wybranych sytuacjach, np. dla elementów inline lub komórek tabeli. Lepiej jakgbyś używała jednak flexa, ale czasem można tego użyć albo i sztucznie paddingiem wyrównąć jak znasz wysokość, choć nie polecam.

Tekst wyrównany do lewej.

Tekst wyśrodkowany.

Tekst wyrównany do prawej.

Tekst wyjustowany wygląda równo przy obu krawędziach, gdy jest odpowiednio długi i ma więcej treści do rozciągnięcia. Dodam troche tekstu abys zobaczyla co to robi mozesz tez zmienic na komputerze wielkosc okna aby lepiej zobaczyć efekt. (osobiście nigdy tego nie użyłam nawet chyba, ale ciekawe)

Tekst podkreślony.

Tekst przekreślony.

Tekst z linią nad tekstem.

małe litery zamienione na wielkie

DUŻE LITERY ZAMIENIONE NA MAŁE

każde słowo zaczyna się wielką literą

Tekst ustawiony wyżej

3.1. Margin i padding

To jedna z najważniejszych rzeczy przy układaniu elementów. margin robi odstęp na zewnątrz elementu, a padding robi odstęp wewnątrz.

Właściwości

  • margin – odstęp od innych elementów.

  • padding – odstęp między treścią a krawędzią elementu.

  • Możesz też używać stron osobno: margin-top, padding-left czy np margin-inline i inne, sama musisz se dobrać jak wolisz z nich korzystać

  • Również w margin i padding, możesz konkretne strony w margin i padding: margin: 10px 20px 30px 40px; Kolejno oznacza górny, prawy, dolny i lewy odstęp. Też możesz margin: 10px 20px; to jest skrócony zapis dla kolejno pionu i poziomu, czyli pion to top i bottom a poziom to left i right.

Ten box ma padding w środku.
Ten box ma większy odstęp od góry.

3.2. Border

Obramowanie pomaga oddzielić element od reszty strony. Bardzo często łączy się je z tłem, paddingiem i zaokrągleniem rogów.

Właściwości

  • border – skrócony zapis szerokości, stylu i koloru obramowania. (border-width, border-style, border-color)

  • border-radius – zaokrąglenie rogów.

  • border-color, border-width, border-style – ustawienia osobno.

  • Również możesz używać stron osobno: border-top, border-right, border-bottom, border-left.

  • Styl obramowania: solid, dashed, dotted, double (może są też inne, ale dla ciekawszych są inne metody).

Można też

  • Można też wyłączyć obramowanie, border: none;. A potem np. dodać tylko dolny border: border-bottom: 2px solid #8b5cf6;

  • Można też wyłączyc np. tylko lewy border: border-left: none;

To jest box z obramowaniem i zaokrągleniem.

3.3. Width, height, box-sizing

Szerokość i wysokość kontrolują rozmiar elementu. box-sizing decyduje, czy padding i border wliczają się do finalnego rozmiaru boxa. Postaram się dorobić sekcję 3.4 z jednostkami typu px, % itd jeśli nei masz czytająć to jeszcze.

Właściwości width i height

  • width – szerokość elementu.

  • height – wysokość elementu.

Wartości dla width i height

  • px – stały rozmiar, np. 220px.

  • % – procent względem rodzica, np. 50%.

  • auto – rozmiar wyliczany automatycznie.

  • fit-content – rozmiar dopasowany do zawartości.

  • Pamiętaj, że auto i fit-content czasem nei działa w niektórych sytuacjach albo nie działają tak jak byś chciała.

Przykład width w px

Box o szerokości 220px.

Przykład width w %

Box o szerokości 50% rodzica.

Przykład width: fit-content

Szerokość dopasowana do treści.

Przykład height w px

Ten box ma wysokość 80px.

Przykład height: auto

Height auto dopasowuje się do treści, więc ten element rośnie razem z zawartością.

Właściwość box-sizing

  • box-sizing – decyduje, jak liczony jest końcowy rozmiar elementu.

Wartości dla box-sizing

  • content-box – domyślnie szerokość i wysokość liczą tylko zawartość. Padding i border dodają się osobno.

  • border-box – szerokość i wysokość obejmują też padding i border.

  • Żebyś widziała różnicę lepiej, dałam mniejsze width i height oraz większy padding aż 50px, bo nie zawsze ta różnica jest widoczna i jak powinnaś zobaczyć border-box jakgby: wsadził padding do środka a nie jak content-box zwiększył szerokość o niego, potem pokaże trik fajny na border-box, ale musisz pamiętać, że jak dasz za duży padding to potrafi rozpchac środek ponieważ nie mieści się tekst z padding w tym rozmiarze.

Przykład box-sizing: content-box

content-box

Przykład box-sizing: border-box

border-box

Dodatkowe właściwości rozmiaru

  • min-width – minimalna szerokość elementu.

  • max-width – maksymalna szerokość elementu.

  • min-height – minimalna wysokość elementu.

  • max-height – maksymalna wysokość elementu.

Przykład min-width

Ten box nie będzie węższy niż 220px.

Przykład max-width

Ten box ma maksymalnie 300px szerokości, więc długi tekst zacznie łamać się do kolejnej linii.

Przykład min-height

Ten box ma co najmniej 100px wysokości.

Przykład max-height

Ten box ma maksymalnie 80px wysokości. Jeśli treści będzie więcej, pojawi się przewijanie albo nadmiar treści zostanie ograniczony zależnie od ustawienia overflow. Ten przykład pokazuje właśnie box z ograniczoną wysokością. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, veritatis quibusdam officiis vel omnis harum molestiae, facere repudiandae odio earum quidem sequi, distinctio perferendis commodi rem suscipit repellat numquam ullam.

Moja rada, zawsze tego używam, choć oczywiście nie musisz

Można dać na początku pliku css border-box dla wszystkich elementów, używając gwiazdki (*), co też można używać w inne sposoby nei tylko do tego, ale zwykle jak zaczynam to robić, to umieszczam takie coś na początku pliku css. I ważne żeby umieszczać na początku ponieważ jak dasz dalej to może nadpisac późniejsze style a tak to jak potem chcesz konkretny elemnt inaczej to nadpisze to

W ten sposób każdy element na stronie będzie miał ustawiony border-box.

To od razu pokaże na innym przykładzie możesz np jak tutaj dla wszystkich elementów w klasie .my-class, ale * zalicza sie do elementow w srodku, wiec jesli chcesz tez na .my-class to musisz dać ją oddzielnie albo po przecinku, wtedy css wie, że to co w {} ma zrobići dla tego elementu i tego co po przecinku czyli każdego w nim w tym przypadku.

Ten tekst jest na 3 poziomie zagnieżdżenia i do niego też zalicza się gwiazdka (*)

3.4. Jednostki

W CSS wiele właściwości przyjmuje wartości z jednostkami. Najczęściej spotkasz jednostki stałe, względne względem tekstu albo względem ekranu.

Nie każda właściwość przyjmuje każdą jednostkę. Zawsze warto sprawdzić w dokumentacji, jaki typ wartości obsługuje dana właściwość.

MDN ma bardzo dobrą rozpiskę wartości i jednostek CSS: CSS values and units.

Większość jednostek będziesz musiała sama w praktyce się nauczyć.

Najczęstsze grupy

  • px – piksele, czyli stały rozmiar. (czyli w porównaniu do %, na różnych monitorach może wyglądać inaczej), oraz pamiętaj, że np niektóre przeglądarki zajmują wiecej miejsca jakimiś menu itd, albo nei każdy otwiera w 100% szerokosci i wysokości okna stronę.

  • % – procent względem rodzica albo innego kontekstu właściwości. (zwykle jeśli nie dasz position: relative; to raczej odwoła się to do body ale nei zawsze musi.)

  • em – względem bieżącego rozmiaru tekstu.

  • rem – względem rozmiaru tekstu elementu root.

  • vw i vh – względem szerokości i wysokości viewportu. (co też trzeba się nauczyć, że w różncyh sytuacjach nei musi być to to co chcesz, albo inaczej się zachowuje, ale często lubie dać np max-width: 100vw; na html i body)

  • dvh – dynamiczna wysokość viewportu, przydatna szczególnie na mobile.

  • fit-content – rozmiar dopasowany do treści w granicach kontenera.

Przykład px

Szerokość ustawiona w px.

Przykład %

Szerokość ustawiona w procentach.

Przykład em

Ten tekst ma 1.5em.

Przykład rem

Ten tekst ma 1.5rem.

Przykład vw

Jak widzisz, niezależnie od diva wokół i innych elementów, jednostka vw jest zależna od szerokości viewportu czyli jakgby monitora, więc u mnei na komputarze pokazał się scroll na elemencie bo wyszło za niego.

Szerokość zależna od viewportu.

Przykład vh

Wysokość zależna od viewportu.

Przykład dvh

Różnica między vw a vh sprowadza się do tego, do której krawędzi ekranu się odnosisz: vw (Viewport Width) to jednostka oparta na szerokości okna przeglądarki, gdzie $1vw$ odpowiada $1\%$ tej szerokości, natomiast vh (Viewport Height) bazuje na jego wysokości i $1vh$ to $1\%$ pionowego wymiaru okna. W praktyce oznacza to, że element z ustawioną wartością 100vw będzie zawsze tak szeroki jak ekran, a element 100vh będzie zawsze tak wysoki jak ekran, niezależnie od tego, jak duże są ich kontenery nadrzędne. Warto jednak pamiętać, że na urządzeniach mobilnych tradycyjne vh bywa zdradliwe, ponieważ często nie uwzględnia dynamicznie pojawiającego się paska adresu przeglądarki, co może powodować ucinanie dołu strony – dlatego w nowoczesnym CSS do precyzyjnego ustawiania wysokości sekcji na telefonach lepiej sprawdza się dvh, które na bieżąco reaguje na zmiany widocznego obszaru. Natomiast w przypadku szerokości, zamiast 100vw często bezpieczniej jest użyć 100%, aby uniknąć problemów z nachodzeniem treści na pionowy pasek przewijania.

Wysokość zależna od dynamicznego viewportu.

Przykład fit-content

Szerokość dopasowana do treści.

Praktyczna uwaga

  • px jest prosty i przewidywalny.

  • em i rem są bardzo dobre dla tekstu i odstępów.

  • vw, vh i dvh przydają się w layoutach i sekcjach na cały ekran.

  • Nowocześniejsze jednostki, zwłaszcza viewportowe, warto sprawdzać w dokumentacji i kompatybilności przeglądarek.

  • Pełna lista jednostek jest bardzo duża, dużo z nich mają fajne zastosowanie, ale najlepiej zwłąszcza bez sprawdzania kompatybilności i przegladarek i tez nawet ich wersji, używać px, em, rem, %, vw, vh co pozwala na zrobienie prawie wszystkiego, zwłaszcze ze mozna uzyc js do pomocy zwykle.

4.1. Display: block, inline, inline-block, none, flex, inline-flex, grid, inline-grid

Właściwość display mówi, jak element zachowuje się w układzie strony. To ona decyduje, czy element zajmuje cały wiersz, siedzi w tekście, czy staje się kontenerem układu.

Jak niżej piszę, że np zajmuje całą dostępną szerokość, to jest to defaultow, czyli jak np. dasz width: 200px; to tyle zajmie, ale to też pokazuje czemu np niektore elementy jak p gdy dawalas text-align: center; w grze ktora pisalas to ladnie sie ukladaly bo elementy te zajmowaly cala szerokosc, wiec wystarczylo tylko tekst w nich wyrownac.

Najważniejsze wartości

  • block – element zaczyna nową linię i zwykle zajmuje całą dostępną szerokość.

  • inline – element siedzi w jednej linii z tekstem.

  • inline-block – element może stać obok innych jak inline, ale można wygodnie ustawiać mu szerokość i wysokość.

  • none – element znika z układu strony. (czesto np w ten sposob menu jedno znika na telefonie i pojawia sie inne prostsze pod telefon jako inny element a poprzednie znika bo ma none)

  • flex – element staje się kontenerem flexboxa.

  • inline-flex – jak flex, ale sam kontener zachowuje się bardziej jak element liniowy.

  • grid – element staje się kontenerem siatki.

  • inline-grid – jak grid, ale sam kontener zachowuje się bardziej jak element liniowy.

z tym inline chodzi o to ze np inline-flex i flex to co ma w srodku tymbardziej jak dasz width i height np na 200x200 to powinnien wygladac i zachowywac sie tak samo, natomiast jesli dasz display block po block to ustawia sie pod soba w kolumnie a jak inline to obok siebie.

Domyślne zachowanie wielu elementów

  • div, p, section, h1 zwykle zachowują się blokowo.(dlatego cala szerokosc zajmwoaly i byly pod soba)

  • span, a, strong zwykle zachowują się liniowo. (a tutaj wlasnie span ukladal sie obok drugiego nie jak paragraph)

  • Przy inline szerokość i wysokość nie działają tak wygodnie jak przy block albo inline-block.

Przykład display: block

Pierwszy block Drugi block

Przykład display: inline

Osobiscie nie uzywam tego nigdy raczej.

inline 1 inline 2

Przykład display: inline-block

Box 1 Box 2

Przykład display: none

Ten element widać.
Tego elementu nie widać.

Przykład display: flex

Jak widac standardowo ukladaja sie obok siebie ale to wiesz juz i dalej zobaczysz wiecej tu tylko przyklady.

Karta 1
Karta 2
Karta 3

Przykład display: inline-flex

Jak widzisz wewnatrz oba prawie tak samo sie zachowuja, na pierwszy rzut oka nawet tak samo i flex i inline-flex, roznica glowna jest poza czyli jak dasz obok siebei dwa elementy flex albo inline-flex, to flex sie ustawia pod soba a inline-flex pod soba, i ze względu na to, że to INLINE to kontener zajmuje w przypadku zwyklej wersji flex czyli jakgby grid 100%, a dla inline jakgby minimum ktore potrzebuje jak tekst typu span, ale jak dasz szerokosc i wysokosc to tak naprawde prawie tak samo.

Karta 1
Karta 2
Karta 3

Przykład display: grid

Pole 1
Pole 2
Pole 3
Pole 4

Przykład display: inline-grid

1
2
3
4

4.2. Flexbox: kierunek, wyrównanie i odstępy

Flexbox jest świetny do ustawiania elementów w jednym rzędzie albo jednej kolumnie. Bardzo często używa się go do kart, menu, przycisków i prostych układów sekcji.

Choc ja używam prawie zawsze bo można flexa w flexa wjebac :))

Flexbox działa na kontenerze oraz na elementach wewnątrz niego. Najpierw ustawiasz display: flex na rodzicu, a dopiero potem sterujesz kierunkiem i wyrównaniem dzieci.

Najważniejsze właściwości kontenera

  • display: flex – włącza flexbox.

  • flex-direction – ustawia kierunek elementów. (standardowo to jest row)

  • justify-content – ustawia elementy w osi głównej.

  • align-items – ustawia elementy w osi poprzecznej.

  • gap – odstęp między elementami.

  • flex-wrap – pozwala elementom przechodzić do kolejnego wiersza.

Domyślne wartości

  • flex-direction: row – elementy idą w jednym rzędzie.

  • justify-content: flex-start – elementy ustawiają się od początku osi głównej.

  • align-items: stretch – elementy rozciągają się w osi poprzecznej.

  • flex-wrap: nowrap – elementy nie zawijają się domyślnie.

Prosty start z display: flex

1
2
3

Przykład flex-direction: row

1
2
3

Przykład flex-direction: column

1
2
3

Przykład justify-content: flex-start

1
2
3

Przykład justify-content: center

1
2
3

Przykład justify-content: flex-end

1
2
3

Przykład justify-content: space-between

1
2
3

Przykład justify-content: space-around

1
2
3

Przykład justify-content: space-evenly

1
2
3

Przykład align-items: stretch

1
2
3

Przykład align-items: flex-start

1
2
3

Przykład align-items: center

1
2
3

Przykład align-items: flex-end

1
2
3

Przykład gap

1
2
3

Przykład flex-wrap: wrap

Karta 1
Karta 2
Karta 3
Karta 4

Przykład skrótu flex

Nie musisz teoretycznie używać flex: x;, sama długo nie uzywalam, tylko np dawalam ukladanie w poziomie i jednemu elementowi szerokosc 60% a drugiemu 40% i to super dziala, ale warto sie nauczyc flex: x; do poprawnego uzywania flexboxa, zwlasczza ze np mozesz dac konkretna wielkosc dla menu i reszta sie ladnie dostosuje.

Ale jak tu widac jeden element ma flex: 1; a drugi flex: 2;, wiec lacznie to daje 3 części, i jeden zajmuje jedna z nich a drugi dwie z nich, co lacznei daje cala szerokosc, wiec jeden ma jakgby 33.(3)% a drugi 66.(6)%

flex: 1
flex: 2

Na przyszłość

  • flex – skrócony zapis dla flex-grow, flex-shrink i flex-basis.

  • align-self – pozwala wyrównać pojedynczy element inaczej niż reszta.

  • order – zmienia kolejność elementów.

  • flex-grow, flex-shrink, flex-basis – dokładniej kontrolują rozmiar elementów.

  • Sama je slabo znam i musze zwykle sprawdzac jak sie je uzywa lol

4.3. Grid

Grid służy do budowania układów w wierszach i kolumnach. W przeciwieństwie do Flexboxa lepiej nadaje się do siatek, galerii, dashboardów i sekcji, w których chcesz kontrolować jednocześnie kolumny i wiersze.

Można myśleć o tym tak: Flexbox zwykle dobrze układa elementy w jednym kierunku, a Grid lepiej nadaje się do układów dwuwymiarowych.

Może to moja głupota ale zwykle zamiast grid wole użyc flexboxa, nawet do tabel

Najważniejsze właściwości kontenera

  • display: grid – włącza układ grid.

  • grid-template-columns – ustawia liczbę i szerokość kolumn.

  • grid-template-rows – ustawia wysokość wierszy.

  • gap – odstęp między kolumnami i wierszami.

  • column-gap – odstęp tylko między kolumnami.

  • row-gap – odstęp tylko między wierszami.

  • justify-items – wyrównanie elementów wewnątrz komórek w poziomie.

  • align-items – wyrównanie elementów wewnątrz komórek w pionie.

Najczęstsze wartości

  • px – stały rozmiar, np. 100px.

  • auto – przeglądarka sama dobiera rozmiar.

  • fr – część wolnego miejsca. Działa trochę podobnie do myślenia jak przy flex: 1 i flex: 3.

  • repeat(...) – skrót do powtarzania kolumn albo wierszy.

  • minmax(...) – zakres od minimum do maksimum.

Jak czytać fr i repeat(...)

  • 1fr 1fr – dwie równe kolumny.

  • 1fr 3fr – druga kolumna dostaje trzy razy więcej miejsca niż pierwsza.

  • repeat(2, 1fr) – to samo co 1fr 1fr.

  • repeat(4, 1fr) – cztery równe kolumny.

  • W repeat(4, 1fr) pierwsza liczba oznacza liczbę powtórzeń, a druga część mówi, co dokładnie powtarzasz.

Prosty grid 2x2

Pole 1
Pole 2
Pole 3
Pole 4

Kolumny o stałej szerokości

1
2
3

Przykład 1fr 3fr

1fr
3fr

Przykład repeat(2, 1fr)

1
2
3
4

Przykład repeat(4, 1fr)

1
2
3
4

Przykład grid-template-rows

80px
80px
120px
120px

Przykład gap

1
2
3

Przykład column-gap i row-gap

1
2
3
4
5
6

Przykład grid-column: span 2

Zajmuję 2 kolumny
B
C
D

Przykład grid-row: span 2

Zajmuję 2 wiersze
B
C
D
E

Przykład grid-column: 1 / 3

Od linii 1 do 3
B
C
D

Przykład justify-items: center

1
2
3

Przykład align-items: center

1
2
3

Przykład minmax(120px, 1fr)

minmax(120px, 1fr) oznacza, że każda kolumna ma mieć minimum 120px, ale może rosnąć aż do 1fr, czyli jednej części dostępnego miejsca. Dzięki temu kolumny nie robią się zbyt małe, ale nadal potrafią elastycznie wypełniać szerokość kontenera.

Karta 1
Karta 2
Karta 3

Inne przydatne właściwości

  • justify-content – ustawia całą siatkę w poziomie wewnątrz kontenera. Wartości: start, center, end, stretch, space-between, space-around, space-evenly.

  • align-content – ustawia całą siatkę w pionie wewnątrz kontenera. Wartości: start, center, end, stretch, space-between, space-around, space-evenly.

  • grid-auto-flow – decyduje, jak automatycznie układają się kolejne elementy. Wartości: row, column, dense.

Na przyszłość

  • grid-template-areas – budowanie układu przez nazwy obszarów.

  • place-items – skrót dla align-items i justify-items.

  • place-content – skrót dla align-content i justify-content.

  • auto-fit i auto-fill – bardziej elastyczne siatki.

5.1. Responsywność — o co chodzi

Responsywność oznacza, że strona dopasowuje się do różnych ekranów: telefonu, tabletu i komputera. Nie chodzi o to, żeby wyglądała identycznie wszędzie, tylko żeby była czytelna i wygodna.

Na małym ekranie masz mniej miejsca nie tylko przez sam ekran, ale też przez paddingi, marginesy, gapy, menu, paski przeglądarki i inne elementy, które zabierają przestrzeń. Dlatego układ, który wygląda dobrze na komputerze, może przestać mieścić się na telefonie.

Praktyczne rzeczy, na które trzeba uważać

  • Dwa elementy obok siebie mogą mieścić się na desktopie, ale już nie na telefonie.

  • Duży padding, szerokie gap i sztywne width bardzo szybko zjadają miejsce.

  • Responsywność to nie tylko zmiana liczby kolumn, ale też zmiana odstępów, rozmiaru tekstu i czasem ukrycie mniej ważnych elementów.

Przykład: dwa boxy na różnych szerokościach

Pierwszy box
Drugi box

5.2. Viewport i meta viewport

Viewport to obszar widoczny w przeglądarce. Na telefonie przeglądarka musi wiedzieć, jak interpretować szerokość strony, dlatego w <head> bardzo często dodaje się tag meta viewport.

Najważniejszy zapis

Co oznaczają części tego zapisu

  • name="viewport" – chodzi o obszar widoku.

  • width=device-width – szerokość strony ma odpowiadać szerokości urządzenia.

  • initial-scale=1.0 – początkowy poziom powiększenia.

Ten tag nie naprawia złego układu sam z siebie. On tylko sprawia, że przeglądarka mobilna poprawnie interpretuje szerokość strony.

5.3. Elastyczne podstawy bez media queries

Zanim użyjesz @media, często da się zrobić sporo rzeczy dobrze już samymi elastycznymi właściwościami. To jest bardzo praktyczne, bo im mniej sztywnych rozmiarów, tym mniej problemów później.

Zwykle jak robię stronę to jest bez media query prawie responzywna, albo doslownie 5 minut potrzebuje i juz ladnie wyglada na telefonie i tablecie.

Najczęściej przydatne rzeczy

  • width: 100% – element chce zająć całą szerokość rodzica.

  • max-width: 100% – element nie wyjdzie szerzej niż rodzic.

  • height: auto – wysokość dopasowuje się naturalnie.

  • flex-wrap: wrap – elementy mogą przejść do kolejnego wiersza.

  • fr i minmax(...) – pomagają budować bardziej elastyczne siatki.

Przykład: obrazek z max-width: 100%

Przykładowy obrazek

Przykład: kontener z width: 100% i max-width

Ten box zajmuje całą szerokość rodzica, ale nie przekroczy 500px.

Przykład: flex-wrap: wrap

Karta 1
Karta 2
Karta 3
Karta 4

Przykład: grid z minmax(...)

Karta 1
Karta 2
Karta 3

Bardzo ważna praktyczna uwaga o rozmiarach

Przy responsywności trzeba pamiętać, co liczy się do końcowego rozmiaru elementu. Jeśli element ma ustawione width, to jego końcowy rozmiar może zależeć od box-sizing.

  • content-box – padding i border doliczają się do szerokości.

  • border-box – padding i border mieszczą się w zadanej szerokości.

Przykład: content-box i border-box

content-box
border-box

5.4. Co najczęściej psuje układ

Problemy z responsywnością bardzo często nie biorą się z jednej wielkiej rzeczy, tylko z kilku małych elementów naraz. Dlatego warto od razu wiedzieć, co najczęściej psuje układ.

Typowe problemy

  • Sztywne szerokości w px.

  • Za duży padding i gap.

  • Zbyt wiele elementów w jednym rzędzie.

  • Obrazki bez max-width: 100%.

  • Długie słowa, linki albo adresy e-mail.

  • Elementy ustawione na 100vw, które powodują poziomy scroll.

  • Dodatkowe panele i menu zabierające dostępną przestrzeń.

Przykład: 100vw a 100%

width: 100%
width: 100vw

Przykład: długi tekst, który może rozwalić układ

bardzo-dlugi-link-albo-ciag-znakow-ktory-bez-lamania-moze-wyjsc-poza-ekran-i-zepsuc-uklad

5.5. Media queries — składnia i działanie

Media query to sposób na warunkowe zmienianie stylów. W CSS zapisuje się to przez specjalną regułę @media.

Znak @ w CSS oznacza specjalną regułę. Takimi regułami są na przykład @media, @import, @keyframes albo @font-face.

Najprostsza składnia

Jak czytać ten zapis

  • @media – specjalna reguła CSS.

  • (max-width: 768px) – warunek.

  • Style w środku działają tylko wtedy, gdy warunek jest spełniony.

Przykład: zmiana kierunku flexa

Karta 1
Karta 2

5.6. max-width, min-width i zakresy

Najczęściej w media queries używa się warunków opartych o szerokość ekranu. Najważniejsze są max-width i min-width.

Najczęstsze warunki

  • @media (max-width: 768px) – dla ekranów do 768px.

  • @media (min-width: 768px) – dla ekranów od 768px wzwyż.

  • @media (min-width: 768px) and (max-width: 1024px) – dla określonego zakresu.

Przykład max-width

Przykład min-width

Przykład zakresu

Praktyczna uwaga

  • max-width często oznacza: popraw coś na mniejszych ekranach.

  • min-width często oznacza: rozbuduj układ dla większych ekranów.

  • Liczby typu 768px czy 1024px są częste, ale breakpoint dobiera się do projektu, a nie na ślepo.

5.7. Mobile-first

Mobile-first to podejście, w którym najpierw projektujesz styl dla małych ekranów, a potem rozszerzasz go dla większych. Dzięki temu łatwiej pilnować prostego układu i nie zapomnieć o telefonach.

Sama tak nigdy nie robie ale, robiac cos co wazniejsze jest na telefonie moze nie byc tez glupim pomyslem ale to trzeba od razu brac pod uwage albo rozne mozliwosci albo po prostu robic kompletnie oddzielne style

Jak to zwykle wygląda

  • Domyślnie piszesz prostszy układ dla telefonu.

  • Dla większych ekranów używasz zwykle @media (min-width: ...).

  • Zamiast „naprawiać desktop na telefon”, rozbudowujesz układ stopniowo.

Przykład mobile-first

Karta 1
Karta 2

5.8. Co zmienia się w praktyce

W responsywności bardzo często nie zmienia się wszystkiego naraz. Zwykle poprawia się kilka najważniejszych rzeczy: kierunek układu, liczbę kolumn, odstępy, szerokości i czasem rozmiar tekstu.

Najczęściej zmieniane właściwości

  • flex-direction – np. z rzędu na kolumnę.

  • grid-template-columns – np. z 3 kolumn na 1.

  • padding, margin, gap – mniejsze odstępy na małych ekranach.

  • font-size – tekst może być trochę mniejszy albo większy zależnie od układu.

  • display – czasem element znika albo pojawia się dopiero na większym ekranie.

Przykład: grid 3 kolumny → 1 kolumna

Karta 1
Karta 2
Karta 3

Przykład: mniejszy padding na małym ekranie

Ten box ma mniejszy padding na węższym podglądzie.

Przykład: zmiana rozmiaru tekstu

Nagłówek zmienia rozmiar

Przykład: ukrycie dodatkowego elementu

Główna treść
Dodatkowy panel

5.9. Przykłady responsywnych układów

Przykład: obrazek i tekst obok siebie → pod sobą

Obrazek
Treść obok obrazka. Na mniejszej szerokości układ schodzi pod siebie.

Przykład: karty z minmax(...)

Karta 1
Karta 2
Karta 3
Karta 4

Przykład: menu z zawijaniem

5.10. Typowe błędy i dobre praktyki

Responsywność najlepiej działa wtedy, gdy od początku myślisz o ograniczonej przestrzeni. Wtedy mniej rzeczy trzeba później naprawiać.

Typowe błędy

  • Używanie sztywnych szerokości wszędzie w px.

  • Testowanie strony tylko na jednej szerokości.

  • Brak kontroli nad obrazkami, wideo i długim tekstem.

  • Za duży padding i gap na małych ekranach.

  • Zapominanie, że sidebar, menu albo panel boczny też zabierają miejsce.

  • Robienie wszystkiego dopiero przez media queries zamiast najpierw budować elastyczny układ.

Dobre praktyki

  • Zacznij od prostego, elastycznego układu.

  • Używaj max-width: 100% dla grafik i mediów.

  • Pilnuj box-sizing, paddingów i gapów.

  • Testuj kilka różnych szerokości, a nie tylko jedną.

  • Zmieniaj tylko to, co naprawdę trzeba: układ, odstępy, wielkość tekstu albo widoczność elementów.

5.11. Na przyszłość

  • prefers-color-scheme – wykrywanie jasnego i ciemnego motywu.

  • prefers-reduced-motion – ograniczanie animacji dla osób, które tego potrzebują.

  • orientation – reagowanie na poziomy lub pionowy układ ekranu.

  • hover i pointer – sprawdzanie rodzaju interakcji.

  • Container queries – reagowanie na rozmiar kontenera, a nie całego viewportu.

JavaScript

Tu zaczyna się część, która daje stronie zachowanie, decyzje i logikę. HTML buduje strukturę, CSS odpowiada za wygląd, a JavaScript sprawia, że coś reaguje, liczy, sprawdza, zmienia się i działa.

1. Fundamenty i podstawy JavaScript

  • 1.1 Czym jest JavaScript i co on robi

  • 1.2 let i const

  • 1.3 Typy wartości

  • 1.4 Operatory i porównania

  • 1.5 if / else

  • 1.6 Pętle

  • 1.7 Funkcje

  • 1.8 return

  • 1.9 Tablice

  • 1.10 Metody tablic

  • 1.11 Obiekty

  • 1.12 Losowość i czas

2. Javascript i HTML

  • 2.1 querySelector i querySelectorAll

  • 2.2 textContent i innerHTML

  • 2.3 value i pola formularzy

  • 2.4 Zmiana stylu przez style

  • 2.5 classList

  • 2.6 addEventListener

  • 2.7 event i target

  • 2.8 dataset

  • 2.9 Tworzenie elementów

  • 2.10 Mini łączenie całości

1.1. Czym jest JavaScript i co on robi

JavaScript to język, który daje stronie zachowanie i logikę. Dzięki niemu strona może reagować na kliknięcia, coś liczyć, coś sprawdzać, zapamiętywać dane i zmieniać to, co widać.

Podział ról

  • HTML buduje strukturę strony.

  • CSS ustawia wygląd strony.

  • JavaScript daje zachowanie i logikę.

Co to znaczy w praktyce

  • po kliknięciu coś może się zmienić,

  • można liczyć punkty,

  • można sprawdzać odpowiedzi,

  • można losować liczbę albo ruch,

  • można wyświetlić komunikat o wygranej albo błędzie.

Pierwsza rzecz: console.log()

  • console to konsola przeglądarki, czyli miejsce, gdzie można podejrzeć komunikaty z JavaScript.

  • .log() oznacza: wypisz coś do konsoli.

1.2. let i const

Zmienne służą do trzymania danych. W praktyce na tym etapie prawie zawsze wystarczą let i const.

let

  • let używaj wtedy, gdy wartość ma się zmieniać.

  • To dobre np. dla punktów, liczby prób, numeru rundy albo liczby żyć.

const

  • const używaj wtedy, gdy wartość ma zostać stała.

  • To dobre np. dla nazwy gry, stałej liczby rund, nazwy gracza albo konfiguracji.

Praktyczna różnica

  • let – wartość można później nadpisać.

  • const – tej zmiennej nie nadpisujesz nową wartością.

1.3. Typy wartości

W JavaScript zmienne mogą przechowywać różne rodzaje danych. Na ten etap najważniejsze są tekst, liczba i wartość logiczna.

string

  • string to tekst.

  • Przykład: nick gracza, nazwa gry, komunikat.

number

  • number to liczba.

  • Przykład: punkty, liczba prób, liczba żyć.

boolean

  • boolean to wartość logiczna: true albo false.

  • Przykład: czy gra trwa, czy coś jest aktywne, czy odpowiedź jest poprawna.

Sprawdzanie typu przez typeof

  • typeof sprawdza, jakiego typu jest dana wartość.

  • To przydaje się, gdy chcesz zobaczyć, czy coś jest tekstem, liczbą albo booleanem.

1.4. Operatory i porównania

Operatory pozwalają liczyć, porównywać wartości i budować warunki. To jest potrzebne do punktów, sprawdzania odpowiedzi i decyzji programu.

Działania arytmetyczne

  • + – dodawanie.

  • - – odejmowanie.

  • * – mnożenie.

  • / – dzielenie.

  • % – reszta z dzielenia.

Porównanie wartości

  • === – sprawdza, czy wartości są równe.

  • !== – sprawdza, czy wartości są różne.

  • > – większe niż.

  • < – mniejsze niż.

  • >= – większe lub równe.

  • <= – mniejsze lub równe.

= a == a ===

  • = – (Przypisanie): Nadaje wartość zmiennej. Nie służy do sprawdzania, a do ustawiania (np. x = 5).

  • == – (Porównanie luźne): Sprawdza tylko, czy wartości są "podobne". Ignoruje typ danych, więc 5 == "5" to prawda (true).

  • === – (Porównanie ścisłe): Sprawdza wartość oraz typ danych. Muszą być identyczne, więc 5 === "5" to fałsz (false).

Operatory logiczne

  • && – i, czyli oba warunki muszą być prawdziwe.

  • || – lub, czyli wystarczy, że jeden warunek jest prawdziwy.

  • ! – negacja, czyli odwraca wartość logiczną.

1.5. if / else

if pozwala programowi podjąć decyzję. To tutaj pojawia się logika typu: jeśli coś jest prawdą, zrób to, a jeśli nie, zrób coś innego.

Do czego to się przydaje

  • sprawdzanie odpowiedzi,

  • pokazywanie komunikatu,

  • sprawdzanie, czy ktoś wygrał,

  • sprawdzanie, czy liczba jest za duża albo za mała.

Sam if

  • kod w środku wykona się tylko wtedy, gdy warunek jest prawdziwy.

if i else

  • else oznacza: jeśli warunek nie jest prawdziwy, wykonaj inną część kodu.

else if

  • else if pozwala sprawdzać kolejny warunek, jeśli poprzedni nie był prawdziwy.

1.6. Pętle

Pętle służą do powtarzania kodu. Przydają się wtedy, gdy chcesz zrobić coś wiele razy, zamiast pisać to samo ręcznie.

Pętla for

  • for przydaje się, gdy chcesz wykonać coś określoną liczbę razy.

  • To dobra pętla np. do przechodzenia po elementach tablicy albo do liczenia rund.

Pętla while

  • while działa dopóki warunek jest prawdziwy.

  • Na początku używa się jej rzadziej niż for, ale warto wiedzieć, jak działa.

1.7. Funkcje

Funkcja to własny kawałek kodu, który można uruchamiać wiele razy. Dzięki funkcjom łatwiej porządkować kod i nie powtarzać tych samych rzeczy w kilku miejscach.

Prosta funkcja

  • funkcję najpierw tworzysz, a potem wywołujesz.

Parametry

  • parametry to wartości przekazywane do funkcji.

  • Dzięki nim jedna funkcja może działać na różnych danych.

1.8. return

return pozwala funkcji oddać wynik. To ważne, gdy funkcja ma coś policzyć albo sprawdzić i zwrócić gotową wartość.

Funkcja, która coś zwraca

  • bez return funkcja może coś zrobić, ale nie odda wyniku do dalszego użycia,

  • z return możesz zapisać wynik do zmiennej albo od razu go wypisać.

1.9. Tablice

Tablica pozwala trzymać wiele wartości w jednym miejscu. To jeden z najważniejszych elementów w prostych programach i grach.

Tworzenie tablicy

  • tablica zapisuje wiele elementów w nawiasach kwadratowych.

Indeksy

  • elementy tablicy mają swoje pozycje.

  • pierwszy element ma indeks 0, drugi 1, trzeci 2.

Długość tablicy

  • length mówi, ile elementów ma tablica.

Zmiana elementu

  • można odczytać element po indeksie i można go też nadpisać.

1.10. Metody tablic

Metody tablic pomagają wygodniej pracować na większej ilości danych. Nie trzeba znać ich wszystkich, ale kilka bardzo praktycznych warto umieć od razu.

push()

  • dodaje element na koniec tablicy.

pop()

  • usuwa ostatni element tablicy.

forEach()

  • wykonuje coś dla każdego elementu tablicy.

includes()

  • sprawdza, czy dany element znajduje się w tablicy.

some()

  • sprawdza, czy chociaż jeden element spełnia warunek.

1.11. Obiekty

Obiekt pozwala opisać jedną rzecz bardziej szczegółowo. Zamiast trzymać tylko jedną wartość, możesz zapisać kilka powiązanych informacji razem.

Po co są obiekty

  • można w nich opisać użytkownika, produkt, kartę, pytanie albo dowolną inną rzecz,

  • każda właściwość ma nazwę i wartość.

Odczyt właściwości

  • do odczytu często używa się kropki, np. gracz.nick.

Zmiana wartości w obiekcie

  • wartość właściwości można później zmienić.

Jak mówiłam const zapisujemy stałe, ale np w przypadku obiektów, możemy zmieniać, ponieważ nie zmieniamy samego obiektu, tylko jego właściwości. Ciągle jak niżej osoba to {}, tylko jej właściwości można zmieniać.

1.12. Losowość i czas

W prostych programach i grach często trzeba coś wylosować albo wykonać po chwili. Do tego bardzo często wystarczą Math.random(), Math.floor() i setTimeout().

Math.random()

  • zwraca losową liczbę od 0 do prawie 1.

Math.floor() z losowaniem zakresu

  • Math.floor() ucina część po przecinku.

  • w połączeniu z Math.random() pozwala losować liczby całkowite z zakresu.

setTimeout()

  • pozwala wykonać kod po określonym czasie.

  • czas podaje się w milisekundach.

  • 1000 milisekund to 1 sekunda.

2.1. querySelector i querySelectorAll

Żeby JavaScript mógł coś zmienić na stronie, najpierw musi znaleźć konkretny element. Najczęściej robi się to przez querySelector() albo querySelectorAll().

querySelector()

  • Zwraca pierwszy element pasujący do selektora CSS.

  • Można szukać po tagu, klasie albo id.

querySelectorAll()

  • Zwraca wiele elementów pasujących do selektora.

  • Przydaje się np. przy kilku przyciskach, kartach albo polach.

2.2. textContent i innerHTML

Po znalezieniu elementu można zmieniać jego zawartość. Najczęściej robi się to przez textContent albo innerHTML.

textContent

  • Służy do czytania albo zmiany zwykłego tekstu w elemencie.

  • Najlepiej używać go wtedy, gdy chcesz tylko ustawić napis.

Stary tekst

Dzięki .textContent możesz wypisać też tekst w konsoli.

A żeby zmienić musisz do .textContent przypisać znakiem równa się nową wartość.

Nowy tekst

innerHTML

  • Pozwala wstawić HTML do środka elementu.

  • Przydaje się, gdy chcesz dodać np. <b>, <span>, <br> albo kilka elementów naraz.

Tu zaraz coś się zmieni.

Dzięki .innerHTML możesz też odczytać HTML z elementu tak samo jak z textContent, tylko teraz nei sam teksta cały html czyli nawet dwadzieścia innych elementów w środku, choć w tym przypadku jest tylko tekst, więc go odczytasz.

A żeby zmienić musisz do .innerHTML przypisać znakiem równa się nową wartość tak samo jak z textContent.

Ważny tekst

Więc możesz też wsadzadzać dzięki innerHTML całe elementy HTML do środka danego elementu.

Ważny tekst
Druga linia

2.3. value i pola formularzy

Jeśli użytkownik coś wpisuje albo wybiera w formularzu, JavaScript może odczytać tę wartość. Najczęściej służy do tego value.

Input tekstowy

  • value zwraca to, co znajduje się w polu.

Select

  • Dla listy rozwijanej value zwraca wartość aktualnie wybranej opcji.

2.4. Zmiana stylu przez style

JavaScript może zmieniać wygląd elementu bezpośrednio z poziomu kodu. Służy do tego właściwość style.

Zmiana jednego stylu

  • Można zmienić np. kolor, tło albo rozmiar tekstu.

Przykładowy tekst

Przykładowy tekst

Zmiana kilku stylów

  • Można ustawić kilka właściwości jedna po drugiej.

Box
Box

2.5. classList

Zamiast wpisywać wszystko przez style, często wygodniej jest dodawać i usuwać klasy CSS. Wtedy wygląd zostaje w CSS, a JavaScript tylko steruje stanem elementu.

classList.add()

Tekst testowy

Tekst testowy

classList.remove()

classList.toggle()

Dzięki toggle możesz przełączać klasy na elementach. Czyli jeśli klasa jest, to ją usuwa, a jeśli nie ma, to ją dodaje.

2.6. addEventListener

addEventListener() pozwala reagować na zdarzenia. Najczęściej na start będzie to kliknięcie.

Reakcja na klik

Zmiana treści po kliknięciu

Jeszcze nic się nie stało

Przycisk został kliknięty

2.7. event i target

Gdy zdarzenie się uruchamia, funkcja może dostać dodatkowe informacje o tym zdarzeniu. Te dane trafiają do obiektu event.

event.target

  • Pozwala sprawdzić, który element wywołał zdarzenie.

Target zwraca element podobnie jak querySelector, z czego trzeba zwrocic uwage na roznice pomiedzy currentTarget i target, czasem jesli np element klikniety, ma w sobei np. dwa divy to currentTarget(albo na odwrot) zwraca ten przycisk mimo ze event jest na elemencie powyzej.

2.8. dataset

Atrybuty data-* pozwalają przechowywać własne dane w HTML. Potem JavaScript może je odczytać przez dataset.

Po co to jest

  • można zapisać numer pola, typ karty, nazwę ruchu albo id elementu,

  • potem po kliknięciu można te dane odczytać.

2.9. Tworzenie elementów

JavaScript potrafi nie tylko zmieniać istniejące elementy, ale też tworzyć nowe i dodawać je do strony.

createElement()

Pamiętaj, że ten przykład ponizej nie wstawia elementu na stronę tylko w pamięci go ma w zmiennej

appendChild()

  • Pierwszy element
  • Pierwszy element
  • Drugi element

2.10. Mini łączenie całości

Dwa przyklady, gdzie razem pojawiają się: pobranie elementu, kliknięcie, odczyt wartości i zmiana treści albo klasy.

Te przyklady juz dzialaja wiec mozesz wpisac cos i klikanc

Przykład 1 — pokaż wpisany nick

Tu pojawi się nick

Przykład 2 — zaznacz kliknięte pole