【超初心者】ウェブサイト模写の感想(Airbnb)
スポンサーリンク
「コーディングの基本を学んだら実際に存在するウェブサイトを模写することによって身に付いた技術を活かして実践的な学習になる。」
ということで初心者の模写としてオススメされているAirbnbの一部ページの模写を試し
その結果と感想をまとめました。
この模写の目的
模写をしようと決めたきっかけは、プログラミング初心者に人気の東京フリーランスさんか主催している30DAYSトライアル1stのDAY17の課題として取り組みました。
30DAYSトライアルは30日間プログラミング初心者向けに毎日課題が出され、その課題に取り組むという流れなのですが、DAY17の課題はDAY13からDAY16の復習でした。
DAY17. 『HTML5/CSS3/Bootstrap4の復習』
— ショーヘー@東フリCMO (@showheyohtaki) September 24, 2019
DAY13〜16までBootstrap4を使ったビジネスLP制作を進めてきました。
インプット多めだったので、今日はその復習に当ててください👍
デイトラ1stで1番の山場はもう越えました️‼️残り2週間も完走しましょう☺️#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/vKSI266fs6
そのため、DAY13からDAY16はBootstrap4を使ってビジネスLPを動画を観ながら作成するのが主な課題だったのでBootstrap4を使って模写をやってみようと決めました。
模写を行った時のYaponkaのレベル
この模写を行ったときの私のコーディングレベル↓
- プログラミング独学3ヶ月目
- Progateを1ヶ月課金して学習
- ドットインストール1ヶ月課金して学習
- 初心者向けのウェブサイト模写1件(PC版のみ)
- 30DAYSトライアル1stのDAY16まで完了
という超初心者〜初心者のレベルです。
初心者向けのウェブサイト模写を一度やってみたことがありましたが、PC版のみの模写・写真が多めのサイトにも関わらず、完成させるまでに週末2日間まるまるかかってしまいとてもツラかったので、30DAYSトライアル1stのDAY17の自己課題として1日だけでどこまでできるか不安でした。
出来上がった作品
うまく行かなくて飛ばして次に進んでしまった部分がありますが、なんとか見本ページの上から下まで模写することができました。
Navigation barとfooter部分は修正が必要ですが、今日はここまで。 https://t.co/XkNbCdUGxF via @CodePen#プログラミング初心者#サイト模写#30DAYSトライアル
— Yaponka (@Yaponka6) September 25, 2019
反省・まとめ
30DAYSトライアル1stのDAY17の自己課題として1日だけでウェブサイトの模写をやってみるという試みをして気付いたこと↓
- Bootstrap4はとっても便利と再実感
- Navigation barの部分の理解が足りていない
- レスポンシブにするやり方の理解があやしい
- Chromeの検証ツールを模写の補助ツールとして使えた
- 完璧でなくてもコーディングをしてサイトを作るのが楽しい
提示された課題をこなすだけだと気付くことができなかった部分に気付くことができたと思うのでトライしてよかったと思います。
30DAYSトライアル1stはプログラミングを始めてみたいという方にとってもオススメのプログラムで実際に私がやってみた感想をまとめているので関連記事も是非ご覧下さい。