2021 年 Web フロントエンド開発ビデオ チュートリアル、独習 Web フロントエンド開発テクノロジー、フルセットWeb フロントエンド学習ルートメモ
【はじめに】: Web フロントエンドの初心者がよく遭遇する問題、 1. 方法がない 2. リソースがない 3. 経験がなく、どこから始めればよいかわからない Code Brother (DaiMaGe3) も以前は初心者だったので、Web フロントエンド初心者の難しさを理解できます。 Web フロントエンドを自分たちで開発しているので、困っている友達のお役に立てればと思い、慎重に分類した Web 独習教材、経験、完全な Web フロントエンド学習ルートを共有しました。
【大纲】：
1. Web フロントエンド開発を学ぶ必要があるのはなぜですか?
2. Web フロントエンド開発を学べるのは誰ですか?
3. 独学で Web フロントエンド開発を行うメリットは何ですか?
4. Web フロントエンド開発を効率的に学ぶにはどうすればよいですか?
5. 独学Webフロントエンドコースにはどのような実践的なプロジェクト+事例が含まれていますか？
6. Web フロントエンド コース全体のビデオ + ソース コード + メモと写真の一部。
【正文】：
- Web フロントエンド開発を学ぶ理由
- 最大の理由は雇用と給料の良さです
注: モバイル インターネットの高度な発展に伴い、マルチスクリーン インタラクションと複数端末に対応したフレンドリーなインターフェイスが現在のシステムの重要な要件となっており、フロントエンド開発エンジニアは現在不足している人材となっています。市場。
2. 専攻の制限なし：コンピュータ専攻と非コンピュータ専攻が3:4
3. 基礎ゼロの人に最適：職業や性別の制限がなく、基礎がなくても学ぶことができます。
4. テクノロジーを迅速に習得: 4 か月、迅速な学習とシステムの習得
5. 安定したキャリア: すべてのソフトウェア プロジェクトにはフロントエンド開発が必要であり、IT があればフロントエンドも存在します。
2.Web フロントエンド開発を学べるのは誰ですか?
1.在校大学生
2. 技術系新卒者
3. 基礎ゼロから転職したい非就業IT人材
4. 基礎があり転職を考えている現役ITスタッフ
5. スキルアップしたいIT開発者
……
3.独習 Web フロントエンド開発コースに合格するとどのようなメリットがありますか?
- フロントエンド開発 HTML、CSS、JavaScript およびその他のコア技術に熟練し、Vue、React に熟練
- プログラミングにオブジェクト指向の考え方を使用することに習熟し、ビジネス プログラミングと一般的な互換性ソリューションを扱う能力を習得します。
- 労働力開発プロセスのフロントエンドとバックエンドの部門、ネイティブ Ajax リクエストのプロセスと詳細に精通し、共通のクロスドメイン スキルを習得している
- jQuery関連のAPIをベースにWebページの機能を上手に開発できる
- H5 を使用してプロジェクト開発を実装し、ネイティブ JS を使用してモバイル Web ページを開発し、ブートストラップと CSS3 メディア クエリを使用してレスポンシブ Web ページを開発することに熟練しています。
- モジュラー プログラミングに精通しており、Node.js と Express フレームワークを使用して MySQL データベースを追加、削除、変更、クエリすることに精通しています。
- artTemplate テンプレート エンジンのアプリケーションに熟練している
- Cookie、セッション、トークンに基づく永続性と認証に精通している
- フロントエンドとバックエンドの分離開発モデルに精通している
- Webpack プロジェクトのパッケージ化構成プロセスに精通している
- WeChatミニプログラムプロジェクト開発に熟練している
4.Web フロントエンド開発を効率的に学ぶにはどうすればよいですか?
著者の経験によれば、私は次の 8 段階の独学方法に従って、着実に取り組み、学んだ知識を徐々に定着させています。
フェーズ 1: フロントエンドの基本
学ぶ: HTML、CSS、HTML5、CSS3 の基本
習熟：PSD ファイルに基づいた PC 側の静的 Web ページの開発を完了できますが、この段階を学習した後でも、企業の雇用基準を満たすにはまだ達していません。
フェーズ 2: モバイル Web ページの開発
学習: H5C3 高度な Flex スケーラブルなレイアウトのモバイル Web 開発
マスター: モバイル Web ページ、レスポンシブ ページ、クール ページの開発を完了できるようになり、この段階を学習すると企業の雇用基準を満たすことができなくなります。
ステージ 3: JavaScript Web プログラミング
学習: JavaScript の基本構文、WebAPI プログラミング、jQuery の迅速な開発
マスタリー: PC Web ページ、モバイル Web ページ、およびレスポンシブ ページの機能と特殊効果の開発を完了できるようになります。この段階を完了すると、一定の基本的な企業雇用基準を取得しますが、まだジュニアのレベルには達していません。フロントエンド開発エンジニア。
ステージ 4: ノードと Ajax
学習: JavaScript の基本構文、WebAPI プログラミング、jQuery の迅速な開発
マスタリー: 可能
ステージ 4: ノードと Ajax
学習: Ajax + HTTP Git と github の基本的な使用法 ノードの基本 npm + モジュール読み込みメカニズム Express MySQL データベース Web 開発モード、ID 認証 + セッション、jwt
習熟: フロントエンドとバックエンドのデータ相互作用、フロントエンドとバックエンドの分離モデル、および従来のモデルに基づいた開発作業を完了できるようになります。この段階を完了すると、企業の基本的な雇用基準を取得し、次のことができるようになります。ジュニアフロントエンド開発エンジニアのレベルに達する。
阶段五 ： Vue.js 项目实战
学習: webpack Vue-cli3 および Element-UI Vue-cli3 (Vue スキャフォールディング)、Element-UI コンポーネント ライブラリ
Vuex の基礎、[ケース] Vuex ベースの todos ケース [プロジェクト] ソーシャルメディア - Toutiao プロジェクト HR - saas 中間管理プロジェクト
習得: Vue テクノロジー スタック プロジェクトに基づいた開発能力を実現できるようになり、この段階を完了すると、企業の雇用基準を取得し、中級フロントエンド開発エンジニアのレベルに到達できるようになります。
阶段六： 微信小程序
学習: WeChat ミニ プログラムの概要、WeChat ミニ プログラムの構成、WeChat ミニ プログラムのコード構成、WeChat ミニ プログラムのホスティング環境、WeChat ミニ プログラムの共同作業とリリース、WeChat ミニ プログラムの基本、WeChat ミニ プログラムの上級、WeChat ミニ プログラムのデータ リクエストとケース、WeChat ミニ プログラム ページのナビゲーション、WeChat ミニ プログラム ページのイベントとプルアップ ボトミング ケース、WeChat ミニ プログラムのライフ サイクルと wxs
マスター: ネイティブ ミニ プログラム フレームワークと uniapp フレームワークを使用して WeChat ミニ プログラム プロジェクトを開発できるようになり、この段階を完了すると企業の雇用基準を満たし、中級フロントエンド開発エンジニアのレベルに到達できるようになります。
フェーズセブン : React.js プロジェクトの実践
学習: React の基本的な使用法、JSX 構文、React コンポーネントの基本、高度な React コンポーネント、React の原則と最適化、React ルーティング
マスター: React テクノロジー スタックに基づいたプロジェクト開発機能を実現し、共通のコンポーネント ライブラリと連携してプロジェクト内のいくつかの一般的な問題を解決し、フロントエンド開発業界の一般的なニーズを満たすことができます。この段階を完了すると、次の成果が得られます。企業の雇用基準を満たし、中級のフロントエンド開発エンジニアのレベルに到達できること。
ステージ第 8 : 面接ガイダンス + 面接の最初の質問
学習：フロントエンド - 就職面接指導スキル：履歴書の内容、就職活動の内容、面接の内容、仕事の内容、市況、人材の内容、労働心理
マスター: 面接指導 + 就職指導資料 + フロントエンド面接の質問 + 復習を通じて、この段階を完了すると、企業の採用基準が確立され、中級フロントエンド開発エンジニアのレベルに達することができます。
5.独習 Web フロントエンド コースにはどのような実践的なプロジェクトや事例が含まれていますか?
以下の 7 つの特別プロジェクトを学習および実践することで、独学レベルをすぐに向上させ、企業のプロジェクト開発経験を蓄積することができ、独学で将来の職場での昇給の基礎を築くことができます。 DaiMaGe3の注目実践プロジェクトは以下の7つです。
01. Xuecheng.com オンラインプロジェクト
Xuecheng Online のケースはオンライン教育プラットフォームです。この場合、ページ レイアウトには HTML+CSS が使用されます。ホームページには主に Web ページのヘッダー領域、Web ページのバナー領域、コース ナビゲーション、コース リストが含まれます。
02. ピンヨウゴeコマースプロジェクト
Pinyougo e コマース プロジェクトは、JD.com や Taobao に似た B2C e コマース プラットフォームです。このプロジェクトでは、HTML+CSS/CSS3 を使用してページ レイアウトと動的効果を実装しています。主に e コマース ホームページ、一覧ページ、詳細ページの3つのページを切り替えることができます。
03.EChartsデータ可視化プロジェクト
データ視覚化表示プラットフォームです。このプロジェクトはエンタープライズ バックエンドで広く使用されています。プロジェクト内のページ レイアウトは rem+flex+felxible.js を使用して調整されています。プロジェクト内の地図表示、チャートなどはすべて をベースに実装されていますEチャート。
04.ビッグイベント企画
CMS コンテンツ管理システムです. プロジェクトのレイアウトとインタラクションは主に Layui を使用して実装されます. 実装される主な機能には、登録、ログイン、記事の作成、記事の公開、記事の変更、記事カテゴリの管理、記事の削除、ページング、記事のアップロードが含まれます表紙絵、記事データの可視化、パスワードリセット、アバター変更などの機能を搭載。
05. ビッグイベントバックエンドインターフェースプロジェクト
主要なイベントプロジェクト向けにバックエンドインターフェースサービスを提供しています.このプロジェクトは主にExpress+MySQL+cors+bcryptjsなどを使用してバックエンドインターフェース開発を実装しています.プロジェクトは主にログインおよび登録インターフェース開発、パーソナルセンター関連インターフェース開発、および記事カテゴリ管理関連のインターフェイス開発および記事管理関連のインターフェイス開発このプロジェクトを学習することで、バックエンド開発の一般的なプロセスに慣れ、将来の作業でバックエンド担当者とデータをやり取りするための強固な基盤を築くことができます。特定のバックエンド インターフェイス開発機能を備えています。
06. ユーゴーモールプロジェクト
Yougou Mall は小規模プログラムの電子商取引ビジネス プロジェクトであり、このプロジェクトは企業の古典的なビジネス ニーズから始まり、製品分類、製品リスト、製品詳細、ショッピング カート、注文、WeChat 支払い、顧客サービスなどのコア モジュールをカバーします。
07. ハオケレンタルプロジェクト
Haoke レンタル プロジェクトは、現在のフロントエンド React テクノロジー スタックを使用して開発されており、React で最も一般的に使用されているテクノロジーとモバイル シナリオの問題の解決策をカバーしています。React の公式スキャフォールディング ツールによって提供されるワークフローを使用して、プロジェクトを迅速に構築および開発します。 Alibaba の antd を使用します。モバイル コンポーネント ライブラリはページ構造を構築し、フロントエンド ルーティングとして React-Router-DOM を使用して複雑なページを管理し、Baidu Map API を使用して地理的位置を実装し、地図上の不動産を直接検索します。実用的な機能。
6.Web フロントエンド コースのビデオ + ソース コード + メモと写真の完全なセットの一部。
これは私自身がまとめた学習ルートと経験です。比較的厳密かつ簡潔です。通常、これに従えば、この知識があれば仕事を見つけるのに問題はありません。フロントエンドについて理解できない質問がある場合は、いつでも私に PM してください。