フロントエンドエントリ--- 1日目（紹介と推薦図書やウェブサイト）

画像のキャプション

誰が書きました

あなたがしたいか、単に〜白のフロントエンドのフロントエンドを取得するには、エントリのために書かれたこの記事で
、それは数年前から少し友人のために働いてきた場合には、記事の友人のこのシリーズをスキップすることができます。

なぜ、この記事を書きます

最後に自分自身を与えることにしたこの一連の記事を書くつもりはないまで、ピットを掘りました。自分のフロントエンドプロセス、かなりの数の迂回路を思い出し、私は記事のこのシリーズは、クイックスタートを白回り道を助けることができると思います。

異なる場所

ない日より、日中、仕事に行くために夜に戻って行くだけでなく、他の何かの準備に忙しい、2〜3日以上行うことをしようと、私の友人を許しているので〜
私が理解しやすい、簡潔として、表現するために独自の言語を使用する、非常に複雑な概念がたくさんあるでしょう。
すべては可能な限り、私はあなたに教える必要があります、ポイントに自分のステップピット、有料の注意を話す、で使用される彼らの実際の開発と組み合わされます。
IE6の互換性の問題などのように、需要は非常に少ないされている、あまりにも古いものを話すことはありません。
誰もが学ぶことは、適したサイトを適切な本をお勧めします

少し開始

何を行うには、フロントエンド、フロントエンドとは何ですか

ちょっとちょっとちょっと、簡単な言葉で、あなたは、ボタン、テキスト、画像の上に、このページを表示しているなど、あなたにそれを表示するには、フロントエンドエンジニアです。また、H5ページとして知られているこのページ、一般ページフロントエンドのロジックとページの表示を担当することに言えば、それは、このようなデータベース検索への追加や削除など、バックエンドのデータを提供する責任がある、というように。

学ぶためにどのようなフロントエンドのもの

正直に言うと、多くの、実際の開発では、フロントエンドは（さらに）以下のことを知ることができます。

根拠：HTML + CSS + Javascriptを
フレームワーク：Vueのか、反応したり角度（通常は学校が後で記事が唯一のVueを話すだろう、Vueのを学ぶためにお勧めすることができます）
ストラッピングツール：WebPACKのか一気やイサキ（主流のWebPACK）
NPM：パッケージ管理（ラインで使用される、下に得ることはありません）
gitの：バージョン管理ツール（多人数の共同開発）

それは、ハッハッハことは心配しないで、一つ一つ少し緊張ではありません。

あなたが学ぶ時に実際には基础、あなたは、Webページを開発することができ、また、時間の非常に短いフレームで学ぶことが、マスターしたら、基本的に必要な以下の正式なスキルを開発するための基盤とフレームワークが用意されています其他的东西都是一些工具。

だから、基础最重要。、何が良い学習リソースと何冊読むことを学ぶためにどのような基盤、話を今日。

準備

ダウンロードしてインストールしVSCodeを、VSCodeはIDEと呼ばれる素晴らしいIDEは、コードを書くために使用されるツールです、コードはクラスのハイライトの完了に機能を提供し、とにかく、それが必要なフロントエンドの開発であります！

HTMLやJavaScript、CSSの者との間の関係

この3は、3つの異なる言語を表し、またに、それぞれ三つの異なるファイルに対応して.html, .js, .css終わり。これらの3つの文書は、私たちが見たウェブを形成するために結合します。相辅相成，负责不同的功能。
家のアナロジーを構築しましょう：

内部は家電製品ではない何か、何も持っていなかったので、HTMLは、醜い見て、棚をセットアップし、優れたラフな住宅を建設するだけでなく、ライブの内側できないことです。
CSSは、装飾、きちんと全体ウェブに従事しています。
Javascriptが、そのようなドアを開けると、家のロジックを制御する空気をオンにし、テレビの電源を入れ、そんなに多くすることです。

そう：

HTMLページの基本構造を担当して、ページ上のボタンを持つようにしたい、あなたはHTMLで文書を書く必要がある<button>点我</button> のタグ
、ボタンの背景色を設定すると、ページを造園の責任CSS、background-color: red;
あなたがクリックしたときに何が起こるかを制御するための責任のボタンをクリックしJavascrip、例えば、警告ウィンドウが表示されます。

3つのファイル・リンク

それぞれ、新しいフォルダ、vscodeのオープンを持つフォルダを作成し、で新しいフォルダを作成するday1.html, day1.css, day1.js三つのファイル。
ではday1.html、感嘆符を入力!し、押しtabキー（感嘆符ではなく、中国よりも、英語の感嘆符であることに注意）を、自動的に次のHTMLコードを生成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

そして、<body></body>ボタンのタグの間に追加<button class="my-button">点我</button>ボタンが表示されるように、。
タイトルに以下を追加します<link rel="stylesheet" href="./day1.css">ので、CSSファイルの導入。
</body>トップ行追加され<script src="./day1.js"></script>、JSファイルの導入ように。次のように最終的なコードが得られます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./day1.css">
</head>
<body>
    <button class="my-button">点我</button>
    <script src="./day1.js"></script>
</body>
</html>

王Libianの後ろにCSSやJSそこには何もが、より多くの何か特定を追加けれども我々は、アップ接続これら三つの異なるファイルを置きます。今、あなたはブラウザ開くことができるday1.htmlような外観を

ps: script标签和link标签里的./代表当前目录下，如果想表示上一层目录则要用../

HTML

HTMLエントリは本当にうまく、次の点を理解するために多くの時間を取ることはありません。

HTMLは、ラベルからなるマークアップ言語、すなわち、であり、通常は素子の一対の、例えば<button>点我</button>、フロント及びバックスラッシュボタンがあることに注意してくださいは、代表が閉じられます。
また、それはのような、終了タグを必要としません。<link rel="stylesheet" href="./day1.css">
リンクタグはタグの頭の中にネストされているようなタグは、入れ子にすることができます。
あなたがページのコンテンツを増やしたい場合は、body我々は通常のみbodyタグ内の書き込み何かに必要なので、ラベルに組み込まれた新しいラベルタグ、ヘッドは、ページ上に表示されません。

ポータル推奨：
HTML-英語あなたができる場合は、壁の上に缶、ここでのポイントは、
あなたが中国のように、こちらをクリックした場合HTML-見ます

方法を学ぶことは、チュートリアル、1つのノックずつによると、非常に簡単ですし、効果を見て、おそらく1日は読み取ることができます。

推奨図書：
お勧めできません、ドキュメントを参照するには、このような単純なことが得ることができます。

CSS

でday1.cssに次のコードを書き留め：

.my-button {
    background-color: #add8e6;
}

次に、ブラウザを開いてday1.html、あなたは私たちが水色の背景色ボタンになったでしょう。説明：

HTMLボタンクラスという名前で追加类のクラス名my-button
CSS 希土類元素を選択するセレクタ手段を表すクラスは、マイボタンと呼ばれています。.my-button“.”
#add8e616進数の色法であり、RGB表記で使用することができる、また、赤のようないくつかの色を使用して構築することができます。

推奨ポータル：
CSS-英語チュートリアル
 CSS-中国のチュートリアル

いくつかの点は注意を集中する必要があります。

、下記の画像であるボックスモデルを、知ってもらうには：

そこに多くがありますが、最も一般的にはクラスセレクタとidセレクタと同様に、あるセレクタを知るためにnth-child非常に実用的なセレクタを、あなたはすべてを見つけることができます。
特に注意を払ってまで、ディスプレイの特性を知るためにinline、inline-block、blockの違い
インパクト位置、すなわち知るためにposition財産を、相対配置されているかを知ることを得ます。
少ない初期フロート（float）、多くの人々が間違った場所から、またはフロートをクリアする方法を知りません。
チュートリアルの内容は、あなたには、いくつかの読書をスキップすることができCSS Tutorial、そしてCSS Advancedあなたは、自由な外観の残りの部分を時間を節約することができます。さらに弾性レイアウト（フレックス）では、あなたはまた、非常に、非常に使いやすいものの、スキップすることができます！！！別の章では、後で言ってください。

チュートリアルコンテンツを通して見た場合には、上記のこれらの質問を見に行きます。

ジャバスクリプト

オープンはday1.js、次のコードを追加します。

document.querySelector('.my-button').addEventListener('click', function () {
  alert('Hello, World!!')
})

説明：

document.querySelector('.my-button')HTML表現を見つけ、要素のクラスがマイボタンと呼ばれます
addEventListenerこの要素は、イベントリスナー、イベントの名前は追加して表しclick、そのクリックイベントを。この要素をクリックすると、ポップアップ警告ウィンドウの後ろに匿名関数を呼び出します。

C言語が行ったように、本物の言語のように、Javascriptを話すHTML、CSSへの相対。
それは、ユーザと対話するためにページ全体のロジックを制御しているため、フロントエンドは、コアのコアは、Javascriptのです。

推奨サイト：
javascriptの-英語チュートリアル
 Javascipt-中国のチュートリアル

推奨図書：

「JavaScriptのDOMプログラミング技術（第二版）」この本は、最高の入門書読みやすい、非常に薄いです。
「JavaScriptの高度なプログラミング（第3版）」、リトル・レッドブック伝説の比較的厚い、読むために忍耐。

ps: 推荐新人《Javascript权威指南》这本书的人通通乱棍打死，这本书绝对绝对不适合作为入门书籍，以上两本书就足够入门到较合格的前端开发了

ps: 请先跳过闭包！！难度较大，而且初级开发中用到的地方很少，需要的时候再去深入。适当的退步是为了更快的前进

遂に

オンライン学習プログラムのウェブサイトアムウェイ、また英語では、エントリに適しています。Codecademyは、
以下の方法を学んで要約したものです。

基本的なことについては、私が見るために一つずつ、1つのノックずつ行くためのサイトをお勧めします不需要强记、ルックス、そしてより多くのあなたがより多くの熟練したが、戻ってくる使用します。
見て2冊の本が速く、十分に、より焦点を絞ったエントリーを推奨しながら、別のブックを参照するにはさまざまな段階では、はじめにフロントはちょうど、私の推薦サイトを終えました。
進歩への最速の方法は、常に見てのために解決していない、ノックが続いています。
Googleは最初、本当に私は、質問をすることも理解していない時は、あなたが答えるのに役立ちます、問題が発生しました。

すべての記事とコードはgithubの上での閲覧を容易にするために、同期されます。

HTTPS：//github.com/JJJustCodi ...