Frontend je časť webu alebo aplikácie, ktorú návštevník vidí a s ktorou pracuje, napríklad tlačidlá, texty, obrázky, ponuky a animácie. Beží vo webovom prehliadači. Opakom je backend, ktorý beží na serveri.
Z čoho frontend pozostáva?
| Technológia | Úloha |
|---|---|
| HTML | Štruktúra stránky, teda nadpisy, odseky, tabuľky a obrázky. |
| CSS | Vzhľad: písma, farby, medzery, rozloženie a správanie na rôznych obrazovkách. |
| JavaScript | Interaktivita, napríklad rozbaľovacie ponuky, posuvníky a overovanie formulárov. |
Čo robí frontend a čo backend?
MDN rozlišuje kód na strane klienta, ktorý rieši vzhľad a správanie stránky, napríklad rozloženie, štýl, overovanie formulárov a navigáciu, a kód na strane servera, ktorý rieši, aký obsah sa pošle. Ten druhý je backend. Pri jednoduchom webe môže byť frontend takmer všetko.
Prečo frontend ovplyvňuje SEO?
Návštevník aj robot vyhľadávača vidia frontend. Od jeho kvality závisí zobrazenie na mobile, rýchlosť, používateľská skúsenosť aj to, či je dôležitý obsah dostupný v HTML, pozri JavaScript rendering.
Čo si zapamätať o pojme frontend?
Frontend je tvár webu. Pri tvorbe webu na mieru ho píšeme čisto a bez zbytočných závislostí, aby bol rýchly, prehľadný a dobre čitateľný aj pre roboty.
Ako to rieši webstrankanamieru.sk: Pri tvorbe webu na mieru sa pojem frontend rieši v rámci postupu opísaného v sekcii Proces tvorby webstránky. Hotové weby nájdete v portfóliu, orientačné ceny v cenníku a vlastný projekt môžete konzultovať cez kontakt.
Súvisiace pojmy: Backend, HTML, CSS, JavaScript, UI, Responzívny dizajn, Bootstrap, Figma, Framework, Git, jQuery, React, Tailwind CSS, Vue, Webová aplikácia, WYSIWYG
Často kladené otázky o pojme frontend
Čo je frontend?
Z akých technológií sa frontend skladá?
Čím sa frontend líši od backendu?
Ovplyvňuje frontend SEO?
Je Bootstrap alebo jQuery súčasť frontendu?
Zdroje
- Cloudways: Front end (Glossary)Definícia frontendu a jeho technológií.
- MDN Web Docs: Introduction to the server sideRozdiel medzi kódom na strane klienta a servera.
- MDN Web Docs: Responsive designResponzívny frontend.