初めて模写コーディングしてみた
プログラミングには，既存のWebサイトを見ながらその構成がどうなっているのかを考え，コードに起こしていくという勉強があります．
それが「模写コーディング」です．私はProgateというプログラミング学習サイトでプログラミングを勉強しており，ある程度の知識がついたと感じたので，何も見ずにProgateの「HTML & CSS 上級コース」の模写を行いました．
感想
一言でいうと，意外とできました．
Webサイトの構成自体は簡単でも，初めての模写コーディングでは難しいと聞いていたので，今まで積み上げてきたちょっとした成長の手応えが崩れ落ちてしまうのではないかとビクビクする自分もいました．
しかし，全くそんなことはなく，割と「このレイアウトはあれを使えばできそうだな」とわかり，実際に再現できました．
まあ，そもそも何回も練習で使っていたので当然と言えば当然ですが．
ただ，細部まで完璧に模写できたかというとそんなこともありません．
最後までできなかった点は以下の通りです．
・ボタンに無駄なアニメーションがつく
・containerとwrapperの親子関係が逆
・hoverさせる箇所の指定
・行間隔の調整
・headerだけ幅がずれる
これらは自力では解決できなかったものの，ディベロッパーモードで解答を見ればなるほどねという感じでした．
問題は，答えを丸々映しても正常に動かない箇所があったことです．
以下の2つは，HTMLとCSSの両方の答えのコードを丸写ししても最後まで反映されませんでした．
・ヘッダーを固定する
・faアイコンをデフォルトで消す
どうにもならずモヤモヤしたままだったので，自分が書いた方のサイトをディベロッパーモードを見ると，おかしな点があることに気づきました．
たいていは書いたコードがそのまま映っているのですが，ところどころCSS要素の中身がぐちゃぐちゃになっていたのです．
「え？？？？」です．
一応ディベロッパーモードで上の二点を修正してみると，どちらも正しく動きました．
よかったはよかったんですが，まだ腑に落ちていません．
原因は謎のままです．
気持ち悪いですが，追求していくと沼にはまりそうなので潔く別のWebサイトの模写コーディングに進みます．
まとめ：模写コーディングはおもしろい
初めて模写コーディングをしてみましたが，おもしろいです．
Progateで勉強し始めたころ，完全に0からWebサイトを書いたりしていましたが，それとは違う面白さがあります．
正解があるので，最後には答えを見れば新たな知識が身につきますし，「こうすれば同じ見た目になるよな」と書いたコードが実際に実物とそっくりに表示されるのは，クイズで正解した時のような気持ちよさがあります．
辛抱強さは必要ですが，これからも模写コーディングで練習し，プログラミング副業で稼げるよう頑張っていきます．