HTML, CSS и JavaScript

Frontend в браузере построен ровно из трёх языков. Вам не нужно писать их вручную, но нужно знать, за что отвечает каждый.

HTML — это структура, содержимое и его скелет. Он говорит: «вот заголовок, вот абзац, вот кнопка». Это существительные страницы; сам по себе HTML — это простой, неоформленный документ, как текстовый файл с метками. Браузер превращает ваш HTML в живое дерево объектов в памяти, называемое DOM (Document Object Model, объектная модель документа); когда код «меняет страницу», он на самом деле меняет DOM, и браузер перерисовывает, чтобы соответствовать.

CSS — это стиль, то, как всё выглядит. Цвета, шрифты, отступы, расположение, слева или по центру, маленький экран против большого. CSS не меняет, что на странице, только то, как это представлено. Если HTML — это существительные, то CSS — это прилагательные.

JavaScript (JS) — это поведение, то, что происходит, когда вы взаимодействуете. Он слушает нажатие, отправляет данные на backend, показывает крутящийся индикатор, обновляет DOM, когда приходит ответ. HTML и CSS статичны; JavaScript заставляет страницу что-то делать. Это глаголы. (Тот же язык также часто запускает backend, поэтому вы будете встречать его повсюду.)