Treat Myself

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

ポートフォリオを作成するために活用したオンラインツール【30DAYSトライアル1st】

スポンサーリンク

creating portfolio


30DAYSトライアル1stの課題のひとつであるポートフォリオを製作・公開した際に使用したオンラインツールのまとめです。すべて無料で使えました。

 

 

参考にしたポートフォリオサイト

30DAYSトライアルの課題をこなられてきた先輩方の制作したポートフォリオのURLがまとまってあるので、ひとつひとつ確認して参考にしました。

 

docs.google.com

 

無料画像・画像加工

私が使っているツール↓

 

無料で使えるので、このブログに使っている画像や、少し画像加工が必要な時にもお世話になっているツールです。

 

treatmyself.hatenablog.jp

 

 

 色の選び方

デザインのことは全くわからないのですが、統一感を出したいと思い

  • ロゴ
  • ナビゲーション
  • アイコン
  • ボタン

の色を統一させました。

色の選び方はAdobeの Color というツールを使ってトップ画面の背景色から選びました。

 

お問い合わせフォーム

 私は「Formspree」というオンラインで無料でできるフォームを導入しました。

ポートフォリオを作った時は

  1. Formspree上でフォームを有効にする
  2. 有効にしたフォームのコード(HTML)をコピー
  3. コピーしたコードをポートフォリオのフォームになるところに挿入
  4. CSSでデザインを整える

の順番で行いました。

Formspree上でフォームを有効にするやり方は以下の記事でまとめてあります。

 

treatmyself.hatenablog.jp

 

ホスティング

30DAYSトライアルでは

が課題としてありました。

しかし私は、ドットインストールのレッスンで学習したFirebaseのhostingを使ってみたかったので、Firebaseを使ってポートフォリオをアップしました。

 

FirebaseはGoogleのアカウントがあれば無料で始められます。

 

無料で使える容量の制限はありますが、ポートフォリオのアップ程度であれば問題なかったので、お金をできるだけかけずにポートフォリオをアップしてみたいという方にはオススメな方法ですよ。

 

firebase.google.com

 

まとめ

そして公開できた私のポートフォリオはこちら↓

Yaponks's portfolio

 

30Daysトライアルで学んだことを活かしながら、なんとか作り上げたポートフォリオがウェブ上に公開された時の感動は、これからもプログラミング学習を続けるうえで大きなモチベーションになりました。

 

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

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

 

treatmyself.hatenablog.jp