Pocket

はじめに

おはようございます、ごんにんごんです。
今日は、模写コーディングに挑戦してみたので、こちらについて書いていきます。

プログラミングスクールに通い始めて1ヶ月ちょっと経過しました。
カリキュラムの冒頭でHTML/CSSを学んだものの、復習を疎かにしたことで構文とかとうに忘れ、たまに出る演習問題で思うようにコーディングできなくてHTML/CSSに苦手意識まで芽生え始めていたのですが、スクールメンバーのブログで模写コーディングなるものを知ったことが転機となりました。

【モテたい】模写コーディングしてみました。

模写コーディングとは一言で言えば、Webページを「自分の手で」「可能な限り似せて」コーディングするというもの。お手本の絵を手元に、見ながら絵を描いて練習するようなイメージですね。
これをやることで、

  • HTML/CSSの文法を身につけることができる!!
  • (ゆくゆくは)制作実績としてポートフォリオに掲載できる!!

ということで、やらない手はないと思い立ったのです。
ちょっと冗長になっちゃいますが、未経験からITエンジニアを目指す私にとって、模写コーディングを企業にポートフォリオとして提示できるのは、非常に大きいと思いましたので、コツコツとやっていきます。

模写コーディングをやってみた

☞ 私のステータス

HTML/CSS経験 -> プログラミングスクールのカリキュラムで約3日間やったのみ。
目標 -> 基本的に回答は見ないで進める。まずは大枠があっていることを目指す。

☞ コーディングの参考にした動画

なつこさんの動画を見て、模写コーディングの進め方便利な拡張機能を導入しました。
プロセスが事細かに説明されているので、模写コーディングの外枠を掴むには持っていこいです。

【超入門】初心者向け 模写コーディング!オススメのやり方とポイント【HTML・CSS コーディング】

☞ 模写するWebページ

模写コーディングでは、どこかのWebページを真似て作るのですが、そもそものWebページには著作権が発生しています。法律関係の知識まで入れる余裕はないので、著作権フリーのWebページを使って、練習することにしました。

トップページ | フリーホームページ.net

はじめての模写コーディング結果

模写したページ

私の結果...

所感

率直な感想
思い通りにいかなかったです。headder右上の予約欄の段組みがうまいこと並ばないし、p要素を2つ並べているだけなのに、その間にブランクが入ってしまったり、やきもきしました。

あとは、私は初心者ということを自覚することが大切ですね。模写している間、何度も全然できん...と落ち込むことがありましたが、動画でなつこさんが言ってたように、「知識が少ないのに、うんうん唸っていても答えはわからない」ということで、(答えを見るんじゃなく)調べるようにしました。

全くポートフォリオに乗せられるレベルではないけれど、その都度都度で、なんでうまくいかんのかなと考え、ググり新しい表現をつけていくという、小さな小さな成長サイクルを実感できたかなと。。。

プログラミングスクールの他メンバーも同じWebサイトで模写していて、今日の夕方にすり合わせをやる予定なので、そこで疑問を解消しまくりたいと思います。

わかりやすいHTML/CSSのサイト
サルワカさんのページに何度も助けられました。特に、margin/paddingの項目displayの使い方がよくわかっていない私にはおすすめです。

サルワカ | サルでも分かる図解説明マガジン

おわりに

いかがでしたでしょうか。はじめての模写コーディングについて書いてみました。
週1回のペースとかでやっていきたいと思ってますので、またみてください、では。

投稿者

waco@jp

30代未経験でエンジニア転職を目指しています。前職はメーカーで営業と製品開発を担当。22年3月からTechCampを受講し、5月に卒業。現在、就活とオリジナルアプリケーション制作の両輪で活動しています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です