Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

【初心者】ブログ型サイト模写の感想

スポンサーリンク

coding

 

30DAYSトライアル1stのDAY25の課題として取り組んだWordpressのテーマのひとつ「Write」を模写した感想と気付いたことをまとめます。

 

この模写の目的

この模写は30DAYSトライアル1stのDAY25の課題として取り組みました。

DAY25では「実践的なコーディング練習方法」としてサイトの模写が紹介されています。

 

スキル習得の具体的な目安で提案されているiSaraのLP(https://isara.life/)模写にビビってしまい、少しレベルを下げて自分でもできそうなサイトを探しました。

 

そして見つけたのがWordpressのテーマのひとつ「Write」(http://demo.themegraphy.com/write-ja/)ということです。

 

「Write」は初心者向けのサイト模写として紹介されていました。

 

ちなみに、DAY17の課題として取り組んだAirbnbの模写は中級、iSaraのLP模写は上級として紹介されています。

ま、iSaraのLP模写は上級者に分類されてるので、今の私のレベルだとビビってもしょうがないってことですよね。(←言い訳)

 

【レベル別】模写コーディングにおすすめのサイトまとめ9選 | HikoPro Blog

 

とにかく頭と手を動かして、模写に慣れていくしかないわけです。

 

treatmyself.hatenablog.jp

 

模写を行った時のYaponkaのレベル

この模写を行ったときの私のコーディングレベル↓

  • プログラミング独学3.5ヶ月目
  • Progateを1ヶ月課金して学習
  • ドットインストール1ヶ月課金して学習
  • ウェブサイト模写2件
  • 30DAYSトライアル1stのDAY24まで完了

という初心者のレベルです。

 

出来上がった作品

最終的の仕上がりはこんな感じになりました↓

 

See the Pen サイト模写 by Yaponka (@Yaponka) on CodePen.

 

一応レスポンシブになってはいますが、タブレット以下のディスプレイで見た時に表示されるハンバーガーメニューをクリックしてもなにもおきません。

クリックするとなにか起こる仕掛け(ドロアー・アコーディオン・モーダル)などは次の模写の課題で少しづつ慣れる必要がありますね。

 

反省・まとめ

今回の模写をで意識したこと

  • 紙にざっくりとしたワイヤーフレームを描いて全体のイメージを把握する
  • 付与するClass名はあらがじめ決めておく
  • 使う色のHexコードもメモしておく
  • HTMLをすべて完成させてからCSSに取り組む
  • 15分調べてできなかったところはとりあえず飛ばして次に進む
  • Bootstrapには頼らない

すべて完璧とはいきませんでしたが、レスポンシブ込みで約6時間で完成することができました。

この調子で、iSaraのLP模写も頑張ります!

 

*30DAYSトライアル1stの課題と感想のまとめを記事にしてあります。

よろしければ以下の記事もご覧ください。

 

treatmyself.hatenablog.jp