個人的な経験を要約するフロントエンドエントリー方法を組み合わせ、ゼロ基礎から基本的なフロントエンドスキルを得るまでの道、学習方法、および資料を要約します。能力が限られているため、初心者が初心者が迂回を回避できるように、入門用の参考資料としてすべてを保証することはできません。
インターネットの急速な発展と激しい競争に伴い、ユーザーエクスペリエンスが重要な関心事になり、プロのフロントエンドエンジニアが人気の職業になりました。主要企業はフロントエンドエンジニアに大きな需要を抱えており、その要件はますます高くなっています。希少です。個人的には、フロントエンドから始めるのは比較的簡単だと思いますが、慎重に体系的に検討する必要もあります。しっかりと基礎を築いて学習を続けてから、優れたフロントエンドエンジニアになるのは時間の問題です。
知識を学ぶために最も重要なことは興味です。勉強した後でそれが気に入らない場合は、自分で学ぶことを強制するのは苦痛であり、効果は良くないでしょう。結局のところ、これはおそらくこれからのサバイバルスキルでしょう。ただし、インターネット業界の発展に伴い、フロントエンドはWeb開発者が学習する必要がある知識である必要があり、専門のフロントエンドエンジニアが一緒に作業することができない場合があるため、特別なフロントエンドエンジニアとして働いていなくても、基本的なフロントエンドスキルを習得すると作業に便利になります。
必須スキル
エントリー段階で上手くいけそうな基本的なスキルは次のとおりです。
HTML4、HTML5構文、タグ、セマンティクス。
CSS2.1、CSS3仕様、およびHTMLと組み合わせて、さまざまなレイアウトと効果を実現します。
Ecma-262によって定義されたJavaScriptの言語コア、ネイティブクライアントのJavaScript、DOM操作、およびHTML5の新機能。
成熟したクライアントJavaScriptライブラリ、jqueryをお勧めします。
サーバー側の言語：サーバー側の開発経験がある場合は、すでに知っている言語を使用します。サーバー側の開発経験がない場合は、Javaに精通している場合はサーブレットを選択できます。Javaに精通していない場合はPHPを選択できます。単純なログイン登録をサポートするのに十分ですフロントエンドは開発されており、今後も学習を続ける必要があるかもしれませんが、最も基本的な要件は、シンプルな機能シミュレーションの実装です。
上記の基本的なスキルを習得したら、仕事に必要なスキルをすばやく習得できます。
基本的な開発ツール
適切なツールを使用すると、学習効率を効果的に向上させ、知識そのものに焦点を当て、問題が発生したときに問題を迅速に特定して解決できます。
テキストエディター：Sublime Textが推奨され、さまざまなプラグイン、テーマ、設定をサポートし、使いやすい
ブラウザ：Google Chromeを推奨し、すばやく更新して、さまざまなフロントエンド標準に非常に優れたサポートを提供します
デバッグツール：Chrome独自のChrome開発ツールを使用することをお勧めします。DOMの構造とスタイルの表示、コンソールからのデバッグ情報の出力、JavaScriptのデバッグ、ネットワークの表示などを簡単に行うことができます。
補助ツール：PhotoShopの写真編集、色、花火のサイズ、AlloyDesignerの比較サイズ、Chrome開発ツール、
FQツール：ランタン、ヤモリの散歩
学習方法と学習目標
方法：
入門段階で、古典版の中国語版を繰り返し読み、本のすべての例が実装され、効果がブラウザーに表示されます。
ある程度の基礎ができたら、さまざまなチュートリアルやデモをオンラインで検索して、さまざまな関数の実際の使用法や一般的な関数の実装方法を理解できます。
HTML、CSS、JavaScript標準、および包括的な知識ポイントをお読みください。
フロントエンドのNiu Renのブログと記事を読んで、知識の理解を深めてください。
検索エンジンをうまく活用する。
目標：
以前の知識ポイントの重要な概念を記憶し、学習経験に基づいて独自の理解を得ます。
一般的なCSSレイアウト、タブコントロールなどの一般的な機能の実現に精通している 。
エントリーへの道
学習プロセス全体で、HTML CSS JavaScriptは互いに組み合わせる必要のある多くの場所を持っていますが、これは実際の作業にも当てはまります。単純な機能モジュールには、3つの組み合わせが必要です。
実践は学習の重要な部分です。本は知識のポイントに焦点を当てています。例は十分ではない可能性があります。これには、検索エンジンを使用していくつかの簡単なチュートリアルを見つけ、チュートリアルに従って機能を実装する必要があります。ここにいくつかの良いチュートリアルのURLがあります
大手企業のフロントエンド校募集面接質問を模擬質問として、または他者がまとめたフロントエンド面接質問や個人的な面接質問（参考回答あり）として検索できます。
ネイティブJavaScriptは、習得する必要のあるスキルです。ネイティブJavaScriptを習得する上で、jQueryを熟練することをお勧めします。実際の作業に非常に役立ちます。この分野の書籍には、「Learning jQuery」またはjQuery公式Webサイトが含まれます。
https://github.com/アカウントを作成して、通常勉強するさまざまなコードとプロジェクトを保存します。
一定の基礎ができたら、個人のブログを作成し、学習プロセスとソリューションで発生した問題を記録して、自分の参照を容易にし、他の人を助けることができます。
Googleで実用的な英語の情報を検索すると、http：//stackoverflow.com/から質の高い回答が見つかることがよくあります。質問がある場合は、ここで直接検索できます。精力がある場合は、アカウントを登録して他の人の質問に回答すると、個人の能力が大幅に向上します。
古典的な本を読んだ後、前に必要な基本的なスキルのセクションへのリンクを開くことができます。対応する規格を注意深く読んで、知識を十分に理解してください。
改善を続ける
以前のファウンデーションでは、フロントエンドは基本的にエントリですが、現時点では、誰もが心に学習の方向性を持っているかもしれません。前の必須スキルセクションで説明した2つの項目を参照して、開発と学習のためにいくつか選択できます。ここにいくつかの良い側面があります：
Grunt：作業効率を向上させるフロントエンド自動化ツール
少ないcss：優れたCSSプリプロセッサ
ブートストラップ：優れたCSSフレームワーク。デザイナーのいないチームに非常に適しています。
requirejs：AMD標準モジュールローダー、フロントエンドのモジュール式トレンドに不可欠なツール
Node.js：JavaScriptも背景として使用できます
AngularJS：単一ページアプリケーションに適したツール
モバイルWeb開発：スマートフォンの人気により、モバイルトラフィックが徐々にPCを追い抜くようになりました
Javascriptのメモリ管理：SPAの長期的な運用は、メモリリークの問題に注意を払う必要があります
高性能JavaScript（より高速なWebアプリケーションインターフェイスの構築）
Webサイトを高速化するためのベストプラクティス：重要なスキル
言語の基礎
JavaScript：
スコープチェーン、クロージャー、ランタイムコンテキスト、これ
プロトタイプチェーン、継承
NodeJS基本および共通API
CSS：
セレクター
ブラウザの互換性と一般的なハック処理
CSSレイアウトの方法と原則（ボックスモデル、BFC、IFCなど）
CSS 3（アニメーション、グラデーションなど）
HTML：
セマンティックタグ
その他の
コードを入力するだけではなかなかできないことや、インターンシップに参加したときはとても気持ちがいいので、出会い、うまくいかないと感じました。
ビジネスについて考える：私は個人的にこの側面に欠けているので、それを最前線に置き、入力する前にビジネスについてもっと考えます。
コミュニケーションとコミュニケーションのスキル：これは非常に重要です。フロントエンドは、プロジェクトマネージャー、製品、やり取り、バックグラウンドにも対処する必要があります。コミュニケーションが不十分だと、多くの無駄な作業が発生し、プロジェクトが遅れます。
知識管理、時間管理：入力と出力のバランス、出力が最良の入力です。共有、コミュニティへの参加、良好なコミュニケーションの実施、優れた記録の作成をうまく行う方法。
新しいテクノロジーへの欲望、そして挑戦する勇気。
私は6年間フロントエンド開発に携わってきたプログラマーです。フロントエンド分野で数年間混乱し、一連の精巧なビデオとフロントエンド学習のための学習ルートをまとめました。フロントエンド開発に関心のあるパートナーがいる場合、キャリアを切り替えるかどうかや学生だけでなく、仕事は自分のスキルのWebフロントエンドパーティーをアップグレードしたい、と誰もが私のフロントエンド開発のAC秋のスカート参加する大歓迎です：603985993 希望あなたの誠実な交換を！、企業のニーズと同期。友達は内部で学習およびコミュニケーションを行っており、ダニエルが毎日フロントエンドテクノロジーを定期的に説明しています。
プライマー
始めは本をかじることによって行うことができますが、本の多くは古くなっています。本をかじる間、テクノロジーの新しい発展に引き続き注意を払う必要があります。これが私が思う良い本です：
「JavaScript Advanced Programming」：入門書として使用できますが、これも上級書であり、すぐに基礎を吸収し、改善するまで待って、もう一度見に戻ることができます。
「JavaScriptの信頼できるガイド」：開始するにはあまり適していませんが、必要です。理解できない場合は確認してください。非常に役立ちます。
「保守可能なJavaScriptの記述」と：
「Node.js開発ガイド」：Nodejsの入門
「シンプルで簡単なNode.js」：高度なNodejsブック、必須
「JavaScript非同期プログラミング」：JS非同期プログラミングの概念を理解する
「JavaScriptモード」と「JavaScriptデザインモード」：JavaScriptコードモードとデザインモード、JavaScriptへの開発思想、とても良い本
「JavaScriptフレームワークの設計」：ホイールを使用している間は、ホイールがどのように回転するかを知っている必要があります。説明は非常に詳細です。ソースレベルから、フレームワークの各部分の実装を説明します。既存のフレームワークを読むことで、多くのことを学ぶことができます。
「私に考えさせない」：Webデザインの概念、ユーザーの行動の理解、非常に良い
「CSS Zen Garden」：Webデザインの概念とデザインで注意が必要な問題を伝える永続的な本
「ハイパフォーマンスJavaScript」および「ハイパフォーマンスHTML5」：パフォーマンス、パフォーマンスの最適化だけでなく、学習に値する多くの原則レベルの事項も重視する本
「HTML5 Canvas Core Technology」：私が読んでいる本。キャンバスの使用、アニメーションの実現、アニメーションフレームワークの開発に非常に役立ちます。
「HTTPの信頼できるガイド」：HTTPプロトコルが必要です。フロントエンドの開発とデバッグには、しばしば知識が含まれます。
「レスポンシブウェブデザイン」：テクノロジー自体は難しくありません。重要なのは、レスポンシブウェブページのデザインコンセプト、そしてモバイルファーストのアイデアです。
「JavaScript言語の本質」：古い本はJavaScript開発の考え方を広めるための優れた本でもあり、エントリーに非常に適しています。
いくつかの素晴らしいウェブサイト
github：言うことはありません。より多くの人々のソースコードを読み、より多くの独自のソースコードをアップロードし、世界中のダニエルズから学びます
codepen：フロントエンドの美しさを感じるには欠かせない場所です。多くのクールなエフェクトと優れたプラグインがあります。
echojs：新しいjs情報についてすばやく学ぶためのウェブサイト
Stackoverflowとsegmentfault：基本的にすべての質問に答えることができます
google webの基礎：すべての記事は注意深く読むのに適しています
静的ファイル：オープンCDN、使いやすい
iconfont：Aliのベクターアイコンライブラリ、非常に良い、CDNをサポートし、プロジェクトをサポート
html5 rocks：良いウェブサイト、ブラウザの多くの新機能、最先端のテクノロジーはここで見つけることができます
cssトリック：CSSを最大限に活用し、CSSの新機能を理解する方法、ここであなたを満足させることができます
JavaScriptシークレットガーデンJavaScript初心者必見のJavaScript、とても良い
w3cplus：フロントエンドの学習用ウェブサイト。記事の質はかなり良い
ノードスクール：優れたノード学習Webサイト
gitブランチを学ぶ：優れた相互作用を持つgit学習Webサイト
フロントエンドの混乱：フロントエンドの記事が共有され、多くの優れた記事があるコミュニティ
正規表現：正規表現の入門チュートリアル、一見の価値あり
Danielのブログ：それらが多すぎるため、投稿しません。
各種仕様の公式サイト
フロントエンドの位置決め
フロントエンドの位置付けは、どのような種類の知識とスキルを吸収する必要があるかに関係し、技術の世界で特に敏感である必要があるものを決定します。インタラクティブで視覚的な要件を達成するためにフロントエンドがカッティングページにとどまると考える場合、フロントエンドの理解はまだ初期段階です。アリがついに出会ったとき、私は審査官にそのような質問をしました：フロントエンドテクノロジーは日を追うごとに変化し、スコープがますます広くなり、ますます標準になり、触手は遠くまで伸びることができるようです。フロントエンドに適切な配置を与えるにはどうすればよいですか？審査官は私に長い間分析を行った後、それを1つの文にまとめました。つまり、ユーザーとWebサイトのリンカー、ユーザーエクスペリエンスの作成者です（これは当てはまりませんが、基本的にはこれを意味します）。つまり、フロントエンドの最終的な目標は、ユーザーエクスペリエンスを作成し、ユーザーエクスペリエンスを強化し、ユーザーエクスペリエンスに集中することです。インタラクションデザインから始めるか、パフォーマンスの最適化から始めるか、ワークフローを改善してワークフローの効率を向上させるかに関係なく、最終的にはユーザーエクスペリエンスを作成して強化し、最終的にはユーザーエクスペリエンスに反映する必要があります。この要約は非常に合理的だと思います（もちろん、「ユーザーエクスペリエンス」という用語は広すぎます。背景を開発するときのデータ処理プロセスの最適化、全体的なパフォーマンスの向上など、ユーザーにとっても同様です）経験の向上）。
現在、フロントエンドエンジニアは必然的に、ページの切り取り、視覚的な要件の実装、フロントエンドの自動化、画像プログラミング、パフォーマンスの最適化などの相互作用の実装よりも多くの詳細な問題に遭遇し、少し反論することはPHP / JSP / ASP / nodeJs。これまでは、バックエンドテンプレートは通常、バックエンドカテゴリに属していました。現在、フロントエンドアーキテクチャの進化に伴い、バックエンドテンプレートのコードを記述するよう求められる場合があります。バックエンド言語（PHP / Java / C＃など）を使用する必要があります。これは、いわゆるビッグフロントエンドです（ただし、これはフロントエンドの配置に反しません。ビッグフロントエンドは、ユーザーに接触する部分を処理し、ユーザーエクスペリエンスを最適化します）。おそらく最も一般的または最も話題になっているのはノードです。実際、これらのタイプのテクノロジーは選択できます。BatuはPHPをより多く使用し、Aliはノードをより多く使用するとバット3は言いました。
以上がフロントエンドと導出された技術ルートについての私の浅い理解ですが、その全体的なトレンドとトレンドをマスターするためのフィールドを学ぶことは依然として重要です。
