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