フロントエンドの学習パス

フロントエンドエンジニアとは？

一般的に、フロントエンド エンジニアは、HTML/CSS/JavaScript などの Web テクノロジーを使用してデザイナーと協力して、仕事でユーザー インターフェイスを実装し、バックエンド エンジニアとデータを接続し、Web アプリケーション開発のポジションを完了します。

開発ツール

デザインソフトウェア

フロントエンドエンジニアの最も重要な仕事は、デザイナーの設計図を切り取ってコードに変換することなので、デザインソフトの基本操作や図面の切り取り方法を学ぶ必要があります。

• Photoshop は最も広く使用されているデザイン ソフトウェアです。それを学ぶ必要があります。
  • フロントエンドエンジニアに必須の PS スキル - 画像のカッティング
• Sketch は軽量かつ強力で、写真を素早く効率的に切り取る、UI デザインのために生まれた Mac アプリです
  • スケッチカットチュートリアル

編集者

労働者が仕事をうまくやりたいなら、まず道具を研ぐ必要があります。利用可能なエディタや IDE は数多くありますが、ここでは最良の 2 つだけをお勧めします。

• Sublime text は、使いやすいさまざまなプラグインを備えた最もセクシーなエディターです
  • 設定と使用方法
• Webstorm は、学生が無料で使用できる強力なフロントエンド開発 IDE です

コード管理

コードを書くことを学ぶだけでなく、コードを管理することも学ばなければなりません。仕事では、コードを常に変更、反復、リファクタリングしなければならない状況に遭遇することがあります。もちろん、バージョン管理ソフトウェアも習得する必要があります。

• Linuxでは、コマンドラインでファイルを開く、移動、コピーするなどの最も基本的な操作を学ぶ必要があります
  • Linux で最もよく使用される 20 のコマンド
  • ブラザー・ニャオの Linux プライベート・クッキング - 基本
• Git はコードを書くときに必ず使用するバージョン管理ソフトウェアです。使い始めたらすぐに習得できます。
  • サルでもわかるGit入門

テストツール

プレビューとデバッグは不可欠です。フロントエンド コードを作成するときは、ほとんどの場合、エディターとブラウザーを切り替えます。

• Chrome 開発ツール Google Chrome 開発ツール。フロントエンド ページをプレビューしてデバッグしたい場合は、ここにアクセスする必要があります

基礎知識

• HTML
  • MDN の HTML を始めましょう
  • HTML 30 分のクイックスタート
• CSS
  • MDN の CSS 入門チュートリアル
  • CSSレイアウトを学ぶ
• JavaScript
  • 初心者のためのJavaScriptチュートリアル
  • MOOC.com の JavaScript 入門
• ウェブ
  • ブラウザに google.com と入力して Enter キーを押すとどうなりますか
  • インターネットプロトコルの概要

中級知識

• HTML5
  • MDN の HTML5 入門チュートリアル
  • NetEase Cloud Classroom で HTML5 を始めましょう
• CSS3
  • 初心者のためのCSS3チュートリアル
  • Gitbook 用 CSS3 チュートリアル
• スタイルガイド
  • Tencent alloteam フロントエンドコード仕様
  • Baidu ecomfe フロントエンド コード仕様
  • Google HTML/CSS スタイルガイド
  • Google JavaScript スタイルガイド
• レスポンシブデザイン
  • レスポンシブデザインガイド
  • アダプティブ Web デザイン - Ruan Yifeng
  • レスポンシブ Web デザインとは何ですか?どうやって進める？
• ウェブアニメーション
  • CSSアニメーション
  • キャンバスアニメーションチュートリアル
  • JavaScriptでアニメーションを作成する方法を学びましょう
• ブートストラップ
  • 初心者向けのブートストラップチュートリアル
  • MOOC.com で Bootstrap で遊んでみましょう
• jQuery
  • 初心者のためのjQueryチュートリアル
  • MOOC jQuery の基本
• アヤックス
  • jQuery Ajax クイック スタート
  • jQuery Ajax 完全分析

高度な知識

• w3c標準
  • Web プラットフォーム ドキュメント
• ECMA6
  • Ruan Yifeng による ECMAScript6 の紹介
• テスト
  
  • FEX フロントエンド自動テスト探索
  • テスト フレームワーク Mocha サンプル チュートリアル
  • Karma と Jasmine による自動単体テスト
• 自動ビルド
  
  • ストリーミング自動構築ツール Gulp
  • フロントエンドエンジニアリング構築ツールfis
  • Webプロジェクト足場生成ツール Yeoman
    • Yeoman と AngularJS を使用して Web アプリケーションを構築する
• モジュール/パッケージ管理
  
  • npm
    • npmの使い方の紹介
    • Node.js開発環境を素早く構築し、npmを高速化します
  • Sea.js
    • 5 分で Sea.js を始めましょう
  • JS が必要
  • ES6モジュール
• プリプロセッサ
  
  • ハムル
    • チュートリアル
    • HTMLコードの略語: EmmetとHaml
  • サス
    • Sass 入門
  • タイプスクリプト
    • TypeScript ハンドブック (中国語版)
• フレームワーク
  • 反応する
    • 入門サンプルチュートリアル
  • ビュー
    • vue.js チュートリアル
  • 角度

サーバー側

• Nodejs
  • Node を始めましょう
  • 7 日間で NodeJS を学ぶ
• モンゴDB
  • NodeJS は MongoDB と対話します

スキルマップ

• StuQ スキルマップ
• フロントエンドの知識構造

オンラインリソース

• 大きなフロントエンドナビゲーション
• フロントエンド関連
• フロントエンドディレクトリ
• フロントエンドのインタビューの質問

オンラインチュートリアル

• 初心者向けチュートリアル
• オタクアカデミーWiki
• Mozilla 開発者ネットワーク
• Treehouse でのフロントエンド Web 開発
• 高度な HTML/CSS のコーディングを学びましょう

オンライン書籍

• フロントエンド開発者ハンドブック
• フロントエンドデータベース
• フロントエンドノートブック

おすすめの本

• 基本
  
  • HTML、CSS、XHTMLについて徹底解説
  • HTML & CSS ウェブサイトのデザインと構築
  • Pro Git 中国語版
  • ニアオ兄弟の Linux プライベートクッキング
• 中級
  
  • まずは HTML5 プログラミング
  • JavaScript の決定版ガイド
  • JavaScript言語の本質
  • JavaScript と jQuery のインタラクティブな Web フロントエンド開発
  • Ajaxをわかりやすく説明します
• 上級者
  
  • JavaScript の高度なプログラミング
  • HTML5 高度なプログラミング
  • CSS の決定版ガイド
  • Node.js の紹介