tachimugi’s diary

30歳主婦プログラミング初心者が学んでいく記録

【DAY16.】「Bootstrapを使ってビジネスLP制作③」をやってみた(30DAYSトライアル)

むぎです。

 

 

■30DAYSトライアル DAY16.をやります!

 

 

このTips分かりやすい!

こういう分け方の概念があまりないからコーディングしててもほわほわしていたのかも…!

 

 

■課題:【Youtubeで学ぶ】Bootstrapを使ってビジネスLP制作④

引続き動画の残り半分を見ながらコーディングします。

DAY13.とDAY14.と同じ方が作者の動画です。

動画はこちら

www.youtube.com

 

 

ちなみにこの動画も商用利用OK(画像除く)とのことです。

 

■動画のSTARTER FILESをダウンロードする

動画の下にある「➢ STARTER FILES:」というリンクに、必要な画像や、HTML、CSSの最初のコーディングが書いてあります。

 

私はこれを知らずに動画を見ながら一文字一句写経してしまったのですが、最初のコードはありものを使った方が早く進められるかもしれません。

 

■HTMLを整えた後にCSSを入力していく

 

動画の1:12あたりから後半部分のCSS装飾へ入ります。

 

この時点でのページ表示はこんな感じでした。

 

 

f:id:tachimugi:20190524002253p:plain

デイトラDAY16.の前半が終わるとこんな感じ。

 

■HTMLがほぼ整ったらCSSで装飾&調整を。

 

f:id:tachimugi:20190528151052p:plain

デイトラDAY16.が終わった時点でこんな感じ…!



ちなみにレスポンシブはこんな感じ…!

 

一部アイコンが「?」になっていたり、「contact info」の字体がおかしかったりしますが、とりあえず完走…。

f:id:tachimugi:20190528151211p:plain

レスポンシブデザイン…!

 

 

 

□時間管理 デイトラ16日目

前回までで累計47時間

・5月22日夜 30分

・5月23日夜1時間半 (1:18まで終了)

 ・5月28日昼1時間半

終了…!

 

デイトラ16日目の作業時間は

「3時間半」でした!!

 

累計50時間30分。

まだまだがんばるぞ…!!!

 

 

□コードメモ

blockquote…引用、転載ということを示すタグ

cite…作品のタイトルを表し、斜体で表示される

©…HTMLで@を表示させる

 

 

以上