Zaawansowane style CSS i preprocesory w praktyce
LICZBA DNI: 2 (16h)
KOD KURSU: CSS/STYLE
Dostosowany program O szkoleniu
DLA KOGO?
Szkolenie adresowane do osób uczących się tworzenia stron internetowych, posiadających już podstawową wiedzę w tym zakresie oraz do developerów chcących ją poszerzyć o nowości w zakresie CSS
WYMAGANIA
Znajomość podstaw HTML lub wybranego systemu CMS z edytorem HTML
Znajomość podstaw CSS
ZALETY
Szkolenie kompleksowo przygotowuje do pracy z CSS z wykorzystaniem najnowszych standardów i trendów
Kameralne grupy - szkolenia technologiczne prowadzimy w grupach liczących do 8 osób. Pozwala to na indywidualne podejście oraz aktywizację każdego uczestnika
Praktyka przed teorią - wszystkie szkolenia technologiczne prowadzone są w formie warsztatowej. Konieczna teoria jest wyjaśniana na przykładzie praktycznych zadań
Konkretne umiejętności - w ramach każdego szkolenia rozwijamy praktyczne umiejętności związane z daną technologią i tematyką
Nauka z praktykami - wszyscy trenerzy na co dzień pracują w projektach, gwarantuje to dostęp do eksperckiej wiedzy i praktycznego know-how
Cele szkolenia
Dogłębne poznanie CSS, umożliwiające tworzenie rozbudowanych, estetycznych layoutów stron i aplikacji internetowych w technologii RWD
Program
Nieoczywiste podstawy CSS
- Selektory
- Grupowanie selektorów
- !important
- Kolory
- Jednostki
- Elementy następne (+, ~)
- Stylowanie w zależności od atrybutów np. [type="text"]
- Priorytety reguł
- Pseudo-selektory (nth-child, first-child, odd, even, last-child, first-of-type, etc.)
- Pseudo-elementy i elementy formularzy oraz obrazki
- @import css i jego wady
- Stylowanie kursora
- Zapisy skrócone
Stylowanie formularzy
- Domyślne style (webkit-appearance*, border, input: text, number, range)
- Stosowanie klas do określania stanu elementu
- Stylowanie pseudo-elementów wbudowanej walidacji formularzy
- Zagnieżdżanie elementów celem zwiększenia możliwości stylowania
- Stylowanie ostrzeżeń walidacji natywnej w HTML
Canvas
- Domyślne rozmiary
- CSS a Canvas
Multimedia w CSS
- Osadzanie video
- Nakładanie efektów na obraz dzięki blend-mode
Animacje
- Transform
- Transition
- Definiowanie klatek kluczowych
- Biblioteki do animacji
- Animacje poprzez nadawanie i zdejmowanie klas
Dodatkowe efekty graficzne
- Mieszanie warstw CSS
- Clipping mask (Chrome)
- SCG clipping mask
- CSS reflex
RWD i Media Queries
- Ogólne zasady RWD
- Automatyzacja RWD z wykorzystaniem SCSS
- RWD tabel (przewijanie wewnętrzne, ukrywanie kolumn)
- Wykrywanie orientacji ekranu (portrait i landscape)
- Rozpoznawanie touchable i clickable device
„Mobile” CSS
- CSS, a usability
- Wzorce do stosowania na urządzeniach mobilnych
- ViewPort
- Obrazki na wyświetlaczach Retina
- RWD
Style pod druk
- Wycinanie kolorów, tła
- Ustawianie tekstu
- Definicje kartek papieru
Braki w CSS
- Jeśli element jest większy niż 500px to...
- Brak informacji o strukturze HTML na poziomie definiowania reguł CSS
- Brak możliwości “chwytania” rodziców i elementów poprzednich
- Sam HTML określa przez strukturę wygląd
- Wsparcie standardu* CSS w różnych przeglądarkach
- Problemy z urządzeniami mobilnymi
- „Webkit” to nie cała przeglądarka
Usability
- Obszary aktywne większe niż się wydaje
- Szybkie kliknięcia i CSS
Wydajność CSS
- Rendering
- Operacje na DOM
- Zasobożerność efektów graficznych
- Recalculate layout, repaint, composition
CSS dla osób niewidomych
- Podkład muzyczny podczas odczytywania tekstu
- Określenie balansu przy odtwarzaniu dźwięku
Dobre praktyki
- Wersjonowanie GIT
- Utrzymanie dużych projektów CSS - Sposoby dzielenia plików
- Konwencje nazewnicze
- Definicje bez efektów ubocznych
Preprocesory CSS
- LESS vs SASS/SCSS vs Stylus
- Parsowanie SCSS - NetBeans, Compass, Node.js SASS
- Formaty wyjściowe
- Minifikacja
- Tworzenie plików map
SCSS - podstawowe pojęcia
- Zmienne
- Operatory
- Zagnieżdżanie
- Dziedziczenie/rozszerzanie klas
Instrukcje sterujące
- @import
- Pętle
- Instrukcje warunkowe
SCSS - tworzenie mixinów
- Parametry wejściowe
- Wyłuskiwanie wartości zmiennych
- Mixiny łączące wiele funkcjonalności
- @content
SCSS - Korzystanie z funkcji
- Funkcje wbudowane
- Pisanie własnych funkcji
- Funkcja czy mixin
SCSS - zagadnienia dodatkowe
- Klasy abstrakcyjne/placeholders
- Tworzenie rozbudowanych mixinów i stosowanie ich
- @extend vs @include
- Pułapki i ich obchodzenie
- @debug
- Dobre praktyki
Szkolenia powiązane
