Osnove HTML-a i CSS-a - Besplatan kurs
37 lekcije
HTML
-
Introduction to HTML
38min
Free
-
Working with Typography
1h:30min
Free
-
Working with MULTIMEDIA
56min
Free
-
Working with LINKS
44min
Free
-
Working with LISTS
47min
Free
-
Working with TABLES
34min
Free
-
Working with FORMS
1h:28min
Free
-
HTML 5 - Structuring content
1h:09min
Free
-
HTML 5 - Structuring content - CHALLENGE
4min
Free
-
HTML 5 - Structuring content - SOLUTION
24min
Free
Design
CSS
-
CSS Introduction - linking to HTML
34min
Free
-
CSS Debug tool
17min
Free
-
CSS selectors, pseudo-class and pseudo elements
55min
Free
-
CSS selectors and pseudo class - PRACTICE
9min
Free
-
CSS - Working with tipography
45min
Free
-
CSS - Working with fonts
34min
Free
-
CSS - Colors
30min
Free
-
CSS - BOX model
47min
Free
-
CSS - Display property
55min
Free
-
CSS - Float property
33min
Free
-
CSS - Images and Backgrounds
50min
Free
-
Display + Float practice
1h:53min
Free
-
CSS - Display + Float CHALLENGE
13min
Free
-
CSS - Display + Float SOLUTION
1h:28min
Free
-
CSS - Position property
22min
Free
-
CSS - Position practice
24min
Free
-
CSS - Flex
46min
Free
-
CSS Flex - PRACTICE
1h:10min
Free
-
CSS - Styling list
35min
Free
-
CSS - Styling table
13min
Free
-
CSS - Styling form
39min
Free
-
CSS - Animation
42min
Free
-
HTML + CSS Project
1h:52min
Free
CSS - Flex
Na ovom predavanju upoznaćemo se sa FLEX propertijem.
Do sada smo za pravljenje layouta koristili:
- display:inline-block
- float
U toku rada smo se sretali sa odredjenim problemima koji ovi propertiji imaju. Od skora je uveden FLEX properti koji nam omogućava da na izuzetno lagan način manipulišemo elementima i pravimo layout tj da rasporedjujemo elemente na WEB stranici.
Sam properi FLEX je kompleksan. Kada pricamo o njemu vazno je napomenuti da treba da razlikujemo 2 stvari:
- FLEX CONTAINER
- FLEX ITEME
Flex container je element koji ima definisan DISPLAY:FLEX a flex ITEMI su prvi potomci FLEX CONTAINERA
U zavisnosti od toga mozemo i koristiti odredjene opcije:
ZA FLEX CONTAINER:
- display:flex
- flex-wrap : wrap, no-wrap, wrap-reverse
- flex-direction: row, row-reverse, column, column-reverse
- justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
- align-items: flex-start, flex-end, center, baseline, strach
- align-content:flex-start, flex-end, center, baseline, strach
ZA FLEX ITEME:
- flex-grow
- flex-srink
- flex-basis
- flex: flex-grow flex-srink flex-basis
- self-align: flex-start, flex-end, center, baseline, strach
- order