Brzina - pouzdanost - kvalitet

Besplatni online kurs web dizajna

HTML, CSS, photoshop, JS, Bootstrap - video i pisani materijal - izvorni kodovi



English

Nastavne jedinice - linkovi ka video i pisanim nastavnim jedinicama

html5-online-kurs photoshop-online-kurs javascript-online-kurs bootstrap-online-kurs

Uvod - početak izrade web stranice


Uputstvo kako se uči online obuka i prateći materijal

Besplatni programi za online kurs web dizajna

1. Koji program koristiti za web dizajn

2. Struktura i organizacija web sajta

3. HTML - osnovna struktura web strane

4. DIV TAG - kreiranje osnovne konstrukcije web stranice

5. CSS - stilovi (Klase)

5-1. Primeri konstrukcija web strane

6. Header - ubacivanje slike u HTML kod

7. Navigacija - struktura navigacije

8. Formatiranje sadržaja web strane

9. Ubacivanje slike u tekst

9.1. Fajl .htaccess - linkovi bez ekstenzije

10. Linkovi- vrste linkova (tekst, slika, email)

11. Tabele - rad sa tabelama

12. Galerija slika

13. Google mapa

13.1. Mape bez API key (pisani materijal)

14. Slide Show

15. Testiranje web sajta

16. Testiranje web sajta - 2 deo

17. Dodatno stilizovanje teksta

18. Hover efekti

19. Web boje

20. Google fonts

21. Div tagovi kao LINK

22. Jednostavna navigacija

23. Jednostavna navigacija sa padajućim podmenijem

24. Photoshop - Uvod u radno okruženje

25. Photoshop - Rezolucija, bitmap

26. Photoshop - Selekcija u Photoshopu

27. Photoshop - Layers

28. Photoshop - Erase Background

29. Photoshop - Optimizacija slike

30. Photoshop - Tekst - rad sa tekstom

 

Dodatni elementi na web stranici


31.1. Slide Show - slider u par klikova

31.2. Slide Show - galerija

31.3. Slider properties

31.4. Slider – ubacivanje u HTML kod

32. Response ili mobil dizajn

33. Organizacija mobil verzije

34. Struktura HTML strane za mobil verziju

35. Media queries – stilovi prema rezoluciji

36. Testiranje dizajna u rezolucijama

37. Optimizacija

37.1. Optimizacija web sajtova u 10 koraka

37.2. Greške kod optimizacije web sajtova

38. Sitemap - izrada mape sajta

39. Prebacivanje prezentacije na server

40. Web dizajn - šta dalje ?

41. Kontakt formular

42. Horizontal Scroller - listanje proizvoda

43. Top Scroll Button

44. Tekstualni Slider

45. Accordion Slider

46. Animacija teksta u HTML-u

47. Animacija slika u HTML-u

48. Div Tag u kolonama

49. Response web dizajn

50. Response navigacija

51. Statični DIV TAG

52. Pomerajući (galerijski DIV TAG)

53. Pomerajući DIV TAG - na primeru navigacije

54. Background Slide Show

55. Animirane ikonice

55.1. Error page (404)

55.2. Video u HTML kodu

55.3. HTML TAG - OUTPUT

55.4. HTML TAG - PROGRESS

55.5. HTML TAG - DATALIST

 

Bootstrap, JS efekti i neki trikovi


88. Uvod - šta je Bootstrap ?

89. Osnovna konstrukcija - pozivanje Bootstrap klasa

90. Navigacija preko Bootstrapa klasa

91. Klasa Carousel - slide show

92. Klasa Jumbotron - header panel

93. Klasa - kolone

94. Klasa - kolone II

95. Zaključak

96. Šta je Javasript i JQuery ?

97. Efekti na klik mišem

98. Selekcija na klik mišem

99. Efekti na prelazak mišem

100. Animacija na klik mišem

101. HTML manipulacija - zamena teksta

102. Hover efekat - prelaskom miša

103. Klik button efekti

104. Klik button efekti II

105. Disable komande

106. Drop Down panel

107. Jednostavan Datepicker

108. TAB panel

109. Autocomplete kod pretrage

110. Brojač - counter

111. Dizajn Newsletter-a

112. Osnovna konstrukcija

113. Dizajn Newsletter-a

114. Dizajn Newsletter-a (nastavak)

115. Ubacivanje Newsletter-a u email

Trick 1 - Drop Caps u HTML-u

Trick 2 - Tooltips u HTML-u

Trick 3 - I FRAME - "ekran" ka web stranici

Trick 4 - Padajući Div tag-ovi

Trick 5 - Stilizovan "prišiveni" Div tag

Trick 6 - Efekat Ribbona

Trick 7 - Tekst u više boja

 

Trikovi - nastavak


Trick 8 - Tekst kao citat

Trick 9 - Efekat pisaće mašine

Trick 10 - Efekat rotirajuće slike - TIP 1

Trick 11 - Efekat rotirajuće slike - TIP 2

Trick 12 - Efekat pomerajućeg div tag-a - TIP 1

Trick 13 - Efekat pomerajućeg div tag-a - TIP 2

Trick 14 - Dizajniran cenovnik - TIP 1

Trick 15 - Dizajniran cenovnik - TIP 2

Trick 16 - Smartfoni (testiranje rezolucije)

Trick 17 - Tableti (testiranje rezolucije)

Trick 18 - Font Sizer - JS za povećavanje fonta

Trick 19 - Photoshop - stilovi

Trick 20 - Page Source - izvorni kod

Trick 21 - Kolone "pod konac" - stilovi "block" i "min-height"

Trick 22 - Call button - samo za mobil verzije

Trick 23 - Stilovi: before, after, content

Trick 24 - Pop Up window - Z index

Kako da stilizujete Bulite

Kako da stilizujete LOADER

Kako da stilizujete ALERT panele

Kako da podesite jednake visine kolona

Vertikalna response navigacija

Font face stil

Ikonice u HTML kodu