May 14, 2019

怎麼學程式? | 前端工程師必備技能

從 0 到 1 的入門教學


文 / 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 的使用

後記


上述了解完,並且練習後,就可以模仿網站刻出樣式,實現功能,可以以我 面試作品 來模仿。

過了幾周完成後,就開始思考自己的作品,並將它實現。如電商、遊戲、地圖應用、部落格等。

文章最後,我放上前一次的 履歷 ,裡頭列舉了相當多的技術,建議你在作品中運用。將來面試時,就能當作學習的證明。




閱讀量




技術文章與合作


寫這些技術分享文,筆者是沒有額外收入的,但每年還是要付域名費用,如果你喜歡我的文章,歡迎 自由贊助 唷!也期待收到你的 回饋

有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:入群組表單邀請

群組為了防止假帳號,不開放用 QR Code 掃描入群,如有需要,可以填寫表單,註記 line ID 告訴我,謝謝。

Line 官方帳號:@184railx

Line 官方帳號 QR Code: