デイトラWeb制作初級編『ポートフォリオ作成編Day17~19』学習記録

WEB制作
うにょママ
うにょママ

復習をかねたプログラミング学習の記録と備忘録です。

スポンサーリンク

Day17~19で学んだこと「テンプレートを使用したポートフォリオ作成」

【Day17】HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①

HTML/CSS/Bootstrapを使ったテンプレートを利用しポートフォリオを作成

・テンプレートをEnvatoMarket(オーストラリアのEnvato.comが運営するECサイト)で購入する

Kerri – Responsive Bootstrap 4 One Page Portfolio Templateを購入

Kerriの変更点

・テンプレートの画像や文章を変更する

・テンプレートの不要な項目は削除

・お問い合わせボタン追加

・ロゴ作成

・グーグルフォーム実装(LP作成後に修正)

ポートフォリオに使用する画像のおすすめサイト

・ポートフォリオに使用する画像はO-DANがオススメ

  • 商用利用可の画像のみを
  • 32のフリー素材サイトから
  • 日本語で検索可能

・日本の無料画像がほしい場合は『タダピク

【Day18】自分のポートフォリオサイトを作ろう②

HTMLテンプレートから学ぶ

・効率的なクラス分け

・CSSの共通化

・表現の幅をひろげる

HTMLテンプレートを使うメリット
  • 制作工数を時短できる
  • 手軽にオシャレなサイトが作れる(副業向き)
  • 上手い人のコーディングを学べる
  • コーディングの幅が拡がる
  • いろんなデザインパターンが見れる
HTMLテンプレートを使うデメリット
  • 依存してると”コーダー”としてのスキルは伸びない。
  • そのまま使うと海外サイト感のあるデザインになりがち
  • ちょっと頑張れば誰でもマネできてしまう

【Day19】ポートフォリオを公開しよう

サイト公開の手順

①サーバー契約

・エックスサーバーがおすすめ
私はこのブログ開設時にConoha WINGと契約していたのでエックスサーバーは使っていません。

・サーバーは簡単に言うと「自分のサイトを表示するために必要な場所を借りる」イメージ

②ドメイン取得

・ドメインは簡単に言うとサイトのURL
(例えばこのブログの場合は「https://www.unyomama.com/」)を決める事

・ドメイン名は後から変更できない

③FTPクライアントソフトのインストール

・初心者にオススメのFTPソフトはCyberduck

④Cyberduck(FTPソフト)を使用しファイルをサーバーにアップロード

・サーバーにアクセスするために、事前に契約したサーバーでFTPアクセス情報を確認する必要あり

・接続に必要な情報は3種類

  1. FTPサーバー名(FTPホスト名)
  2. FTPユーザー名(FTPアカウント名)
  3. FTPパスワード

・ファイルのアップロード方法は2種類

  1. デスクトップからドラッグ&ドロップ
  2. Cyberduck内のアップロードをクリックしファイルを選択

サイトがネット上で世界中に公開される!

私の作ったポートフォリオはコチラ↓

ポートフォリオ公開

Twitterカードの設定

・Twitterでシェアするときに、URLを入力するとサイトの画像が表示される

・Twitterカードがあるとシェアしたときにクリック率がかなり上がる

まとめ

どきどきのポートフォリオ公開!

URLを入力すると自分の作ったサイトが表示されてうれし恥ずかしです。

他のデイトラ受講生のポートフォリオがとても参考になりました。

サーバーがエックスサーバーではなく、Conoha WINGなのでサイト公開でかなりつまづきました。

Twitterカードの設定もうまく行かず解決に時間がかかりました。

つまづいた箇所を別途ブログでまとめみようと思います!

まとめました(2021/6/4)↓

コメント

タイトルとURLをコピーしました