30DAYSトライアル

【30DAYSトライアル】に挑戦 DAY15 BootstrapでビジネスLP(2つ目)を作る

こんにちは、ポンコツエンジニアのはやです。今回は、30DAYSトライアルのDAY15を進めていきました。気がつけばもう半分!!今回の内容は、前回同様これまで学習してきたBootstrapを用いて、ビジネスLPを作成する、というものです。

->詳細はコチラ

今回やることは1つ!

・動画LP(2つ目)の59分まで進める

(自分で考えて作ること!!)

今回のポイント

前回一度作成しているので、手順はイメージできていると思います。今回の超重要ポイントは、ショーヘーさんが課題に書いてくださっている以下の通りです。

見本を確認→コーディングという手順で動画が進んでいきますが、その見本を確認するシーンで一度止め、自分ならどういうブロック分けをするか・クラスを付けるか頭の中で設計してから再生する

どうしてこんなことをしないとダメなのか。それは、実際に自分がデザインからコーディングができるようになるためです。この30DAYSチャレンジの最終目的は、WEB制作で月5万円稼ぐことにあります。

そのためには、少なくともデザインから自分でWEBページを完成させられるスキルが必要です。人のコーディングを見て真似てみると、意外と簡単に感じたりします。

しかし、それを自分だけでやっていくとなると、「どう進めればいいの?」と思考してしまうことも少なくありません。そんな思考停止をなくすのに一番効果的な方法が、「経験すること」です。習うより慣れろですね。とにかく、自分で考えてやってみましょう。

ブロック分けのイメージとして以下のツイートが的を得ていると思います。

 

このツイートの図のように、まとまりごとに分けていく練習はとてもためになります。しかも、とっても簡単に練習できます。普段何気なく、閲覧しているWEBサイトが一体どんな構造によってできているのか考えるだけです。さらに、そのWEBサイトをChromeなどの検証ツールで見れば、もうプロのHTMLとCSSがそこにあるのですから、練習しない手はないですよね!!

まとめ

自分で考えた後に動画をみると自分の考えと全く違うことがあります。そんな時は、一旦止まって自分の考えたものと、動画のものとを比較してみましょう。あなたの考えが間違っている場合もありますし、両方あっている場合もあります。そうして、色々なやり方を知ることも大きなスキルになります。

今回も新たな情報がたくさんあったと思います。全てを覚える必要はないです。覚えられることから覚えていきましょう。僕は今回、overflow: hidden; やfontAwesomeのdata-fa-transform属性を知りました!

少しずつ、課題の内容が濃くなっていますが、次回も踏ん張っていきましょう!