#76

Wprowadzenie do CSS – czyli jak zmusić HTMLa, żeby jakoś wyglądał

Zaczynasz przygodę z programowaniem webowym? Używasz HTMLa od wielu lat, ale nie masz aktualnej wiedzy na temat możliwości CSS? Jesteś wirtuozem Flasha, ale chciałbyś przesiąść się na bardziej współczesne technologie? A może jesteś back-endowcem i chciałbyś spróbować czegoś nowego?

Warsztaty pokażą Ci czym jest CSS, w jaki sposób definiuje się wygląd elementów, jakie są możliwości CSSa, a co wykracza poza jego granice. Warsztaty składać się będą w przeważającej części z zadań praktycznych, aby każdy uczestnik mógł przetestować działanie styli na własnym laptopie, tablecie czy telefonie.

Podczas warsztatów:

– nauczysz się podstaw CSS takich jak selektory, kaskadowość styli
– poznasz sposoby pozycjonowania i wymiarowania elementów
– nauczysz się w wydajny i prosty sposób korzystać z obrazków osadzanych w CSSie
– poznasz popularne frameworki CSS oraz sposoby tworzenia własnych toolkitów styli

Od uczestników wymagane jest podstawowe stosowanie HTML. Warsztaty skierowane są dla osób które chciałyby poznać możliwości tworzenia layoutów stron i aplikacji internetowych, a także poznać nowe możliwości CSSa. 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, efekty – alternatywą jest użycie WebDeveloper tools z Chrome, ale wiąże się to z pewnymi ograniczeniami.

Uczestnikom zapewniamy pizzę oraz pyszną kawę 🙂

Za użyczenie sali bardzo dziękujemy ClusterCowork

Prowadzący

Krzysztof Ścira:

Absolwent AGH - Informatyka Stosowana w Hutnictwie. Prezes Zarządu i front-end developer firmy desi9n.pl tworzącej aplikacje webowe, aplikacje mobilne oraz programowanie dedykowane. 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. Semantyka HTML, a stylowanie elementów
    1. Style wbudowane przeglądarki
    2. Znaczniki semantyczne w HTML5
    3. Przyjęte standardy i powszechnie stosowane techniki
  2. Możliwości przeglądarek desktopowych vs mobilnych
    1. Wsparcie standardów HTML, CSS i JS
    2. Wydajność w wyświetlaniu skomplikowanych efektów graficznych
    3. Unikanie stosowania JS do definiowania wyglądu
  3. Dołączanie CSSa do HTMLa
    1. Rozbijanie definicji stylów na wiele plików
    2. Umiszczenie styli inline, w znacznikach <style>, w zewnętrznych plikach
    3. CSS – robienie porządku i bałaganu zarazem na przykładzie WebPacka
  4. Selektory
    1. Identyfikatory ID
    2. Klasy
    3. „Łapanie” elementów po wartościach atrybutów
    4. Wskazywanie elementów podrzędnych, następnych
  5. Tworzenie „obiektowego” CSSa z użyciem wielu klas
    1. Klasy generyczne
    2. Klasy dla konkretnego elementu / widoku
    3. Chroby front-endu: CLASSyfis i DIVitis
  6. Pozycjonowanie elementów
    1. Różne zachowanie elementów w zależności od display
    2. Różnice między static, relative, absolute, fixed
  7. Wymiarowanie elementów
    1. typowych stron internetowych
    2. aplikacji internetowych architektonicznie silnie opartych o back-end
    3. aplikacji typu SPA (opartych o webservice)
    4. aplikacji typowo offline’owych
    5. gier w przeglądarce
  8. Sposoby przechowywania danych użytkownika
    1. Box model
    2. Jednostki względne i bezwzględne
    3. Typowe pułapki z wymiarowaniem
  9. Stylowanie tekstu
    1. Nagłówki
    2. pogrubienia, pochylenia, kapitaliki
    3. Wysokość linii
    4. Wyrównanie tekstu
    5. text-shadow i inne efekty na tekście
  10. Efekty na elementach blokowych
    1. Obramowanie
    2. Cienie
    3. Zaokrąglenia narożników
  11. Stylowanie tabel
    1. Nagłówki
    2. Komórki
    3. Wiersze
    4. Tabele bez tabeli czyli display: table
  12. Stylowanie formularzy
    1. Ograniczenia i możliwości
    2. Elementy sterującei
  13. Pseudoklasy i pseudoselektory
    1. Ograniczenia „wirtualnych” elementów
    2. Powiązanie pseudoelementów z „rodzicem”
  14. Zdarzenia i interakcje z użytkownikiem
    1. Wskazanie
    2. Kliknięcie
    3. Wypełnienie fomularza
  15. Narzędzia przyspieszające pracę developera
    1. IDE
    2. Build Tools z node.js
    3. DevToolsy przeglądarki

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.