前提
まずは以下の記事を参考にVScodeの設定を行なってください。
コードでおかしい部分のVScodeが教えてくれます。
https://biz.hpg.co.jp/biz2020/column/755/

その後下記のサイトでチェックしましょう

HTMLチェッカー
https://validator.w3.org/
CSSチェッカー
https://jigsaw.w3.org/css-validator/

それが終わったら以下の項目をチェックしていきましょう

ファイル名編

  • index.html style.css が存在するか
  • 画像の名前は適切なものに全てなっているか
  • フォルダ名、ファイル名は英字になっているか

デザインの再現性編

  • 320pxから2500pxまてお手本通りの見た目になっているか。(100px毎確認)
  • 全ての横幅で要素がはみ出ていないか
  • レスポンシブデザインになっているか
  • 余白は全てお手本通りか
  • フォントは全てお手本通りか
  • ボタンの設定は全て正しいか
  • hove後の挙動は全て正しいか

余白の確認には以下のプラグインを使いましょう。
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc

コード編

  • head内に最低限以下のものを書いているか
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
  • altタグは全て書いているか
  • 必要ないクラスはないか
  • リセットcssは読み込んでいるか
  • h1の使い方は正しいか?下記の記事を参考にどうぞ
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/Heading_Elements
  • VSコードにエラーは出ていないか

altタグに書くべき内容
https://www.youtube.com/watch?v=FEVM5k_aBDM&t=1008s

ファイル編

模写コーディングした後はインターネットに無料でアップしよう。

やり方は下記の記事から

https://menta.work/post/detail/27656/ccRxDuq83b7yEBXcYTD0

この記事に関して質問などがあれば気軽にメッセージください。