模写コーディング

模写するサイト

FaceBook ログイン画面
https://www.facebook.com/

作成時間

その１：3時間
その２：5時間半
計：8時間半

環境構築

・Google Chrome（ブラウザ）
・Visual Studio Code（コードエディター）

模写する上でのルール（引用）

1.文字のコピペはOK
2.フォントの種類は何でもOK
3.少しのズレはOK
4.背景画像も入れる
5.角丸やフォントの大きさも近いものにする
6.レスポンシブデザインにも対応する

https://codelearn.jp/articles/mosya#1HTMLCSS

進捗

途中で形にはなっていたのが、
細かいところのレイアウトが違っていて
（特にpaddingやmargin)
中々妥協できずに時間がかかってしまった。

今回の模写を通して

marginの相殺の理解が浅かった。
marginは計算しながらつけるようにしていく。
marginやpaddingが、どの値がより正確かを探すのにも、デベロッパツールは重要であることを知った。

画像からカラーコードを算出してくれる以下のサイトはとても便利
模写したいサイトをスクショしてサイト内に貼り付けるだけ。
https://lab.syncer.jp/Tool/Image-Color-Picker/

次回

まだ、細かいところのスタイルが当てきれてないので、そこから始める
(cursorや元サイトでリンクになっている部分）

Javascriptを使って、新しいアカウントを作成をクリックした際に、モーダルウィンドウとしてアカウント作成画面を表示する。
（positionやtranslateについてドットインストールで復習しながら）

必須入力事項のエラーの出し方と正規表現のインプットをする。

レスポンシブデザインへの対応は後回し。
以上

もっとスムーズにコードを書けるようになりたい。。。