コーディングに使うツール

• デザインデータ（Figma,Photoshop,Illustratorなど）
• テキストエディター（Visual Studio Code,Atomなど）
• WEBブラウザ（Chrome,Safari,FireFox）
• Local（WordPressの構築に）

①デザインデータを用意

まずはデザインデータを用意します。
初心者のうちはいきなりコーディングするのではなく
タグのマークアップをしてからコードを書くことをお勧めします。

②VSコードでファイルを開く

コーディングファイルを開きます

③デザインデータを見ながらHTMLを書く

①のデザインデータを見ながらindex.htmlにHTMLを書いていきます

④デザインデータを見ながらCSSを書く

①のデザインデータを見ながらstyle.cssにCSSを書いていきます
ブラウザでプレビューや検証ツールを見ながらやるのがおすすめです

⑤レスポンシブ

スマホか版からコーディングして、その後にPC版に変換していきます
CSSのメディアクエリ@media screen and (min-width: 1024px) {} に
PCのCSSを記載します

⑥エラーチェック

全てのコードが書けたら、コードのエラーチェックをします。
HTML：https://validator.w3.org/#validate_by_input

Infoの内容は無視してもいいです。errorと出た場合は修正しましょう。

CSS：https://jigsaw.w3.org/css-validator/#validate_by_input

⑦ブラウザごとの表示チェック

各ブラウザ（Chrome,Safari,FireFox）ごとに表示エラーがないかを確認します。画面幅ごとのエラーも確認しましょう。
この時mac,windows,iPhone,Andoroidでも確認しましょう。

⑧納品

エラー・表示に問題がなければ初回の納品！
この後修正があれば修正対応をしましょう。

納品方法

• ファイル納品
• テストサーバーにアップ