Adresaci szkolenia

Szkolenie jest adresowane do osób uczących się tworzenia stron internetowych, posiadających podstawową znajomość języka HTML.

Cel szkolenia

Celem szkolenia jest poznanie kaskadowych arkuszy stylów CSS w stopniu pozwalającym na swobodne tworzenie prostych struktur stron internetowych i nadawanie im atrakcyjnego wyglądu.

Mocne strony szkolenia

Szkolenie umożliwia poznanie CSSa nawet osobom z bardzo niewielką wiedzą początkową.

Wymagania

  • znajomość podstaw HTML lub wybranego systemu CMS z edytorem wizualnym

Parametry szkolenia

  • Liczba godzin szkolenia: 24
  • Forma: warsztat
  • Maksymalna liczba uczestników: 10

Program szkolenia

  1. 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
  2. Jednostki w CSS
    • px, pt, cm
    • em, rem
    • vh, hh
    • %
    • funkcja calc
  3. Typografia
    • paragrafy
    • spany
    • stylowanie znaczników: br, hr, pre
  4. Stylowanie list i linków
    • style domyślne
    • listy wypunktowane, numerowane i definicji
    • zagnieżdżanie list
    • sposoby numeracji
    • dekoracja linków
  5. Tabele
    • tworzenie tabel zgodnie z ich przeznaczeniem
    • stylowanie nagłówków tabel
    • stylowanie obramowań
  6. Box model
    • padding
    • margin
    • border
  7. Obramowania
    • outline
    • border
    • box-shadow
  8. Box-shadow - dodatkowe możliwości
    • 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. 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
  11. Stylowanie zawartości większej niż pojemnik
    • overflow
    • przewijanie elementów wewnętrznych na urządzeniach mobilnych
    • paski przewijania
  12. Sposoby pozycjonowania elementów
    • marginesy i paddingi
    • absolute i relative
    • fixed
    • flexbox
    • sticky
  13. Sposoby tworzenia layoutów
    • "DIVy i floaty"
    • wirtualne tabelki
    • absolute*
    • flexbox
    • metody środkowania elementów
  14. Stylowanie obrazków
    • tła obrazkowe
    • obrazki pod wyświetlacze o podwyższonej rozdzielczości
    • ikony zamiast plików graficznych (font-awesome i fontastic)
  15. Efekty przejścia
    • transition
    • keyframes i animate
    • czasy przejścia
    • funkcje czasu
    • opóźnienia
  16. Transformacje
    • transform (scale, translate, rotate, skew)
    • transform3D
    • transform-origin
    • wygładzanie tekstu przy transformacjach – text-smooth
    • wygładzanie elementów podczas transformacji w CSS
  17. Gradienty
    • liniowe
    • radialne
    • wielokrotne
  18. RWD i Media Queries
    • tworzenie typowych layoutów responsywnych
    • “Mobile first”, a rzeczywistość
    • reguły przyrostowe
    • procentowe definicje
  19. Frameworki CSS
    • frameworki typograficzne
    • pełne frameworki
    • biblioteki do konkretnych zadań
  20. Zbiór hacków
    • ellipsis
    • clearfix
    • fastGrid
    • visuallyHidden
    • pionter-events: none
  21. Antywzorce w HTML + CSS
    • resety CSS
    • menu tworzone jako listy
    • użycie natywnej walidacji formularzy*
    • divitis i classyfis
    • layouty oparte o tabelki
  22. JavaScript
    • odczytywanie i nadawanie parametrów
    • animacje JS a animacje CSS
  23. Testowanie CSSa
    • performance (dodatek do przeglądarki)
    • sprawdzanie poprawności składni
  24. 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