--- title: "Front-end: co to jest? Słownik pojęć" description: "Front-end to część strony lub aplikacji, którą użytkownik widzi i obsługuje, czyli układ, przyciski, formularze i animacje." url: https://fluostudio.pl/baza-wiedzy/slownik/front-end/ --- [Strony www](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=www) # Front-end Inaczej frontend, front end, frontend development Front-end to część strony lub aplikacji, którą użytkownik widzi i obsługuje, czyli układ, przyciski, formularze i animacje. Powstaje w HTML, CSS i JavaScripcie i działa w przeglądarce. ## W skrócie - HTML odpowiada za treść i strukturę, CSS za wygląd, JavaScript za zachowanie - Działa na urządzeniu użytkownika, więc szybkość zależy też od jego telefonu i łącza - Popularne biblioteki i frameworki: React, Vue, Svelte, Astro ## Usługi - [Strony www](https://fluostudio.pl/uslugi/strony-www/) - [Aplikacje webowe](https://fluostudio.pl/uslugi/product-design/aplikacje-webowe/) Projekt strony jest zaakceptowany. Po wdrożeniu nagłówki mają inny krój, odstępy rozjeżdżają się na laptopie, a menu na telefonie zasłania pół ekranu. Projekt był dobry. Coś zgubiło się po drodze z projektu do kodu, czyli na front-endzie. ## Front-end i back-end Front-end to wszystko, co dzieje się w przeglądarce. Back-end to zaplecze na serwerze: baza danych, logika, płatności, panel [CMS](https://fluostudio.pl/baza-wiedzy/slownik/cms/). W restauracji front-end byłby salą, a back-end kuchnią. Gość ocenia lokal po sali, ale bez kuchni nic nie zje. ## Co robi dobry front-end - przenosi projekt UI do kodu bez zgadywania, na każdej szerokości ekranu ([responsywność](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/)), - ładuje tylko to, czego strona potrzebuje, więc działa szybko także na słabszym telefonie ([Core Web Vitals](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/)), - używa właściwych znaczników HTML: nagłówek jest nagłówkiem, a przycisk przyciskiem, co pomaga czytnikom ekranu ([dostępność cyfrowa](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/)) i wyszukiwarkom, - składa strony z komponentów zgodnych z [design systemem](https://fluostudio.pl/baza-wiedzy/slownik/design-system/), więc nowe podstrony nie odbiegają od projektu, - dba o ruch, żeby animacje i [mikrointerakcje](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/) nie szarpały i nie przeszkadzały. ## Projekt i kod w jednych rękach Dużo traci się na styku dwóch firm. Agencja oddaje pliki z projektem, software house koduje po swojemu, a poprawki krążą w mailach. Przy stronach projekt i kod robimy więc u siebie. Projektant widzi, jak jego praca działa w przeglądarce, a programista wie, po co jest każdy detal. Jeśli projekt i kod robią różne firmy, umów przegląd wdrożenia przez projektanta jeszcze przed startem. Kilka godzin wspólnego sprawdzania oszczędza wielu poprawek po premierze. ## Zobacz też - [Strony www UI UI (user interface) to interfejs, czyli wszystko, co człowiek widzi na ekranie i czego używa: przyciski, pola formularzy, menu, ikony, typografia i kolory.](https://fluostudio.pl/baza-wiedzy/slownik/ui/) - [Strony www UX UX (user experience) to doświadczenie człowieka, który korzysta ze strony, aplikacji albo usługi: czy szybko znajduje to, czego szuka, rozumie, co ma zrobić, i kończy sprawę bez frustracji.](https://fluostudio.pl/baza-wiedzy/slownik/ux/) - [Strony www Responsywność Responsywność to zdolność strony do dopasowania układu do szerokości ekranu. Ten sam serwis na komputerze, tablecie i telefonie pokazuje te same treści, ułożone tak, żeby dało się je wygodnie czytać i obsługiwać.](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/) - [Identyfikacja wizualna Design system Design system to uporządkowany zbiór komponentów, zasad i plików źródłowych, z których zespół składa kolejne ekrany albo materiały marki. Zamiast projektować każdy element od nowa, korzysta się z gotowych, sprawdzonych części.](https://fluostudio.pl/baza-wiedzy/slownik/design-system/) - [Strony www Core Web Vitals Core Web Vitals to trzy wskaźniki Google, które mierzą, jak strona działa u prawdziwych użytkowników. Sprawdzają, jak szybko pokazuje główną treść (LCP), jak szybko reaguje (INP) i czy układ nie skacze (CLS).](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/) - [Strony www Dostępność cyfrowa Dostępność cyfrowa to projektowanie stron i aplikacji tak, żeby mogły z nich korzystać także osoby z niepełnosprawnościami, np. niewidome, słabowidzące, niesłyszące albo obsługujące komputer tylko klawiaturą.](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/) - [Strony www WebGL WebGL to technologia, dzięki której przeglądarka rysuje na stronie grafikę 3D na żywo, bez wtyczek, korzystając z karty graficznej urządzenia. Działają na niej m.in. przeglądarki modeli 3D i konfiguratory 3D.](https://fluostudio.pl/baza-wiedzy/slownik/webgl/) - [Strony www Mikrointerakcja Mikrointerakcja to drobna reakcja interfejsu na jedno działanie użytkownika, np. zmiana przycisku po naciśnięciu albo animacja licznika w koszyku. Pokazuje, że system przyjął polecenie i co dzieje się dalej.](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/) Hasło pojawia się też w: [Aplikacja webowa](https://fluostudio.pl/baza-wiedzy/slownik/aplikacja-webowa/), [CMS](https://fluostudio.pl/baza-wiedzy/slownik/cms/), [Dane strukturalne](https://fluostudio.pl/baza-wiedzy/slownik/dane-strukturalne/), [Lottie](https://fluostudio.pl/baza-wiedzy/slownik/lottie/), [Scrollytelling](https://fluostudio.pl/baza-wiedzy/slownik/scrollytelling/), [Strona statyczna](https://fluostudio.pl/baza-wiedzy/slownik/strona-statyczna/) ## Strona ma sprzedawać, działać szybko i dawać się łatwo edytować. Porozmawiajmy o Twojej. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. [Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)