WEBサイトの「模写コーディング」課題をやってみたよ!

エンジニア

こんにちは、たてひとです!

フリーランスのエンジニアである僕ですが、近頃は独学でフロントエンドプログラミングの勉強をしています。フロントエンドプログラミングというのは、超簡単に言えば「WEBサイトの見た目」をつくるプログラミングのことです

とりあえずプログラミング学習サイトの「Progate」でHTML、CSS、JavaScriptあたりの基本を復習しとくか〜とマイペースに進めていたところ、Twitterでこちらの教材を発見!

用意されたデザインデータをもとに、1ページのWebページをコーディングするというものです。ちょうどProgate終わるところだし、今の自分の実力を確認するのに良さそう!と思いまして、早速購入しチャレンジしてみました

教材内容とつくったもの

今回購入させていただいたのは、フリーランスでWeb制作をされている、ちづみさん(@098ra0209) が作られたものです。お値段はワンコイン500円!(売り上げは台風21号、北海道胆振東部地震に全額寄付するとのこと!)

10月5日まで公開されているそうなので、Progate終えて次何しよう?と迷ってる方は是非トライしてみてね

完成した制作物はこちら

https://twitter.com/khattori89/status/1042783736197079040

制作にかかった時間は約6時間、期間としては2日かかりました。上記ツイートにもあるように、ちょっとゴリ押しでコーディングした部分があるので、これから経験を積みつつ、復習しつつ、スキルアップに励んでいきたいと思います

今回の制作を通して学んだこと

今回の制作を通して得た知見を書いておきます

ベースとなるフォーマットファイルを用意した

過去にも書籍等を使ってHTMLやCSSの学習をしていたことがあって、その際の経験をもとに、ベースとなるフォルダ構成とファイルをつくってから制作に取り組みました

▼こんな感じで、基本となるフォルダ構成を事前につくっておきました

ベースとなるindex.html、基本スタイルを定義したstyle.css、ブラウザ固有のスタイルを打ち消すreset.cssを作り、これらのファイルに追記する形で制作しました

ベースがあることでスムーズに制作に着手でき、フォルダごとコピーすれば今後の制作にも使いまわすこともできます

ご参考に、index.htmlとstyle.cssのコードを貼り付けておきます!

reset.cssは以下のサイトのものを使用しました

全体の構築→細部の調整の順で制作した

最初にヘッダー部分つくって、次にタイトル部分つくって、次にコンテンツ部分つくって……のように、ページの上から順番につくるのではなく、全体の骨組みを一気につくってから、細部のデザインを調整するスタイルで制作しました

個人的にはこのスタイルが良いと思っていて、全体を先につくることで

  • 共通のCSSが全体に適用されてるかコーディングできる
  • 全体のバランスが崩れていないか確認しながらコーディングできる
  • 行き詰まった時に後回しにして他の部分のコーディングができる
  • 全体が先に完成すると気分がいい(*´▽`*)

といったメリットがあります

僕の経験上、コーディングに行き詰まったらウンウン唸って粘り続けるより、茶でも飲んだりポケモンのアニメ見たりして時間を置いてから再チャレンジすると不思議なことに解決したりします

全体をつくっておけば、行き詰まった時に他の部分を実装することができるので、手が止まりにくく、精神衛生上も良さげです( ´艸`)

わからないことは頭の引き出しをもとに調べる

当然、途中でわからないことがたくさん出てくるので、そんなときはググります

そんなときに生産性を左右するのは「知識量」ではなく「なんとなく覚えている」ことだと思いました

もちろんわからないことが無いくらいたくさんの知識を覚えておくに越したことはないのですが、全てのことを覚えておくのはムリです(記憶力が残念な僕は特に。。。)

ですが、「どっかで読んだ記事に垂直中央寄せにする方法書いてあった気がする。」とか「Progateでやった気がする。」のように”なんとなく”覚えてさえいれば、答えに早くたどり着ける可能性があがるんですよね

例えば今回の制作では、「Webクリエイターズボックス」のとある記事を思い出して答えが見つかりました。日頃から、目を通すだけでもいろんな情報に触れておくことが大事ですね

みんなでチャレンジするから頑張れる

ちづみさんの教材は、様々な方がチャレンジしています!みんなで取り組むと頑張れるものです

https://twitter.com/masa_THA/status/1042095055518027781

https://twitter.com/BB_Y66w_design/status/1040959243937964033

おわりに

改めて、素晴らしい教材を提供していただき、ちづみさん(@098ra0209) ありがとうございました!

次はProgateとドットインストールでPHP、WordPress、Bootstrapあたりの基礎を学びつつ、Kohei Tanakaさん(@kolife01)の「WEB会議システムをつくるチュートリアル」をやってみようと考えています(WEB制作と毛色が違いますが)

それでは今日はこれで終わりです。最後までお読みいただきありがとうございましたヾ(´¬`)ノ

Posted by たてひと