フロントエンドのゼロベース学習のアウトライン_html/css_WEB-ITnose

この記事は、フロントエンドに触れて 2 か月未満で、学ぶべきことがたくさんあるがどこから始めればよいかわからないと感じている学生にのみ役立ちます

フロントエンドで書く

フロントエンドの学習は始めるのが簡単ですが、特定の段階でさらに深く学習するのはより困難です。私は JavaScript プログラマーではないので、簡単な学習目標は

1. CSS 、 CSS3
2. HTML、HTML5
3. JavaScript、ES6
4. HTTP プロトコル
5. パフォーマンスの最適化
6. バックエンド言語
7. より良いコード記述方法
8. オフライン開発とコードリリース

学習パスは比較的長く、初等学習にはいくつかの合理的なパスがあります

1. Markdown を学び、より多くのドキュメントを作成します

2. ブログを書き続けてください。メリットは間違いなくあなたの想像を超えるでしょう。しかし、公共の場所に書かなければなりません。自分でウェブサイトを構築しないでください。そうしないと誰も注目しませんが、徐々に興味を失います

3. 知るGitHub を使用すると、コードがローカルに留まらなくなります。おそらく、これら 2 つのチュートリアルは、Git 構文を理解するのに役立ちます。 git - シンプル ガイド、Pro Git

CSS

多くの初心者は、JavaScript のフロントエンドは難しいと考えています。 CSS と HTML この見方にはある程度の真実があります。CSS と HTML の構文は比較的単純ですが、うまく使えば、多くの JavaScript コードを減らすことができます。

CSS の共通プロパティ、w3school は優れていますが、CSS にはいくつかのコア知識がよく理解されている必要があります

1. position と z-index
2. display
3. float
4. margin

これらには、BFC などの関連する知識ポイントが多数付属します。各属性の値の意味は非常に明確でなければなりません

はたくさんあります。 MDN の基礎知識に関する記事は非常に包括的で、多くの例が掲載されています。詳細な CSS 入門チュートリアルは、学習に非常に適した教材です。

さらに、CSS のレイアウト スキルも習得する必要があります。二重に飛ぶ翼は非常に神秘的に聞こえるので、CSS レイアウトを学ぶには最も簡単なレイアウトから始めるのがよいでしょう

マスター Zhang Xinxu は私たちに振る舞い方を教え、CSS 学習のボトルネックについても話してくれました

CSS3 も理解する必要があります。一般的に使用されるものがいくつかあります

1. 変換
2. アニメーション
3. 角丸、シャドウ
4. ボックス サイズ
5. flex

HTML

HTMLの基礎学習にはW3schoolがおすすめ MDNでHTML5のシーンを見てみよう

モバイル端末ならPC の場合は、互換性のある、または劣化した一般的に使用されるものがいくつかあります。

1. localstorage
2. history
3. placeholder
4. postMessage
5. requestAnimationFrame
6. Canvas & SVG

総合的に理解するならやはり MDN が良いです

JavaScript

インターネット上には JavaScript のチュートリアルがたくさんありますが、初心者向けの基本の方がさらに重要です。そうしないと、チュートリアルをフィルタリングできなくなります。

高度な JavaScript プログラミングを強くお勧めします。怖がらないでください。タイトルどおり、この本は浅いところから深いところまで学べる本です。基礎が不十分な学生にとっては、必ず3回読む価値があります。また、後ろにはより高度なトピックがたくさんあります。この本のヒント

JavaScript の権威あるガイドの方が参考書として適しています

jQuery については多くは語りません

ES6 については、こちらをご覧ください。最近改訂された Ruan Yifeng の ECMAScript 6 Getting Started は、時間に余裕のある学生は Ruan 先生をサポートする本を購入できます

また、Ruan 先生のブログには入門チュートリアルがたくさんありますので、お読みください

HTTP

HTTP これが何であるかを紹介するのは難しいですが、特にエントリー後の上級段階では、インターネットでチュートリアルを直接検索しないことをお勧めします。 2 冊の本

コンピュータ システムについてあまり詳しくない場合は、この分かりやすい図解の HTTP 権威ガイド

も非常に優れていますが、事前に読んでおくとよいでしょう。ちょっと難しい

上級

フロントエンドの世界は無限に広く、上級となると百花繚乱、人気の分野がいくつかあります

前処理

Sass、Less

モジュール化

CommonJS、AMD、CMD

エンジニアリング

gulp、webpack、NodeJS

MVVM とその他のフレームワーク

React、AngularJS、Vue.js

最後に

これに従う いくつかの分野を旅していると、あらゆる種類の知識が次から次へと出てきます、辛抱強く楽しんでください

実際、フロントエンドはすべてのコンピューター作業と同じで、最終的な目標は問題を解決することです。フレームワークや言語に関する不必要な議論にとらわれないでください。 🎜>