Основе распореда садржаја - курс 3.900 РУБ. из Хекслета, обука 18 часова, Датум: 01.12.2023.

1. Увод
Рад са садржајем је основни део приликом креирања пројекта. Иза прелепих анимација, блокова и слика се крије садржај. Корисник долази на сајт или отвара апликацију за њега. У овој лекцији ћемо се укратко осврнути на теме које ће се проучавати током курса.

теорија

2. Модел кутије и ЦСС
Која својства ЦСС-а утичу на величину елемената када се приказују на страници? Подсетимо се концепта модела оквира и проучимо како својства маргине, одступања и ивице функционишу да би поставили спољашње/унутрашње допуне и видљиве границе елемента. Хајде да се упознамо са својством величине кутије, које мења стандардно понашање модела кутије

теорија

3. Стилови текста
Креирање странице је, пре свега, рад са текстом. Без обзира колико је леп дизајн, ако је информација тешко или немогуће прочитати, корисник ће брзо напустити страницу. У овој лекцији ћемо се упознати са основним својствима стилизовања текста.

теорија
тестови
вежбање

4. Фонтови и рад са њима
Да ли сте чули фразу „играјте се фонтовима“? Време је да ово урадимо. Учимо да повезујемо фонтове користећи ЦСС, контролишемо величину текста, дизајн и постављамо размак између редова. На крају лекције проучићемо генерализовано својство фонта, помоћу које можете поставити 6 различитих стилова текста одједном

теорија
тестови
вежбање

5. Листе
Листе су саставни део текста. Они вам омогућавају да групишете повезане фрагменте, уједињујући их према њиховом значењу. У овој лекцији ћемо истражити доступне типове листа у ХТМЛ-у, вежбати листе угнежђења и дотакнути се теме стилизовања маркера листе

теорија
тестови
вежбање

6. Колумне
Креирање изгледа часописа са више колона било је проблематично коришћењем ЦСС-а. Са појавом ЦСС3 стандарда, појавио се нови модул - ЦСС Мулти-цолумн Лаиоут, који је омогућио креирање колона са аутоматским преносом садржаја. Хајде да проучимо могућности модула ЦСС Цолумнс и ограничења која намећу овај метод стилизовања текста

теорија
тестови
вежбање

7. Јединице
Баш као иу стварном свету, свет распореда користи мерне јединице за означавање величине елемената, допуна, величине текста и тако даље. У овој лекцији ћемо се упознати са основним мерним јединицама и њиховим односом са елементима на сајту. Хајде да проучимо концепт релативних и апсолутних јединица и идентификујемо разлику између ем и рем јединица

теорија
тестови
вежбање

8. Медијски елементи
Посетиоци сајта не само да воле да читају текст, већ и перципирају информације кроз медијске елементе: слике, видео, аудио. Како их правилно додати и узети у обзир разлике у прегледачу? Зашто слика на сајту има малу удубину на дну? Хајде да истражимо ово и мало више у лекцији.

теорија
тестови
вежбање

9. Табле
Столови су ноћна мора дизајнера распореда. За њихово креирање користи се много ознака, а мале грешке могу покварити расположење. У овој лекцији, корак по корак, проучаваћемо креирање једноставних и сложених табела, разумећемо одакле могу настати грешке и како их спречити. До краја лекције моћи ћете самоуверено да креирате табеле и престанете да их се плашите.

теорија
тестови
вежбање

10. Формс
Обрасци су важан интерактивни елемент веб странице. Као и везе, обрасци обезбеђују интеракцију између корисника и странице, омогућавајући вам да пошаљете податке. Хајде да научимо како да креирамо обрасце, додајемо текстуална поља, поља за избор, листе и дугмад. Хајде да се дотакнемо теме приступачности формулара за особе са инвалидитетом

теорија
тестови
вежбање

11. Селектори
За ову лекцију научили смо и тестирали једноставне селекторе који су нам омогућили да селектујемо елементе према класи, идентификатору или ознаци. Како другачије можете да изаберете елемент на страници? У овој лекцији ћемо анализирати повезане и суседне селекторе, научити како да користите селекторе по атрибуту

теорија
тестови
вежбање

12. Псеудо-класе
Наставимо тему селектора у ЦСС-у и упознамо се са концептом псеудо-класе. Хајде да научимо како да их користимо за одабир парних или непарних елемената, како да додамо нове стилове лебдења миша на елементу и зашто ће чак и елементи бити такви када се користи само одређени псеудокласа. Хајде да разумемо стања елемената и структурне псеудокласе

теорија
тестови
вежбање

13. Псеудо-елементи
Недостају елементи на страници? У помоћ долазе псеудоелементи - елементи креирани помоћу ЦСС-а. У овој лекцији ћемо погледати како настају псеудоелементи, зашто су потребни и које карактеристике имају. Хајде да видимо како су маркери листе стилизовани у ЦСС-у

теорија
тестови

14. Оверфлов
Преливање је ситуација у којој је садржај унутар контејнера већи од величине самог контејнера. Ова ситуација може покварити изглед чак и за искусног дизајнера изгледа. Научићемо шта да радимо са овим и како да управљамо сакривањем садржаја користећи својство оверфлов у овој лекцији. Хајде да погледамо својство тект-оверфлов и научимо како да додамо три тачке у текстове ако нема довољно простора за то

теорија
тестови
вежбање

15. ЦСС променљиве
Замислите да на веб страници постоји десетак блокова са позадином исте боје. Морате променити све ове боје. Како то учинити без константне замене боје у сваком селектору и како варијабле могу помоћи научићемо у овој лекцији. Хајде да погледамо како се варијабле креирају и користе, сазнамо више о опсегу и зашто су глобалне варијабле боље од променљивих по селектору

теорија
тестови

16. Позадина
Дизајнер распореда се често суочава са потребом да стилизује не само одређене елементе, као што су табеле, листе, текст, медијски елементи и форме. Понекад је потребно да стилизујете и блокове у којима се налазе. Да бисте то урадили, можете поставити позадину за блок са садржајем, а ми ћемо научити како то да урадимо користећи својство позадине у овој лекцији. Хајде да проучимо својства за подешавање боје, слике, научимо како да позиционирамо позадину и подесите њену величину

теорија
тестови

17. Градијента
Једнобојна позадина или слика није једини начин за стилизовање блока. Уметници и дизајнери често користе градијенте за креирање позадине — глатке прелазе из једне боје у другу. У овом водичу ћемо научити како да креирамо линеарне и радијалне градијенте. Користећи градијенте и трикове, проучаваћемо стварање оштрих прелаза између боја, а такође ћемо научити о кругу боја и како, уз његову помоћ, пронаћи комбинације боја за градијенте

теорија
вежбање

18. Самостални рад
Додатни задаци који вам омогућавају да консолидујете стечену теорију

19. Додатни материјали
Чланци и видео снимци које је курирао Хеклет тим. Помоћи ће вам да зароните дубље у тему курса