#34

Od SASSa do LESSa – czyli ulepszanie CSSa

Jesteś web developerem? Tworzysz strony lub aplikacje internetowe? Chciałbyś poznać CSS lub poszerzyć swoją wiedzę z jego zakresu? Poznaj SASS / SCSS – narzędzie znacznie rozszerzające możliwości samego CSSa. Podczas warsztatów poznasz nie tylko nowe funkcjonalności samego CSSa, ale także możliwości jakie daje SASS. Całość warsztatów odbywać się będzie ze szczególnym uwzględnieniem tworzenia layoutów dla urządzeń mobilnych. Warsztaty składać się będą w przeważającej części z zadań praktycznych, aby każdy uczestnik mógł przetestować nowe efekty CSS na laptopie, tablecie czy telefonie.

Zapewniamy pyszną kawę oraz pizzę ☺

Żarówka

Czego się nauczysz?

'- poznasz nowe możliwości stylów CSS,
- poznasz możliwości preprocesora SASS / SCSS,
- nauczysz się tworzyć rozwiązania dedykowane urządzeniom mobilnym,
- poznasz popularne frameworki CSS,
- poznasz zalety i wady samodzielnego tworzenia layoutów HTML + CSS.
Notatnik

Wymagania wstępne

Od uczestników wymagane jest podstawowe stosowanie HTML i CSS. Warsztaty skierowane są dla front-end developerów, którzy chcą rozszerzyć swoją wiedzę i umiejętności dotyczące stylowania elementów HTML. Uczestnicy w trakcie zajęć korzystają z własnego sprzętu (do wygodnego korzystania z HTMLa i CSSa wystarczy właściwie każdy komputer z systemem Windows, OSX lub Linux - wymagane GUI :)
Mile widziane, choć nie wymagane, jest przyniesienie własnego sprzętu mobilnego (telefon / tablet) na którym będzie można testować tworzone layouty – alternatywą jest użycie WebDeveloper tools z Chrome, ale wiąże się to z pewnymi ograniczeniami.

Prowadzący

Krzysztof Ścira:

Absolwent AGH - Informatyka Stosowana w Hutnictwie. Prezes Zarządu i front¬end developer firmy desi9n.pl tworzącej hybrydowe aplikacje mobilne (iOS, Android, Windows Phone) oraz aplikacje internetowe. Wielokrotny prelegent na konferencjach związanych z programowaniem urządzeń mobilnych i programowaniem front¬end. W wolnych chwilach pasjonat boksu olimpijskiego.

Program warsztatów

  1. Front-end mobile.
    1. Wzorce do stosowania na urządzeniach mobilnych.
    2. ViewPort.
    3. Obrazki na wyświetlaczach Retina.
  2. Efekty graficzne.
    1. Transition.
    2. Transform.
    3. Transform3D + Transform Origin.
    4. Animation.
  3. Mieszanie warstw CSS.
  4. Preprocesory CSS.
    1. LESS vs SASS vs SCSS.
    2. Parsowanie SCSS – NetBeans, Compass, node.js SASS.
  5. SCSS.
    1. Pętle.
    2. Instrukcje warunkowe.
    3. Klasy abstrakcyjne.
    4. Tworzenie mixinów i stosowanie ich.
    5. Extend vs include.
  6. RWD.
    1. Tworzenie typowych layoutów responsywnych.
    2. “Mobile first”, a rzeczywistość.
    3. Reguły przyrostowe.
    4. Procentowe definicje.
    5. Automatyzacja RWD z wykorzystaniem SCSS.
  7. Flexbox.
    1. Tworzenie layoutów dopasowanych do urządzeń mobilnych.
    2. Środkowanie elementów.
  8. FastGrid – wirtualny powrót do tabel – utrzymanie centowania elementów.
  9. Szybkie kliknięcia i CSS.
  10. Przegląd frameworków CSS.
  11. Resety i Normalizacje.
    1. Frameworki typograficzne.
    2. Pełne frameworki.
    3. Biblioteki do konkretnych zadań.
    4. Zbiory hacków.
  12. Wydajność w aplikacjach mobilnych.
    1. Rendering.
    2. Operacje na DOM.
    3. Zasobożerność efektów graficznych.
  13. JavaScript.
    1. Odczytywanie i nadawanie paramterów.
    2. Animacje JS a Animacje CSS.
  14. Dobre praktyki.
    1. Wersjonowanie GIT.
    2. Utrzymanie dużych projektów CSS – Sposoby dzielenia plików.
    3. Konwencje nazewnicze.
    4. Definicje bez efektów ubocznych.
  15. Przydatne narzędzia.
    1. IDE (NetBeans, Atom)
    2. Testowanie CSS
    3. Kompresowanie CSS
    4. Live Coding (CodePen)
    5. Live Reload (GULP / GRUNT /WebPack)

Uwaga

Liczba miejsc ograniczona! Organizator zastrzega sobie prawo do zmiany lokalizacji wydarzenia oraz jego odwołania w przypadku niezgłoszenia się minimalnej liczby uczestników.

Zapisy na wybrany warsztat zostały zakończone.