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)、平面設計、網站工程需求,皆可以來信詢問,在關於下方有參考作品。

或是想分享心情、聊聊天、交朋友,可以來秘密通道讓我知道唷。

Email: aaa24295234@gmail.com