Vodič · Web programiranje

HTML, CSS i JavaScript – kreiranje web sajtova

Svaka web stranica napravljena je od tri jezika: HTML određuje šta je na stranici, CSS kako izgleda, a JavaScript šta radi. Ovaj kurs vodi od prve stranice do responzivnog sajta i male interaktivne aplikacije.

U lekcijama je uz svaki primer prikazan i živi rezultat, a na kraju su vežbe sa rešenjima. Potrebni su samo pregledač i editor (preporuka: VS Code).

17 lekcija
Od 5. razreda
Projekat od skice do objave

Pre kursa: korisno je da pročitaš Osnove weba (bar prve dve lekcije). Za JavaScript lekcije pomaže ako već znaš osnove jednog jezika – Python ili C++. Posle kursa sledi backend: Python za web ili ASP.NET Core.

1 HTML – struktura stranice

Od prve stranice do formi: elementi, atributi, linkovi, slike, liste, tabele, semantički delovi.

Prva web stranica

Alati, tagovi i atributi, kostur dokumenta, naslovi i pasusi.

Otvori lekciju →

Tekst, linkovi i slike

Oblikovanje teksta, relativne putanje, sidra, slike i alt.

Otvori lekciju →

Liste, tabele i delovi stranice

ul, ol, table; header, nav, main, footer; blok i linijski elementi.

Otvori lekciju →

Forme

Polja za unos, radio, checkbox, select, provera unosa, GET i POST.

Otvori lekciju →

2 CSS – izgled i raspored

Boje i slova, model kutije, flexbox i grid, prilagođavanje telefonu.

Boje, fontovi i selektori

Pravila, klase i id, boje i jedinice, kaskada.

Otvori lekciju →

Box model

padding, border, margin, box-sizing, kartice, pozicioniranje.

Otvori lekciju →

Flexbox i grid

Meniji, kartice, galerije i raspored cele stranice.

Otvori lekciju →

Responzivni dizajn

viewport, media upiti, „prvo telefon“.

Otvori lekciju →

3 JavaScript – ponašanje

Programiranje u pregledaču: od promenljivih do interaktivne aplikacije.

Prvi koraci

Promenljive, grananje, petlje, nizovi, objekti, funkcije – poređenje sa C++ i Python-om.

Otvori lekciju →

DOM i događaji

Menjanje stranice, klikovi i unos, forme, lista zadataka sa localStorage.

Otvori lekciju →

4 Bootstrap 5 – brži raspored

Gotove klase i komponente – kada već znaš CSS koji je ispod njih.

Mreža i pomoćne klase

Povezivanje, container–row–col, tačke preloma, razmaci, boje, dugmad.

Otvori lekciju →

Meni, kartice, forme i prozori

Navbar sa „hamburgerom“, kartice, forme, modal, prilagođavanje, razlike verzija 4 i 5.

Otvori lekciju →

5 Projekat: Logo kreator

Ceo sajt od skice do objave: naslovna strana, sopstveni stil i generator logoa u JavaScript-u.

Plan i struktura

Šta pravimo, skica strane, folderi, plan rada.

Otvori lekciju →

Naslovna strana

Meni, glavni deo sa formom, koraci, galerija, podnožje – Bootstrap 5.

Otvori lekciju →

Stilovi i responzivnost

CSS promenljive, pozadina, efekti, telefon i pristupačnost.

Otvori lekciju →

Generator logoa

SVG, živi prikaz, preuzimanje PNG i SVG slike.

Otvori lekciju →

Objavljivanje sajta

Provera pre objave, GitHub Pages, Netlify, Render, sopstveni domen.

Otvori lekciju →

Predloženi redosled