【Phase 2初日】初めての成果物：自己紹介ページを公開しました

Phase 2「実践と成果物作成」の初日。HTML/CSSで自己紹介ページを作成し、GitHub Pagesで公開しました。

公開URL: https://dondokoboy.github.io/profile/

今日やったこと

1. 自己紹介ページの設計

AIエージェントと一緒に、ページの内容とデザインを決めました。

掲載内容:

  • 基本情報（名前、キャッチフレーズ）
  • 自己紹介（現在の職業、プログラミングを始めた理由）
  • Phase 1で学んだこと
  • 今後の目標
  • 一言メッセージ
  • 学習記録サイトへのリンク

デザイン方針:

  • 配色：深い青 + 明るい青（信頼感と前向きさ）
  • レイアウト：センター寄せの1カラム
  • レスポンシブ対応（スマホでも見やすい）

2. HTMLとCSSでページを作成

Phase 1で学んだHTML/CSSの知識を使って、実際にコードを書きました。

使った技術:

  • HTML：ページ構造
  • CSS：デザイン、レイアウト、配色
  • Flexbox：スキル表示の横並び
  • メディアクエリ：スマホ対応

ファイル構成:

profile/
  ├── index.html
  └── style.css

3. GitHub Pagesで公開

GitHubにファイルをアップロードし、GitHub Pagesで公開しました。

公開手順:

  1. GitHubで新しいリポジトリ作成
  2. index.htmlとstyle.cssをアップロード
  3. GitHub Pagesを有効化
  4. URLを取得

公開URL: https://dondokoboy.github.io/profile/

世界中からアクセスできるWebページが完成しました。

初めての成果物ができた

Phase 1では、学習と記事化だけで、実際に動くものを作っていませんでした。

今日、初めて自分で作ったWebページが公開されました。

作ってみて感じたこと

Phase 1の知識が活きた

HTML/CSSの基礎を復習していたおかげで、スムーズにコードが書けました。

  • <section>でセクションを分ける
  • CSSでスタイルを適用
  • Flexboxでスキルを横並びに
  • メディアクエリでレスポンシブ対応

Phase 1で学んだことが、ちゃんと使えたという実感がありました。

完璧でなくても公開できる

最初は「もっと良いデザインにしたい」「もっと機能を追加したい」と思いました。

でも、AIエージェントから「公開後も修正できる」とアドバイスをもらい、まずは公開することにしました。

完璧を目指して公開しないより、小さくても公開して改善していく方が良いと学びました。

GitHubの使い方を覚えた

GitHub Pagesを使って、無料でWebページを公開できることを知りました。

今後、作ったものをすぐに公開できる環境が整いました。

Phase 1との違い

Phase 1（学習のみ）

  • Progateで学習
  • 記事を書く
  • 成果物なし

Phase 2初日（実践）

  • 学んだことを使う
  • 実際にコードを書く
  • 成果物ができた

Phase 2に入って、「学習」から「実践」に変わったことを実感しています。

まだ不安はある

自己紹介ページは公開できましたが、まだ不安はあります。

技術的な不安:

  • CSSの細かい調整がまだ難しい
  • レスポンシブデザインの理解が浅い
  • GitHubの使い方も完璧ではない

これからの不安:

  • 次のWeek 2（JavaScriptで動きを追加）でつまずかないか
  • もっと複雑なものが作れるようになるのか

でも、今日初めての成果物ができたという事実は大きいです。

次のステップ

Week 1の残り（3/15-3/20）

自己紹介ページの改善：

  • 色の調整
  • 文章の見直し
  • 写真やアイコンの追加（検討中）

Week 2（3/21-3/27）

JavaScriptで動きのあるものを作る：

  • 簡単な計算機
  • クリックゲーム
  • じゃんけんゲーム
  • ストップウォッチ

この中から1つ選んで、JavaScriptの実践に進みます。

今日の達成

Phase 2初日で、こんなことを達成しました：

項目内容
作成物自己紹介ページ
使用技術HTML/CSS
公開方法GitHub Pages
公開URLhttps://dondokoboy.github.io/profile/
学んだことGitHubの使い方、公開の流れ

Phase 2初日、無事に終了しました。

初めての成果物ができたという小さな一歩ですが、確かな前進です。

明日からは、このページを改善しながら、Week 2の準備を進めていきます。

コメント