何を暗記するかより、どんなページを完成させたいかから選びましょう。道具を入れる段階から始める場合と、表示の問題を調べたい場合の入口を分けています。
作りたいものがまだ決まっていなければ、WebページとWebアプリで学ぶことの違いから、必要な範囲を選べます。
1．環境を用意する
VS Codeを入れてHTMLを保存する。拡張機能を一度に増やす必要はありません。
2．文章を置き、装飾する
完成の目安は、狭い画面でも読めて、文章や色を自分で変更でき、リンクが動くことです。
3．配置を広げる
ギャラリーの列数を変える、複数のカードを折り返す、標準HTMLのUI部品を操作するの順で、目的に合う例を選べます。
4．困ったら一つずつ調べる
- ファイルが届かない：参照先のパス
- 指定が上書きされる：カスケードと詳細度
- 箱が大きすぎる：幅と余白
- 原因が分からない：DevToolsで切り分ける
- 値の仕様を知りたい：MDNで適用条件を調べる
5．公開し、記録する
GitHubへ秘密を除いてコードを保存し、Vercelの公開手順へ進みます。公開後は、タイトル・内部リンク・公開状態の確認も行います。作業した環境、困ったこと、変更前後の結果を残すと、次の制作と記事の材料になります。
AIを使う場合も、再現コード・仮説・検証を分けることを大切にします。