感言 ＋ 前言

我想我認同JS Machine這說法。如果你叫我推介一個網頁給初學者看看，我可能要弄個爬蟲看看有哪個難度適中的網站有讓人類學習到的html及JS源碼。這不禁讓我慶幸，自己是成長在那個仍然各家打開大門的年代

這個年代（現年2019）要從0開始入門Web開發，可說是十分微妙。老套也要講句，這是最壞的年代，也是最好的年代，但終究這是你仍有生命的年代

向好方面說，現在有很多現代工具及基礎設施助你構建一個美倫美喚的網站（應用），
同時，這也意味著你現在需要掌握更好的知識才能夠我著「入門」這兩個字。
從前最歡迎初學者的web開發，也開始變得冷漠，學習曲線也變得越來越拒人千里。但是，如果你挺得過這叫人沮喪的階段，迎來的，會是更錦繡的前程。

那究竟我要學什麼？（序）

你的首要任務，是改變對Browser的觀念。你要忘記他是一個「瀏覽網頁的工具」這一狹隘的想法，取而代之，你要認為他是一個「繪畫內容的畫布」。這一細微意識形態上的改變，會帶給你廣闊的思維空間，而只有這樣，你的腦袋才能容下接下來這知識汪洋。

接下來讓先看看一個基本Frontend（前端/網頁/網頁應用/單頁應用 etc⋯⋯）開發者的基礎工具分類。對你來說，只需高層次的理解，所以，你應該隨著文章看下去，不必立即搜索。（這文章是在推斷了你的水平為前提而寫的，你現在懂與不懂的東西，是在計算之中，所以編排上每一個知識點的出現及需要理解的程度也是安排好的。）

他們使用開發軟件（IDE Integrated Development Environment）進行開發，流行的有
Sublime Text / Atom / VisualStudio Code / WebStorm 等等。這裡會推薦你先使用VisualStudio Code，因其對現在的你是最平衡的選擇。

他們不可避免地要使用Command Line（命令行），通常稱作terminal，一般是Bash shell。你時常在電影裡看到的那個開發者不停敲鍵盤，一大片只有文字的那個東西跑來跑去的介面便是它了。這個也不必操心，接下來用到的時候再慢慢展開。

他們用Command Line是為了安裝及使用Command Line Tools （命令行軟件：沒有介面，只執行命令的軟件）。Command Line Tools是現代開發必不可少的一個重要依賴，沒一個你訪問過的網頁和他脫得了關係。你可能已經聽到過很多什麼NodeJs、NPM、Bower、Sass、Babel、Yoman、Webpack、Gulp等等的詞彙，他們便是命令行工具。大部分命令行工具都是作用在JS的層面，你也先不必深究，到其時自會細述。

你最主要用到的開發語言叫作 Javascript（JS），你可能會也會聽過Typescript，但那是一個需要深思的選擇，也只是一個錦上添花的選項。你最優先要學的始終是Javascript，再來是應用，理論，深入理解，軟件工程的方法論⋯⋯ 遠不是Typescript。

啊，對了，html/css不是開法語言，他們是筆畫（所以編程是畫家

？）。記得Browser是畫布嗎？Browser就是把內容按html的規則展現在世人面前。

總結，對現在的你，最需要記著的是：到最最最後，用戶接觸的是Browser（你所看見的網頁），Browser的視覺傳達是受html/css約束，而一切的開發，便是怎樣組織及更新html/css的內容。而JS便起了這個組織及更改html的中介人的作用。

萬變不離其宗，只要學習有方，肯下苦功，要成為一個稱職的開發者，人人也可做到。

最重要的是，你有決心嗎？

在正式進入正編之前，我先講講接下來的順序。（如果寫下去的話，否則按單自己執藥）

• 1 用Text Edit寫一頁能在Browser 打開的 html
• 2 在同一個頁面加入css （Inline及文件）
• 3 加入業界大佬門準備好的css（Local及Remote）
• 4 超基礎Javascript及混入html之中
• 5 加入業界大佬們準備好的Javascript
• 6 極速飛過JQuery（入門者其實不應直接跳過這階段）
• 7 開始現代化之旅，簡介 NPM及Webpack
• 8 進入20XX，咩係Framework？ Angular React Vue簡介
• 9 用Javascript講進階Programming概念
• 10 用上Framework 入門 （Vue 對初心者學習效果更佳）準備環境名詞解釋
• 11 嘗試接入RESTFUL API何為API 及何為RESTFULJSON格式JWT
• 12 走進Terminal，打開Windows以外的世界應用程式的基本面貌在Terminal裡再看一次
• 13 虛擬一個平行時空 Docker簡說虛擬化簡說DockerFrontend的Docker下限
• 14 慢慢進步接下來的路軟件工程的本質這些開發以外的知識也很重要我應該學習什麼我不應該（優先）學習什麼怎樣看待/使用Framework
• 番外 - 開發者日和

同載於 開發狗仔 www.devdoggy.com