HTML、CSS、JavaScript
ブラウザの中のは、ちょうど3つの言語でできています。手で書く必要はありませんが、それぞれが何を担当しているのかは知っておく必要があります。
HTML（ハイパーテキスト・マークアップ・ランゲージ）は構造——内容とその骨組みです。「ここに見出しがある、ここに段落がある、ここにボタンがある」と言います。ページの名詞のようなものです。HTMLだけだと、ラベルの付いたテキストファイルのような、飾り気のない素のドキュメントです。ブラウザはあなたのHTMLを、DOM（Document Object Model、ドキュメントオブジェクトモデル）と呼ばれる、メモリ上の生きたオブジェクトの木に変えます。コードが「ページを変える」とき、実際にはこのDOMを変えていて、ブラウザはそれに合わせて描き直しているのです。
CSS（カスケーディング・スタイル・シート）はスタイル——すべての見た目です。色、フォント、余白、レイアウト、左寄せか中央寄せか、小さい画面か大きい画面か。CSSはページに何があるかは変えず、それがどう見せられるかだけを変えます。HTMLが名詞なら、CSSは形容詞です。
JavaScript（JS）は振る舞い——あなたが操作したときに何が起きるかです。クリックを待ち受け、データをに送り、スピナーを表示し、答えが返ってきたらDOMを更新します。HTMLとCSSは静的です。JavaScript はページに何かをさせます。動詞です。（同じ言語はbackendを動かすのにもよく使われるので、あちこちで見かけることになります。）
この役割分担をイメージする一つの方法：HTMLが木（DOM）を作り、CSSがそれに色を塗り、JavaScriptがその中に手を伸ばして変えます。
HTML ─▶ DOMツリーを作る CSS ─▶ スタイルを付ける JS ─▶ それを変える
┌──────────────────────────┐
│ page (document) │
│ ├── header │ 各ノードに クリックすると、
│ │ └── "My App" │ 色・フォント・ ノードを更新
│ └── form │ 余白を適用 → ブラウザが再描画
│ ├── input (name) │
│ └── button "Save" │
└──────────────────────────┘