コーディング後にチェックすること

前提
まずは以下の記事を参考に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後の挙動は全て正しいか

コード編

  • 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は一つしか存在しないか
  • VSコードにエラーは出ていないか

ファイル編

最低限ここまでは自分でチェックしてみましょう。

その後メンターにコードレビューをしてもらうのが良いと思います。

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

やり方は下記の記事から

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

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