todo app frontend mentor

フロントエンドメンター-TODOアプリ

いらっしゃいませ！

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

フロントエンドのメンターの課題により、実際のワークフローでスキルを向上させることができます。

この課題を行うには、HTML、CSS、およびJavaScriptを十分に理解する必要があります。

挑戦

あなたの課題は、このTODOアプリを構築し、できるだけデザインに近づけるようにすることです。

好きなツールを使用して、チャレンジを完了するのに役立ちます。したがって、練習したいものがあれば、お気軽にお試しください。

あなたのユーザーはできるはずです：

• デバイスの画面サイズに応じて、アプリの最適なレイアウトを表示します
• ページ上のすべてのインタラクティブな要素については、Hover Statesを参照してください
• リストに新しいTodosを追加します
• トドスを完全にマークします
• リストからtodosを削除します
• すべて/アクティブ/完全なTODOでフィルタリングします
• 完成したすべてをクリアします
• ライトモードとダークモードを切り替えます
• ボーナス：ドラッグアンドドロップして、リストにアイテムを並べ替える

チャレンジに関するサポートが必要ですか？ Slackコミュニティに参加して、 #helpチャンネルで質問します。

すべてを見つける場所

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

デザインはJPG静的形式です。これはfont-size 、 padding 、 marginなどのスタイルに最善の判断を使用する必要があることを意味します。これは、間隔とサイズの違いを知覚するために目を訓練するのに役立つはずです。

設計ファイル（Sketch＆Figmaバージョンを提供します）が必要な場合は、Proメンバーとしてサブスクライブできるデザインをさらに詳しく調べます。

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

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

あなたのプロジェクトを構築します

快適に感じるワークフローを自由に使用してください。以下は推奨されるプロセスですが、これらの手順に従う必要があるとは感じないでください。

1. GitHubの公開リポジトリとしてプロジェクトを初期化します。これにより、ヘルプが必要な場合は、コードをコミュニティと簡単に共有できます。これを行う方法がわからない場合は、このトライGITリソースを読んでください。
2. リポジトリを構成して、コードをURLに公開します。これは、プロジェクトのURLをリポジトリと共有できるため、チャレンジ中にヘルプが必要な場合にも便利です。これを行うには多くの方法がありますが、Vercelを使用することをお勧めします。以下にVercelを使用して、プロジェクトの展開に関する詳細情報があります。
3. デザインを調べて、プロジェクトにどのように取り組むかを計画し始めてください。このステップは、再利用可能なスタイルを作成するために作成できるCSSクラスで先を行くのに役立つために重要です。
4. スタイルを追加する前に、HTMLでコンテンツを構成します。最初にHTMLを書くことは、よく構成されたコンテンツの作成に注意を向けるのに役立ちます。
5. font-familyやfont-sizeなどの一般的なコンテンツスタイルを含む、プロジェクトのベーススタイルを書きます。
6. ページの上部にスタイルの追加を開始し、作業します。あなたが取り組んでいるエリアを完了したことに満足したら、次のセクションに移動してください。

プロジェクトの展開

上記のように、プロジェクトを無料でホストする方法はいくつかあります。 Vercelは素晴らしいサービスであり、非常に簡単なセットアップであるため、使用することをお勧めします。 vercelを使用したい場合は、次の手順をいくつか紹介します。

1. Vercelにサインアップしてオンボーディングフローを通過し、GitHub統合にVercelを使用してGitHubアカウントが接続されるようにします。
2. 「gitリポジトリから」ボタンを使用して、展開するプロジェクトを選択して、プロジェクトを「インポートプロジェクト」ページからvercelに接続します。
3. 接続すると、 git pushたびにVercelが新しい展開を作成し、展開URLがダッシュボードに表示されます。また、URLを使用して展開ごとに電子メールを受信します。

ソリューションを共有します

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

1. 他のユーザーがサイトでソリューションを表示できるように、プラットフォームに送信します。これを支援するための「ソリューションを提出するための完全なガイド」を次に示します。
2. Slackコミュニティの＃完成したプロジェクトチャネルでソリューションページを共有します。
3. @frontendmentorをツイートし、ツイートのリポジトリとライブURLを含む@frontendmentorに言及します。私たちはあなたが構築したものを見て、それを共有するのに役立ちたいです。

フィードバックを与える

フィードバックはいつでも大歓迎なので、この課題に何かを与えるものがある場合は、hi [at] frontendmentor [dot] ioにメールしてください。

この課題は完全に無料です。練習に役立つと思う人と共有してください。

楽しい建物を！

コミュニティスポンサー

コミュニティスポンサーに大いに感謝します！

• Zero -to Masteryは、Web開発のすべてのための信じられないほどの学習リソースです。 Andrei Neagoieが率いるこのコースは、非常に高品質のコンテンツであり、幅広い需要のあるスキルをカバーしています。
• Diversify Techは、テクノロジーの過小評価されている人々にとって素晴らしいリソースです。このサイトには、新しい機会を求めている人のための求人リストがあります。リソースセクションには、飛び込むための便利なリンクもあります！
• TripleByteは、新しい役割を探しているなら、本当に素晴らしい製品です。これは、機密クイズを受講できる無料のサービスです。あなたの結果に基づいて、会社は彼らの空いている役割のためにあなたを売り込みます！