Web制作を始めると、HTML・CSS・JavaScriptがほぼ同時に出てきます。3つを別々の科目として覚えるより、1つのWebページを育てる順番で理解すると迷いにくくなります。
1つのページを育てる順番
HTML：何があるか→CSS：どう見えるか→JavaScript：何が起きるか
1. HTMLで「何があるか」を作る
HTMLはページの骨組みを作ります。見出し、文章、画像、ボタン、入力欄など「画面に何があるか」を表します。
最初は、見出し1つ、自己紹介の文章、ボタン1つくらいで十分です。きれいに見せることより、必要な要素が画面に出ることを確認します。
2. CSSで「どう見えるか」を変える
CSSは色、文字サイズ、余白、配置などを担当します。最初から全体を整えず、色を変える、余白を広げるなど1か所ずつ試してください。
3. JavaScriptで「何が起きるか」を足す
JavaScriptはユーザーの操作に応じた動きを加えます。ボタンを押したら文章が変わる、入力した内容を表示する、条件によって表示を切り替える。最初は目で結果を確認できる小さな動きが向いています。
順番は一周で終わらない
HTMLを全部覚えてからCSS、その後JavaScript、と完全に分ける必要はありません。HTMLで要素を置く→CSSで1か所整える→JavaScriptで1つ動かす。その後またHTMLへ戻る。この往復で役割の違いが分かってきます。
CodeNestの現行公開情報でも、HTML・CSS・JavaScriptを含むWeb学習が案内されています。学んだ内容を課題で使い、必要なところをAIチューターへ質問しながら、理解と実装を往復する使い方ができます。
最初は3つを均等に覚えなくていい
その日の小さな成果物に必要なものを使ってください。分からない部分が出た時に、次に学ぶテーマが決まります。
次に読む： 最初の7日ガイド ／ 学習ゴールを成果物に変える方法