Bootstrapでランディングページを作りたい人はドットインストールを見よう

Bootstrapの勉強をしている人

Bootstrapでランディングページを作りたいのだけど、何かいいサンプルないかなぁ?

 

このように悩んでる方には、ドットインストールのBootstrap入門をおすすめします。

Bootstrap 4入門

 

動画を見るのが一番かと思いますが、「動画見るの面倒だなぁ」と言う方向けに、ランディングページのサンプルコードも書いてあります。

Bootstrapで作成できるランディングページ

ドットインストールのBootstrap入門の動画は、全22本ありますが、合計すると60分くらいの動画時間しかありません

その短い動画時間にも関わらず、Bootstrapでよく使用されるクラスの使い方を学習することができ、最終的にはランディングページを作成することができます

しかも、「無料」で動画を見ることができますので、Bootstrapを学びたい人はやらない手はないですね。

 

ちなみに、最終的に作れるランディングページは次のようなものになります。もちろんレスポンシブ対応しています!

PC表示

PCでの表示は、次のようになります。

インターネットを見ていると、このようなページをよく見ると思います。メニュー・メインで紹介したい部分・フッター(下の図では見えていません)がある構成ですね。

スマホ表示

スマホでの表示は、次のようになります。

PC表示との違いは、メニューがハンバーガーメニューになっている点と、Awesomeのところが縦に並んでいる点です。

Awesomeのところでは、Bootstrapで非常に役に立つ「グリッドレイアウト」を使用して実現しています。

ランディングページのサンプル

ドットインストールのコードを使って、サンプルを作成しました(ほとんど一緒)。

よかったら参考にしてみてください。分からないところがあったら動画をみてみましょう!

ドットインストールでランディングページを作成できるようになろう

この動画を見て一回でもランディングページを作成してしまえば、他のランディングページを作成するときにも、サンプルとしてそのまま使えます。

繰り返しになりますが、Bootstrap 4入門は「無料」で動画を見ることができます。

また、ひとつの動画が2~3分で完了しますので、スキマ時間を使って見ることも可能です。まとまった時間が取れれば、1日で作成も可能ですよ!

Bootstrap 4入門


関連記事

【初心者向け】5分でできるBootstrapの使い方【入力フォーム作成】

この記事を読んだ方におすすめのサイト

Bootstrapの知識をさらに深めたい方には、UdemyのBootstrap4のコース がおすすめです。

Bootstrapを使用して、おしゃれなサンプルページを5つ作成することができるので、このコースを利用して実際に手を動かせば、かなり実践的な知識を得ることができます。

Udemy|Bootstrap4のおすすめコースはこちら