【ドットインストール】Firebaseでポートフォリオサイトを公開したい

 

こんにちは、やまぴー(@Astro8754)です。

 

「俺のプログラミング(おれぷろ)」、第7回目の更新です。手短にまとめます!

 

内容は前回の【ドットインストール】ポートフォリオサイトを作りたい【HTML学習録】という記事の続きです。学習内容はCSSとFirebaseについて。

 

具体的には、ドットインストールで「はじめてのCSS(全17回)」、「Firebaseでウェブサイトを公開してみよう(全9回)」、「実践!ウェブサイトを作ろう(全16回)」を受講した感想です。

 



 

ドットインストールについて(初心者にオススメ)

 

ドットインストールは3分動画でプログラミング学習ができるオンラインサービスです。

 

Progateドットインストールが、初心者に人気な2大学習サイトと言っても過言ではありません。

 

使用感や学習の進め方について、詳しくはこちらの記事[ドットインストールの使用感などもまとめています]を参考いただければと思います!

 

ドットインストールでCSSを勉強してみた

 

僕はProgateやUdemyで既にCSSの勉強をしていました。

 

なので、ドットインストールでCSSを学んだ感想についてはあまり詳細には触れず、簡単に箇条書きしておきます。

 

・初見の「CSSプロパティ」や「セレクタの指定方法」がまだまだ出てくる
・margin / paddingの調整で、検証ツールの便利さに気づく
・CSSだけでできるデザインの引き出しが増える

 

こんな感じです。後ほど1からポートフォリオを作ってみて、特に検証ツールの使い方を学んだことが重宝しました。

 

HTML編と同様に、実際にデスクトップにフォルダを作りながら学習します。例えば、画像の挿入で相対パスを使ったり。この辺りは、Progateより実践的でした。

 

いずれにせよ、複数のサービスを使うと教わる方法も様々なので、レパートリーが増えて良いですね。

 

レッスンで「書き方に正解はありませんが」「いろんな記述方法がありますが」という前置きを使う理由もわかります。

 



 

Firebaseでサイトを公開してみた

 

サイトの公開について、具体策としてFirebaseHerokuを紹介してもらいました。いずれも、サイトやアプリをデプロイできるサービスです。多分。

 

ドットインストールを始めた理由も、「Firebaseでウェブサイトを公開してみよう」というレッスンがあったからです。

 

使い方としては、「node.js」をインストールして…、その後はだいたい以下のような感じです。Mac OSなので、ターミナルを使っています。

 

 

たまたま(珍しく?)、手順を超絶手書きでノートに書いていました。

 

まずは試しに、ドットインストールの講座で作成したファイルをデプロイ。次に、自作のウェブサイトをデプロイしてみました。

 

…と、文字でいうと短いですが、初心者として自作は骨が折れました!!

 

ちなみに、はじめてファイルをアップしたとき、運悪くHosting機能にサーバー障害が発生していて大変でした。

 

パニックになりながら、1時間ほどググってデプロイして失敗の繰り返し…。ようやく行きついたTwitter検索でサーバー障害を知るというオチでした。

 



 

CSSとFirebaseの使い方を勉強(まとめ)

 

「おれぷろ」第7回目の今回は、ドットインストールでCSSとFirebaseを勉強した記録でした。

 

冒頭に「手短に」と書いておきながら、若干文量が多くなった気がします。ただ、コードの紹介とかはしてないですね。

 

今回学習に利用したドットインストールは、以下の画像リンクを参照していただければと思います。

 

ドットインストール 「ドットインストール」トップページより画像引用 

 

次回はjQueryかPHPあたりの記事になりそうです。いや、ポートフォリオについてかもしれません…!

 

最後に初回、前回分の記事を貼っておきます。

 

 



 

やまぴー
Have fun!