フロントエンド開発者向けの実践プロジェクト

公開: 2020-12-17

他のスキルと同様に、フロントエンドの開発には大量の作業が必要です。この大きなタスクに取り組むにはさまざまな方法がありますが、そのいくつかは次のとおりです。

フロントエンド開発者として代理店で働きます。
あなたの家で勉強し、側でプロジェクトを構築してください。
クライアントのフリーランサーとして働きます。

それぞれに長所と短所がありますが、1つは一定のままです。タスクが多様であるほど、進行が速くなります。

この記事では、新しいテクノロジー、アプローチ、そして潜在的にいくつかの「Aha！」を学ぶことができる、あなたが側でそして自分で取り組むことができるいくつかの潜在的なプロジェクトを見ていきます。フロントエンドでのキャリアの瞬間。

以下のすべてのタスクは、特にフロントエンドのポジションに応募する場合に、GitHubプロファイルに含めるのに非常に適したリポジトリです。

注意！以下のすべての例は、実際の製品の設計者によって作成されています。私たちは、あなたがそれらをつかみ、それらをコーディングし、あなたが望むことを何でもすることをあなたに提案していません。これらはすべて、配布したり後で販売したりせずに作業できるUI要素の例です。

1 –コンポーネントUIライブラリ

難易度：簡単-中。

ただし、ここにある他のプロジェクトと同様に、解決する問題によっては、ジュニア開発者とシニア開発者の両方が苦労する可能性があるため、「簡単」に惑わされないでください。複雑なUI要素で構成されておらず、すべてをカプセル化できるため、これを簡単なスケールで配置しました。

ドロップダウン/ボタンに焦点を当てた、次のような既存のデザインを選択できます。

ソース

または、BootstrapやFoundationなどのより一般的なものを使用することもできます。考慮事項：

明確に定義された命名規則。
コンポーネントのプレゼンテーション。
修飾子–ほとんどの人はマイナーな要素を変更するのが好きなので、それを適用する方法を検討してください。例–一次色と二次色が必要です。成功、エラー状態など。
「プラグアンドプレイ」にしてください。あなたの目標は、CSSを書かなくても別の開発者があなたのコードを使用できるようにすることです。基本的なグリッドシステムと組み合わせることもできます。

このようなライブラリの優れたアーキテクチャは簡単なことではありません。キャリアの最初だけでなく、数年後にもこれとまったく同じタスクを試して、学んだことを比較することができます。

2 –複雑なアニメーションUIを実装する

難易度：難しい

このタスクは、洗練されたアニメーションとパフォーマンスがすべてです。しかし、その次に、あまり一般的ではないビジュアルも書き留める必要があります。以下の例を参照してください。

あなたはここで完全なアニメーションを見ることができます。 UIを停止したら、インタラクティブ機能を追加します。ブラウザではなく別のツールで作成されているため、すべてのアニメーションがデザインのように見えるわけではありませんが、それは元のアニメーションに実際に近づくことができないという意味ではありません。もちろん、モーションブラー効果や奇妙な形状の変形はスキップしますが、残りの多くはあなたができることです。全体のキーフレーミングを支援するJSライブラリもあります。

このタスクは、画面を2回入れ替えるだけで、少し短くすることができます。エネルギーがない限り、ここでモバイルビューに取り組む必要はありません。

3 –ゲームUI

難易度：難しい

別のトリッキーなタスク！ほとんどのゲームは、ウェブ上で簡単に翻訳できない非常にユニークなアートスタイルを持っています。物事を難しくするために、ここに別のルールがあります–UIで形状を実現するために画像/ svgを使用しないでください。

出典：StarCraft II

この目的のためにStarCraft2を選びました。ご覧のとおり、実装で考慮しなければならない細かい点がたくさんあります。確かに、ここでは「資産なし」のルールがこれを難しくしています。シェイプ、クリッピング、シャドウマジック、グラデーション、境界線などを操作する必要があります。もちろん、右側のポートレートとマリンの画像は必要です。

物事をより現実的にするために、右上の縦の境界線を次の画像の一番上の行の1つと交換できます。

出典：StarCraft II

小さな画面やモバイルでも見栄えを良くすることができれば、追加のポイントを獲得できます！これは非常に「すごい！」あなたの履歴書にプロジェクトを効果的にします。

4 –クイズゲーム

難易度：中

クイズゲームは、上記のいくつかのデザインと比較して構築するのはそれほど難しくありませんが、それらを機能させるには、いくつかのJSを作成する必要があります。はい、これまでのところ、CSSベースのプロジェクトしかありませんでした。このプロジェクトでは、ユーザーがクリックしたり、正解/不正解を確認したりできるように、インタラクティブにする必要があります。

Dribbbleで「クイズ」を検索すると、たくさんの例が見つかりますが、選ぶのが難しい場合は、次のように入力できます。

ソース

ご覧のとおり、画面は2つしかないため、上記のデザインに基づいて残りの画面を作成する必要があります。

クイズの機能：

正解を数える
Nオプションからの回答
クリックした後、正解/不正解を表示
質問のポップアップを報告する
すべてのクイズに戻り、クイズを選択します
クイズ終了後に最終スコアを表示する

必要に応じて、上記の方法よりも多くのことを実行できます。これは通常、「午後1時」のタイプのプロジェクトです。

5 –ランダムなサイトを選び、印刷用にする

難易度：簡単

印刷用に最適化することには癖があります。特に、サイト上の既存の要素を非表示にしたり、背景をクリーンアップしたり、タイポグラフィを改善したり、改ページを処理したり、ページをフォーマットしたりする場合は特にそうです。

このタスクでは、Web上のサイトを選択し、記事ページを選択して、印刷スタイルの作業を開始できます。このトピックについて書かれた長い記事があるので、あなたを助けるためにたくさんあります。

使用できるWebサイトの例：

アマゾンの販売ページ–重要な情報だけに焦点を当てます。
コース販売ページ–SitePointから。
別のコースページ

あなたが望む他のサイトを自由に選んでください、あなたはこれをあなた自身のために簡単にするか難しいものにすることができます。良い印刷スタイルの例を見たい場合は、https：//www.smashingmagazine.com/を見てください。彼らは本当にそれを釘付けにしました。

6 –複雑なマガジンスタイルのレイアウト

難易度：非常識

これは難しいことは別として、複雑でもあります。また、上記の他のタスクと比較して時間がかかるため、20〜30時間以上解放する必要がある場合があります。

ソース

上記のデザインは、SlavaKornilovによるTheNew YorkTimesの再デザインです。リンクには、ホームページ全体を表示する大画面を含む、彼が行ったすべてのデザインが表示されます。

このプロジェクトでは、コンポーネントの観点から考え、ビューポートの外に出るビデオ（レスポンシブであり続ける必要がある）、タイポグラフィ設定、重複する要素など、いくつかの複雑なUI要素のスタイルを設定する必要があります。

上部の大きなタイトルの背後にある背景を見るだけでも、その実装にはいくつかの注意が必要な部分が隠されています。

彼はたくさんの要素を設計したので、必要に応じてここで1〜2か月以上過ごすことができ、学ぶことがたくさんあります。以下に示すように、バックグラウンドでビデオを作成することもできます。

ソース

これについては、同様に実装できるさまざまなニュース記事に対して行われているアニメーションもあります。ここではモバイルビューも検討する必要があります。

7 –ダッシュボードとそのチャート

難易度：中〜ハード

ダッシュボードはいたるところにあります。そして、デザイナーが夕方に何をすべきかわからないとき、時々彼らはただ別のものをデザインします。理由だけで。
そしてそのおかげで、たくさんの選択肢があります。ある時点で、おそらく実際の製品のために実際のものを構築する必要があります。そして、ロード時に何百万ものアニメーションを備えたこれらの「見栄えの良い」インターフェースの1つを手に入れるのは不運かもしれませんが、それはまったく意味がありません。

そのような日の準備をするために、ここにあなたのための挑戦があります：

次の設計を実装します。

ソース

ここで考慮する必要があること–チャートは本物でなければなりません。それらは実際のデータを使用する必要があり、上部に表示されているもののように見えるようにする必要があります。使用できるライブラリはたくさんあり、おそらく多くの拡張/変更が必要になります。

あなたがそれにいくつかのアニメーションを組み込むことに決めたなら、それはさらに良いかもしれません。これはCVでとても素敵に見えるでしょう？

最終的には：

学び、より良い開発者になるための最良の方法の1つは、単にコードを書き始め、サイトを構築することです。毎日それをしてください、ただトンをコーディングしてください！これは、特にキャリアの最初の3〜4年で役立ちます。

この経験があれば、より上級の役割を簡単に果たすことができます。そこでは、これらすべてのプロジェクトから得られた経験と、その過程で見つけて克服した問題や問題を使用して、意思決定を行い、自分のチームを効果的に導くことができます。