2. 自己紹介ページを作ろう！
本カリキュラムの最初の実践課題です。
🎯 最終ゴール
HTML/CSSの基礎知識を活かして、自分だけの自己紹介ページを作成し、インターネット上に公開します。
この課題を通じて以下のスキルが身につきます：
- 実践的なHTML/CSSコーディング
- 開発環境でのコード作成
- Webサイトの公開手順
僕（藤本）がエンジニアになりたての頃に作ったものを例として置いておきます
https://fujimoon-k.github.io/profile.html
📝 課題の流れ
1. 開発環境を整えよう
エディタ（VSCode）のセットアップ
プログラミングには専用のテキストエディタを使用します。 今回の研修ではVisual Studio Code(通称VScode)を用います。
エディタとは？
プログラミング用の高機能なテキスト作成ツールです。コードの色分け表示や入力補完など、開発に便利な機能が搭載されています。
セットアップ手順
-
dot installの環境構築レッスンを視聴
-
実際に操作してみる
Progateのこちらの記事が参考になると思います。 デスクトップ上に自己紹介用のフォルダを作って始めましょう!
Progateでは準備された環境でコードを書いていましたが、実際の開発では自分のPCで環境を整えて作業します。
2. レスポンシブデザインを学ぼう（推奨）
スマートフォンでも見やすいページを作りたい方は、以下のProgateレッスンを復習してください：
- HTML/CSS 上級編
- Flexbox編
3. デザインを考えよう
いきなりコードを書くのではなく、どのように書いていくのか、事前の計画が重要です。そこで、ラフのスケッチでいいのでまずはデザイン案を考えてみましょう！
今回のような自己紹介ページに限らず、Webアプリケーションを構築する上で、複雑なシステムほど事前の設計、計画が重要となります。 簡単なアウトプットから、事前に計画する訓練をしていきましょう！
また、本格的なデザインはデザイナーにお任せで良いですが、最低限「見た目に違和感がない」くらいの感覚はものを作る上で持っておいたほうがベターです。
▼参考
デザイン作成のステップ
- コンテンツを整理する
以下のような要素を含めましょう(内容は任意です)
- 名前（ニックネームでOK）
- プロフィール（写真、自己紹介文）
- 趣味・特技などアピールポイント
- あれば、SNSへのリンクなど
- レイアウトを決める
紙とペンで手書きでOKです。 書く中身を決めたらどのように配置するか決めていきます。
- コンテンツの配置
- ヘッダー、フッターの中身
- 色使い
- HTMLカラーコードの組み合わせを調べてみるのもいいと思います。
- どこを何色にするかをざっくり決めてみましょう
- 文字の大きさ
- どこを強調したいのか
4. コーディングを始めよう
準備ができたら、いよいよコーディングです！
コーディングのポイント
暗記は不要と言いましたが「こういうレイアウトを実現するためにどういうふうにすればいいか？」の目星が立つかどうかが大事です。
目星が経てば、調べながらコードを作成していきましょう!
Progateで触れなかったこともどんどん調べてみて、どんなことができそうかの情報集めをしてみましょう。
- まずは大きな要素から組んでいく
- 例えばheader, main, footerの箱から）
- こまめに保存してブラウザで確認
- スマートフォン対応も意識する
- 開発者ツールで表示を切り替えながら確認しましょう
困ったときは？
- HTML/CSSリファレンスを参照
- Progateの復習
- Googleを使って調べる
- AIにも聞いてみる（※丸写しは今の段階では避けるべきですが、使うことには慣れていきたいです）
調べる過程で理解を深めていきましょう！
5. Webサイトを公開しよう
作ったページを公開します！
GitHub Pagesでの公開手順
- GitHubのアカウントを作成
- リポジトリを作成
- 作成したファイルをアップロード
- GitHub Pagesの設定
詳しい手順はProgateのガイドを参照してください。
公開できたら、URLをSlackで共有しましょう！ 他の人のページもお互いに参考にしていきましょう
🎉 完了条件
- VSCodeで開発環境が整っている
- デザインのラフ案が完成している
- HTML/CSSで自己紹介ページが作成できている
- GitHub Pagesで公開できている
- URLをSlackで共有している