easybank landing page

FrontEnd Mentor -EasyBankランディングページ

いらっしゃいませ！

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

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

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

挑戦

あなたの課題は、このランディングページを構築し、できるだけデザインに近づけることです。

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

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

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

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

すべてを見つける場所

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

デザインはJPG静的形式です。 JPGを使用するとfont-size 、 padding 、 marginなどのスタイルに最善の判断を使用する必要があることがわかります。

デザインファイル（Sketch＆Figmaバージョンを提供する）を詳細に検査したい場合は、Proメンバーとして購読できます。

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

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

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

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

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

プロジェクトの展開

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

• githubページ
• ヴェルセル
• netlify

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

カスタムREADME.mdを作成します

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

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

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

ソリューションを送信します

コミュニティの残りの部分が見るために、プラットフォームにソリューションを送信してください。これを行う方法に関するヒントについては、「ソリューションを提出するための完全なガイド」に従ってください。

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

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

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

1. コミュニティの＃完成したプロジェクトチャネルでソリューションページを共有します。
2. @frontendmentorをツイートし、ツイートのリポジトリやライブURLを含む@frontendmentorに言及します。私たちはあなたが構築したものを見て、それを共有するのに役立ちたいです。
3. LinkedInのような他のソーシャルチャネルでソリューションを共有します。
4. あなたのプロジェクトの構築経験についてのブログ。ワークフロー、技術的な選択、コードを通して話すことについて書くことは、学んだことを強化する素晴らしい方法です。書くのに最適なプラットフォームは、dev.to、hashnode、およびcodenewbieです。

プラットフォームで送信したら、ソリューションを共有するのに役立つテンプレートを提供します。フィードバックを探しているときは、それらを編集し、特定の質問を含めてください。

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

私たちのためにフィードバックがありますか？

フィードバックを受けるのが大好きです！私たちは常に課題とプラットフォームを改善しようとしています。したがって、言及したいことがある場合は、hi [at] frontendmentor [dot] ioにメールしてください。

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

楽しい建物を！