そうのじです！
企業のエンジニアとして働きながら，プログラミングで副業をしようと企んでいます！
以前，模写コーディングで挫折していましたが，「HTML5&CSS3レッスンブック」という本で勉強してからは意欲が湧いていました．
まずはこの本の中身を，そっくりそのまま模写しました．
それが終わってからは，模写コーディングにオススメされていたwebサイトを模写していました．
関連記事
本記事で紹介するwebサイト以外にも，いろいろ模写させてもらっています．
こちらの記事にまとめたので，気になる方はどうぞ．
-
-
【HTML＆CSS】模写コーディングの成果を紹介する記事まとめ【プログラミング初心者】
続きを見る
模写させていただいたページ：Dental Clinic
今回お借りしたはにわまんさんのページはこちら．
架空の歯医者さんのホームページです．
今まで模写してきたページと大きく異なる点は，
2カラム型で構成されているということでしょうか．
画面の左に「一般歯科」と「審美歯科」のリストがあり，画面中央から右にかけてメインコンテンツとなっています．
2カラム型はProgateでは扱われていなかったので，Progateに育てられた私は一瞬不安になりました．
しかし，すぐに気付きました．
「この画面構成，『HTML5&CSS3レッスンブック』に載ってたのと似てるな」と．
その本は内容を確認しながらすべて模写していたので，見ながらやれば問題なく実現できるはず．
「進研ゼミでやったところだ！」
という小学生の時の感動を思い出します．
模写リベンジしてみた結果
リベンジ模写が終わりました．
一か月くらいかかったんですかね．結構かかりました．
その結果がこちら．
いかがでしょう．
いい感じですよね！
記号，余白，色，書体などの細かいところは完璧ではありませんが，
全体的にはかなり上手に再現できているのではないかと思います．
いやー，大満足ですわ．
こんなにも成長するなんて．．．
実は，過去にもこのページを模写しようとしていたことがありました．
「Progate」のHTML&CSSの上級者ページ
と
「Write」を模写した後のことです．
-
-
【模写コーディング】Progate HTML & CSS 上級コース！
続きを見る
-
-
【模写コーディング②】「Write」
続きを見る
上の2つは割とよくできていたので，当時の私は
「オレ絶対センスあるわー，プログラミングってオレのためにあったんだなー」
と、大規模な自己陶酔をしていました．
しかし，今回のは難しかった．．．
手も足も出ないとはまさにこのこと．
完全に挫折したため，模写コーディング以外の勉強をしないといけないと思って本での勉強に切り替えたのです．
探してみたら，私に挫折を味合わせたときのページが残っていました．
，，，ひどいな．
もはや
「何を見て書いたんだよ！
元のサイトの面影まるでねえじゃねえか！」
と関係ない人からも怒られそうなレベル．
わかるわー．自分でもなんでこんなことになったのか理解できてませんから．
ちなみになぜこんなクオリティになってしまったかと言うと，
画面中央の上部にある緑色の帯状のナビゲーションができなさすぎて，
心が折れたから．
どれだけ書き直しても左右にバランスよく配置されなかったのです．
そのせいで，
「やる気がなくなって他のところもテキトーにやる．」
「テキトーに組みあがったレイアウトを見て自己嫌悪に陥り，やる気を失う」
という悪循環にはまりました．
ナビゲーションが起点となって，絵に描いたような負のスパイラルが始まり，
最終的には完全に挫折しました．
以前書いた「模写コーディングむずすぎ」はこの挫折経験を書いたものです．
-
-
【初心者殺し】模写コーディングむずすぎ
続きを見る
このときできなかったナビゲーションについては，今回は「HTML5&CSS3レッスンブック」にあった同じような例を参考にして，難なくクリアすることができました．
まとめ：並々ならぬ成長を感じる
何度も言いますが，
「HTML5&CSS3レッスンブック」は超オススメ
です．
私はこの本を読み，中身を丸ごと模写したことでかなり成長した気がしています．
同じページを模写したのに，読む前と読んだ後ではクオリティが全く違う結果となったことからもそう言えるでしょう．
ただ，読んだだけで劇的に成長したわけではないとも思います．
過去につまずいていた部分をスムーズに攻略できるようになったため，
モチベーションを失うことなく最後まで突っ走れたことが最大の要因だと思います．
模写コーディングの敵ってやっぱり自分だと思うんですよ．
思ったようにいかなくても，どれだけ淡々と諦めずに取り組めるかで先に進めるかが変わりますね．
この「HTML5&CSS3レッスンブック」は，Progateなどの超初心者用の教材で知識をインプットした人にうってつけです．
知識を整理しながら実際のWebサイトでどう役立てられるのかを学ぶことができます．
もしあなたがプログラミング初心者で独学に困っているなら，本書が助けてくれるかもしれません！
「HTML5&CSS3レッスンブック」の紹介
今回紹介した「HTML5&CSS3レッスンブック」の書評も書きました．
良かったら読んでみてください！