マナブログの「【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】」のAirbnbの模写コーディングができないので、もっとコーディングの基礎を勉強しました。
プログラミング教材のレベルチェックテスト
レベルチェックテストは「ページの模写」です
下記の２ページを模写してください。
先ほど紹介した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
Airbnb模写に再挑戦
さて、Airbnbはできるようになったか？
残念ながら、できるようにはなりませんでした。
問題点は2つ。
（1）スマホ、タブレット、PCの3つにレスポンシブ対応するのが難しい。
（2）スマホ、タブレット、PCの3つでヘッダーの入力部分が異なるのが難しい。
■元サイト
■模写サイト
「フレキシブルボックスで作る HTML5&CSS3レッスンブック」のおかげで、以前よりはコーディングできるようになりました。
しかし、まだまだ「サイト模写」にはほど遠い状況で、止まっています。
サイト比較
■元サイト（PC） ■模写サイト（PC)
■元サイト（タブレット） ■模写サイト（タブレット)
■元サイト（スマホ） ■模写サイト（スマホ)
Airbnbは全然模写できないけど、「フレキシブルボックスで作る HTML5&CSS3レッスンブック」でかなり上達はできました。
