4.5 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d78af367417b2b2512b04 | プロダクトのランディングページを作成する | 3 | 301144 | build-a-product-landing-page |
--description--
目標: こちら https://codepen.io/freeCodeCamp/full/RKRbwL と同様の機能を持つ CodePen.io アプリを構築します。
以下のユーザーストーリーを満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 ハッピーコーディング！
ユーザーストーリー #1: 私のプロダクトランディングページには id="header" を持つ header 要素があります。
ユーザーストーリー #2: header 要素内には id="header-img" を持つ画像が表示されます。 会社のロゴがあればここでいいイメージを与えることができるでしょう。
ユーザーストーリー #3: #header 要素内に id="nav-bar" を持つ nav 要素があります。
ユーザーストーリー #4: nav 要素内に少なくとも 3 つのクリック可能な nav-link クラスの要素があります。
ユーザーストーリー #5: nav 要素内の .nav-link ボタンをクリックしたら、ランディングページの対応するセクションに移動します。
ユーザーストーリー #6: id="video" を持つプロダクトの埋め込み動画を見ることができます。
ユーザーストーリー #7: 私のランディングページには id="form" を持つ form 要素があります。
ユーザーストーリー #8: フォーム内には、E メールアドレスが入力可能な id="email" を持つ input フィールドがあります。
ユーザーストーリー #9: #email 入力フィールドには、フィールドの用途をユーザーに知らせるためのプレイスホルダ―テキストが必要です。
ユーザーストーリー #10: #email 入力フィールドは、入力されたテキストがメールアドレスであるか確認するために HTML5 のバリデーションを使用します。
ユーザーストーリー #11: フォーム内には、id="submit" を持つ送信ボタンの input があります。
ユーザーストーリー #12: #submit 要素をクリックすると、email の情報が静的ページに送信されます (このモック URL を使用してください: https://www.freecodecamp.com/email-submit)。
ユーザーストーリー #13: ナビゲーションバーは常にビューポートの上部に表示されている必要があります。
ユーザーストーリー #14: 私のプロダクトランディングページには、少なくとも 1 つのメディアクエリがあります。
ユーザーストーリー #15: 私のプロダクトランディングページは、少なくとも 1 つの CSS フレックスボックスを使用しています。
この CodePen テンプレートを使用してあなたのプロジェクトを構築することができます。Save をクリックすると、あなた用の pen を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
--solutions--
// solution required