フロントエンドメンター - ブログプレビューカード

いらっしゃいませ！ ?

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

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

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

挑戦

あなたの課題は、このブログプレビューカードを構築し、できるだけデザインに近づけることです。

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

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

ページ上のすべてのインタラクティブ要素のホバーとフォーカスの状態を確認する

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

すべてを見つける場所

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

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

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

このプロジェクトに必要なアセットはすべて/assetsフォルダーにあります。画像はすでに正しい画面サイズにエクスポートされ、最適化されています。

このプロジェクトに必要なフォントの可変フォントファイルと静的フォントファイルも含まれています。 Google Fontsにリンクするか、ローカルフォントファイルを使用してフォントを独自にホストするかを選択できます。このプロジェクトに必要のないフォントウェイトの静的フォントファイルは削除したことに注意してください。

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

プロジェクトを構築する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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