Zaawansowane style CSS i preprocesory w praktyce

LICZBA DNI: 2 (16h)

KOD KURSU: CSS/STYLE

POZIOM SZKOLENIA:

# css

# style

# rwd

Najbliższy termin:

17 czerwca 2021

1950 PLN netto + 23% VAT

Jeszcze 8 miejsc w tej cenie.

  • stacjonarne
  • zdalne

STACJONARNE

W CENIE

  • 2 dni pracy z trenerem
  • Materiały szkoleniowe
  • Lunch
  • Certyfikat ukończenia szkolenia

ZDALNE

W CENIE

  • 2 dni pracy z trenerem na żywo online
  • Materiały szkoleniowe
  • Certyfikat ukończenia szkolenia

Czy wiesz, że możesz uzyskać nawet do 100% dofinansowania na szkolenie? Dowiedz się jak »

Oferta dla firm

Dostosuj zakres, czas i miejsce szkolenia do potrzeb Twojego zespołu. Uzyskaj indywidualną wycenę szkolenia dla grupy.

Weź udział w szkoleniu

Termin

Lokalizacja

Cena / os

17

czerwca

Warszawa,

Kraków,

Łódź,

Wrocław,

Gdańsk,

Poznań,

Zdalne,

1950 PLN netto
+ 23% VAT

Termin

17

czerwca

Lokalizacja

Warszawa,

Kraków,

Łódź,

Wrocław,

Gdańsk,

Poznań,

Zdalne,

Cena / os

1950 PLNnetto
+ 23% VAT

Powiadom
o kolejnych terminach

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 CSS z wykorzystaniem najnowszych standardów i trendów

Cele szkolenia

Dogłębne poznanie CSS, 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 kluczowych
  • 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.