Mastering CSS
Witaj w kursie CSS.
HTML daje twojej stronie strukturę.
CSS daje jej styl, osobowość, odstępy, kolory, layout i tę magiczną chwilę:
“Ach, teraz to już nie wygląda, jakby wydrukowała to zdenerwowana kalkulator.”
W tym kursie nauczysz się CSS krok po kroku.
Bez paniki.
Bez tajemniczych rytuałów projektanta.
Bez udawania, że zrozumiałeś Flexbox za pierwszym razem.
Nikt nie zrozumiał Flexboxa za pierwszym razem.
Czym Jest CSS?
CSS oznacza Cascading Style Sheets.
To język używany do stylowania stron HTML.
Za pomocą CSS możesz kontrolować:
- kolory;
- fonty;
- odstępy;
- obramowania;
- tła;
- layouty;
- responsive design;
- animacje;
- strukturę wizualną;
- ogólny nastrój strony.
HTML mówi:
“To jest nagłówek.”
CSS mówi:
“Zrób go dużym, ładnym, wyśrodkowanym i proszę, niech przestanie wyglądać jak dokument podatkowy.”
Dlaczego Warto Uczyć Się CSS?
Bo strony internetowe to nie tylko treść.
To także prezentacja.
Dobra strona powinna być:
- czytelna;
- wygodna;
- responsywna;
- wizualnie jasna;
- łatwa w nawigacji;
- przyjemna w użyciu.
CSS pomaga zmienić prostą stronę HTML w coś, na co ludzie naprawdę chcą patrzeć.
Bez CSS twoja strona może działać.
Ale może też wyglądać, jakby uciekła z 1998 roku i zapomniała zmienić ubranie.
Jak Działa Ten Kurs
Ten kurs jest praktyczny.
Każda lekcja wprowadza jeden ważny koncept CSS i daje małe ćwiczenia, żeby naprawdę go zrozumieć.
Nie będziesz tylko czytać o CSS.
Będziesz pisać CSS.
Psować CSS.
Naprawiać CSS.
I czasem patrzeć na CSS, zastanawiając się, dlaczego jeden mały margin zniszczył cały layout.
To normalne.
To nauka.
To web development, który elegancko testuje twoją cierpliwość.
Czego Się Nauczysz
Podczas tego kursu nauczysz się:
- łączyć CSS z HTML;
- używać selektorów;
- stylować tekst i kolory;
- pracować z odstępami;
- rozumieć box model;
- tworzyć layouty za pomocą Flexbox;
- budować layouty za pomocą CSS Grid;
- robić strony responsywne;
- dodawać przejścia i animacje;
- stworzyć finalną wystylizowaną stronę.
Na końcu kursu powinieneś potrafić wziąć prostą stronę HTML i sprawić, żeby była czysta, nowoczesna i użyteczna.
Nie przeładowana.
Nie chaotyczna.
Nie “grafika stworzona podczas burzy.”
Czysta.
Czytelna.
Profesjonalna.
Z odrobiną zabawy.
Lekcje Kursu
Ten kurs CSS ma 10 lekcji:
-
Pierwsze Kroki z CSS
Dowiesz się, czym jest CSS, jak połączyć go z HTML i jak działa podstawowe stylowanie. -
Selektory i Podstawowe Stylowanie
Nauczysz się wybierać elementy HTML i pewnie stosować style. -
Kolory, Fonty i Styl Tekstu
Sprawisz, że tekst będzie czytelny, ładny i mniej emocjonalnie płaski. -
Box Model
Zrozumiesz margin, padding, border i content — tajną geometrię każdej strony internetowej. -
Layout z Flexbox
Nauczysz się wyrównywać i organizować elementy bez kłótni z ekranem. -
Layout z CSS Grid
Zbudujesz potężne dwuwymiarowe layouty za pomocą wierszy i kolumn. -
Responsive Design
Sprawisz, że strony będą działać na telefonach, tabletach, laptopach i tajemniczych ekranach z przyszłości. -
Tła, Obramowania i Cienie
Dodasz głębię i styl bez zamieniania strony w namiot cyrkowy. -
Przejścia i Animacje
Sprawisz, że elementy będą poruszać się płynnie i grzecznie, a nie jakby przestraszył je JavaScript. -
Finalny Projekt CSS
Zbudujesz kompletną wystylizowaną stronę, używając wszystkiego, czego się nauczyłeś.
Dla Kogo Jest Ten Kurs?
Ten kurs jest dla początkujących, którzy znają już podstawy HTML i chcą sprawić, żeby ich strony wyglądały lepiej.
Jest idealny, jeśli kiedykolwiek stworzyłeś stronę HTML i pomyślałeś:
“Dobrze. Działa. Ale dlaczego wygląda tak smutno?”
CSS jest odpowiedzią.
No dobrze, częścią odpowiedzi.
Drugą częścią jest praktyka.
I kawa.
Albo herbata.
Szanujemy obie.
Czego Potrzebujesz
Do tego kursu potrzebujesz:
- edytora tekstu;
- przeglądarki;
- podstawowej znajomości HTML;
- folderu na projekt;
- cierpliwości, kiedy coś się nie wyrównuje;
- odwagi, kiedy layout zaczyna zachowywać się jak zbuntowane krzesło.
Nie potrzebujesz drogich narzędzi.
Nie potrzebujesz dyplomu z designu.
Musisz po prostu zacząć.
Zalecany Setup Projektu
Stwórz prosty folder do ćwiczenia CSS:
mkdir css-course
cd css-course
touch index.html
touch style.css
Potem połącz CSS z HTML:
<link rel="stylesheet" href="style.css">
Wyjaśnimy to dokładnie w pierwszej lekcji.
Na razie zapamiętaj tylko to:
HTML i CSS pracują razem.
HTML buduje dom.
CSS go maluje, ustawia meble, dodaje światło i uprzejmie prosi sofę, żeby przestała unosić się w złym rogu.
Cel Kursu
Celem tego kursu nie jest zapamiętanie każdej właściwości CSS.
To byłoby bolesne.
I niepotrzebne.
Celem jest zrozumienie, jak działa CSS, żebyś mógł budować strony z większą pewnością.
Po ukończeniu kursu powinieneś wiedzieć, jak:
- stylować stronę od zera;
- organizować kod CSS;
- naprawiać typowe problemy z layoutem;
- tworzyć strony responsywne;
- budować czysty projekt wizualny;
- kontynuować naukę bardziej zaawansowanego CSS.
CSS jest ogromny.
Ale nie musisz uczyć się wszystkiego naraz.
Potrzebujesz mocnych podstaw.
Potem reszta staje się mniej przerażająca.
Finalny Rezultat
Na końcu kursu stworzysz finalny projekt CSS.
Będzie zawierał:
- wystylizowane nagłówki i tekst;
- uporządkowany layout;
- responsywne sekcje;
- karty;
- przyciski;
- obrazy;
- odstępy;
- kolory;
- efekty hover;
- czystą strukturę strony.
Krótko mówiąc, twoja strona HTML w końcu ubierze się porządnie.
Nie haute couture.
Ale zdecydowanie nie piżama.
Gotowy?
Dobrze.
Otwórz edytor.
Przygotuj przeglądarkę.
Weź głęboki oddech.
CSS czeka.
I tak, czasem będzie udawał, że cię nie słyszy.
Ale na końcu tego kursu będziesz wiedział, jak sprawić, żeby słuchał.
Zaczynamy.