Contents
はじめに
おはようございます、ごんにんごんです。
今日は、模写コーディングに挑戦してみたので、こちらについて書いていきます。
プログラミングスクールに通い始めて1ヶ月ちょっと経過しました。
カリキュラムの冒頭でHTML/CSSを学んだものの、復習を疎かにしたことで構文とかとうに忘れ、たまに出る演習問題で思うようにコーディングできなくてHTML/CSSに苦手意識まで芽生え始めていたのですが、スクールメンバーのブログで模写コーディングなるものを知ったことが転機となりました。
模写コーディングとは一言で言えば、Webページを「自分の手で」「可能な限り似せて」コーディングするというもの。お手本の絵を手元に、見ながら絵を描いて練習するようなイメージですね。
これをやることで、
- HTML/CSSの文法を身につけることができる!!
- (ゆくゆくは)制作実績としてポートフォリオに掲載できる!!
ということで、やらない手はないと思い立ったのです。
ちょっと冗長になっちゃいますが、未経験からITエンジニアを目指す私にとって、模写コーディングを企業にポートフォリオとして提示できるのは、非常に大きいと思いましたので、コツコツとやっていきます。
模写コーディングをやってみた
☞ 私のステータス
HTML/CSS経験 -> プログラミングスクールのカリキュラムで約3日間やったのみ。
目標 -> 基本的に回答は見ないで進める。まずは大枠があっていることを目指す。
☞ コーディングの参考にした動画
なつこさんの動画を見て、模写コーディングの進め方や便利な拡張機能を導入しました。
プロセスが事細かに説明されているので、模写コーディングの外枠を掴むには持っていこいです。
【超入門】初心者向け 模写コーディング！オススメのやり方とポイント【HTML・CSS コーディング】
☞ 模写するWebページ
模写コーディングでは、どこかのWebページを真似て作るのですが、そもそものWebページには著作権が発生しています。法律関係の知識まで入れる余裕はないので、著作権フリーのWebページを使って、練習することにしました。
はじめての模写コーディング結果
模写したページ
私の結果...
所感
率直な感想
思い通りにいかなかったです。headder右上の予約欄の段組みがうまいこと並ばないし、p要素を2つ並べているだけなのに、その間にブランクが入ってしまったり、やきもきしました。
あとは、私は初心者ということを自覚することが大切ですね。模写している間、何度も全然できん...と落ち込むことがありましたが、動画でなつこさんが言ってたように、「知識が少ないのに、うんうん唸っていても答えはわからない」ということで、(答えを見るんじゃなく)調べるようにしました。
全くポートフォリオに乗せられるレベルではないけれど、その都度都度で、なんでうまくいかんのかなと考え、ググり新しい表現をつけていくという、小さな小さな成長サイクルを実感できたかなと。。。
プログラミングスクールの他メンバーも同じWebサイトで模写していて、今日の夕方にすり合わせをやる予定なので、そこで疑問を解消しまくりたいと思います。
わかりやすいHTML/CSSのサイト
サルワカさんのページに何度も助けられました。特に、margin/paddingの項目やdisplayの使い方がよくわかっていない私にはおすすめです。
おわりに
いかがでしたでしょうか。はじめての模写コーディングについて書いてみました。
週1回のペースとかでやっていきたいと思ってますので、またみてください、では。