これは、Frontend Challenge v24.07.24、CSS Art: Recreation への提出物です。

インスピレーション

私は、ニューヨーク レクリエーショナル クリケット リーグ (NYRCL) のレスポンシブなランディング ページを作成することにインスピレーションを受けました。このアイデアは、すべてのデバイスで見栄えを良くしながら、視覚的に魅力的でインタラクティブなものにすることでした。

デモ

ここでプロジェクトのライブデモをチェックできます: NYRCL ランディング ページ

プロジェクトのコードは私の GitHub リポジトリで見つけることができます:frontend-challenge

旅

このプロジェクトは、最新の Web デザインの実践を適用する素晴らしい機会でした。この旅の重要な側面をいくつか紹介します:

1. 企画・デザイン:

   • まず、ページの構造の概要を説明し、レクリエーション クリケット リーグの活気に満ちた精神を反映する配色を選択しました。

2. 発達：

   • コンテンツの構造化には HTML、スタイル設定と応答性の確保には CSS、インタラクティブ性には JavaScript を使用しました。
   • CSS には、さまざまな画面サイズを処理するためのメディア クエリが含まれており、デバイス間で一貫したエクスペリエンスを保証します。
   • JavaScript を使用してホバー効果とスムーズな遷移を追加し、ユーザー エンゲージメントを強化しました。

3. 課題と学習:

   • 課題の 1 つは、ページが完全に応答するようにすることでした。これを実現するためにフレックスボックスとメディア クエリを使用することについて多くを学びました。
   • もう 1 つの課題は、スムーズなアニメーションとトランジションを作成することであり、CSS プロパティを慎重に調整する必要がありました。

4. 結果：

   • 特に、ページを生き生きとした魅力的なものにするレスポンシブ デザインとインタラクティブな要素を誇りに思っています。

5. 次のステップ：

   • 登録フォームや動的なコンテンツの読み込みなど、さらにインタラクティブな要素を追加する予定です。

結論

このチャレンジに参加することは価値のある経験であり、これらの学習を将来のプロジェクトに適用することを楽しみにしています。この素晴らしい機会を企画していただきありがとうございます!