Airbnbを模写できるようになるまで【一度は挫折します】

こんにちは、さしげです。

2020年3月下旬からHTML/CSSの勉強を始めましたが、Airbnb模写を始めて１ヵ月で2回挫折しました。

1回目の挫折

Airbnb模写してて、作りたいものを作れる技術が圧倒的に足りないことを感じました😥

なので一旦ドットインストールのプレミアム会員になって、知識の引き出しを効率的に増やしたいと思います！#プログラミング初心者#駆け出しエンジニアと繋がりたい

— さしげ☕️社会人5年目からプログラミング (@sashigentle) April 14, 2020

 

2回目の挫折

✅ドットインストール レスポンシブ1~8完了

ググッても上手くレスポンシブ化できなかったため、Airbnb模写から一旦離れ、input作業に切り替え。

気分転換にJavaScriptも学んでいきたいと思います😌#プログラミング初心者#駆け出しエンジニアと繋がりたい

— さしげ☕️社会人5年目からプログラミング (@sashigentle) April 21, 2020

 

最終的に、2回の挫折を経てAirbnbを模写できるようになりました。

☑Airbnb模写 完了！

ヘッダーのレスポンシブ化、ドロワーメニュー作成が終わりました。

まずは一言。やっとできたーー！😊

4月からHTML、CSS、JSを学び、ようやくAirbnbを模写することができました。

模写だと課題点が明確になるので良いですね。#プログラミング初心者#駆け出しエンジニア pic.twitter.com/lN7Gh5jDyt

— さしげ☕️社会人5年目からプログラミング (@sashigentle) May 5, 2020

 

この記事では
「Airbnb模写に挑戦したが難しすぎて挫折しそう」
「挫折しそうだけどAirbnb模写できるようになりたい」
という方向けに、

を解説します。

継続すれば乗り越えられる（結論）

 

いきなり結論ですが、ぶっちゃけ作業量が足りないだけで、継続すれば乗り越えられます。

挫折を辞書で引くと次の通り。

仕事や計画などが中途で失敗し、だめになること。また、そのために意欲・気力をなくすこと。（小学館大辞泉）

 

つまり、失敗した時点では挫折したことにはなりません。

以降のタイトルで「挫折」と表現していますが、使い勝手がよいので使っているだけで、意欲・気力をなくすことなく工夫しながら継続することで乗り越えることができます。

挫折したときの心境

 

Airbnbを模写するまでに独学した内容がこちらです。（すべて無料）

・ドットインストール：HTML、CSS、JavaScript、Bootstrap
・テックアカデミー（YouTube）：HTML、CSS、レスポンシブWebデザイン

 

模写を始めて6日目、1回目の挫折です。

Airbnb模写

本日は下記2点やりました。

・headerの要素を左右に配置
・要素を横並びにして等間隔空ける

右が僕です。
1時間30分ほどかかりました。。

margin、paddingを多用しすぎないようにします😇#プログラミング初心者#駆け出しエンジニアと繋がりたい pic.twitter.com/ctPrt5ZWaC

— さしげ☕️社会人5年目からプログラミング (@sashigentle) April 13, 2020

1回目挫折した心境は、「あまりにも作業スピードが遅すぎる」です。
一つひとつ調べながら模写しましたが、作業スピードが遅すぎて萎えました。

2回目挫折した心境は、「レスポンシブができず萎える」です。
レスポンシブを考えずにコーディングし、スマホサイズ時に要素が崩れてしまいました。

うまくいかないことの連続でした。。

挫折した後に実践した勉強

 

分からないことを言語化　→　言語化した内容をググる

これだけです。

筆者の場合、具体的には「分からないことをテキストに書き出す → 書き出した内容を解決する教材（ドットインストール、書籍）から学習する」です。

1回目挫折時であれば、下記のように不明点をテキストに書き出します。
・画像と要素を横並びにしたい
・全体に付いている余白を消したい
・ヘッダーの要素を両端揃えにしたい

言語化した後、上記キーワード + HTML（もしくはCSS）で検索すれば答えがネットにあります。

しかし、不明点が多すぎたため、作業スピードが遅くなってしまい萎えました。

作業スピードが遅い理由も言語化してみます。
→「簡単なサイトを作ったことがないから」

そこで筆者は、Airbnbのような要素が複雑に絡んだサイトではなく、もっと簡単なサイトを作り上げる経験をすることで、結果作業スピードが上がるのではないかと初心者ながら考えました。

ここで、簡単なサイトを作る経験ができるおすすめの教材とchromeの拡張機能を紹介します。

・ドットインストールのアプリ紹介ページ（有料）
・HTML&CSSとWebデザイン（書籍）
・UI Build Assistant（chrome拡張機能）★超おすすめ

書籍はこちらです。

✅ 問合せフォームにプラグイン埋め込み 完了

本日でこの本の内容を全て実施しました。

Airbnb模写→難しい😇→本で勉強の流れだったので、
もう一度Airbnb模写でアウトプットしていきます！#プログラミング初心者#駆け出しエンジニアと繋がりたいhttps://t.co/mcRMoTw4P2

— さしげ☕️社会人5年目からプログラミング (@sashigentle) April 28, 2020

 

最終的にこのようなオシャレなサイト（レスポンシブ対応）を作ることができます。

☑お問合せフォーム作成

シンプルな作りですが、背景画像のおかげで綺麗に見えます。

全4ページの作成でしたが、基本的な知識と制作方法を学ぶことができました。

この後は、フォームにGoogleマップや各種SNSのプラグインを埋め込みます😌#プログラミング初心者#駆け出しエンジニアと繋がりたい pic.twitter.com/gObukJhxcq

— さしげ☕️社会人5年目からプログラミング (@sashigentle) April 27, 2020

 

しまぶーさん（@shimabu_it）が作成したchrome拡張機能である「UI Build Assistant」はかなりおすすめします。

この機能を使うことで、サイトで使われている要素を俯瞰的に捉えることができます。
かなり役立つので是非使ってみてください。

しまぶーさんの動画はこちら。

実際に使った動画

☑Airbnb模写 8割作成

びっくりするぐらいスムーズに作成できました。。

この後はレスポンシブ化していきます。

しまぶーさん@shimabu_it の神拡張機能のおかげで、要素位置を背景色で確認する作業がなくなりました。

感謝しかない😊#プログラミング初心者#駆け出しエンジニア pic.twitter.com/wL6jxU37GQ

— さしげ☕️社会人5年目からプログラミング (@sashigentle) May 3, 2020

2回目挫折時の分からないこと
・レスポンシブにすると要素が崩れる

レスポンシブも本項で紹介した教材を何度も実践することで解決できました。

Airbnb模写は挫折するが気にしなくてよい

 

模写に限らず、初心者はすぐに壁にぶつかります。

それは知識や経験が不足しているからです。

諦めずに工夫をこなして勉強すると、点と点が線になり、できないことができるようになります。

Airbnb模写が難しければ、規模の小さいサイトを模写してください。

それが小さな成功体験となり、最終的にAirbnbを模写できるようになるでしょう。