【告知】ノマドエンジニア養成ブートキャンプ

【DAY14.】30DAYSトライアル14日目をわかりやすく解説

コンパスで地面をくり抜く男女

おはこんばにちは、ミヤビです。

 

さて今回は、『Bootstrapを使ってビジネスLP制作②』ということで、DAY13.の続きです。

 

 

✔︎本記事の内容

  • DAY14.『Bootstrapを使ってビジネスLP制作②』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

 

わずか２週間という期間で、ランディングページが完成できることは驚きですよ。

 

基本的には、、、

 

  • HTMLを記述
  • divタグにBootstrapで用意されているclassを記述
  • CSSでデザインを施す

 

初めてのチュートリアルを使ったLP制作なので、わけわかめ状態かと思いますので、３週はして慣れましょう。

 

１周目は「よくわからないな〜」といった感じですが、２周目になると「あっこれ前に見たことあるな、もしかしてこれってこういうことなのかな」と感じられるようになります。

 

そして３周目とやっていくうちに、「そうか、こうゆうことか」と腑に落ちる瞬間に出会えるハズです。

 

Progateやドットインストールでも同じなのですが、ある程度繰り返し学習する必要があります。

 

とはいえ、暗記は不要なので何周もする必要はなくて、ググれば解決できます。

BootstrapでLP制作を完成させよう

英語は字幕表記、再生速度を落として学習することをオススメします。

 

 

上記のとおり、写径をする上でよくありがちなミスです。

 

バグってる原因は、たぶんスペルミスが一番あり得るハズです。

 

これが単純に一番多いです。

 

とはいえ、DAY8.の環境設定編で解説した、10個のVSCode拡張機能とEmmetでミスは極力減らせるので、焦らずゆっくりと作業しましょう。

 

VSCodeの「Go Live」機能を使いつつ、セクションごとに区切りをつけて、バグってないか確認しながら進めましょう。

 

バグってれば、その前の段階でミスってるハズなので、時間の節約にもなります。

 

Bootstrapのクラス名【必須】

ありがちなBootstrapのクラスです。

 

  • container-fluid　画面サイズに合わせて流動的にリサイズ
  • text-center　中央寄せ
  • hr　水平線
  • mx(y)-数字,px(y)-数字　paddingやmarginをx方向、y方向にいくつ付けるか
  • display-数字　見出しの大きさ

 

この他にも様々なクラスがありますが、Bootstrap移行ガイドを参考に学習して行きましょう。

 

というわけで、今回はここまで。

 

次回は、YouTubeでのチュートリアル学習の2回目になります。

 

しかしこの辺りから、むずかしいなーと感じることが多くなりますので、そんな時は一人で抱え込まないことです。

 

ネットには先人の声がゴロゴロ転がっています。

 

その中でも、アルパカさんはわかりやすいので、ぜひ参考にしてみてください。

 

››参考 タキのデイトラ解説

 

植物を手に持つ 【DAY15.】30DAYSトライアル15日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】

 

前の記事

ジャンプしている男性
【HTML5】ページ内リンクの実装方法を解説【ヘッダー固定時の…

次の記事

【DAY15.】30DAYSトライアル15日目をわかりやすく解…
植物を手に持つ