[山地人翻譯-零基礎學前端] 第二篇 零基礎搭建站點須要學習哪些東西？

在開始這趟旅程以前擺在你面前的很大一部分的障礙是在討論編程和web開發話題時拋出的全部的專業術語。這些術語中的一部分是在咱們平常思考、學習和實踐中是不可避免的，然而還有一些只是一些自我膨脹的傢伙經過使用一些深奧的或者學術性的詞彙來描述一些本能夠用一些簡單的詞彙描述的內容。這些術語中有一些是你真的須要瞭解的（好比：HTML標籤，functions函數，scope做用域）還有一些好比像（monads和functors）你大可忽略。咱們會盡可能幫你作區分。可是若是一個詞彙在你學習的時候常常出現或者聽到，那可能就是最佳的時機去了解和掌握它。

下面讓咱們大體看看接下來的這套課程究竟都有些啥。

你會學習到關於如何建立你本身的站點的從前端到後端的全部你須要瞭解的內容。爲了作到這些，你須要去學習幾種"語言"。我在語言上加了引號由於不是全部的都是技術語言，但目前你能夠先這麼理解。從如今開始咱們把他們通通稱做語言。你將要學習的三門語言分別是HTML，CSS和JavaScript。咱們也會使用一些其餘的工具，像命令行和git咱們後面講到這裏再說。

建造房子的比喻

爲啥你須要這三種語言？讓咱們用造一座房子來打一個不太恰當的比喻。爲了造這座房子你須要一些工具（好比你的文本編輯器，你的命令行。）當你擁有了這些工具後，你還須要建造材料：石頭，沙子，水泥，窗戶：你須要把全部這些東西組合起來搭建你的房屋。這咱們這他們就是 HTML（超文本標記語言）。然而這座房子目前還比較簡陋。他尚未塗色和進過任何精心裝修。目前看上去還比較平淡、呆板和無趣。固然你能夠建立一個只使用HTML的站點，是有黑白文字不使用樣式沒有交互。

爲了安排和裝飾讓這座房子更加有用，你須要一些藍圖。說的誇張一些，你能夠把這些藍圖想象成一個規則的集合：2x4磁磚放在這裏，頂蓋放在這，牆壁是藍色，窗戶放在這裏。你定義了一系列的規則，若是一些元素符合這個規則就把這些規則應用上去。若是是9x19的磁磚，就貼在房子的南邊。這些就是你房子的CSS樣式，或者咱們稱之爲層疊樣式表。CSS是一系列規則，它定義了一系列的規則，當你的一個HTML元素符合其中的一條規則，讓後就會把對應的樣式應用到的元素上去。好比你是文章裏的第一個段落，你的字體代銷是25px像素，你的字體顏色是藍色。

好了，到這裏咱們有了一套看起來還挺漂亮的房子。如今，在這個現代化的時代，我但願全部的工具，我想要一大堆智能家居設備。我但願當我把智能汽車開到車庫門口時，車庫門自動打開了，房間裏的電燈自動點亮，恆溫系統自動調控到適宜的溫度，電視也調整到了我喜歡的電視頻道，智能廚具自動開始烹飪美味的晚餐。我要爲個人房子添加這些行爲。我須要在現有的基礎上加上一層行爲。你但願在用戶點擊按鈕的時候彈出一條消息嗎？你但願在頁面上準確的更新你的時鐘嗎？你但願每隔幾秒改變你張氏的圖片嗎？你想要的這些都須要用JavaScript來作。就如全部的智能家居設備，也不是全部的站點都須要JavaScript。有些站點，好比只是作一些信息展現不須要太多的交互（好比HTML裏的點擊的link連接，你就不須要使用JavaScript來實現）。使用JavaScript可讓這些更加容易實現，可是不使用JavaScript讓你更容易去作。

如今，若是我想要定貨送到我家，我須要呼叫某人，可是某人不在個人房間。我須要使用個人智能助理，讓他去打披薩店的電話並讓他們送披薩到我家。在這個例子中披薩店就比如是咱們的（backend server）後臺服務。一個披薩店能夠服務許多房子，它可能只作不多的事情（好比作披薩，沙拉，飲料等等）並把這些交給各式各樣的client客戶。這個地方的客戶 就是用戶的電腦，手機和智能助手，智能手錶，智能烤箱，到底是啥誰知道呢！因此一個服務器能夠服務不少客戶端。在這個例子中咱們只須要關心裝在用戶電腦上或者手機上的瀏覽器（Chrome、Firefox、Edge、Safari等等）。前端代碼（房子的智能化）一般是靠JavaScript。後臺代碼的種類很是之多：Python、Ruby、JavaScript、Java、Go、C#等。驚天咱們只需使用一種語言JavaScript就能夠搞定前端和後端，可是你仍是須要知道對於後端你可使用不一樣的語言。

小結

1.HTML是結構——它包含了所有的文字，文字中的各類圖片，它一般都是組合在一塊兒的。就像你房裏裏的石膏板，HTML作的不外乎是這些事。他依賴於其餘部分來完成造房的事。

2.CSS是藍圖——它的所有所有規則就是定義用什麼樣的顏色，什麼樣的尺寸，字體是啥樣，背景圖是什麼。和HTML不一樣，CSS不作任何事情，它只是給出了元素應該怎麼擺放，以及長啥樣子的一系列的規則。

3.前端（client）客戶端的JavaScript就比如是家裏的智能。他是很酷的預先設定好程序的管家按照你交給他的任務執行。JavaScript能夠改變HTML和CSS來對不一樣的刺激作出響應。

4.後端代碼（咱們任然使用JavaScript）是一個披薩店。他是一個你能夠想他詢問申請東西的地方。或者咱們也能夠發送東西給它，好比你上傳一張新的照片到你的社交媒體帳戶上。一臺服務器能夠服務許多終端，就像一個披薩店服務器不少家庭。

原文: https://btholt.github.io/intro-to-web-dev-v2/overview

若是你也在自學前端，若是在前端學習的過程當中遇到了坎，不論是學習過程當中遇到什麼問題，或者有什麼好的意見和建議想和我交流，歡迎你在文章底部留言，或者添加個人微信。

固然我也爲你準備了一個微信——前端自學交流羣，歡迎你加入咱們自學交流小組。

注意：加個人小夥伴請告訴我你來自掘金，是否要加入到前端自學交流羣

爲保證白天學習的效率，加我好友和想進羣的朋友，我會在中午12點和晚上7點兩個時段統一處理你們的請求。因此若是發現沒有當即迴應，請耐心等待一下。

想學習山地人的更多專題請到 www.idev365.com

• 前往 www.idev365.com

若是你在學習或者工做過程當中遇到什麼技術問題，或者有什麼好的意見或者建議，歡迎和我交流

微信:colin3dmax（ 請備註：你來自掘金 | 是否要加入前端自學交流羣 ）