模写コーディング
模写するサイト
FaceBook ログイン画面
https://www.facebook.com/
作成時間
その１：3時間
その２：5時間半
計：8時間半
環境構築
・Google Chrome（ブラウザ）
・Visual Studio Code（コードエディター）
模写する上でのルール（引用）
1.文字のコピペはOK
2.フォントの種類は何でもOK
3.少しのズレはOK
4.背景画像も入れる
5.角丸やフォントの大きさも近いものにする
6.レスポンシブデザインにも対応する
進捗
途中で形にはなっていたのが、
細かいところのレイアウトが違っていて
（特にpaddingやmargin)
中々妥協できずに時間がかかってしまった。
今回の模写を通して
marginの相殺の理解が浅かった。
marginは計算しながらつけるようにしていく。
marginやpaddingが、どの値がより正確かを探すのにも、デベロッパツールは重要であることを知った。
画像からカラーコードを算出してくれる以下のサイトはとても便利
模写したいサイトをスクショしてサイト内に貼り付けるだけ。
https://lab.syncer.jp/Tool/Image-Color-Picker/
次回
まだ、細かいところのスタイルが当てきれてないので、そこから始める
(cursorや元サイトでリンクになっている部分）
Javascriptを使って、新しいアカウントを作成をクリックした際に、モーダルウィンドウとしてアカウント作成画面を表示する。
（positionやtranslateについてドットインストールで復習しながら）
必須入力事項のエラーの出し方と正規表現のインプットをする。
レスポンシブデザインへの対応は後回し。
以上
もっとスムーズにコードを書けるようになりたい。。。