Podstawy CSS
LICZBA DNI: 3 (24h)
KOD KURSU: CSS/F
Dostosowany program 
O szkoleniu
DLA KOGO?
Szkolenie jest adresowane do osób uczących się tworzenia stron internetowych, posiadających podstawową znajomość języka HTML
WYMAGANIA
znajomość podstaw HTML lub wybranego systemu CMS z edytorem wizualnym
ZALETY
Szkolenie umożliwia poznanie CSSa nawet osobom z bardzo niewielką wiedzą początkową
Cele szkolenia
Poznanie kaskadowych arkuszy stylów CSS w stopniu pozwalającym na swobodne tworzenie prostych struktur stron internetowych i nadawanie im atrakcyjnego wyglądu
Program
Wstęp
- Możliwości CSSa
- Selektory
- Sposoby i miejsca definiowania reguł
- Style inline, osadzanie stylów w dokumencie
- Style wbudowane przeglądarek
- Resety i normalizacje
- Elementy liniowe, blokowe i inne
- Sposoby podawania kolorów
Jednostki w CSS
- px, pt, cm
- em, rem
- vh, hh
- %
- Funkcja calc
Typografia
- Paragrafy
- Spany
- Stylowanie znaczników: br, hr, pre
Stylowanie list i linków
- Style domyślne
- Listy wypunktowane, numerowane i definicji
- Zagnieżdżanie list
- Sposoby numeracji
- Dekoracja linków
Tabele
- Tworzenie tabel zgodnie z ich przeznaczeniem
- Stylowanie nagłówków tabel
- Stylowanie obramowań
Box model
- Padding
- Margin
- Border
Obramowania
- Outline
- Border
- Box-shadow
Box-shadow - dodatkowe możliwości
- Tworzenie efektu wypukłości
- Cienie wewnętrzne i zewnętrzne
- Nakładanie cieni i cienie wielokrotne
Text-shadow
- Efekty na tekście
- Podnoszenie usability
- Text-outline
Elementy sterujące
- Linki (A)
- Zagnieżdżanie w sobie wielu A
- Text-decoratnion, a border bottom
- Stylowanie underline
- Przyciski (Button)
- Elementy formularzy
- Input, select, textarea
- Stylowanie shadow-dom
Stylowanie zawartości większej niż pojemnik
- Overflow
- Przewijanie elementów wewnętrznych na urządzeniach mobilnych
- Paski przewijania
Sposoby pozycjonowania elementów
- Marginesy i paddingi
- Absolute i relative
- Fixed
- Flexbox
- Sticky
Sposoby tworzenia layoutów
- "DIVy i floaty"
- Wirtualne tabelki
- Absolute*
- Flexbox
- Metody środkowania elementów
Stylowanie obrazków
- Tła obrazkowe
- Obrazki pod wyświetlacze o podwyższonej rozdzielczości
- Ikony zamiast plików graficznych (font-awesome i fontastic)
Efekty przejścia
- Transition
- Keyframes i animate
- Czasy przejścia
- Funkcje czasu
- Opóźnienia
Transformacje
- Transform (scale, translate, rotate, skew)
- Transform3D
- Transform-origin
- Wygładzanie tekstu przy transformacjach – text-smooth
- Wygładzanie elementów podczas transformacji w CSS
Gradienty
- Liniowe
- Radialne
- Wielokrotne
RWD i Media Queries
- Tworzenie typowych layoutów responsywnych
- “Mobile first”, a rzeczywistość
- Reguły przyrostowe
- Procentowe definicje
Frameworki CSS
- Frameworki typograficzne
- Pełne frameworki
- Biblioteki do konkretnych zadań
Zbiór hacków
- Ellipsis
- Clearfix
- FastGrid
- VisuallyHidden
- Pionter-events: none
Antywzorce w HTML + CSS
- Resety CSS
- Menu tworzone jako listy
- Użycie natywnej walidacji formularzy*
- Divitis i classyfis
- Layouty oparte o tabelki
JavaScript
- Odczytywanie i nadawanie parametrów
- Animacje JS a animacje CSS
Testowanie CSSa
- Performance (dodatek do przeglądarki)
- Sprawdzanie poprawności składni
Narzędzia developerskie
- IDE
- DevToolsy w przeglądarce (zmiany live layoutu)
- Build tools
- Live reload
- Css injection
- Live coding
Szkolenia powiązane
