time tracking dashboard

フロントエンド メンター - 時間追跡ダッシュボード

いらっしゃいませ！

このフロントエンド コーディングの課題をご覧いただきありがとうございます。

フロントエンド メンター チャレンジは、現実的なプロジェクトを構築することでコーディング スキルを向上させるのに役立ちます。

この課題に取り組むには、HTML、CSS、JavaScript の基本的な理解が必要です。

挑戦

あなたの課題は、このダッシュボードを構築し、できるだけデザインに近づけることです。

チャレンジを完了するために、好きなツールを使用できます。ですので、実践してみたいことがあれば、ぜひ挑戦してみてください。

JSON データの操作を練習したい場合は、アクティビティ用のローカルdata.jsonファイルが提供されます。これは、 .htmlファイル内のコンテンツを使用する代わりに、そこからデータを取得できることを意味します。

ユーザーは次のことができるようにする必要があります。

• デバイスの画面サイズに応じてサイトに最適なレイアウトを表示します
• ページ上のすべてのインタラクティブ要素のホバー状態を確認する
• 毎日、毎週、毎月の統計の表示を切り替える

この挑戦に対するサポートが必要ですか?コミュニティに参加して、 #helpチャンネルで質問してください。

期待される動作

• 前の期間のテキストは、アクティブな時間枠に基づいて変更される必要があります。 Daily の場合は、「Yesterday」(例:「Yesterday - 2hrs」) となります。毎週の場合は、「先週」 (例: 「先週 - 32 時間」) となります。月次の場合は、「先月」と読みます (例: 「先月 - 19 時間」)。

すべてを見つける場所

あなたのタスクは、 /designフォルダー内のデザインにプロジェクトをビルドすることです。デザインのモバイル バージョンとデスクトップ バージョンの両方が見つかります。

デザインは JPG 静的形式です。 JPG を使用する場合はfont-size 、 padding 、 marginなどのスタイルについて最善の判断を下す必要があることを意味します。

デザインファイル (Sketch および Figma バージョンを提供します) を使用してデザインをより詳細に検査したい場合は、PRO メンバーとして購読できます。

必要なアセットはすべて/imagesフォルダーにあります。アセットはすでに最適化されています。

カラー パレットやフォントなど、必要な情報を含むstyle-guide.mdファイルもあります。

プロジェクトを構築する

使いやすいワークフローを自由に使用してください。以下に推奨されるプロセスを示しますが、これらの手順に従う必要はありません。

1. プロジェクトを GitHub 上のパブリック リポジトリとして初期化します。リポジトリを作成すると、サポートが必要な場合にコードをコミュニティと共有することが容易になります。これを行う方法がわからない場合は、この Try Git リソースをよく読んでください。
2. コードを Web アドレスに公開するようにリポジトリを構成します。これは、プロジェクトの URL をリポジトリ URL と共有できるため、チャレンジ中にヘルプが必要な場合にも役立ちます。これを行うにはさまざまな方法がありますが、以下にいくつかの推奨事項を示します。
3. デザインに目を通し、プロジェクトにどのように取り組むかを計画し始めます。このステップは、CSS クラスが再利用可能なスタイルを作成することを事前に検討するのに非常に重要です。
4. スタイルを追加する前に、HTML でコンテンツを構造化します。最初に HTML を作成すると、適切に構造化されたコンテンツの作成に集中できます。
5. font-familyやfont-sizeなどの一般的なコンテンツ スタイルを含む、プロジェクトの基本スタイルを書き出します。
6. ページの上部からスタイルを追加し始めて、下に向かって作業していきます。取り組んでいる領域が完了したことに満足してからのみ、次のセクションに進んでください。

プロジェクトをデプロイする

上で述べたように、プロジェクトを無料でホストする方法はたくさんあります。推奨されるホストは次のとおりです。

• GitHub ページ
• ヴェルセル
• ネットリファイ

これらのソリューションのいずれか、またはその他の信頼できるプロバイダーを使用してサイトをホストできます。推奨される信頼できるホストについて詳しくは、こちらをご覧ください。

カスタムREADME.mdを作成する

このREADME.mdカスタムのもので上書きすることを強くお勧めします。このスターター コードのREADME-template.mdファイル内にテンプレートを提供しました。

テンプレートは、何を追加するかのガイドを提供します。カスタムREADME 、プロジェクトを説明し、学習を振り返るのに役立ちます。テンプレートを自由に編集してください。

テンプレートに情報を追加したら、このファイルを削除し、 README-template.mdファイルの名前をREADME.mdに変更します。これにより、リポジトリの README ファイルとして表示されます。

ソリューションを送信する

ソリューションをプラットフォームに送信して、コミュニティの他のメンバーが確認できるようにします。これを行う方法のヒントについては、「ソリューションを送信するための完全なガイド」に従ってください。

ソリューションに関するフィードバックを探している場合は、送信時に必ず質問することを忘れないでください。質問がより具体的かつ詳細であればあるほど、コミュニティから貴重なフィードバックを得る可能性が高くなります。

ソリューションを共有する

ソリューションを共有できる場所は複数あります。

1. コミュニティの#finished-projectsチャネルでソリューション ページを共有します。
2. @frontendmentor をツイートし、ツイート内にリポジトリとライブ URL を含めて@frontendmentorに言及します。私たちはあなたが構築したものを見て、それを共有するのに協力したいと思っています。
3. LinkedIn などの他のソーシャル チャネルでソリューションを共有します。
4. プロジェクトを構築した経験をブログに書いてください。ワークフロー、技術的な選択について書き、コードについて話すことは、学んだことを強化する素晴らしい方法です。書き込みに最適なプラットフォームは、dev.to、Hashnode、CodeNewbie です。

ソリューションをプラットフォームに送信した後、それを共有するのに役立つテンプレートが提供されています。フィードバックをお探しの場合は、編集して具体的な質問を含めてください。

質問が具体的であればあるほど、コミュニティの他のメンバーがフィードバックをくれる可能性が高くなります。

フィードバックはありますか?

フィードバックをお待ちしております。私たちは常に課題とプラットフォームの改善に努めています。何か言及したいことがあれば、hi[at]frontendmentor[dot]io に電子メールを送ってください。

このチャレンジは完全に無料です。練習に役立つと思われる方と共有してください。

楽しく建築しましょう！