プロジェクトを構築してより優れたフロントエンド開発者になる方法(アイデアを含む)

フロントエンド開発者としての成長を早急に追跡したい場合は、実際の開発プロジェクトを行うことに勝るものはありません。

真実は、世界中のすべてのチュートリアルとコースを見ることができるということですが、アプリケーションと練習がなければ、実際のプロジェクトで作業するために必要なスキルを実際に学ぶことはできません。

クライアントプロジェクトには、ステップバイステップの説明が付属していません。そうしないと、クライアントプロジェクトにユーザーがまったく必要ないためです。既成概念にとらわれずに考え、解決策を見つけ、妥協し、フィニッシュラインへの道を切り開く必要があります。

これらのスキルを学ぶための最良の方法は、いくつかのフロントエンド開発者プロジェクトを実行し、その過程で学ぶことです。そして最良の部分は?これらのプロジェクトは自分で行うことができるため、開始するのにクライアントも必要ありません。

パーソナルフロントエンド開発プロジェクトの選び方

あなたのスキルレベルを覚えておいてください

特に、物事が困難になりすぎたときにモチベーションを失うタイプの場合は、スキルレベルに対して高度すぎるプロジェクトを選択しないでください。

ただし、ここでの目標はフロントエンド開発の習得を支援することであるため、現在のスキルレベルを超えても実行可能なプロジェクトを選択することを忘れないでください。

たとえば、最近HTMLとCSSを学んだ場合は、JavaScriptを学んでレベルアップするときが来ました。

個人的な問題や気になる問題を解決する

また、プロジェクトが自分の問題を解決したり、自分の欲求を満たしたりすれば、プロジェクトを楽しんで固執する可能性が高くなります。

Facebookのニュースフィードをスクロールしているときに常に時間を忘れたり、魅力的なYouTubeサムネイルを自動的に生成できるWebサイトが必要な場合があります。

テクノロジーで解決できる個人的な問題を考えて、そこから始めましょう。この記事の提案は、出発点としてのみ意図されています。あなたがそれをあなたのユニークなひねりを加えるために変えるならば、それははるかに良いでしょう。

4つの楽しいフロントエンド開発プロジェクト

Webサイトのクローンを作成します。

学ぶスキル:HTML、CSS、JavaScript、および/またはブートストラップ。

Webサイトのクローンを作成することは、Webサイトがどのように構築されているかを調べ、ページ構造、色、フォント、メディア、テーブルなどの基本を学ぶための優れた方法です。オリジナルを複製するために、できるだけ詳細に調べてください。

気に入ったウェブサイトを選択して、自分でクローンを作成してください。ソースコードを最大限に活用するために、ソースコードをできるだけ見ないでください。

Googleのクローン作成は、実際にはコーディングワークショップの学生向けのThinkfulの演習の1つです。Thinkfulは、Web開発ブートキャンプを含むテクノロジーコースを提供する教育会社です。

この演習に従って、KarmaWiFiと呼ばれるアプリのランディングページのクローンを作成することもできます。Thinkfulのメンターの1人であるKyleKoskiによって作成され、HTMLとCSSを使用しています。

Webサイトのクローンを作成することの良い点は、Webサイトの複雑さのレベルを選択できることです。始めたばかりの場合は、HTMLとCSSのみを必要とする単純なWebサイトから始めるのがよいでしょう。より高度な場合は、JavaScriptまたはReactを必要とするWebサイトを選択してください。

JavaScriptクイズゲームを作成します。

学ぶスキル:JavaScript

JavaScriptは、インタラクティブなWebページを作成できるプログラミング言語です。これは、メニュー、ビデオプレーヤー、アニメーション、インタラクティブマップ、さらにはブラウザ内ゲームなどのレスポンシブ要素を作成するときに使用する言語です。

ただし、先に進む前に、クイズを作成する理由を知っておくことが重要です。

それは楽しさとゲーム以上のものです。クイズは実際にコンテンツマーケティングツールとして人気を集めています。このようなものを見たことがありますか?

クイズはインタラクティブであるため、素晴らしいマーケティングツールです。コンテンツマーケティングインスティテュートの世論調査によると、マーケターの81%が、インタラクティブコンテンツ(ユーザーの参加が必要なあらゆる種類のコンテンツ)が静的コンテンツよりも効果的に注目を集めることに同意しています。

このため、クイズはさまざまなマーケティング目的で使用されます。左のような簡単なクイズは、Webサイトへのトラフィックを増やすために使用されます。一部のマーケターは、クイズを使用してリードを認定し、リードをセグメント化し、エンゲージメントを高めます。

これを説明しているのは、開発者としての仕事は、見栄えを良くするだけでなく、ユーザーフレンドリーで、クライアントのWebサイトを販売およびマーケティングの目標をより効果的に達成する機能を作成することでもあるためです。

クイズを作成するには、WebDevTrickおよびSitePointからJavaScriptクイズを作成するためのこれらのチュートリアルを確認してください。JSクイズは次のようになります。

独自のモバイルQRリーダーを作成します。

学ぶスキル:JavaScript

バーコードとQRコードは私たちの買い物の仕方を変えました。スマートフォンで商品をスキャンし、価格や購入場所など、さまざまな情報を見つけることができるようになりました。

また、アクティベーションコードやモデル番号など、Webサイトに長いコードを入力する必要がないため、ショッピング体験が簡単で手間がかかりません。

他の人の考えとは異なり、QRコードをスキャンするためにネイティブの電話アプリは必要ありません。

カメラ付きのスマートデバイスで実行されているWebサイトでうまくいく可能性があります。

このガイドでは、独自のQRコードリーダーを作成する手順を説明します。

HTMLとJavaScriptを使用しますが、最も重要な部分は、QRコードを解釈できるJSライブラリを使用することです。幸いなことに、この目的のために優れたライブラリがたくさんあるので、最初から作成する必要はありません。

天気アプリを作成します。

学ぶスキル:Angular 8

Angularは、ReactやVue.jsと並んで最も人気のある3つのフロントエンド開発フレームワークの1つです。これは通常、フォームベースのアプリ(アカウントを作成するためにサインアップする必要がある)の構築に使用されますが、ゲームや仮想現実要素を備えたアプリの構築にも使用できます。

Mediumには、Angular 8(Angularの最新バージョン)を使用して美しい天気アプリを作成する方法を初心者に教える、非常に詳細なステップバイステップのチュートリアルがあります。天気アプリは次のようになります。

このアプリは、見事なイラストとシンプルなインターフェースを備えた、すっきりとしたミニマリストデザインが特徴です。また、気の利いたライトモードとダークモードの機能があり、さらにフレアを加えます。

このプロジェクトの優れている点は、使いやすくレスポンシブなアプリをゼロから構築することがどのようなものかを実感できることです。Node.jsとAngularCLIのインストールから、LightHouseを使用したコードのテストまですべてを学びます。

チュートリアルの作成者は明らかに独自のデザイン設定を挿入しましたが、独自のスタイルを追加して、必要に応じてクリエイティブにすることができます。CSSのスタイリングやアニメーションをいじったり、独自のロゴ、アイコン、その他のデザイン素材を使用したりすることもできます。

これを正しく行うと、ポートフォリオに印象的な天気アプリが追加されます。

ここからチュートリアルにアクセスできます。

このチュートリアルは初心者向けですが、Angularに少し慣れている必要があります。Angularを学びたい場合は、Angular.ioから始めるのが最適です。

独自のポートフォリオWebサイトを設計およびコーディングします。

典型的なプロジェクトでは、Webサイトの外観についてショットを呼び出すWebデザイナーと一緒に作業する可能性があります。

デザインと開発は間違いなく2つの異なる分野ですが、Webデザインを理解することで、武器に別のスキルセットが追加されるだけでなく、フリーランサーとして単独で設計から展開までのプロジェクトに取り組むことを決定した場合にも備えられます。

独自のポートフォリオWebサイトを設計およびコーディングすることで、芸術的側面と技術的側面を同時に紹介する自由が得られます。

最初のステップは、メッセージやブランディングについて考えることです。あなたのコアサービスは何ですか、あなたは誰にサービスを提供したいですか、そしてなぜ彼らはあなたを選ぶべきですか?(ブランディングについて詳しくは、こちらをご覧ください。)

2つ目は、レイアウト、色、タイポグラフィを詳細に説明するモックデザインを作成することです。

また、テーマを考えてください。ミニマリストですか、それとも大音量でファンキーですか?モノクロですか、それとも大胆な色を使いますか?次に、必要なページのリストを作成します。これには、多くの場合、連絡先ページ、いくつかのブログ投稿、自己紹介ページ、および利用規約ページが含まれます。

第三に、それをコーディングしてください!最新のCSSを使用して、サイトのレイアウト、アニメーションの追加、高品質の画像の追加などを行います。ここでは空が限界です。ポートフォリオWebサイトは自分のものなので、好きなことを行うことができます。

フロントエンド開発はどこで練習できますか?

フロントエンド開発を実践する最善の方法は、実際のアプリ広告Webサイトを自分で構築することですが、行き詰まったり、何かについて意見が必要になったときに、ヒントを得たり、チュートリアルにアクセスしたり、サポートを受けたりするための場所があるのは素晴らしいことです。

これらは、フロントエンド開発を実践しているときに助けを得るのに最適な場所です。

  1. freeCodeCamp.org –これは、Web開発理論、言語、およびベストプラクティスに関する無料のチュートリアルでいっぱいのWebサイトです。あなたの質問を助けることができる素晴らしいコミュニティもここにあります。
  2. 最初から最新のHTMLとCSS–これはBradTraversyによるUdemyコースです。役立つ情報が満載で、これらの言語を使い始めるために必要なすべてを実際に教えることができます。
  3. Frontendmentor.io –スキルセットを開発するために暇なときにできる、一口サイズの無料およびプレミアムの「チャレンジ」をここで見つけることができます。挑戦の難しさは「ジュニア」から「アドバンス」まで多岐にわたります。ここにある課題の例を次に示します。

共有したいリソースは他にもありますが、長すぎないように、このリンクをチェックして、推奨されるコースの完全なリストを確認してください。

これらは、今日試すことができる5つの楽しいフロントエンド開発プロジェクトです。繰り返しますが、これらは出発点として意図されています。あなたの個人的なタッチを少し加えるためにそれをカスタマイズするのは最終的にあなた次第です:)

覚えておいてください、それはすべて練習についてです。スキルセットを向上させるためのものを構築する必要があります。

見るだけで学ぶのではありません。

構築して学ぶ。

行うことによって学びます。

— Kyle Prinsloo(@study_web_dev)2020年6月24日

ハッピーコーディング!

今のところ読んでくれてありがとう、

カイル

その他のヒントについては、Twitterでフォローしてください。