Osnove izgleda sadržaja - tečaj 3900 RUB. iz Hexleta, trening 18 sati, Datum: 01.12.2023.

1. Uvod
Rad sa sadržajem osnovni je dio pri izradi projekta. Postoji sadržaj skriven iza prekrasnih animacija, blokova i slika. Korisnik dolazi na stranicu ili otvara aplikaciju za nju. U ovoj lekciji ukratko ćemo se osvrnuti na teme koje ćemo proučavati tijekom tečaja.

teorija

2. Model okvira i CSS
Koja CSS svojstva utječu na veličinu elemenata kada se prikazuju na stranici? Sjetimo se koncepta okvirnog modela i proučimo kako svojstva margine, ispune i obruba funkcioniraju za postavljanje vanjskih/unutarnjih ispuna i vidljivih granica elementa. Upoznajmo se sa svojstvom veličine kutije, koje mijenja standardno ponašanje modela kutije

teorija

3. Stilovi teksta
Izrada stranice je prije svega rad s tekstom. Koliko god dizajn bio lijep, ako je informacija teška ili nečitljiva, korisnik će brzo napustiti stranicu. U ovoj lekciji ćemo se upoznati s osnovnim svojstvima stiliziranja teksta.

teorija
testovi
vježbanje

4. Fontovi i rad s njima
Jeste li čuli izraz "poigrajte se s fontovima"? Vrijeme je da to učinimo. Učimo spajati fontove pomoću CSS-a, kontrolirati veličinu teksta, dizajn i postavljati prored. Na kraju lekcije proučit ćemo generalizirano svojstvo fonta, s kojim možete postaviti 6 različitih stilova teksta odjednom

teorija
testovi
vježbanje

5. Popisi
Popisi su sastavni dio teksta. Omogućuju vam grupiranje povezanih fragmenata, ujedinjujući ih prema njihovom značenju. U ovoj lekciji istražit ćemo dostupne vrste popisa u HTML-u, vježbati ugniježđivanje popisa i dotaknuti se teme stiliziranja oznaka popisa

teorija
testovi
vježbanje

6. Stupci
Stvaranje izgleda časopisa s više stupaca bilo je problematično korištenjem CSS-a. Pojavom standarda CSS3 pojavio se novi modul - CSS Multi-column Layout, koji je omogućio izradu stupaca s automatskim prijenosom sadržaja. Proučimo mogućnosti modula CSS Columns i ograničenja koja su nametnuta ovom metodom stiliziranja teksta

teorija
testovi
vježbanje

7. Jedinice
Baš kao u stvarnom svijetu, svijet rasporeda koristi mjerne jedinice za označavanje veličina elemenata, ispune, veličine teksta i tako dalje. U ovoj lekciji ćemo se upoznati s osnovnim mjernim jedinicama i njihovim odnosom s elementima na mjestu. Proučimo koncept relativnih i apsolutnih jedinica i identificirajmo razliku između jedinica em i rem

teorija
testovi
vježbanje

8. Medijski elementi
Posjetitelji web stranice ne samo da vole čitati tekst, već i percipiraju informacije kroz medijske elemente: slike, video, audio. Kako ih ispravno dodati i uzeti u obzir razlike preglednika? Zašto slika na stranici ima malo uvlačenje na dnu? Istražimo ovo i još malo više u lekciji.

teorija
testovi
vježbanje

9. Stolovi
Stolovi su noćna mora dizajnera. Mnogo se oznaka koristi za njihovu izradu, a male pogreške mogu pokvariti raspoloženje. U ovoj lekciji, korak po korak, proučavat ćemo stvaranje jednostavnih i složenih tablica, shvatit ćemo odakle mogu nastati pogreške i kako ih spriječiti. Do kraja lekcije moći ćete pouzdano kreirati tablice i prestati ih se bojati.

teorija
testovi
vježbanje

10. Obrasci
Obrasci su važan interaktivni element web stranice. Poput poveznica, obrasci omogućuju interakciju između korisnika i stranice, omogućujući vam slanje podataka. Naučimo kako stvarati obrasce, dodavati tekstualna polja, polja za odabir, popise i gumbe. Dotaknimo se teme pristupačnosti obrazaca za osobe s invaliditetom

teorija
testovi
vježbanje

11. Selektori
Za ovu lekciju naučili smo i testirali jednostavne selektore koji su nam omogućili odabir elemenata prema klasi, identifikatoru ili oznaci. Kako drugačije možete odabrati element na stranici? U ovoj lekciji ćemo analizirati povezane i susjedne selektore, naučiti kako koristiti selektore po atributu

teorija
testovi
vježbanje

12. Pseudo-klase
Nastavimo temu selektora u CSS-u i upoznajmo se s konceptom pseudoklase. Naučimo kako ih koristiti za odabir parnih ili neparnih elemenata, kako dodati nove stilove lebdenja mišem na element i zašto će čak i elementi biti takvi kada koristite samo određeni pseudoklasa. Hajdemo razumjeti stanja elemenata i strukturne pseudo-klase

teorija
testovi
vježbanje

13. Pseudoelementi
Nedostaju elementi na stranici? U pomoć dolaze pseudo-elementi - elementi kreirani pomoću CSS-a. U ovoj lekciji ćemo pogledati kako se stvaraju pseudoelementi, zašto su potrebni i koje karakteristike imaju. Pogledajmo kako su markeri popisa stilizirani u CSS-u

teorija
testovi

14. Prelijevanje
Overflow je situacija u kojoj je sadržaj unutar spremnika veći od veličine samog spremnika. Ova situacija može pokvariti izgled čak i za iskusnog dizajnera izgleda. Naučit ćemo što učiniti s ovim i kako upravljati skrivanjem sadržaja pomoću svojstva overflow u ovoj lekciji. Pogledajmo svojstvo text-overflow i naučimo kako dodati elipsu u tekstove ako za to nema dovoljno prostora

teorija
testovi
vježbanje

15. CSS varijable
Zamislite da na web stranici postoji desetak blokova s ​​pozadinom iste boje. Morate promijeniti sve ove boje. Kako to učiniti bez stalne zamjene boje u svakom selektoru i kako varijable mogu pomoći naučit ćemo u ovoj lekciji. Pogledajmo kako se varijable stvaraju i koriste, naučimo o opsegu i zašto su globalne varijable bolje od varijabli po selektoru

teorija
testovi

16. Pozadina
Dizajner izgleda često se suočava s potrebom stiliziranja ne samo specifičnih elemenata, kao što su tablice, popisi, tekst, medijski elementi i obrasci. Ponekad također trebate stilizirati blokove unutar kojih se nalaze. Da biste to učinili, možete postaviti pozadinu za blok sa sadržajem, a mi ćemo naučiti kako to učiniti pomoću svojstva pozadine u ovoj lekciji. Proučimo svojstva za postavljanje boje, slike, naučimo kako postaviti pozadinu i postaviti njezinu veličinu

teorija
testovi

17. Gradijenti
Jednobojna pozadina ili slika nije jedini način stiliziranja bloka. Umjetnici i dizajneri često koriste gradijente za stvaranje pozadina—glatke prijelaze iz jedne boje u drugu. U ovom tutorialu naučit ćemo kako stvoriti linearne i radijalne gradijente. Koristeći gradijente i trikove, proučavat ćemo stvaranje oštrih prijelaza između boja, a također ćemo naučiti o kotaču boja i kako uz njegovu pomoć pronaći kombinacije boja za gradijente

teorija
vježbanje

18. Samostalni rad
Dodatni zadaci koji omogućuju učvršćivanje stečene teorije

19. Dodatni materijali
Članci i videozapisi koje je pripremio Hexlet tim. Pomoći će vam da dublje zaronite u temu tečaja