はじめに

ハッカソンでフロントエンドを担当する機会を頂きましたが、理解が乏しいため備忘録として記事に残し、少しでも整理していきたいと思います。さらに理解が深まった時に加筆・修正したいと思います。
個人的な備忘録です。IT未経験のため間違っている点がありましたらご指摘いただけますと幸いです。

HTML・CSS・JSの連携について

可読性（誰がみてもわかりやすい）、再利用性（あとから修正しやすい）を考慮した設計が良いとされます。

1. 基本的な考え方

HTML：表示させたい内容のみを記述し、できるだけシンプルな構造にする。
CSS：デザインや配置の調整はすべてここで処理する。BEM (Block Element Modifier) という命名規則の方法論がある。
JS：サイトに動きをつける処理はすべてここ。

2. HTMLファイルとCSS・JSファイルの関連付け

CSS・JSをHTMLと関連付ける場合、どちらも<head>部分で読み込むことができます。CSSは<link>タグ、JSは<script>タグを使用します。

<head>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>

JSについては末尾にdeferかasyncをつけます。これがないとブラウザがHTMLと同時に読み込むため、エラーの原因になります。基本的にはdeferをつけることが多い様です。
defer：HTMLを読み込んだあとにJSが読み込まれる。
async：HTMLの読み込みと同時にJSが読み込まれる。広告を読み込ませたい時などに使用。

3. HTML各要素にCSS・JSを関連付ける方法

CSS・JSともにタグ・class・idと紐づけることができます。同じ命名に対して、CSS・JS双方を指定することもできます。一つのタグの中に2つ以上のclassを同時に指定することもできます。この場合はスペース区切りで入力します。

<body>
  <!-- 2つ以上のclassを指定する場合はスペース区切り -->
  <div class="box large">ボックス1</div>
  <!-- このboxをCSS・JS双方で使用することもできる -->
</body>

4. class,idについて

classは複数の要素に対応できるので拡張性が高いです。idは一意なので使いまわすことはできません。idは局所的なデザイン・動きを付けたいときに使用します。基本的にはclassをメインに使うことを意識すると再利用性が高まります。

まとめ

ここまででHTMLを書き始める際の基本的な理解は概ね出来ていると思います。後は実際に手を動かし、感覚を掴んでいきたいです。