Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

【30DAYSトライアル 1st】Bootstrap編の感想(DAY11からDAY17)

スポンサーリンク

bootstrap coding

DAY11からDAY17ではCSSフレームワークで有名な「Bootstrap」の学習を進めていき、DAY13からは環境構築編で準備したローカル環境を使い、実践として英語動画を観ながら「Bootstrap」を使ってLP作成を2件やりました。

課題のまとめに加え、課題をこなした私個人の感想・気付いたポイントを綴っていきます。

 

 

Day11: Bootstrapの基本を学ぶ

<課題>

 

<感想>

私は英語学習者でもあるので、課題②とおまけ課題の公式レファレンスを読むというのを日本語ではなく英語の文書を読みました。

 

英語でも読みたい!っていう方は、ページの右上に言語を切り替えられるドロップダウンがあり英語に簡単に切り替えられるので、試してみて下さい。

 

Day12: Bootstrapでレイアウトを作る

<課題>

 

<感想>

ドットインストール課題の「特徴セクションのレスポンシブ対応」が個人的にとても感動しました。

classにorder番号をつけてあげるだけでPCでの表示の時と、スマートフォンでの表示に違和感を無くすことができます。

 

Bootstrapの公式文書ではうまく理解できなかったのでググった結果、ここのページの解説で理解することができました。(英語です)↓

stackoverflow.com

 

Day13: Bootstrapでレイアウトを作る(続き)& ビジネスLP作成①

<課題>

 

<感想>

ドットインストールを完了して、ついにLP製作になったのでとってもワクワクしました。

動画の始めの6:50までは完成ページの紹介と、スターターキットの中身の紹介があり、課題の39:00あたりまでやるとGIFのセクションまで作れます。

 

ちなみに、スターターキットは動画概要欄内の「➢Tutorial Starter Files:」の下にあるURLからダウンロードできますよ。

 

Day14: ビジネスLP作成①(続き)

<課題>

 

<感想>

動画の54:55あたりまででBootstrapを使用したHTMLのコーディングが完成し、その後CSSでデザインを整えていきます。

navbarのpaddingを整える時に「rem」と「em」の説明をしてくれているのですが、私はそれたけでは理解できなかったので「rem」と「em」に関しては要勉強と感じました。

 

Day15: ビジネスLP作成②

<課題>

 

<感想>

 LP製作2件目。

動画の始めの11:00あたりまでは完成ページの紹介と、スターターキットの中身の紹介があり、課題の59:22までやるとResourcesのセクションまで作れます。

 

今回のスターターキットは前回のと比べるといろいろ入ってて、Fixed backgroundのためのCSSCSSフォルダーに既に用意されていたりします。

 

スターターキットは前回の動画と同様に、動画概要欄内の「➢Tutorial Starter Files:」の下にあるURLからダウンロードできます。

 

また私は、LP作成①でもLP作成②でも文章を入れる部分はダミーテキストを使いました。

 

Day16: ビジネスLP作成②(続き)

<課題>

 

<感想>

 1:11:50あたりまででBootstrapを使用したHTMLのコーディングが完成し、その後CSSでデザインを整えていきます。

たった2日でこんなに素敵なLPが作れちゃうなんて感動です。

 

個人的にDAY15とDAY16で作成したLPの雰囲気が好きなので写真を替えて、色を替えて自分のオリジナルのLPを作ってみたいと思っています。

 

Day17: DAY13からDAY16までの復習

<課題>

 

<感想>

DAY13からDAY16の復習ということで具体的な課題が出なかったDAY17。

 

私は「Bootstrap」を使ってやってみたかったウェブサイト模写にチャレンジしました。

トライしたのはAirbnbのギフトページです。Navbarの実装が難しくて、ほどほどの完成度で次に進みました。

結果として、Navbar部分とfooter部分は完璧にできませんでしたが、他の部分は見本ページと同じ見た目にすることができました。

Navbar部分の理解がかなり甘いことが再確認できたので、要勉強ですね。

 

自分で課題を見つけてチャレンジしてみると新しい発見があるので自主的にチャレンジするのは大切ですね。

 

おまけ

 「Bootstrap」を実務で使う時に覚えておきたいことがツイートされていたので、乗せておきます。

 

最後に

プログラミングに加え、英語学習者の私にとって英語の動画を観てプログラミングを学ぶというのは一石二鳥でとっても良かったです。

わからないことがあってググる時や公式文書などは積極的に英語を使って行こうと思います。

 

*30DAYSトライアル1stの課題と感想のまとめを記事にしてあります。

よろしければ以下の記事もご覧ください。

 

 

treatmyself.hatenablog.jp

 

 

treatmyself.hatenablog.jp