美しいフロントエンド開発を通じて影響を与えながら、世界をリードする企業でどのように働きたいですか?
最新のウェブの優れたアーティストには高い需要があります。このガイドでは、開始方法を説明します.
また、ソフトウェアで働く人々は最も報われる個人の一部であるため、この新しいスキルを身につけることを検討することは価値があります。あなたは決して知りません、それは最終的にあなたのためのキャリアになる可能性があります.
このガイドの最初のセクションは、フロントエンド開発に関する差し迫った質問に答えることを目的としています。フロントエンド開発者であることの責任、給与、その他の側面について知っている場合は、2番目の部分をスキップできます。このガイドの2番目のセクションは、リソース、チュートリアル、ヒントに特化しています.
フロントエンド開発とは?
フロントエンドWeb開発とは、HTML、CSS、JavaScriptを使用して独自のWebアプリを作成することです。ウェブサイト、モバイルウェブサイトなどのアプリだけでなく、モバイルアプリや プログレッシブウェブアプリ.
このように考えることもできます。これを含め、閲覧するすべてのWebサイトは何らかの方法でフロントエンド開発者によって構築されています。少なくともクライアント側では.
かつて必要であった広範なツールとフレームワークを、ネイティブ仕様を使用して実行できるようになりました.
フロントエンドはWebサイト開発で最もアクセスしやすいパスの1つですが、最も困難なものの1つになることもあります。.
Webサイトを作成するためのテクノロジーは常に変化しています。つまり、開発者はスキルを最新のプラクティスに定期的に適応させる必要があります。初心者には面倒かもしれませんが、1、2年の堅実な開発プラクティスの後で良くなります.
フロントエンド開発を無料で学べますか?
あなたは絶対にできます!
新しいリソース、チュートリアル、オープンソースプロジェクトの膨大な流入のおかげで、ウェブ開発を学ぶのがずっと簡単になりました.
freeCodeCampのようなプロジェクトは、何百万人もの人々が最初のプログラムのコードを書くのを助けています。そしてその freeCodeCampブログ フロントエンドだけでなく、Web開発の他の側面についても、エキサイティングな記事が満載です。ブックマークする価値がある!
複雑に見えますか？練習すると簡単になります!
このガイドの前提は無料で学習できるようにすることですが、有料コースのメリットを見逃すことはできません.
決まった群衆に対応するスタートアップはたくさんあります。そして、すべての最後に証明書を与える素晴らしいコースプラットフォームをいくつか紹介します。.
フロントエンド開発者の平均給与はいくらですか?
以前の経験を持つフロントエンド開発者は、家に持ち帰ること以上のものを期待できます 年間100,000ドル 米国内に住んでいる場合.
それは悪い数字ではありません!
ジュニア開発者はどこからでも家に持ち帰ることを期待できます 60,000ドル以上.
また、ヨーロッパの給与もかなり妥当なようです。ドイツは 年間平均50,000ドル.
注目に値することは リモートワークの人気 は近年爆発的に増加しています。これは、開発者が全体的な給与を国際基準に等しくしようとしていることを意味します。これが、フロントエンド開発者になることを検討する理由です。!
フロントエンド開発者としての仕事を見つける方法?
技術的には、仕事は最後に語るべきことです。まず、スキルを蓄積してから、潜在的な機会について考える必要があります。ただし、この投稿はガイドとして構成されているため、いつでも戻ってこのセクションを参照して確認できます。.
リモートの仕事はかつてないほどの速度で成長しています。結局のところ、自宅で仕事をしたり、ビーチから直接仕事をしたりするのが嫌いな人は?
以下は、フロントエンド開発者に最も人気のある求人掲示板のリストです。
- Authentic Jobs
- GitHubジョブ
- フロントエンド開発者の仕事
- CSSトリックジョブボード
- CodePen Jobs Board
- スタックオーバーフロージョブ
- RemoteOK
- リモートフレンドリーなスタートアップ
- 働く遊牧民
- Jobspresso
- ハッカーニュース採用
これは、次のフロントエンドの仕事を見つけるための推奨事項を提供するサイトのやや要約されたリストです。あなたが持っている他の代替案は、それを収益性のあるものにすることを期待して個人的なプロジェクトに取り組むか、フリーランスのギグをすることにあなたの時間を費やすことです.
リソース：どこから始めるか.
以下のリソースはすべて、開始に関するものです。この点については、かなり直線的なアプローチを取っています。そして、そこには膨大な量のリソースがあるという単純な理由で.
すぐに始められるように、私たちの焦点は、最新のワークフローに組み込まれているプラットフォームとフロントエンドツールにあります。その結果、現代の開発者のワークフローを管理するツールを理解しながら、基本から中間のコーディング構文を学ぶことができます.
このガイドの第2部にあるコースとチュートリアルの準備ができるので、これらのリソースに時間をかけることを強くお勧めします。.
Codecademy
コーディング方法を学ぶためのリソースを探すのに数分さえ費やすなら、Codecademyは間違いなく最初のヒットの1つになるはずです。このコード学習プラットフォームはよく知られており、7年間で1億人以上の人々にサービスを提供しています.
当時、Codecademyはダイナミックでインタラクティブなコーディングインターフェイスを備えており、非常に革新的でした。そして多くの人が同じ道を歩みましたが、Codecademyは一貫した実績を維持しています.
最近では、完了時に証明書を取得することができ、多くの人がこの証明書を使用して、 トップレベルのスタートアップ;ジュニア開発者として.
その間、 Codecademyでは不十分であるという主張.
経験豊富な開発者の観点から見ると、確かに、このプラットフォームは単純すぎるかもしれません。ただし、フロントエンド開発についてのみ学習している場合は、リアルタイムの結果をステップバイステップで説明することほど満足できるものはありません。.
Codecademyは、HTML5、CSS3、SASS、Python、JavaScript、Ruby、SQL、およびJavaのクラスを提供します.
CSSレイアウトを学ぶ
フロントエンド開発者は、レイアウトの操作にかなりの時間を費やすことになります。レイアウトは、Webサイトを構成するキャンバスです。このブログのテキストは、より大きなコンテナの一部である行内に配置されています.
そしてそれはすべてのウェブページのデザインに当てはまります。 Learn CSS Layoutを使用すると、コンテナーと行がどのように機能するか、またコンテンツを必要な場所に正確に配置する方法についての基本的な理解を得ることができます.
探索できる追加のツールは Flexbox Froggy ために フレックスボックス 基本と グリッドガーデン ために グリッド それぞれの基礎.
レイアウトは把握しておくべき非常に重要なトピックなので、レイアウトエクスペリエンスについて深く掘り下げて数時間を過ごしてください。学ぶための最良の方法は練習を通して.
ブートストラップ
レイアウトの仕組みを理解したら、具体的な実験を行います。もちろん、最初のプロジェクトとしてカスタムUIを開発することもできますが、続行することを奨励する以上のものからあなたを怖がらせる可能性があります.
したがって、1つまたは2つのフレームワークについて学ぶ必要があります。フレームワークは、あらゆる種類のWeb開発を始めるための簡単な方法です。初日からインタラクティブなウェブサイトの構築を開始するためのツールとドキュメントが提供されます。そして、これを行うのに最も良い方法の1つはブートストラップです。.
世界で最も人気のあるフロントエンドコンポーネントライブラリを使用して、レスポンシブなモバイルファーストプロジェクトをウェブ上に構築します。 Bootstrapは、HTML、CSS、JSで開発するためのオープンソースのツールキットです。.
ブートストラップはすべてのWebで頻繁に使用されており、間違いなく、世界で最も人気のあるフロントエンドフレームワークの1つです。.
一体、あなたが毎日アクセスするサイトのかなりの割合がいくつかのブートストラップ機能を使用しています.
Bootstrapの素晴らしい点の1つは どれだけ早く始めることができますか. ドキュメントページには、例と使用例がたくさんあります。そして何よりも、Bootstrapsレイアウトシステムはレスポンシブデザインを念頭に置いて設計されています。つまり、Bootstrapベースのサイトは自動的にモバイルフレンドリーになります.
また、Bootstrapが提供する機能が気に入った場合は、人気のあるフロントエンドフレームワークに関する追加リソースを以下に示します。
- あなたが知っておくべき10のJavaScriptフレームワーク
- フロントエンド開発者に最適な10のCSSフレームワーク
フロントエンドチェックリスト
ウェブサイトの構築に使用しているテクノロジーにもかかわらず、特定の規則や規制に従う必要があります。もちろん、そのような要件を無視することを選択できますが、ユーザーエクスペリエンスとデジタル互換性を犠牲にして.
フロントエンドチェックリストは、ウェブサイトのURLを提供できる優れたツールであり、プラットフォームはフロントエンド開発のベストプラクティスについてサイトを監査します。これには、画像を最適化したかどうか、またはSEOのベストプラクティスに従っているかどうかの確認が含まれます.
プロのウェブサイトやアプリの最新の要件を理解するのに必要な限り、このアプリを試して使用してください。その上、邪魔にならないスムーズなUIは、.
Vue.js
Vue.jsは、小さなアイデア/コンセプトが世界で最も認知されているものの1つに成長する方法を示す優れた例です。実際、Vue.jsはフロントエンドコミュニティに嵐を巻き起こしました.
このプログレッシブフレームワークは、開発者がHTMLおよびJavaScriptを使用して素晴らしいユーザーインターフェイスを構築するのに役立ちます.
フレームワークは、コミュニティによって完全にサポートされています—財政面と開発面の両方で.
これは、オープンソースが一体となって優れた成果を生み出す方法の完璧な例です。そして、フロントエンドの開発者として、あなたは オープンソースとそれが重要な理由.
Vue.jsでの非常に推奨される読み取りを以下に示します。
そして最後に重要なことですが、Vue.jsでビルドされたさまざまなプロジェクトをチェックしてください。 Vue.jsショーケース ウェブサイト.
フロントエンドの基礎
これまで見てきたことは、ほとんどが無料でオープンソースでした。必要なのは自分をつかむことです 崇高なテキスト, そして、あなたはフロントエンドの実験への途上にいることができます、そしてあなたは絶対にそうあるべきです！チュートリアルとフレームワークのドキュメントを読むことは、戦いの半分にすぎません.
実際の学習は、テキストエディタとブラウザで行われます。このアプローチの唯一の欠点は、完全に体系的ではないことです。すべて無料モードで操作しているため、自分を鍛える能力によって結果が異なる場合があります.
あなたが投資することを決定しない限り、そして投資によって、私は象徴的な金額を使ってフロントエンドの本を購入することを意味します A Book Apart. これらの人たちは業界で最高の人であり、ベテランのフロントエンド開発者は繰り返し彼らの本を勧めています.
フロントエンドの基本セクションには、SVG、CSS、HTML、JavaScript、Sassに関する本があり、最新のフロントエンドワークフローの出発点として最適です。.
GitHub
GitHubは、あらゆるもののコーディングと開発を行うためのデジタルオフィスです。世界最大のオープンソースプラットフォームであり、世界で最も人気のあるフレームワークとツールの大多数が本拠を置いています.
GitHubを使用すると、プロジェクトをホストし、他の人が彼らの貢献を提出することを歓迎できます。自分で他のプロジェクトに寄稿することもできます.
また、GitHubとGitHubが提供するすべてのものを探索することもできます。たとえば、GitHubには有名なAwesomeリストがあり、特定のフレームワークやテクノロジー向けのチュートリアル、リソース、ツール、その他の膨大なコレクションです。.
例えば., 素晴らしいフロントエンドリスト これには、フロントエンドについて知っておくべき最新の事柄とそれが向かう先に関する最新情報が含まれています。.
スタックオーバーフロー
スタックオーバーフローは、最も厳しいQであることで悪名が高い&世界のプログラミングサイト. そしてそれは本当にそうです.
Stack Overflowのユーザーは、調査されていないか適切に分析されていない軽い質問をしません。これは不快に感じるかもしれませんが、強い目的意識を生み出すのに役立ちます.
ユーザーが質問への回答を送信するたびに、他のユーザーが前に出てその回答に賛成投票できることがわかります。最終的に、ユーザーの質問に完全に答えるいくつかの「検証済み」の回答が得られます。その結果、サイトの階層は明確で一貫したままです.
初心者のフロントエンドデベロッパーは、Stack Overflowを使用して特定のトピックを理解するだけでなく、必要に応じて質問することもできます。ただし、初心者向けのほとんどの場合、数秒で簡潔な答えを見つけることができるはずです。.
チュートリアル & コース：エコシステムを把握する.
最初のセクションは、始めるのに役立つリソースとプラットフォームに完全に専念していました。フロントエンドの開発から何が期待できるかを実際に感じることができるように、リストした各リソースに妥当な時間を費やす必要があります.
すべてを終えたら、チュートリアルとコースに目を向けることができます。これらは、学習に重点を置いたより厳密に編成されたリソースです.
フロントエンド開発は、ツール、フレームワーク、ライブラリ、テストソフトウェアなどのコレクションです。ただし、その範囲の広さに驚かされないでください。!
以下のコースの一部は無料でご利用いただけないことに注意してください。ただし、次の推奨事項は絶対に最優先事項であることをお伝えします.
さらに、フロントエンドマスターなどのプラットフォームは、世界で最も成功している新興企業で使用されているすべてのテクノロジーを素早く習得します。.
この投稿の目的は、フロントエンドの開発を趣味として宣伝することではなく、すべての学習からキャリアを確立できるように、手頃なリソースを提供することです。.
MDN Webドキュメント
MDN（Mozilla Developer Network）は、あなたの知人を何らかの方法で作ります。このWebドキュメンテーションプラットフォームは、Webのしくみを宣伝することに専念しています。ここでは、開発者ツール、Webテクノロジー、およびWeb開発自体について学ぶことができます.
CSSまたはHTMLで特定の項目を検索する場合、多くの場合、Googleおよびその他の検索エンジンで最初の結果として表示されるのはMDNです。ガイド、仕様、および全体的な洞察は、フロントエンドの開発者にとって意味のある方法で構成されています.
edXフロントエンドコース
このガイドの前半で述べたように、厳密なカリキュラムに従うことは、学習および適応するための直線的な方法です。また、コースを開始するには、edXが提供するものを確認する必要があります。修了時に証明書を取得できるだけでなく、好みのペースで学習することもできます.
edXコースは、学生が各コーストピックの基礎を理解するのを支援することに明確に重点を置いて、完全に構造化されています。現時点では、JavaScript、HTML5、CSS3などのテクノロジーを学ぶことができます.
完全なフロントエンド証明書を取得したい場合は、500ドルの少額の投資をする必要がありますが、これにより、コースのインストラクターなどに直接アクセスすることもできます。多くの企業がedXを使用してこの特定のプログラムに従業員を登録しています.
フロントエンドマスター
フロントエンドマスターは、ブートキャンプエクスペリエンスに似ています。このプラットフォームで見つけることができるコースは、長い形式のコンテンツとプロジェクト指向の学習に重点を置いて、非常に詳細です.
ここでは、React、Vue、Angular、Node.jsなどのテクノロジーについて学ぶことができます。制作品質は非常に高品質で、実際のBootcampコースと同様の体験を楽しむことができます.
登録ユーザーとして、あなたは上であなたの進捗状況を追跡することができます 学ぶ ページ。このページは学習の進捗状況を追跡し、各テクノロジーのパーセンテージを個別に表示しますが、スタック全体のパーセンテージも表示します。自分のやる気を維持する楽しい方法です.
最後に重要なこととして、履歴書にフロントエンドマスターコースの修了があったとしても、雇用主に気付かれることはありません。.
エッグヘッド
Eggheadは、上記のプラットフォームと非常に似ていますが、より堅固で凝縮されたレッスンで際立っています。たとえば、「ListViewsを使用してFlutterで動的リストを作成する」レッスンは2分しかありませんが、概念を本当に理解するのに十分な学習資料を提供します.
Eggheadは、フレームワーク、ライブラリ、言語、ツール、プラットフォームに関するチュートリアルとコースを提供しています。モバイル開発について学びたいですか？問題ありません。EggheadにはiOS、Android、その他のプラットフォーム用のコース資料があります.
年間料金はわずか250ドルですが、これにより、サイトにあるすべてのコースとチュートリアルにアクセスできます。各レッスンについて他のコミュニティメンバーと話し合うこともできます。投資する価値がある!
CSSトリック
クリス・コイエ CSSコミュニティの絶対的な伝説です。彼は10年以上CSS-Tricksに追いついただけでなく、の共同創設者でもあります。 CodePen — Web開発者に人気のあるコード共有プラットフォーム.
CSS-Tricksについて信頼できる1つのことは、CSS-Tricksが常に更新されたままであり、ストーリーが現在流行しているトピックとテクノロジーに基づいて公開されていることです。その結果、サイトの作成者の多くが提供するチュートリアルを使用して、スキルセットをすばやく増やすことができます.
つまり、ブックマークを付けて1日に1回確認するのに便利なサイトです。チュートリアル自体から非常に大きな価値を引き出すだけでなく、チュートリアルに付随する推奨事項も取得します.
スコッチ
スコッチは、ウェブ開発における最新の出来事のための場所であるのと同じくらい多くの学習リソースです。 2014年から存在している—サイトは何千もの無料のWeb開発チュートリアルとともに膨大なフォロワーを集めています.
Scotchの作者は、Vue、React、Laravel、Angular、JavaScript、Node.jsなどのテクノロジーに重点を置いています。そして、これらはいくつかの模範的なチュートリアルでもないと思います.
ほとんどの場合、実際の具体的なアプリを作成します。例えば。 TwitterクローンVueとAdonisの作成方法を学びたいですか？問題ありません。無料コースに登録するだけで準備完了です.
素晴らしいサイトで、新規および既存のフロントエンド開発者には十分に推奨できません!
ヒント：闘争がない場合、進歩はありません.
これまでに行ったので、次のヒントのいくつかに身を任せてください。フロントエンドは有利なキャリア選択ですが、それはかなり急な学習曲線を伴い、現在のタイムラインに頭を抱えている間にかなりの頭痛の種を伴います.
それにもかかわらず、あなたが引き付けることができる機会のレベルのために-それは困難な戦いの価値があります!
合理的な範囲で学ぶ.
なぜプログラミングを学ぶのですか？あなたはより良い仕事を得たいですか？クリエイティブなウェブサイトを構築しませんか？それが便利になるので、あなたの理由を理解してください。壁に頭をぶつけているときでも、その数週間、数週間は重宝します。これに価値があるかどうかを疑問視します。.
あなたの部族を見つけます.
志を同じくする個人や、可能であればメンターと少なくともいくつかのつながりを作りたいと思うでしょう。私の古い学校のCS先生からPascalの本を借りに行ったとき、彼は非常に親切で、私が抱えている可能性のある問題について私を助けるという考えに心を開いていました。ローカルコミュニティを見つけるか、オンラインコミュニティの他の開発者を見つけることによって、同様のルートを検討してください。誰かがあなたが見なければならない場所に指を向けると、学ぶのがはるかに簡単になります.
すべてを学ぶことを避ける.
自分のすべてを知る必要があるという負担をかけないでください。フロントエンドに関しては、HTML5とCSS3から始めれば十分です。 JavaScriptはケーキのアイシングに似ているので、膨らむ可能性があるので、アイシングの量に注意してください。基本に慣れたら、新しい領域、トピック、フレームワークを探索します。小さくてコンパクトな学習バイトはここでの鍵です.
詳細については、以下をご覧ください。 Ali Spittelによるこの投稿 新しい開発者向けに25以上のヒントを共有している.
出て行け
何を待ってるの？そこから出て、学習を始めましょう！このガイドで数か月ごとにフロントエンド開発を確認し、新しいアップデートやヒントを確認してください。.
幸運を!
