Air bnbのサイトを模写コーディングしました。なかなかの労作でした。
一番苦労したのは、全体をCSSグリッドで統一的にコーディングしようとしたことです。
「最初に基本的なサイトの横幅等を決めておけば、各ブロックごとに何度も横幅等を記入する必要はなくなる」と思ったからです。
けれどこの試みは、うまくいったときはコードがきれいですが、失敗したときは最悪の場合、１からサイトを作り直さなければならず、とても危険な方法でした。今後、サイトを作るときは、全体をCSSグリッドで統一的に記述することはせず、各ブロックごとにサイトを作っていったほうが無難で安全だと思います。
次に苦労したのは、とにかくデザインが細かいところですね。
画像ひとつとっても、横幅の違いに応じてデザインを変えたりして、手間がかかりました。また各ブロックの境目に灰色の短い線が引かれているのですが、この線をどのように表示するか？ について大変苦労しました。CSSグリッドで線を作ったのですが、それが正解だとは思いません。ほかに何らかのやり方があったと思います（今の私なら灰色の短い線は各ブロックのタイトルに付随する線であることは明白なのですから、タイトルの前に疑似要素を作って対応しますね。このサイトを模写した当時はそんなことも分からなかったんですよね）。
今回の模写で頑張った点は、インターネットエクスプローラーにも対応させたことですね（これによりインターネットエクスプローラーでもきれいに表示されることになります）。
かつてはブラウザシェアの大部分を占めていたインターネットエクスプローラーですが、実はブラウザの標準仕様からは大きく外れています。そのためインターネットエクスプローラーに対応させるためには、通常のサイト制作に加えて、もうひと手間かける必要がありました。
そのためこれまではインターネットエクスプローラーに対応した模写は行っていませんでしたが、今回はインターネットエクスプローラーにも対応させる模写にしました。
それと今回の模写ではjQueryで動きのある部分も再現しました。細かな点を言えば不十分なところもありますが、おおむねうまく再現できたと思っています。