Dzisiaj na tapet bierzemy sławną trójkę frontendu! Html, JS i CSS. Czy wiesz, za co odpowiadają i dlaczego zazwyczaj programiści używają ich razem?
Html (ang. HyperText Markup Language) jest tak zwanym markup language czyli językiem opisowym, w którym przy pomocy znaczników (tagów) określamy co zawiera dana witryna. Język ten został zaprojektowany dla dokumentów wyświetlanych w przeglądarkach internetowych. Składa się z węzłów (ang. nodes), które pozwalając na zagnieżdżanie definiują strukturę strony. Podstawą są części <header>, <body> i <footer>. W łatwy sposób możesz podejrzeć strukturę strony, klikając w dowolnym miejscu prawym przyciskiem myszy i wybierając “Zbadaj” lub ang. “Inspect”
JS czyli Java Script to język programowania. Służy do zapisania logiki odpowiadającej za działanie programu. To dzięki niemu aplikacja wykonuje konkretne operacje, jest interaktywna. Interaktywna, ponieważ w przypadku wyświetlania statycznego tekstu zaszytego w strukturze html javascrip nie byłby potrzebny. Na koniec pamiętaj, że Javascript i Java to dwa osobne, całkowicie różne języki programowania. Mają ze sobą tyle wspólnego, co… kot z kotarą!
CSS czyli kaskadowe arkusze stylów (Cascading Style Sheets). Opisują one styl, wygląd aplikacji, dokładną lokalizację/ rozmieszczenie elementów. Służą do opisania wyglądu elementów witryny, zdefiniowanych uprzednio w HTML. Odpowiadają więc za takie właściwości jak kolor, kształt, wielkość zaokrąglenia ramki (promień=radius), jej grubość, definiują marginesy i paddingi, a także responsywność strony czyli zachowanie layoutu dla różnych szerokości viewportu.
Podsumowując więc html to struktura aplikacji, css to stylizacja, js logika. Czy rozumiesz już, dlaczego frontendowcy muszą równolegle stosować te trzy elementy?
Ku zastanowieniu…
Czy jednak zawsze programiści korzystają z JS i CSS? Jakie inne technologie możecie spotkać w tej samej „funkcji”?
👉Zamiast JS często frontendowcy wybierają Typescript, zresztą transpilowany koniec końców do JS, jednak piszą w TS=Typescrypcie
👉W miejscu CSS możecie się spotkać z SASS lub LESS czyli rozszerzeniami CSS