Dobre lekcije o rasporedu. Prilagodljivi raspored: lekcije ili ravno u bitku? Gdje je granica između izgleda, web dizajna i front-enda?

Pozdrav, moje ime je Alexander Zelenin i ja sam web programer.
Često sam čuo mišljenje da je layout domena frontendera početnika. Iako je zapravo ovo najvažniji dio svakog (skoro) web projekta. To je ono što korisnici prvo vide. Trenutačno, visokokvalitetni izgled (osobito blok dizajn) u velikom projektu zahtijeva veliki broj različitih vještina.

U ovom članku predstavljam razvojni plan za dizajnera izgleda

[veliko na klik]
Naravno, ovo nije sveobuhvatna i jedina ispravna shema. Postoji cijelo brdo povezanih vještina, relevantnih tehnologija i tako dalje. Gradacija je subjektivna.

Želio bih odmah dodati da u članku neće biti specifičnih poveznica na obrazovne materijale. Bit će mi drago dodati dopune u komentarima.

Što očekujemo?

Prije svega, potrebno je razumjeti što očekujemo od osobe na svakoj razini. Vaša očekivanja mogu varirati.
Junior- poznaje glavne oznake, može ispraviti sadržaj na već pripremljenoj html stranici, zna ispravno formatirati tekst, bez problema ubacuje ugrađeni element (video s YouTubea, Yandex mapa), radi kroz sustav kontrole verzija samo za sebe (master, 1 suradnik). Može smisliti nešto jednostavno od nule, a to čak neće uspjeti (njemu osobno). Općenito, to nije neovisna jedinica i zahtijeva vodstvo odozgo.
sredina- više ili manje autonomna jedinica (ili potpuno autonomna za male i srednje projekte). Web stranica srednje veličine može se dobro postaviti, a bit će ispravno prikazana u svim trenutnim verzijama preglednika. Razumije kako rade predlošci i može ih koristiti (pod uvjetom da je dostavljen ostatak koda). Sposoban planirati i dokumentirati svoj rad i procijeniti rokove. Razumije važnost održavanja stila koda. Razumije zašto postoje grid sustavi i CSS okviri. Sposobnost preuzimanja svih potrebnih informacija iz nacrta dizajnera. Može komunicirati s malim timom, stvarati grane i povlačiti zahtjeve.
Stariji- može dizajnirati blok sustav za veliki projekt. Zna kako izbjeći ponavljanja i problematična područja kada drugi programeri koriste njegov kod. Sposoban razložiti složene probleme i kompetentno formulirati zadatke. Zna primijeniti barem jednu razvojnu metodologiju (npr. BEM). Može otvoriti projekt što je brže moguće. Dobro razumije nekoliko popularnih pokretača predložaka. Sposoban pisati kolektore i automatizirati proces povezan s njim. Može provoditi pregled koda i nadzirati druge programere koda.
Razmotrimo sada malo konkretnije što uključuje svaki od blokova na svakoj razini.

Junior

HTML- poznavanje osnovnih oznaka i atributa. Razumijevanje kako to napisati u načelu.
Tipografija- Mogućnost oblikovanja teksta. Tekst je osnova gotovo svakog projekta. Umetanje neprekinutih razmaka gdje je to potrebno, isticanje podebljanim slovima, kurzivom, skraćenicom i tako dalje. Možete koristiti pisač ili sličnu uslugu, ali biti u mogućnosti razumjeti rezultat.
Semantika- razumijevanje da postoje određene oznake za određene zadatke. Znajte kako odabrati pravu oznaku.
Mediji- koje se vrste medija mogu ugraditi na stranicu.
iframe- ugradnja widgeta trećih strana (video, audio, karte, itd.).
Audio Video- možete odgoditi učenje, jer djelomično riješeno pomoću iframea. Saznajte koje formate preglednik može reproducirati, kako dizajnirati player i tako dalje.
Slike- koje grafičke formate iu kojem obliku preglednik percipira. Za i protiv korištenja određenih formata.
Raster- jpg, png, gif. Razumjeti razliku između formata i moći primijeniti ono što i gdje vam treba.
SVG- možete odgoditi učenje, jer koristi rjeđe nego što bismo željeli. Shvatite prednosti, nedostatke, ograničenja itd.
Fontovi- možete odgoditi učenje. Ovo je zapravo prilično složena tema i općenito bih početnicima savjetovao korištenje sistemskih fontova. Biti u mogućnosti učitati fontove, optimizirati prikaz, minimizirati kašnjenje prikazivanja pomoću prilagođenih fontova.
Izgled tablice- izborno. Za one koji u budućnosti žele kreirati visokokvalitetne biltene putem e-pošte.
CSS 1- fontovi, boje, poravnanje, veličine.
CSS 2.1- kontrola ponašanja bloka, pozicioniranje, puni dizajn.
Selektori- jednostavni selektori za oznaku, klasu, ugniježđeni element. Jednostavni pseudo-selektori poput: hover.
Imenovanje- kako imenovati razrede tako da ne boli nesnosno.
Izgled bloka- rastavite sliku u svjesne blokove, implementirajte blokove u HTML i dizajnirajte ih pomoću CSS-a.
Preglednici- možete odgoditi učenje. Koji preglednici postoje, koja je njihova razlika.
Razvojni alati- možete odgoditi učenje. Koristite alate preglednika da biste razumjeli probleme s prikazom.
Urednici teksta- koji uređivači teksta postoje za programere i zašto. SublimeText i Notepad++ navedeni su kao primjeri jer su mi poznati. Biti u mogućnosti konfigurirati osnovne stvari u njima, kao što su uvlake, prijelomi redaka i tako dalje.
Sustavi kontrole verzija- Osobno smatram vrlo važnom sposobnost da ih, barem pojedinačno, koristim za sebe. Shvatite zašto su ti sustavi stvoreni i što su.
Git- općenito razumjeti zadaću i principe najpopularnijeg sustava kontrole verzija.
Github/bitbucket- moći koristiti jednu od popularnih platformi za git.
Checkout/commit/push/pull- osnovne operacije za osobnu upotrebu.
Zaliha- za privremenu pohranu trenutno nepotrebnih podataka.
10 djela- izraditi najmanje 10 radova u različitim nacrtima. Možete raditi testove, nije važno. Važno je biti potpun unutar trenutnog znanja.

sredina

CSS 3- gradacije, sjene, anti-aliasing, filteri, transformacije.
Napredni selektori- elementi koji slijede definirani (+), definirani brojanjem (n-to dijete), shadow-dom, prije/poslije i tako dalje.
Animacije- izborno. prijelaz i animacija. Glatki prijelazi, animacije. Shvatite ograničenja i nedostatke.
Rešetke- zašto postoje, kako ih izgraditi, koja su gotova rješenja dostupna. Na primjer, možete pogledati Flexbox mrežu ili bilo koju drugu mrežu koju pronađete.
Okviri (CSS)- zašto su potrebni, kako ih koristiti. Preporučljivo je naučiti koristiti barem jedan bunar. Vrlo korisno za izradu prototipova. Značajno poboljšava kvalitetu projekta u nedostatku proračuna za dizajn (nije jedinstven, ali upotrebljiv).
CSS predprocesori- možete odgoditi učenje. Optimizacija rada, ljepši i čitljiviji kod. Varijable, miksini itd. Radite s jednim ili više popularnih predprocesora kao što su SASS, LESS, Stylus.
Medijski upiti- možete odgoditi učenje. Prikažite željene stilove ovisno o uvjetima (uređaj, veličina zaslona, ​​gustoća piksela, verzija za ispis itd.).
Stil koda- shvatite zašto postoje stilske konvencije, proučite ih i počnite ih primjenjivati ​​(preporučam AirBNB).
SUHO/POLJUBAC/ČVRSTO- možete odgoditi učenje. Razumjeti važne razvojne principe koji znatno pojednostavljuju daljnju podršku projektu.
OOCSS- izborno. Shvatite što je objektno orijentirani css i čemu služi. Koristi se u ovom ili onom obliku u mnogim projektima (iako bez razumijevanja da je to to). U idealnom slučaju, naučite dizajnirati. Može biti odličan za velike projekte.
Dokumentacija- razumjeti što i kako dokumentirati. Dokument. Možete to odgoditi, ali ubuduće svakako proučite markdown.
Planiranje- naučiti procijeniti rokove prema slici i odrediti redoslijed rada.
Raspad- možete odgoditi učenje. Naučite podijeliti zadatak na podzadatke. Teže je nego što izgleda :-)
Postaviti ciljeve- možete odgoditi učenje. Naučite jasno opisivati ​​zadatke u tekstu kako bi drugi programeri, uključujući i one s nižim kvalifikacijama, jasno razumjeli što treba učiniti da ih dovršite.
Flexbox- razumijevanje modela, sposobnost njegove potpune primjene.
Izgled slova- izborno. Općenito, vještina nije suvišna. Razumjeti značajke sustava e-pošte, održavati dobar izgled i ne pasti u spam (ako to nije spam).
Polifilovi- razumjeti kako koristiti najnovije razvojne značajke uz održavanje kompatibilnosti s prethodnim verzijama. Shvatite prednosti i mane ovog pristupa.
Izgled na više platformi- razumjeti što treba učiniti kako bi projekt izgledao dobro ne samo pod Windows, Linux i Mac, već i pod SmartTV ili PS.
Izgled na više preglednika- razumjeti razlike u renderiranju preglednika i učiniti da se prikazuju isto. Web stranica CanIUse uvelike pomaže u tome.
Mobilni izgled- možete odgoditi učenje. Shvatite ograničenja mobilnih platformi. Mudro koristite ograničeni prostor.
Optimizacija- možete odgoditi učenje. Razumjeti "cijenu" određenih tehnika. Razumjeti faze prikazivanja stranice korisniku. - možete odgoditi učenje. Optimizacije koje se odnose na veličinu, predmemoriju, kompresiju, udruživanje resursa itd.
Renderiranje- možete odgoditi učenje. Optimizacije povezane s brzinom renderiranja nakon učitavanja.
SEO- možete odgoditi učenje. Barem osnovno razumijevanje rada tražilica. Sposobnost "pomoći" tražilici da shvati gdje treba tražiti i što je važno.
Motori predložaka- razumjeti kako možete ponovno koristiti kod, elemente grupe i stranice izgleda. Vrlo je preporučljivo naučiti prikazivanje i na strani poslužitelja i na strani klijenta. To također uključuje predloške na "čistom" jeziku (kao što su jednostavni PHP umetci). Ne zanima nas rad "prije" (protok podataka) motora predložaka.
PHP- možete odgoditi učenje. Razumjeti osnovnu sintaksu i moći napraviti manje izmjene vezane uz dizajn stranice.
CMS- možete odgoditi učenje. Saznajte koji CMS postoje i zašto su stvoreni. Naučite pisati predloške za barem jedan (preporučam Wordpress).
Javascript- možete odgoditi učenje. Naučite osnovnu sintaksu, shvatite kako priložiti jednostavne rukovatelje i izvesti jednostavan rad s DOM-om.
jQuery- možete odgoditi učenje. Naučite uštedjeti mnogo vremena za rješavanje prilično tipičnih problema koristeći dodatke za najpopularniju js biblioteku (nakon vanilla.js, naravno).
Čvor JS- možete odgoditi učenje. Otkrijte kako pokrenuti jednostavan poslužitelj, distribuirati statiku i renderirati na strani poslužitelja. Možete koristiti Express ili bilo koji drugi okvir.
Skupština- izborno. Naučite kako sastaviti projekt od hrpe CSS / HTML datoteka u ono što vam je potrebno. Preporučam vam da se upoznate barem s gunđanjem i gutanjem, kao predstavnicima "različitih" tabora.
IDE- izborno. Saznajte zašto su potrebni IDE-ovi i kako ih koristiti. Prijeđite na korištenje nekog IDE-a da uštedite vrijeme. Važno: učenje IDE-a usporedivo je s potpunim učenjem programskog jezika i ulaganje puno vremena u to možda se ne isplati. Osobno koristim uređivače teksta (i uključujem IDE samo za vrlo velike projekte).
Grananje- naučite kako upravljati granama u git-u.
Sjediniti- naučiti spajati grane s rješavanjem sukoba.
Dohvati/ponovno baziraj- shvatite čemu služe, kada ih koristiti i počnite ih koristiti prema potrebi.
Grafički urednik- otkriti što su i zašto. Kako se vektor razlikuje od rastera? Važno je razumjeti uređivač barem na razini "čitanja" izgleda od dizajnera. Odaberite pravi font, veličinu, boju itd. Ne naizgled, ali definitivno. Preporučam rad s najmanje 1 rasterom (Photoshop) i 1 vektorom (Figma).
50 radova- do kraja etape imat ćete oko 50 različitih radova koji pokazuju vještine iz proučavanih područja.

Stariji

Iako se ova skupina na dijagramu čini malom, ona je zapravo najveća. Jer U ovom trenutku potrebno je proučiti sve što je odgođeno.
Prilagodljiv/odgovarajući izgled- razumjeti najvišu razinu i kombinirati sva do sada stečena znanja. Projekt bi trebao izgledati dobro posvuda i na svemu (u okviru razumnog).
Postupna degradacija / Progresivno poboljšanje- razumjeti što je to i zašto. Koristiti.
Gitflow- biti u stanju objasniti drugim programerima kako stvoriti grane, gdje ih spojiti, kako napraviti pregled koda (izgled, naravno, ne kod).
BEM- izborno. Shvatite metodologiju koja vam omogućuje stvaranje neograničenog broja velikih projekata tako da uz minimalnu sinkronizaciju različiti timovi mogu međusobno koristiti blokove. Postoje i druge metodologije koje ne daju ništa lošije rezultate. Do ove točke, na ovaj ili onaj način ćete znati za njih i moći ćete ih, ako želite, proučavati.
100 radova- imaju ukupno stotinjak radova koji pokazuju različite stečene vještine. Zapravo, sve je to uvjetno. Možete imati jedan rad (koji se sastoji od raznih dijelova) u svom portfelju, što će već pokazati da se ničega ne bojite.

Zaključak

Zapravo, mnoge od ovih tema su male. Međutim, vrlo je teško držati hrpu različitih čimbenika u glavi. Tijekom 15 godina komunicirao sam s manje od deset layout dizajnera (i programera općenito), koje bih svrstao u Senior (bilo je puno više dobrih layout dizajnera i programera).
Naprotiv, sasvim je moguće provesti godinu dana u potpunosti proučavajući i vježbajući samo raspored od nule (ili više ako idete na dizajn komponenti).

Nadam se da će onima koji su na početku svog puta dijagram reći kamo još mogu krenuti, te da nije potrebno odmah (ili čak ne krenuti uopće) uskočiti u programiranje.

Također planiram stvoriti potpuni besplatni tečaj s detaljnom raspravom o svakoj od tema pravokutnika iz dijagrama. Bit će mi drago primiti prijedloge, recenzije, želje i tako dalje.
Tečaj će vjerojatno biti u formatu video lekcija s punim tekstom i grafičkim dupliciranjem. Ako sve bude dobro, ubuduće ću dodati poveznice u komentare. Dodaj oznake

Od autora: Pozdrav prijatelji! Kao i ljudi, web stranice imaju svoj kostur, što se vidi u njihovom kodu. Običan korisnik, koji "hoda" internetom, vjerojatno neće pogledati HTML kod. Ali ne i dizajneri izgleda - oni su uvijek zainteresirani pogledati radove drugih ljudi. Postoji umjetnost stvaranja koda koji je uredan, uravnotežen i funkcionira u svim preglednicima. Danas ćemo razgovarati s vama o tome kako to shvatiti, ili, drugim riječima, kako brzo i učinkovito naučiti izgled web stranice.

Gdje počinje raspored?

Izgled web stranice je opis njezine vizualne komponente pomoću programskog koda. U isto vrijeme, stranica mora izgledati i ispravno raditi na bilo kojem pregledniku (biti kompatibilna s različitim preglednicima). Učenje dizajniranja web stranica od nule trebalo bi započeti samim stvaranjem PSD izgleda, unatoč činjenici da bi ga u teoriji trebao izraditi web dizajner.

Glavni zadatak layout dizajnera je obraditi materijal koji mu dolazi u obliku tekstova, slika, kataloga i sl., te ga pretvoriti u web stranice na temelju odobrenog web dizajna.

Međutim, zamislite da ste neka vrsta layout dizajnera "2 u jednom" i da ste iz nekog razloga morali napraviti layout umjesto dizajnera koji ne mari za vaše probleme.

Da biste brzo naučili crtati rasporede, koliko god to trivijalno zvučalo, samo ih morate puno crtati. Puno će vam pomoći i beskrajno gledanje tuđih radova. Istovremeno obratite pozornost na sve male detalje, koje se boje, prijelazi, fontovi, uvlake itd. koriste.

S vremenom ćete sami početi osjećati što izgleda lijepo, a što ne. Na samom početku možete jednostavno uzeti i kopirati, na primjer, elemente sučelja drugih ljudi. To će vas natjerati da razmislite o tome kako su ti elementi izgrađeni i od čega su napravljeni. I tada lijepi dizajni za vas više neće biti nešto mitsko, jer ćete znati stvoriti nešto slično.

Alati za izradu izgleda web stranice

Što se tiče alata, mnogi web dizajneri koriste Adobe Photoshop za izradu sučelja. S ovim programom možete učiniti sve što želite.

Postoje ljudi koji rade samo s vektorskom grafikom i koriste Adobe Illustrator za izradu izgleda.
I još jedan editor koji nisam isprobao, ali za kojeg se priča da je sasvim dostojna alternativa gore navedenom, je Sketch, ali radi samo na Mac OS-u.

Upoznajmo se - HTML

Sljedeći korak nakon crtanja izgleda je njegov izgled i izrada HTML predloška. HTML je jezik koji se koristi za označavanje dokumenata na Internetu, a preglednici ga tumače radi lakšeg prikaza kao dokumenta.
Pomoću HTML označavanja označavamo gdje će se na web stranici pojaviti tekst, slike, gumbi i kojim redoslijedom će se pojavljivati ​​jedni pored drugih. Glavni pojmovi u ovom jeziku su oznake, atributi, elementi i entiteti.

Najosnovniji web resurs nije ništa više od skupa HTML stranica. Ako je stranica statična, tada ćete nakon izgleda zapravo dobiti njenu konačnu verziju, a ne samo predložak. Danas su takva mjesta, naravno, vrlo rijetka. Sve moderne web stranice generiraju se dinamički, koristeći neku vrstu server-side logike, koju ili pišete sami ili koristite već gotove pomoću neke vrste CMS-a (sustava za upravljanje sadržajem).

Bez ove poslužiteljske logike većina online usluga koje svakodnevno koristimo i na koje smo toliko navikli ne bi bila moguća. Što se tiče HTML-a, to je potpuno jednostavan jezik.

Na RuNetu postoji ogroman broj plaćenih lekcija o dizajnu web stranica i drugih materijala s pristojnom bazom za obuku. Po mom mišljenju, samostalno naučiti ovaj jezik nije nikakav problem.

Postajem bolji - CSS

Čim svladate osnove HTML-a, odmah možete početi učiti CSS (kaskadne tablice stilova), koji vam omogućuju postavljanje fontova, boja i lokacije pojedinačnih blokova web stranice.

Što se tiče CSS-a, mogu vam preporučiti dobar koji će vam pomoći izgraditi karijeru dizajnera izgleda čak i ako nemate osnovno znanje o web dizajnu i izgledu.

Međutim, želim vas upozoriti da obuka za dizajnera web stranice nije tako lak zadatak. Postoji mnogo suptilnosti i nijansi u rasporedu. Općenito, da biste mogli pogledati izgled i odmah zamisliti hijerarhiju njegovih elemenata, kako se točno mogu rasporediti i koristiti koja svojstva, sve to zahtijeva puno praktičnog iskustva.

Je li potrebno naučiti sve HTML/CSS oznake, atribute i svojstva?

Postoji mnogo različitih oznaka i atributa u HTML-u i svojstava u CSS-u koja mogu imati različita značenja. Stoga se mnogi početnici muče s pitanjem: gdje započeti dizajn web stranice i trebaju li zapamtiti sve te vrijednosti, oznake i svojstva?

Naravno, ako imate jedinstveno fotografsko pamćenje, onda vam neće biti teško sve ovo, a ujedno i tri sveska Rata i mira, naučiti napamet. U suprotnom, nema potrebe učiti sve ove riječi napamet.

Na početku, kada ste novi u CSS-u, i dalje ćete gledati što radi svako svojstvo i što radi svaka vrijednost svojstva. S vremenom ćete shvatiti što možete stvoriti koristeći kaskadne listove stilova, a neka od tih svojstava/vrijednosti će vam ostati u glavi. Pa, osim ako ne patite od amnezije, naravno.

Isto vrijedi za sve jezike, uključujući JavaScript, PHP, itd. Sve što često koristite samo će se zapamtiti. Sve ono što rijetko koristite možete pronaći u imeniku, kojih na internetu ima jako puno. U tome nema ničeg sramotnog i, reći ću vam tajnu, svi webmasteri to rade.

Pojednostavljujemo proces postavljanja

Za one slučajeve kada trebate brzo izraditi nekakvo sučelje ili prototip web stranice, tu su CSS okviri kao što je Bootstrap. Omogućuje vam da postanete webmaster, web programer i dizajner izgleda u jednom bez znanja o stilskim listovima, programskim jezicima i označavanju hiperteksta.

Nakon što ste dobro savladali CSS i počeli stvarati nešto jedinstveno, možda više nećete imati dovoljno fleksibilnosti ovog jezika, pa ćete htjeti koristiti neku vrstu CSS predprocesora. Pretprocesori uklanjaju svo smeće iz CSS koda, čine ga čišćim i logičnijim te povećavaju stupanj apstrakcije uz pomoć varijabli i drugih “trikova”. Najpopularniji predprocesori su LESS, Sass i Stylus.

Akrobatika - JavaScript

Dok budete uzimali lekcije o naprednijem dizajnu web stranice, naići ćete na JavaScript elemente ugrađene u HTML koji web stranice čine interaktivnima. Ako se planirate baviti ne samo Back-endom, već i Frontend razvojem, onda morate znati JavaScript na vrlo dobroj razini.

Osim samog jezika, morate poznavati svu infrastrukturu koja postoji oko njega (biblioteke, okviri, sučelja preglednika itd.). Za svladavanje svih ovih elemenata može vam trebati od jedne godine do beskonačnosti (ovisno o tome imate li osobni život).

Sažmimo to

Dakle, kao što ste već, nadam se, shvatili, dizajner izgleda je vrlo važna i drevna internetska profesija o kojoj ovisi:

brzina učitavanja stranice;

primjerenost njegovog prikaza u različitim preglednicima;

prilagodljivost različitim korisničkim ekranima;

usklađenost s HTML standardima i zahtjevima tražilice.

To je sve za sada. Ne zaboravite se pretplatiti na vijesti o našem blogu kako ne biste propustili svu zabavu o učenju kako dizajnirati web stranice od nule.

Vidimo se opet, drage kolege i oni koji tek kreću ovim teškim, ali vrlo uzbudljivim putem razvoja web stranica!

Dosta je stabilan, pa ne čudi sve veći broj onih koji žele svladati ovaj zanat. Štoviše, po mom mišljenju, ovo je jedan od najlakših "puteva za ulazak u IT". Iako je važno shvatiti da za dobre rezultate morate postati profesionalci - osim znanja morate stalno sistematizirati i modernizirati svoje vještine, uvijek biti “na valu” i koristiti samo relevantne suvremene metode.

Kao i u bilo kojoj drugoj profesiji, učenje dizajniranja web stranica počinje od nule - s osnovnim pojmovima i teorijom. Danas ćemo razgovarati o njima. Posebno ću razmotriti super korisnu uslugu Interneting is Hard koju 100% preporučam svim početnicima.

Ne znam postoje li slični smjerovi na modernim sveučilištima, ali mislim da su prerogativ u ovom području specijalizirani online tečajevi ili samostalno proučavanje izgleda. Prva metoda nudi opsežniji i ozbiljniji pristup, ali je druga potpuno besplatna. S obzirom na razvoj tematskih blogova i video kanala, sada nema problema s pronalaženjem informacija.

Osobno sam svoje započeo s jednostavnim (i papirnatim) knjigama o HTML/CSS-u, zatim su uslijedile godine treninga i s vremenom sam odlučio konsolidirati/sistematizirati znanje uz pomoć nekih tečajeva. Doista postoji mnogo toga za izabrati, iako se sve opcije na kraju ne isplate. Pohađao sam online obuku za layout u tvrtki Netology. Trenutno se regrutiraju za sljedeću grupu.

Prednost tečajeva je u tome što mogu pružiti postupno i učinkovito stjecanje znanja kroz:

• informativna predavanja sastavljena od vodećih stručnjaka i dizajnera izgleda;
• jasni i dobro ilustrirani primjeri;
• praktični zadaci za učvršćivanje gradiva.

Konkretno, u Netology se sve odvija u formatu webinara s mogućnošću postavljanja pitanja. Postoji domaća zadaća, diplomski rad i potvrda o završenoj izobrazbi. Ukratko, sve je ozbiljno. Takve dodatne značajke čine online tečajeve "profitabilnijim", a troškovi su jednostavno ulaganje u vas same.

Ako ste u nedoumici, potražite besplatne materijale na određenim stranicama - u pravilu možete dobiti nekoliko predavanja ili edukativnih članaka za referencu samo tako. Pa, naravno, postoje deseci drugih obrazovnih web izvora za koje ne morate platiti pristup.

Internet je težak - usluga učenja izgleda

Na kraju, prijeđimo na projekt Interneting is Hard – stvar je zapravo jako cool! Ovo je cjeloviti sveobuhvatni tečaj za svladavanje HTML-a i CSS-a za početnike koji nikad nisu pokušali detaljno razumjeti strukturu web stranica i njihov razvoj. Ako ne znate gdje početi učiti raspored, 100% dođite ovdje.

Sve što vam je potrebno za početak je motivacija i poznavanje engleskog jezika. Neće biti problema s organizacijskim pitanjima - programeri su izradili nešto poput "kurikuluma", koji uključuje:

• 14 poglavlja s postupnim produbljivanjem gradiva;
• 284 jasna primjera koda;
• karte i grafikoni;
• gotovo 43 tisuće riječi;
• moderne tehnologije (da, tu je i Flexbox).

Značajke i savjeti usluge

Proces učenja HTML rasporeda u Interneting is Hard ima nekoliko prednosti u usporedbi s drugim sličnim projektima:

1. Prekrasni dijagrami ilustriraju teške aspekte teme, čineći teško razumljive strukture jasnima i jednostavnima. Umjesto gomilanja gomile nepoznatih pojmova u glavi, dovoljno ih je vizualizirati na najosnovniji način, kao što to rade autori tečaja.

2. Proces obuke uključuje sve suvremene tehnike prijeloma: web tipografiju, semantički HTML, izradu responzivnog dizajna i ilustracija te Flexbox. Pomoći će početniku da postane traženi stručnjak, a profesionalcu da osvježi svoje znanje;

3. Ilustrativni primjeri demonstriraju temeljne koncepte materijala prikazanog kroz određene scenarije. To znači da korisnik ne mora čitati beskonačna "platna" teksta. Ovakav pristup neizbježno dovodi do dosade, što u konačnici dovodi do napuštanja studija.

Nakon svaka 2-3 paragrafa slijedi pisanje koda i predstavljanje kako on radi. Tako budući stručnjak dobiva prvu praksu u uređivačima teksta i provjeravanju rezultata u pregledniku;

4. Ova opcija za učenje dizajna web stranica potpuno je besplatna. Kada počinju učiti HTML, mnogi ljudi još uvijek oklijevaju je li to doista ono što žele raditi. A ako vas plaćeni tečajevi mogu natjerati da požalite za izgubljenim novcem, onda će vam Internet is Hard pružiti maksimalno znanje bez traženja ni dolara zauzvrat.

Odjeljci za korak-po-korak učenje izgleda

Kao što sam već rekao, "kurikulum" se sastoji od 14 tematskih blokova. Pogledajmo ih na brzinu:

1. Uvod. Uvodni dio koji objašnjava što su HTML, CSS i . Također objašnjava razlike između okvira i jezika, a također pokazuje kako raditi s uređivačem teksta ATOM.
2. Osnovne web stranice. Drugo poglavlje ilustrira strukturu osnovne web stranice. HTML struktura - "kostur" stranice - prikazana je ovdje. Posjetitelj će saznati zašto su oznake potrebne, što su i čemu je svaka od njih namijenjena.
3. Veze i slike. Poznavajući osnove dizajna, treći dio će upoznati korisnika s aranžiranjem slika i međusobnim povezivanjem web stranica.
4. Pozdrav CSS. Zatim dolaze takozvani listovi stilova. Ovaj koncept uključuje sve što je povezano s dizajnom: font, boju, položaj, oblik i veličinu teksta.
5. Model kutije. Peto poglavlje kurikuluma nastavlja temu dizajna, govoreći o “blok” modelu sadržaja. Budući dizajneri izgleda upoznaju se sa stvarima kao što su margine, granice, unutarnje margine i sadržaj.
6. CSS selektori. Kutije prate selektori - osnova CSS-a. Koristeći primjere koda u editoru, kreatori tečaja podučavaju ispravnu upotrebu stilova.
7. plovci. Sedmi dio proširuje ono što smo naučili o upravljanju veličinama blokova i područjima oko njih. Posvećen je konceptu tijeka na web stranici (Float) i opisuje nijanse rada s mrežom web mjesta.
8. Flexbox. Kada dođete do ekvatora kurikuluma, pozvani ste da se upoznate s Flexboxom. Ovo je moderan alat za raspored koji vam daje potpunu kontrolu nad poravnanjem, smjerom, redoslijedom i veličinom blokova. Nedavno sam, usput, pričao o još cool stvari.
9. Napredno pozicioniranje. Slijedi složeniji materijal - napredno pozicioniranje i njegove glavne vrste: relativno, apsolutno i fiksno. Iako, sjećam se, na tečajevima smo proučavali ovu značajku zajedno s Floatom i očito prije Flexboxa.
10. Responzivni dizajn. Deseti dio objašnjava osnove i ulogu responzivnog dizajna na web stranici. Sada ne možeš živjeti bez njega.
11. Responzivne slike. Lekcija je posvećena adaptivnim slikama, njihovom skaliranju, usmjeravanju i stvaranju alternativnih formata pomoću posebnih funkcija.
12. Semantički HTML. Dvanaesto poglavlje vraća se na osnovne koncepte HTML-a, otkrivajući ga sa semantičkog gledišta. Ovdje se čitatelj upoznaje s "sekcijskim" elementima, novim oznakama i njihovim primjenama.
13. Obrasci. U pretposljednjem paragrafu, posjetitelj ima priliku proučiti konstrukciju obrazaca i njegove elemente: padajuće liste, izbornike, tekstna polja, njihov dizajn i slanje informacija, na primjer, putem.
14. Web tipografija. Zadnji tutorijal govori o modernoj web tipografiji na web stranicama - izgledu teksta, naslova, fontova itd. Na mom drugom blogu postoji odjeljak o web tipografiji gdje ćete pronaći mnogo korisnih bilješki o toj temi.

Struktura lekcija za raspored nastave

Kako bismo cijenili funkcionalnost i praktičnost usluge Interneting is Hard, predlažem da razmotrite implementaciju jednog od njezinih pododjeljaka. Uzmimo drugu lekciju o izradi osnovnih web stranica.

Što se meni osobno sviđa:

• Sav materijal organiziran je po podnaslovima. Tekst je predstavljen na pristupačnom jeziku i ne zahtijeva duboko poznavanje složene terminologije. Sve je kratko i poentirano - u najboljim tradicijama.
• Važne i složene točke lijepo su ilustrirane dijagramima.
• Radi lakšeg razumijevanja i praktičnih vještina, navedeni su primjeri pisanja koda.
• Sve je što praktičnije: u gornjem desnom kutu nalazi se gumb za povratak na izbornik, možete odmah prijeći na željeni podnaslov lekcije (navigacija desno) i nakon predavanja možete otvoriti sljedeće poglavlje. Izvrsna upotrebljivost.

zaključke

Kako mi se sviđa? Interneting is Hard trenutno je jedno od najboljih mjesta za podučavanje rasporeda od nule. Autori tečaja pobrinuli su se da početnici koji se nikad nisu bavili HTML-om i CSS-om na jednostavan i pristupačan način shvate osnove izrade web stranica. Informacije su vrlo dobro strukturirane - postupno u 14 odjeljaka prevladat ćete put od korisnika početnika do iskusnog dizajnera izgleda. Naravno, to je nemoguće bez prakse i primjene znanja, ali što se tiče teorijske osnove, ovo je najcjelovitija zbirka informacija s kojom sam se susreo. Ako želite učiti s učiteljima, pogledajte opciju Netology, koja je također dosta dobra, iako se plaća.

Ako znate još neke zanimljive usluge za proučavanje izgleda web stranice, pošaljite poveznice u komentarima.

Izgled bloka

Kao što ste možda pogodili gore, ovaj članak će se fokusirati posebno na raspored blokova. Ako je prethodni članak bio uvodni, sada ćemo detaljnije pogledati primjer - kako napraviti web stranicu od nule. Dok sam proučavao izgled, tražio sam detaljan priručnik o tome kako korak po korak rasporediti čak i najjednostavniju html stranicu. U ovom članku želim sagledati svaki redak koda što je moguće detaljnije i objasniti principe rada s html-om, tako da ga svatko tko se tek bavi ovim poslom može razumjeti. Nadam se da ću uspjeti. 🙂

Dakle, počnimo. Na primjer, uzeo sam jednostavan prototip, ne može se nazvati izgledom, normalan izgled je nacrtan u psd formatu, ali ovdje je u jpg. Glavna stvar za nas je razumjeti princip kako koristiti web stranice raspored blokova. Za rad s blok rasporedom morate znati ne samo html, ali također css(kaskadni listovi stilova). Tijekom serije članaka o izgled web stranice, upravo ćemo proučiti taj skup CSS stilova, koji će vam u budućnosti uvijek pomoći u rasporedu gotovo svih okvira izgleda/mockupa, jer je princip isti.

Dakle, ovdje je izgled (na klik).

Vidimo da ima 4 logična dijela:

• Zaglavlje web stranice (u daljnjem tekstu ćemo ga zvati zaglavlje);
• Lijevi stupac (u daljnjem tekstu ćemo ga zvati lijeva bočna traka);
• Desni stupac (u daljnjem tekstu ćemo ga zvati sadržaj);
• Podnožje (u daljnjem tekstu ćemo zvati podnožje);

Pa, naravno, počnimo s blokom zaglavlja. Naš model je širok 1000 piksela (px).

Za početak ću reći da se layout radi pomoću html tagova. Na primjer,