コーディング

マナブログのプログラミング教材レベルチェックテストのAirbnbサイト模写ができない

マナブログの「【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】」のAirbnbの模写コーディングができないので、もっとコーディングの基礎を勉強しました。

プログラミング教材のレベルチェックテスト

 レベルチェックテストは「ページの模写」です

下記の2ページを模写してください。

先ほど紹介したAirbnbのページです。
こちらのページを見つつ、HTMLとCSSのコーディングをしてみてください。

 レベルチェックテストのルール解説

ルールは下記のとおり。

  • HTMLやCSSコードのコピーはNGです
  • 画像はサイトからDL、もしくは似ている素材をネットで探してきてください
  • PC版とスマホ版がありますので、レスポンシブでコーディングしてください
  • 模写が完了したら、レンタルサーバーで公開してください(※注意点あり)
  • 検索機能などは、動作しなくてOKです(見た目だけ真似しましょう)

他の人はできているんだろうか?

「Airbnb サイト模写」で検索すると、結構ブログ記事が出てきます。

その中で下記のサイトが参考になりました。

■【実録】HTML/CSSコーディング模写で挫折したけどリベンジ成功した方法

その中で紹介されていたのがこの「フレキシブルボックスで作る HTML5&CSS3レッスンブック」。

HTML/CSSはわかるのに、コーディングができないという人向けです。

2〜3日でこれくらいのコーディングができるようになりました。
http://live-myway.com/coding/lessonbook_flex/post01.html
http://live-myway.com/coding/lessonbook_flex/index.html

Airbnb模写に再挑戦

さて、Airbnbはできるようになったか?

残念ながら、できるようにはなりませんでした。

問題点は2つ。
(1)スマホ、タブレット、PCの3つにレスポンシブ対応するのが難しい。
(2)スマホ、タブレット、PCの3つでヘッダーの入力部分が異なるのが難しい。

■元サイト

■模写サイト
http://live-myway.com/coding/airbnb1_002/

「フレキシブルボックスで作る HTML5&CSS3レッスンブック」のおかげで、以前よりはコーディングできるようになりました。

しかし、まだまだ「サイト模写」にはほど遠い状況で、止まっています。

サイト比較

■元サイト(PC)             ■模写サイト(PC)
  

■元サイト(タブレット)        ■模写サイト(タブレット)
              

■元サイト(スマホ)          ■模写サイト(スマホ)
                 

Airbnbは全然模写できないけど、「フレキシブルボックスで作る HTML5&CSS3レッスンブック」でかなり上達はできました。

COMMENT

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