文 / 西打藍 Siddharam
前言
最初，在開始寫程式之前，我腦海中一片茫然，因為連在哪寫程式都不知道。
後來才了解，原來大家都是在 IDE 上寫，我最初是使用 Atom，而正式工作後發現，幾乎一半以上的工程師都是使用前端 IDE 神器， VS Code。
安裝 VS Code 後，你等於跨出寫程式的第 0 步了。
兩步驟
接下來，你只要完成兩個步驟，就能拿到應徵前端工程師的入場卷，而這兩步是同步進行的。
一是有自己的作品；二是學會市面上的徵才履歷中，前端必會的技術，並且運用在作品上佐證學會。
以人類製造機為例，技術包含：
HTML，畫出人的骨架
CSS，完成皮膚，豐富色彩
JavaScript，讓人可以動作、跳舞
RWD，從任何角度看起來，都很得體好看
AJAX，擁有記憶力，能與腦中資料庫互動
JSON，與資料庫互動的格式，如電子訊號
GitHub，人類作品存放區，還能與人 cowork
Git，存放作品的方法
Dev Tool，在模擬器中檢視作品，測試並微調。
其中，HTML、CSS、JavaScript，需要花你三至五天入門，其他的主題，都只要一天就能入門。接著，我會敘述它們各自需入門的內容。
前端三大支柱，HTML、CSS、JavaScript
我做了示範程式碼 在 Codepen 中，你只需要在 VS Code 新增檔案，開始練習就行了。
HTML：
1. 了解 head，和 body 的區別，各自放置什麼內容。
2. 如何引入 CSS、JavaScript 檔案。
3. 怎麼做 SEO？
4. 有哪些元素會換行，哪些不會？如 div 和 span。
5. 如何使用 class 和 style。
CSS：
1. 了解 margin 和 padding 的區別。前者是元素外，後者是元素內。
2. 知道 position 怎麼用，知道後再來學 flex，flex 是它的進化版，更好用。
3. 其它的都很語意化，看就知道怎麼用，例如 color、font-size，需要用在爬文就好。
4. 學會在 dev tool 開發者工具上調整樣式。
JavaScript：
1. 如何使用 click、mouseover 等事件
2. 如何選擇 HTML 元素並改變樣式
3. 變數 var let const 的區別與使用
4. function 的使用
後記
上述了解完，並且練習後，就可以模仿網站刻出樣式，實現功能，可以以我 面試作品 來模仿。
過了幾周完成後，就開始思考自己的作品，並將它實現。如電商、遊戲、地圖應用、部落格等。
文章最後，我放上前一次的 履歷 ，裡頭列舉了相當多的技術，建議你在作品中運用。將來面試時，就能當作學習的證明。
閱讀量次
聯絡與合作
訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com