Adresaci szkolenia

Adresatami szkolenia są wszystkie osoby posiadające podstawowe umiejętności w zakresie tworzenia dokumentów HTML chcące poznać Kaskadowe Arkusze Stylów (CSS) oraz developerzy pracujący w szeroko rozumianym front-endzie, które chcą rozszerzyć swoją wiedzę o nowości i możliwości przeglądarek w zakresie obsługi CSS.

Cel szkolenia

  • Zapoznanie uczestników z możliwościami CSS, przedstawienie przykładów użycia oraz nauczenie tworzenia layoutów stron i aplikacji internetowych z wykorzystaniem stylów CSS.
  • Uczestnicy poznają dobre praktyki tworzenia i utrzymania projektów wykorzystujących SASS / SCSS.

Mocne strony szkolenia

  • Szkolenie oparte jest na przykładach użycia i rozwiązywaniu konkretnych problemów w budowaniu interfejsów oraz efektów graficznych z wykorzystaniem CSS.
  • Szkolenie skupione na współczesnych możliwościach przeglądarek internetowych zarówno w ujęciu mobilne jak i desktop.
  • Na szkoleniu szczególny nacisk położony jest na podążanie za aktualnie przyjętymi wzorcami oraz zapewnienia wsparcia dla urządzeń mobilnych.
  • Poza samymi możliwościami CSS uczestnicy poznają możliwości preprocesora SASS/SCSS, który znacznie zwiększa możliwości programisty w zakresie tworzenia stylów CSS.

Wymagania

Podstawowe umiejętności w zakresie tworzenia stron internetowych z wykorzystaniem języka HTML. Mile widziana podstawowa wiedza z zakresu programowania (funkcje, pętle, instrukcje warunkowe, struktury danych).

Parametry szkolenia

  • liczba godzin szkolenia: 3 * 8 godzin
  • forma: wykłady i warsztaty

Program szkolenia

  1. Podstawy CSS

    • selektory
    • sposoby i miejsca definiowania reguł
    • elementy następne (+, ~)
    • stylowanie w zależności od atrybutów np. [type=“text”]
    • priorytety reguł
    • style wbudowane przeglądarek
    • resety i normalizacje
    • elementy liniowe, blokowe i inne
    • pseudo-selektory (nth-child, first-child, odd, even, last-child, first-of-type, etc.)
    • pseudo-elementy i elementy formularzy oraz obrazki
  2. Zagadnienia pomocnicze

    • sposoby podawania kolorów
    • grupowanie selektorów
    • style inline, osadzanie stylów w dokumencie
    • !important
    • @import css i jego wady
    • stylowanie kursora
    • zapisy skrócone
    • Jednoski (px, pt, em, rem, vh, hh, cm, %, calc)
  3. Typografia

    • Stylowanie znaczników takich jak: br, hr, pre
    • nagłówki z liniami poziomymi
      • background w kolorze tła
      • przezroczysty efekt z :after i :before
  4. Stylowanie list

    • domyślne style
    • listy wypunktowane, numerowane i definicji
    • zagnieżdżanie list
    • countery
    • sposoby numeracji
    • obrazki jako wypunktowania
    • after i before dla list
  5. Tabele

    • tworzenie tabel zgodnie z ich przeznaczeniem
    • stylowanie nagłówków tabeli
    • stylowanie pustych komórek
    • stylowanie obramowań
  6. Box model

    • padding
    • margin
    • border
    • margin-collapse
  7. Obramowania

    • outline
    • obrazkowe
    • border
    • box-shadow*
  8. Box-shadow

    • tworzenie efektu wypukłości
    • cienie wewnętrzne i zewnętrzne
    • nakładanie cieni i cienie wielokrotne
  9. Text-shadow

    • efekty na tekście
    • podnoszenie usability
    • text-outline
  10. Stylowanie formularzy

    • domyślne style
      • webkit-apperance*
      • 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
  11. 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
  12. Stylowanie zawartości większej niż pojemnik

    • Overflow
    • Przewijanie elementów wewnętrznych na urządzeniach mobilnych
  13. Sposoby pozycjonowania elementów

    • Marginesy i paddingi
    • Absolute i Relative
    • Fixed
    • flexbox
  14. Sposoby tworzenia layoutów

    • “DIVy i floaty”
    • wirtualne tabelki
    • absolute*
    • Flexbox
    • Możliwości środkowania elementów
    • Grid layout*
  15. Flexbox

    • tworzenie layoutów dopasowanych do urządzeń mobilnych
    • środkowanie elementów
    • układanie dużej ilości elementów
  16. Stylowanie obrazków

    • tła obrazkowe
    • obrazki pod wyświetlacze o podwyższonej rozdzielczości
    • Ikony zamiast plików graficznych (font-awesome i fontastic)
  17. Canvas

    • domyślne rozmiary
    • CSS a Canvas
  18. Stylowanie SVG

    • “odmalowywanie” SVG
    • zmiana wartości atrybutów
    • zmiana struktury SVG
    • performance
    • standaryzacja SVG
    • SVG 2
  19. Multimedia w CSS

    • Osadzanie video
    • nakładanie efektów na obraz dzięki blend-mode
  20. Efekty Przejścia (transitions)

    • Transition
    • keyframes i animate
    • czasy przejścia
    • funkcje czasu
    • opóźnienia
  21. Transformacje

    • Transform
      • scale
      • translate
      • rotate
      • skew
    • Transform3D
    • transform-orign
    • wygładzanie tekstu przy transformacjach – text-smooth
    • wygładzanie elementów podczas transformacji w CSS
  22. Animacje

    • definiowanie klatek kluczowych
    • biblioteki do animacji
    • animacje poprzez nadawanie i zdejmowanie klas
  23. Gradienty

    • liniowe
    • radialne
    • wielokrotne
  24. Dodatkowe efekty graficzne

    • Mieszanie warstw CSS
    • Clipping mask (Chrome)
    • SVG clipping mask
    • CSS reflex
  25. RWD i Media Queries

    • Tworzenie typowych layoutów responsywnych
    • “Mobile first”, a rzeczywistość
    • Reguły przyrostowe
    • Procentowe definicje
    • Automatyzacja RWD z wykorzystaniem SCSS
    • RWD tabel (przewijanie wewnętrzne, ukrywanie kolumn)
    • wykrywanie orientacji ekranu (portrait i landscape)
    • rozpoznawanie touchable i clickable device
  26. “mobile” CSS

    • CSS, a usability
    • Wzorce do stosowania na urządzeniach mobilnych
    • ViewPort
    • Obrazki na wyświetlaczach Retina
    • RWD
  27. Style pod druk

    • wycinanie kolorów, tła
    • ustawianie tekstu
    • definicje kartek papieru
  28. Frameworki CSS

    • Frameworki typograficzne
    • Pełne frameworki
    • Biblioteki do konkretnych zadań
    • Zbiory hacków
    • architektura CSS (np. BEM, SMACSS)
  29. Zbiór hacków

    • ellipsis
    • clearfix
    • fastGrid
    • visuallyHidden
    • Pionter-events: none
  30. Antywzorce w HTML + CSS

    • resety CSS
    • menu tworzone jako listy
    • użycie natywnej walidacji formularzy*
    • divitis i classyfis
    • layouty oparte o tabelki
  31. Braki w CSSie

    • 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
  32. Preprocesory CSS

    • LESS vs SASS vs SCSS
    • parsowanie SCSS - NetBeans, Compass, node.js SASS
    • minifikacja
    • tworzenie plików map
  33. SCSS

    • formaty wyjściowe
    • pętle
    • instrukcje warunkowe
    • klasy abstrakcyjne / placeholders
    • tworzenie mixinów i stosowanie ich
    • extend vs include
  34. Usability

    • obszary aktywne większe niż się wydaje
    • szybkie kliknięcia i CSS
  35. Wydajność CSSa

    • rendering
    • operacje na DOM
    • zasobożerność efektów graficznych
    • recalculate layout, repaint, composition
  36. CSS dla osób niewidomych

    • podkład muzyczny podczas odczytywania tekstu
    • określenie balansu przy odtwarzaniu dźwięku
  37. JavaScript

    • odczytywanie i nadawanie paramterów
    • animacje JS a Animacje CSS
  38. Testownie CSSa

    • performance (dodatek do przeglądarki)
    • sprawdzanie poprawności składni
  39. Dobre praktyki

    • wersjonowanie GIT
    • utrzymanie dużych projektów CSS - Sposoby dzielenia plików
    • konwencje nazewnicze
    • definicje bez efektów ubocznych
  40. Narzędzia developerskie

    • IDE
    • devToolsy w przeglądarce
      • zmiany live layoutu
    • build tools
    • live reload
    • css injection
    • live coding

Pytania?

* Wymagane.


Konsultant on-line
Skorzystaj z usług naszego konsultanta on-line.
Naciśnij przycisk ‘Skorzystaj’ aby przejść do okienka czatu
Kontakt
ul. Nowogrodzka 62c
02-002 Warszawa
Telefon +48 22 2035600
Fax +48 22 2035601
Email