マナブログの「【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】」の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レッスンブック」でかなり上達はできました。