social media dashboard with theme switcher

フロントエンドメンター - テーマスイッチャーを備えたソーシャルメディアダッシュボード

いらっしゃいませ！

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

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

この課題を行うには、HTML、CSS、およびほんの少しのJavaScriptの基本的な理解が必要です。

挑戦

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

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

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

• デバイスの画面サイズに応じて、サイトの最適なレイアウトを表示します
• ページ上のすべてのインタラクティブな要素については、Hover Statesを参照してください
• 色のテーマを好みに切り替えます

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

すべてを見つける場所

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

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

デザインをより詳細に検査するためにスケッチファイルが必要な場合は、プラットフォーム上のチャレンジページから購入できます。

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

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

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

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

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

プロジェクトの展開

上記のように、プロジェクトを無料でホストする方法はいくつかあります。 Zeitを今すぐ使用することをお勧めします。それは素晴らしいサービスであり、セットアップが非常に簡単であるためです。 ZEITを使用したい場合は、ここにフォローするためのいくつかの手順があります。

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

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

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

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

フィードバックを与える

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

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

楽しい建物を！