Zaawansowane style CSS i preprocesory w praktyce

LICZBA DNI: 2 (16h)

KOD KURSU: CSS/STYLE

Powiadom
o kolejnych terminach

# css

# style

# rwd

Autor szkolenia:
Krzysztof Ścira

O szkoleniu

DLA KOGO?

Szkolenie jest adresowane do osób uczących się tworzenia stron internetowych, posiadających już podstawową wiedzę w tym zakresie oraz do developerów chcących pogłębić wiedzę 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 CSSem z wykorzystaniem najnowszych standardów i trendów

Cele szkolenia

Dogłębne poznanie CSSa, umożliwiające tworzenie rozbudowanych, estetycznych layoutów stron i aplikacji internetowych w technologii RWD

Program

  • 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
  • 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
  • domyślne rozmiary
  • CSS a Canvas
  • osadzanie video
  • nakładanie efektów na obraz dzięki blend-mode
  • transform
  • transition
  • definiowanie klatek kluczonych
  • biblioteki do animacji
  • animacje poprzez nadawanie i zdejmowanie klas
  • mieszanie warstw CSS
  • Clipping mask (Chrome)
  • SCG clipping mask
  • CSS reflex
  • 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
  • CSS, a usability
  • Wzorce do stosowania na urządzeniach mobilnych
  • ViewPort
  • Obrazki na wyświetlaczach Retina
  • RWD
  • wycinanie kolorów, tła
  • ustawianie tekstu
  • definicje kartek papieru
  • 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
  • obszary aktywne większe niż się wydaje
  • szybkie kliknięcia i CSS
  • rendering
  • operacje na DOM
  • zasobożerność efektów graficznych
  • recalculate layout, repaint, composition
  • podkład muzyczny podczas odczytywania tekstu
  • określenie balansu przy odtwarzaniu dźwięku
  • wersjonowanie GIT
  • utrzymanie dużych projektów CSS - Sposoby dzielenia plików
  • konwencje nazewnicze
  • definicje bez efektów ubocznych
  • LESS vs SASS / SCSS vs Stylus
  • parsowanie SCSS - NetBeans, Compass, node.js SASS
  • formaty wyjściowe
  • minifikacja
  • tworzenie plików map
  • zmienne
  • operatory
  • zagnieżdżanie
  • dziedziczenie / rozszerzanie klas
  • @import
  • pętle
  • instrukcje warunkowe
  • parametry wejściowe
  • wyłuskiwanie wartości zmiennych
  • mixiny łączące wiele funkcjonalności
  • @content
  • funkcje wbudowane
  • pisanie własnych funkcji
  • funkcja czy mixin
  • klasy abstrakcyjne / placeholders
  • tworzenie rozbudowanych mixinów i stosowanie ich
  • @extend vs @include
  • pułapki i ich obchodzenie
  • @debug
  • dobre praktyki

POLITYKA COOKIES:

Korzystamy z plików cookies, by móc jak najlepiej dostosować stronę do Twoich potrzeb oraz wyświetlać Ci przydatne i adekwatnych dla Ciebie reklamy w serwisie i poza nim. Możesz kontrolować ustawienia ciasteczek w swoich ustawieniach swojej przeglądarki. Odwiedzając tę stronę, wyrażasz zgodę na wykorzystywanie przez nas plików cookies.