【サイト模写応用編】インスタグラムを模写してみる

半分遊びですが、インスタグラムのサイト模写をしてみました。
シンプルな作りなので、練習には最適です。

以前、サイト模写の方法についてお伝えしましたが、今回はインスタグラムを見本にサイト模写をしてみました。

参考記事:【フロントエンド】Webサイト模写のススメ

インスタグラムのサイトレイアウト

PCのレイアウトはシンプルでヘッダー+メインコンテンツ(画像3つ横並び)+フッターとなっています。
(余談ですが、インスタグラムが流行してから、この手のシンプルなレイアウト増えましたね)

画像は無料素材のサイトから適当に取ってきます。

完成した物

作業時間はコーディングだけなら1時間くらいですかね。

追加実装(いいね機能)

Ajaxとjsonを使っていいね機能も付けてみました。
サーバーとのやり取りは面倒だったので、処理はフロントのみで完結させています。

※リンクを開くと動画になります

まとめ

こんな感じで、気になるサイトはどんどん模写してみるとすぐに実力は付きますよ。
僕も初心者の頃は毎日やっていました!
すぐに出来るようになるので、これが結構面白いんですよw

あとがき

副業でとっとと稼ぎたい方は、基礎を終えたら、コーディングを仕事にしちゃうのもありです。
ぶっちゃけHTMLとCSSなんて練習しまくれば、誰でも上達しますからね。
実践しまくって、副業で稼ぐ感覚を身に付けるのも良いと思います。
そうすると、日々のスキルアップもお金に直結すると実感が持てるので、身が入ると思います。

参考記事:プログラミング初心者がクラウドソーシングをすると良い理由

  • このエントリーをはてなブックマークに追加
  • LINEで送る