A więc stworzyłeś swoją pierwszą stronę HTML.
Gratulacje.
To duży krok.
Może miała nagłówek.
Może miała akapit.
Może miała przycisk, który stał sobie na stronie z wizualną pewnością ziemniaka.
I to jest całkowicie normalne.
HTML daje twojej stronie strukturę.
Ale bez CSS twoja strona może wyglądać jak dokument, który uciekł z 1997 roku i teraz szuka wsparcia emocjonalnego.
I właśnie tutaj wchodzi CSS.
CSS to ta część web developmentu, która mówi:
“Ładna struktura. Teraz sprawmy, żeby wyglądała, jakby komuś naprawdę zależało.”
I szczerze mówiąc, twoja strona na to zasługuje.
Czym jest CSS?
CSS oznacza Cascading Style Sheets.
Bardzo oficjalnie.
Bardzo poważnie.
Trochę dramatycznie.
W prostych słowach: CSS to język, który kontroluje wygląd twojej strony.
Dzięki CSS możesz zmieniać:
- kolory,
- fonty,
- odstępy,
- rozmiary,
- tła,
- obramowania,
- cienie,
- layouty,
- animacje,
- i wiele innych wizualnych szczegółów.
HTML tworzy treść.
CSS nadaje tej treści styl.
Możesz myśleć o tym tak:
- HTML buduje dom.
- CSS maluje ściany, wybiera meble, ustawia światło i pilnuje, żeby salon nie wyglądał jak magazyn po burzy.
Bez CSS internet nadal by działał.
Ale byłby bardzo smutny.
Bardzo szary.
Bardzo “domyślny styl przeglądarki dołączył do czatu.”
Dlaczego warto uczyć się CSS?
Bo ludzie zauważają design.
Nawet jeśli mówią, że nie.
Strona może mieć świetną treść, ale jeśli wygląda chaotycznie, nieczytelnie albo przestarzale, użytkownik może uciec szybciej niż kot po usłyszeniu odkurzacza.
CSS pomaga sprawić, że twoja strona będzie:
- bardziej przejrzysta,
- czystsza,
- łatwiejsza do czytania,
- bardziej profesjonalna,
- bardziej nowoczesna,
- i znacznie mniej zdolna do straszenia niewinnych odwiedzających.
Design to nie tylko dekoracja.
Dobry design pomaga ludziom zrozumieć treść.
Prowadzi wzrok.
Tworzy hierarchię.
Sprawia, że przyciski wyglądają jak przyciski, a nie jak podejrzane prostokąty z tekstem.
CSS to nie tylko “zróbmy to ładne”.
CSS to “zróbmy to użyteczne, czytelne i mniej bolesne dla oczu”.
Szlachetna misja.
CSS to glow-up twojej strony
Wyobraź sobie, że tworzysz prosty przycisk HTML:
<button>Kliknij mnie</button>
Działa.
Technicznie.
Ale nie krzyczy dokładnie: “nowoczesne doświadczenie webowe”.
Teraz dodaj trochę CSS:
button {
padding: 12px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
}
Nagle przycisk wygląda bardziej świadomie.
Nadal prosto.
Ale już nie jak coś porzuconego.
To jest moc CSS.
Kilka linijek może zmienić coś z:
“Zrobione w przerwie obiadowej.”
na:
“Ktoś tutaj ma gust.”
Albo przynajmniej próbował.
Próbowanie też się liczy.
CSS poprawia czytelność strony
Jedną z pierwszych rzeczy, które CSS pomaga poprawić, jest czytelność.
Bo tak, technicznie ludzie mogą czytać malutki szary tekst przyklejony do krawędzi ekranu.
Ale czy powinni?
Nie.
Absolutnie nie.
Dzięki CSS możesz poprawić odstępy, rozmiar tekstu, wysokość linii i szerokość treści.
Na przykład:
body {
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 24px;
}
Już to sprawia, że strona wygląda spokojniej.
Czytelniej.
Mniej jak instrukcja obsługi drukarki napisana podczas burzy.
Dobry CSS nie tylko dekoruje.
Pomaga ludziom zostać na stronie.
CSS kontroluje layout
Prędzej czy później będziesz chciał umieścić elementy obok siebie.
Karty.
Kolumny.
Menu.
Obrazy.
Sekcje.
Tutaj zaczyna się layout w CSS.
Nowoczesny CSS daje nam potężne narzędzia, takie jak:
- Flexbox,
- Grid,
- pozycjonowanie,
- responsive design,
- media queries.
Brzmi jak dużo.
I tak, na początku może się wydawać, że przeglądarka gra w szachy, podczas gdy ty dopiero uczysz się, jak poruszają się pionki.
Ale krok po kroku zaczyna to mieć sens.
Na przykład Flexbox pomaga ładnie wyrównać elementy:
.container {
display: flex;
gap: 20px;
align-items: center;
}
Nagle elementy przestają błądzić jak zagubieni turyści.
Ustawiają się w linii.
Zaczynają się zachowywać.
Mniej więcej.
CSS sprawia, że strony są responsywne
Ludzie odwiedzają strony z różnych urządzeń.
Laptopów.
Tabletów.
Telefonów.
Ogromnych monitorów.
Małych ekranów.
Prawdopodobnie gdzieś też z inteligentnej lodówki.
Twoja strona musi się dostosować.
CSS pomaga tworzyć responsywne layouty, które dobrze wyglądają na różnych rozmiarach ekranów.
Na przykład:
@media (max-width: 600px) {
body {
font-size: 16px;
padding: 16px;
}
}
To mówi przeglądarce:
“Kiedy ekran jest mały, dostosuj styl.”
Bardzo uprzejmie.
Bardzo przydatnie.
Bardzo koniecznie.
Strona, która wygląda dobrze tylko na twoim laptopie, nie jest gotowa.
Jest tylko lokalnie pewna siebie.
CSS dodaje osobowości
CSS to także miejsce, w którym twoja strona dostaje osobowość.
Minimalistyczna i czysta?
Odważna i kolorowa?
Elegancka i miękka?
Ciemna i dramatyczna?
Jasna i zabawna?
CSS kontroluje nastrój.
Prosta zmiana koloru może sprawić, że strona będzie wyglądać zupełnie inaczej.
Lepszy font może sprawić, że treść będzie wyglądać bardziej profesjonalnie.
Dobry layout może sprawić, że odwiedzający pomyśli:
“Ta osoba wie, co robi.”
Co jest przydatne, zwłaszcza kiedy ty sam nadal próbujesz to ustalić.
CSS nie jest tylko techniczny.
Jest kreatywny.
To miejsce, gdzie kod spotyka design i obie strony próbują nie kłócić się za bardzo.
O czym jest ten kurs?
Ten kurs CSS jest przygotowany dla początkujących.
Nie dla początkujących, którzy już znają design systemy, responsywne siatki i wiedzą, dlaczego z-index czasami zachowuje się jak starożytna tajemnicza klątwa.
Dla prawdziwych początkujących.
Dla ludzi, którzy chcą zrozumieć CSS od podstaw.
W tym kursie nauczysz się:
- czym jest CSS,
- jak połączyć CSS z HTML,
- jak działają selektory,
- jak stylizować tekst,
- jak działają kolory i tła,
- jak margin i padding wpływają na odstępy,
- jak obramowania i cienie poprawiają wygląd,
- jak Flexbox pomaga w layoutach,
- jak CSS Grid organizuje strony,
- jak media queries sprawiają, że strony są responsywne,
- i jak sprawić, żeby twoja strona mniej przypominała szkolny projekt z początków internetu.
Pójdziemy krok po kroku.
Będzie praktycznie.
A kiedy CSS zacznie zachowywać się dziwnie, nie będziemy panikować.
Weźmiemy oddech, sprawdzimy element w devtoolsach i odpowiedzialnie obwinimy cascade.
Cascade: CSS ma zasady
Litera “C” w CSS oznacza Cascading.
To znaczy, że style mogą się nakładać, nadpisywać i czasami tworzyć sytuacje, w których patrzysz na ekran i mówisz:
“Ale zmieniłem kolor. Dlaczego nadal jesteś niebieski?”
To normalne.
CSS ma zasady.
Problem polega na tym, że początkujący jeszcze tych zasad nie znają.
Dlatego CSS na początku może wydawać się chaotyczny.
Ale kiedy zrozumiesz selektory, specyficzność, dziedziczenie i kolejność, wszystko staje się znacznie prostsze.
Nie zawsze łatwe.
Ale dużo mniej tajemnicze.
CSS nie jest losowy.
Po prostu czasami wie coś, czego ty jeszcze nie wiesz.
Niegrzeczne, ale edukacyjne.
Co będziesz budować?
Ten kurs nie będzie tylko rzucał w ciebie teorią.
Będziesz stylizować prawdziwe elementy strony.
Będziesz tworzyć przyciski.
Projektować sekcje.
Organizować layouty.
Poprawiać typografię.
Tworzyć responsywne strony.
Prawdopodobnie przynajmniej raz zepsujesz layout.
I dobrze.
Psucie layoutów to część nauki CSS.
Każdy frontend developer stworzył kiedyś stronę, na której jeden element nagle uciekł w złą stronę ekranu, jakby miał problemy osobiste.
Witamy w zawodzie.
Dla kogo jest ten kurs?
Ten kurs jest dla ciebie, jeśli:
- uczysz się web developmentu,
- znasz już trochę HTML,
- twoje strony działają, ale wyglądają zbyt zwyczajnie,
- chcesz dobrze zrozumieć stylowanie,
- chcesz tworzyć lepsze layouty,
- chcesz, żeby twoje strony wyglądały bardziej profesjonalnie,
- chcesz CSS wyjaśniony jasno, bez zamieniania go w wykład z filozofii designu prowadzony przez tajemniczą osobę w czarnych okularach.
Nie musisz być designerem.
Nie musisz znać zaawansowanej matematyki.
Nie potrzebujesz drogich narzędzi.
Potrzebujesz ciekawości, cierpliwości i odwagi, żeby zapytać:
“Dlaczego ten div robi właśnie to?”
To pytanie to właściwie frontend development w jednym zdaniu.
Dlaczego CSS jest wart twojego czasu?
CSS to jedna z podstawowych technologii webu.
Jeśli chcesz budować strony, nie unikniesz go na zawsze.
Nawet jeśli używasz frameworków.
Nawet jeśli używasz bibliotek komponentów.
Nawet jeśli kopiujesz piękny template i szepczesz:
“Proszę, wystarcz mi.”
Prędzej czy później będziesz musiał poprawić odstępy, naprawić layout mobilny, zmienić kolory, wyrównać elementy albo sprawić, żeby coś wyglądało mniej tragicznie.
Wtedy CSS staje się twoim przyjacielem.
Dramatycznym przyjacielem.
Ale nadal przyjacielem.
Nauka CSS daje ci kontrolę nad tym, jak wygląda twoja praca.
A ta kontrola jest potężna.
Gotowy, żeby zacząć?
Twoja strona HTML ma już strukturę.
Teraz potrzebuje stylu.
Potrzebuje odstępów.
Potrzebuje layoutu.
Potrzebuje osobowości.
Potrzebuje przestać wyglądać tak, jakby przeglądarka podjęła wszystkie decyzje graficzne, kiedy ciebie nie było.
CSS jest drogą do tego celu.
Krok po kroku nauczysz się zmieniać prostą stronę w coś czystego, czytelnego, responsywnego i przyjemnego w użyciu.
To nie magia.
To tylko CSS.
Chociaż czasami wygląda podejrzanie podobnie.
Zacznij kurs CSS
Gotowy dać swojej stronie glow-up, na który zasługuje?
Możesz rozpocząć pełny kurs CSS tutaj:
Weź laptopa.
Weź cierpliwość.
Weź trochę wyczucia stylu.
I może kawę.
Piksele czekają.