カテゴリー別アーカイブ: プログラミング

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

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

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

1回目の挫折

 

2回目の挫折

 

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

 

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

  • 継続すれば乗り越えられる（結論）
  • 挫折したときの心境
  • 挫折した後に実践した勉強
  • Airbnb模写は挫折するが気にしなくてよい

を解説します。

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

 

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

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

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

 

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

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

挫折したときの心境

 

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

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

 

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

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

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

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

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

 

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

これだけです。

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

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

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

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

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

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

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

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

書籍はこちらです。

 

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

 

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

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

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

実際に使った動画

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

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

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

 

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

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

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

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

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