48 lines
3.8 KiB
Markdown
48 lines
3.8 KiB
Markdown
|
---
|
||
|
|
id: bd7158d8c242eddfaeb5bd13
|
||
|
|
title: 個人ポートフォリオのウェブページを作成する
|
||
|
|
challengeType: 3
|
||
|
|
forumTopicId: 301143
|
||
|
|
dashedName: build-a-personal-portfolio-webpage
|
||
|
|
---
|
||
|
|
|
||
|
|
# --description--
|
||
|
|
|
||
|
|
**目標:** こちら <https://codepen.io/freeCodeCamp/full/zNBOYG> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
|
||
|
|
|
||
|
|
以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
|
||
|
|
|
||
|
|
このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 私達は、このプロジェクトの推奨技術スタックを使用している場合の問題報告は全て受け入れ、修正するように努めます。 ハッピーコーディング！
|
||
|
|
|
||
|
|
**ユーザーストーリー #1:** 私のポートフォリオには、`welcome-section` の id を持つウェルカムセクションがあります。
|
||
|
|
|
||
|
|
**ユーザーストーリー #2:** ウェルカムセクションにはテキストを含む `h1` 要素があります。
|
||
|
|
|
||
|
|
**ユーザーストーリー #3:** 私のポートフォリオには、`projects` の id を持つプロジェクトセクションがあります。
|
||
|
|
|
||
|
|
**ユーザーストーリー #4:** プロジェクトセクションには、プロジェクトを入れるために少なくとも 1 つの `project-tile` クラスの要素があります。
|
||
|
|
|
||
|
|
**ユーザーストーリー #5:** プロジェクトセクションには、少なくとも 1 つのプロジェクトへのリンクが含まれている必要があります。
|
||
|
|
|
||
|
|
**ユーザーストーリー #6:** 私のポートフォリオには、 `navbar` の id を持つナビゲーションバーがあります。
|
||
|
|
|
||
|
|
**ユーザーストーリー #7:** ナビゲーションバーには、クリックするとページ上の異なるセクションに移動できるリンクが少なくとも 1 つあります。
|
||
|
|
|
||
|
|
**ユーザーストーリー #8:** 私のポートフォリオには `profile-link` の id を持つリンクがあり、GitHub または FCC プロフィールを新しいタブで開くことができます。
|
||
|
|
|
||
|
|
**ユーザーストーリー #9:** 私のポートフォリオには、少なくとも 1 つのメディアクエリがあります。
|
||
|
|
|
||
|
|
**ユーザーストーリー #10:** ウェルカムセクションの高さはビューポートの高さと等しくなければなりません。
|
||
|
|
|
||
|
|
**ユーザーストーリー #11:** ナビゲーションバーは常にビューポートの上部に表示されている必要があります。
|
||
|
|
|
||
|
|
<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>この CodePen テンプレートを使用して</a>あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||
|
|
|
||
|
|
完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
|
||
|
|
|
||
|
|
# --solutions--
|
||
|
|
|
||
|
|
```html
|
||
|
|
// solution required
|
||
|
|
```
|