Osnove modernog izgleda - besplatni tečaj Hexleta, obuka 9 sati, datum: 05.12.2023.
Miscelanea / / December 06, 2023
Naučit ćete više o HTML označavanju i mogućnostima modernog HTML5 standarda. Također ćete steći osnovna znanja o stiliziranju pomoću CSS-a: naučiti kako povezati stilove, koristiti selektore i raditi s kaskadnim rasporedom. Osim HTML-a i CSS-a, naučit ćete raditi s ugrađenim alatima za otklanjanje pogrešaka izgleda preglednika, posebno Google Chrome DevTools. Kao rezultat toga, naučit ćete kako koristiti HTML jezik za označavanje za raspored teksta na web stranici, a također ćete se upoznati s osnovnim pravilima korištenja CSS-a i stiliziranja teksta.
Svoje nove vještine moći ćete odmah primijeniti u praksi - proučavat ćemo uređivače izgleda i dodatke za njih. Na kraju svake lekcije naći ćete male samostalne zadatke. Usmjereni su na praktičnije razumijevanje obrađene teme, te se stoga toplo preporučuju za provedbu.
Osnove layouta će vam dobro doći ako odlučite studirati web development, bez obzira na smjer. Znanje iz ovog tečaja pomaže programerima da označe podatke i prikažu ih na stranici. Ovaj tečaj je pogodan za početnike i programere koji se s tim nisu susreli
Uvod
Tečaj “Osnove modernog izgleda” je osnova za učenje osnova HTML i CSS izgleda web stranice. U ovoj lekciji ćemo ukratko govoriti o tome što učimo na tečaju i kako to znanje možemo primijeniti u praksi.
Uvod u HTML
Lekcija je posvećena HTML izgledu od nule. Govorimo o ulozi atributa i proučavamo opću shemu za opisivanje HTML oznaka.
Blok model
Koji elementi su odgovorni za okvir stranice, a koji pomažu u procesu stiliziranja ili dodavanja funkcionalnih dijelova? Upoznajmo blok i inline HTML elemente i proučimo utjecaj stilova na konačnu širinu elemenata.
Semantički HTML
Glavni cilj svakog HTML izgleda je prenijeti značenje blokova. U ovoj lekciji istražit ćemo semantičke mogućnosti najnovijeg standarda HTML5 i naučiti o web pristupačnosti.
Osnovna struktura HTML dokumenta
Svaki HTML dokument ima osnovnu strukturu koja se sastoji od oznaka i servisnih elemenata. Preglednik ih treba za ispravan prikaz informacija. U ovoj lekciji ćemo pogledati svaki red ove strukture.
Osnove CSS-a
CSS jezik stvoren je za vizualni dizajn web stranice. Proučavamo osnovne mogućnosti jezika, shvaćamo kako ih koristiti zajedno s HTML-om. Učimo uključiti CSS datoteke i upoznajemo se s osnovnim tipovima selektora.
Kaskadno u CSS-u
Što je kaskadno i kako funkcionira u CSS-u? Lekcija je posvećena razlikama u prioritetima selektora i sposobnosti da ih koristite u svojim projektima.
Chrome DevTools
Prilikom postavljanja web stranice važno je na vrijeme pronaći pogreške ili razumjeti kako ispravno pretvoriti blok koji nam je potreban. Prije se to uglavnom radilo ručno. Današnji moderni preglednici imaju funkciju web inspektora. Razmotrimo mogućnosti jednog od njih - Chrome DevTools.
Urednici koda
Da biste spremili svoj rad, potreban vam je uređivač koda. U ovoj lekciji ćemo pogledati kako instalirati Visual Studio Code. Ovo je moćan alat koji se može koristiti ne samo za izgled, već i za programiranje na bilo kojem jeziku.
Mrav
Proučimo jedan od najkorisnijih dodataka za dizajnere izgleda - Emmet. To će ubrzati označavanje HTML koda i ukloniti većinu rutinskih koraka.
Objava na Internetu
Da biste projekt postavili na Internet, morate koristiti hosting - poseban poslužitelj koji će pohranjivati datoteke i omogućiti im pristup putem naziva domene. U ovom vodiču ćemo pogledati besplatno GitHub hosting.
Grafički urednik
Postoji nekoliko glavnih editora na tržištu. Neki od njih su specifični samo za jedan operativni sustav, drugi se mogu instalirati na bilo koji od njih. U ovom odjeljku pogledajmo glavne korake kada dizajner izgleda radi s Figma online uređivačem.
Samostalni rad
Dodatni zadaci koji omogućuju učvršćivanje stečene teorije
Dodatni materijali
Članci i videozapisi koje je pripremio Hexlet tim. Pomoći će vam da dublje zaronite u temu tečaja