5.4 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d78b0367417b2b2512b05 | テクニカルドキュメントページを作成する | 3 | 301146 | build-a-technical-documentation-page |
--description--
目標: こちら https://codepen.io/freeCodeCamp/full/NdrKKL と同様の機能を持つ CodePen.io アプリを構築します。
以下のユーザーストーリーを満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 ハッピーコーディング！
ユーザーストーリー #1: id="main-doc" を持ち、ページのメインコンテンツ (テクニカルドキュメント) を含む main 要素があります。
ユーザーストーリー #2: #main-doc 要素内に、それぞれのクラスが main-section である複数の section 要素があります。 最低でも 5 個必要です。
ユーザーストーリー #3: 各 .main-section 内の最初の要素は、そのセクションの主なトピックを説明するテキストを含む header 要素でなければなりません。
ユーザーストーリー #4: クラスが main-section の各 section 要素は、それぞれの header のテキストに対応する id も持つ必要があります。 すべてのスペースはアンダースコアに置き換える必要があります (例: "JavaScript and Java" ヘッダーを含む section には対応する id="JavaScript_and_Java" が必要です)。
ユーザーストーリー #5: .main-section 要素は少なくとも (それぞれではなく) 合計で 10 個の p 要素を含む必要があります。
ユーザーストーリー #6: .main-section 要素は少なくとも (それぞれではなく) 合計で 5 個の code 要素を含む必要があります。
ユーザーストーリー #7: .main-section 要素は少なくとも (それぞれではなく) 合計で 5 個の li 要素を含む必要があります。
ユーザーストーリー #8: id="navbar" を持つ nav 要素があります。
ユーザーストーリー #9: navbar 要素には、テクニカルドキュメントのトピックを説明するテキストを含む header 要素が含まれている必要があります。
ユーザーストーリー #10: さらに、ナビゲーションバーには nav-link のクラスを持つリンク (a) 要素が含まれている必要があります。 これはクラス main-section の各要素ごとに一つ存在する必要があります。
ユーザーストーリー #11: ナビゲーションバーの header 要素は navbar のどのリンク (a) 要素よりも前に置かれなければなりません。
ユーザーストーリー #12: nav-link クラスの各要素には、各 section 内の header テキストに対応するテキストが含まれていなければなりません (例えば、もし "Hello world" セクション / ヘッダーがあるならば、ナビゲーションバーには "Hello world" テキストを含む要素が必要です) 。
ユーザーストーリー #13: ナビゲーションバーの要素をクリックしたとき、ページは main-doc 要素の対応するセクションに移動しなければなりません (例えば、"Hello world" テキストを含む nav-link 要素をクリックしたならば、その id を持ち、対応する header を含む section 要素に移動しなければなりません)。
ユーザーストーリー #14: 通常サイズのデバイス上 (ラップトップ、デスクトップ) では、id="navbar" を持つ要素は画面の左側に表示され、常にユーザーから見える状態にしなければなりません。
ユーザーストーリー #15: 私のテクニカルドキュメントページは、少なくとも 1 つのメディアクエリを使う必要があります。
この CodePen テンプレートを使用してあなたのプロジェクトを構築することができます。Save をクリックすると、あなた用の pen を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
--solutions--
// solution required