1
Naršyklė ir dokumentas
Kaip naršyklė interpretuoja HTML struktūrą. Dokumento srautas, elementų tvarka, kaip vienas elementas veikia kitą.
3 val.
Mokymosi programa
Svetainių išdėstymo
Svetainių išdėstymo
principai ir praktika
Programa skirta tiems, kurie nori suprasti, kaip veikia naršyklės, kaip elementai užima vietą puslapyje ir kodėl vienoje vietoje viskas atrodo tvarkingai, kitoje – ne.
Programos turinys
Ką sudaro šios dirbtuvės
2
Dėžutės modelis
Margin, padding, border — skirtumai ir kaip jie keičia elemento dydį. Praktiniai scenarijai su tikromis naršyklių devtools.
2,5 val.
3
Flexbox išdėstymas
Ašys, lygiavimas, tarpai. Flexbox atvejai kai ji veikia geriau nei grid — ir atvirkščiai.
4 val.
4
CSS Grid
Dvimačiai tinkleliai, template-areas, automatinis talpinimas. Kuo grid skiriasi nuo stulpelių sistemų.
4 val.
5
Reagavimo principai
Media užklausos, santykiniai vienetai, fluid scaling. Kaip vienas kodas veikia tiek mobiliajame, tiek dideliame ekrane.
3,5 val.
6
Pozicionavimas
Static, relative, absolute, fixed, sticky — kiekvieno pozicionavimo tipo prasmė. Kaip stacking context keičia elementų tvarką.
2,5 val.
7
Tipografija tinkle
Kaip šrifto dydis, eilučių tarpas ir stulpeliai sąveikauja. Optimalus teksto plotis skaitomumui.
2 val.
8
Baigiamasis projektas
Puslapio išdėstymas nuo nulio — struktūra, tinklelis, reagavimas. Grupinis peržiūros formatas su konkrečiais komentarais.
2,5 val.
Pagrindinės sąvokos
Terminų žinynas
Kiekvienas modulis grindžiamas konkrečiu žodynu. Žemiau — pagrindiniai terminai, su kuriais dalyviai dirbs per visą programą.
-
- Dokumento srautas
- Numatytasis naršyklės elgesys, kai block elementai išsidėsto eilėmis iš viršaus į apačią, o inline — toje pačioje eilutėje.
- Dėžutės modelis
- CSS koncepcija, apibūdinanti elementą kaip turinio zoną, apgaubtą padding, border ir margin sluoksniais.
- Flex konteineris
- Tėvinis elementas su display: flex, kurio vaikai tampa flex elementais ir reaguoja į ašies nustatymus.
- Grid sritis
- Vienas ar keli grid langeliai, sudedantys stačiakampę zoną, kuriai galima suteikti pavadinimą per grid-template-areas.
- Stacking context
- Izoliuota z-index aplinka, sukuriama tam tikrų CSS savybių, pvz. position+z-index arba opacity mažesnio nei 1.
- Fluid scaling
- Technika, kai elementai naudoja procentinius arba viewport vienetus ir automatiškai keičia dydį pagal ekraną.