欣迪Avatar

上篇沒講完的技能樹。這繼續說明。

再次附上圖片出處:
https://github.com/kamranahmedse/developer-roadmap

參考這位大大的圖片,紫色勾勾是必學的技能。

如果你是正考慮要學習寫程式的朋友,想照著這張圖表下學習下來。可能會在前期遇到很多挫折卡關。

學習這些技能就像學打籃球一樣。
第一次看到籃球的時候,你會抱著這顆大球使盡吃奶的力氣把它放進籃框,一些基本動作的練習和戰術都是更進階的學習、模仿和經驗的累積。

寫網頁也是一樣,一開始你會用很土砲的方法去達到你要的效果。隨著技能的增長,你開始在意維護性、效能、SEO。大部分的人,可以從學習 HTML 、 CSS 甚至 jQuery 開始,累積知識和經驗。慢慢地去嘗試使用架構開始搭建。

言歸正傳,來講講這張圖吧。

Inernet

這部分是屬於背景知識的部分,建議可以很快地讀過一次。然後你一定會發現一堆不懂的地方,不懂就跳過吧,不要花太多時間糾結。隨著技術的提升,某些內容你會慢慢的理解,也逐漸開始能利用這些知識來優化網站的效能。

但你如果是剛起步,你很難知道怎麼運用在實作上。沒關係的,當你有一天遇到困難,一如往常地用 Google 尋找答案時,你會得到幾個關鍵字,然後再回頭繼續閱讀,就會發現突然懂了什麼。

HTML、CSS、JavaScript

HTML、CSS、JavaScript 這三樣就是構成網站三大要素,不管你用什麼 Fancy 的語言,最終都是轉成這三種格式讓瀏覽器去閱讀。這是非常基礎且重要的部分,你可以用一個框架快速地搭建出一個頁面的模樣。但是細節的修改呢? 能 100% 做出自己期望中的視覺和互動效果嗎? 這部分是最需要花時間去打好基礎,至少理解接本邏輯。

大家對軟體工程師常有的印象,就是在螢幕前劈哩啪啦地打出一堆 code ,然後黑色屏幕的綠色字體那邊跳著不知道在顯式什麼的字數不斷的在跳動。

實際上,最常用的功能是複製貼上。最常做的動作是抱著頭,搞不清楚為什麼這樣可以那樣不行。遇到未解的 issue ,會食不下嚥,眉頭深鎖。進入工作狀態時,還會對家人的關心感到不耐。

圖片來源:https://kaobei.engineer/cards/show/1811

所以這邊要學到什麼程度呢?

在能夠隨心所欲之前。要懂得抄。這是工程師非常重要的技能。

這部分是前端工程師最重要的基礎,這邊沒有學好就使用後面的工具、框架會讓你的每個網站看起來都像是半成品或是長得和框架的 Demo 一模一樣。

Git 版本控制


這裡開始進入了 Cli ( Command-Line Interface ) 的領域,Git 是一個版本控制系統,可以對你的專案做版本控制。寫到一個程度,你的網站會出現大量的分支和或是同時開發多個功能,使用 Git 可以在錯誤和衝突發生後,將網站回到前一個版本。

這個網站有蠻深入淺出的介紹,非常推薦大家可以好好的瀏覽一次:

連猴子都能懂的 Git 入門指南

接下來後面這一大堆,就要進入 Node.js 的世界。

Node.js 允許通過 JavaScript 和一系列模組來編寫伺服器端應用和網路相關的應用。 -維基百科-

簡單的解釋就是,現在前後端都可以用 javascript 寫,而且還可以直接利用主機安裝網路上公開的套件,大幅加快開發速度,也能輕易的達到與後端資料串接的徹底分離。

這裡洋洋灑灑認真講一兩篇是說不完的。

如果你已經有不錯的 HTML 、 CSS 、 JS 的基礎,要進入這一階段才能算是到達網站前端工程師的門檻,這之前充其量就是懂網頁原裡的設計師罷了。

這系列打起來真是吃力。下一篇來做個了結吧!祝大家學習愉快~

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *