嗨!不知不覺又過了一年!不知道大家 2021 這一年過得如何?最近開始有聽到幾個朋友也想要試著學習前端開發,剛好也看到了這一篇在講前端開發者所需要技術的整理,簡單節錄一下一起分享給有需要的讀者們。
接下來的分享基本上以這篇文章的內容為主,會以我的觀點節錄一些重點來跟大家分享,所以如果想看第一手資訊或是習慣看英文的朋友也可以點進去直接閱讀。
成為一個前端開發者需要的「基本」要素
沒錯,這篇文章是站在作為一個基礎的前端開發者的角度來設想需要的技能/工具,所以對於想要尋找 WebAssembly 或是 Svelte.js 之類新潮工具和技術的讀者們,這篇文章可能沒有你們想要的資訊。
2022 年想成為前端開發者的話,你可以接觸的工具跟技術
首先最基本的答案,也是你去問大部分開發者都會在第一時間得到的答案,就是 HTML、CSS 和 JavaScript。
接著就是圍繞著這三個基礎技術的工具,像是:
- 常常被提起的前端框架如 React ( 或是 Vue / Angular)
- 整合開發環境工具 VSCode 等等
工具的部分,可以進一步接觸的則有:
- 瀏覽器的開發者工具 (Chrome 的話就是 Chrome Developer Tools)
- 套件版本管理器 NPM 還有程式碼打包器 Webpack
- 常常用來測試和開發 API 功能的 REST API 工具 Postman 或 Insomnia、GraphQL
下面讓我們一個一個來看這些提到的技術。
1. HTML
這是應該是每個想成為前端工程師的人會聽到的第一個技術,也是最古老的網頁技術之一。雖然他相對單純,但想要開發前端,不能不了解 HTML。在現代前端開發裡面,已經很少人單純用 HTML 來實作網頁頁面,因為目前的主流已經是用 React 或 Vue 之類的框架了。
但這些框架如果你多看幾眼就會發現,這些框架要能夠使用得上手,也必須對一些 HTML 裡面常見的標籤(如 <h1> 、<span)有基本的了解。關於 HTML 相關基礎可以參考這一堂 Udemy 的課程:
2. CSS, Flexbox and Grid
除了 HTML 之外,CSS 也是另外一個在網頁開發中很重要的元素,CSS 主要用來讓網頁看起來更生動華麗。最近使用純 CSS 撰寫的開發者已經越來越少了,相對的使用像是 Bootstrap、Tailwind 之類的 CSS 框架來做開發已經變得越來越主流了。
但因為目前 CSS 本身也在不斷的發展跟進化中,像是你現在會聽到的 Flexbox 跟 Grid。所以對於想學 CSS 的新手來說,還是建議從純 CSS 開始學習起會比較好,這邊推薦 CSS 一堂入門課程:
3. JavaScript
JavaScript 就不用說了吧,這是近幾年來幾乎是前端的中心,前端領域有很大一部分就是因為 JavaScript 的關係才得以引起風潮。
JavaScript 基本上掌管了網頁介面上的互動功能、甚至還有一些比較複雜的動畫特效,因此可以說是 JavaScript 讓整個網頁頁面活了過來。而且更因為前端框架如( Vue / Angular / React )的流行,讓 JavaScript 不只能處理介面互動的部分,甚至利用 JavaScript 就能執行整個前端產品的開發。
JavaScript 演變至今也已經從前端領域跨足到網站後端領域,現在透過 Node.js 你甚至可以進行後端 Server 的商業邏輯開發,從這一點也可以看出 JavaScript 在網站開發裡的重要性。所以不管你是前端還是後端工程師,最好都花點時間來看看這個正在改變世界的語言。
這邊推薦一堂基本的入門課程給各位初學者(文章推薦的課程):
– The Complete JavaScript 2022: Build Real Project
書籍的話則可以參考本人的作品《 JavaScript 前端概念三明治》,在書中我會大量運用圖片搭配文字解說來幫助你了解 JavaScript 裡面比較抽象的運作原理,讓你在學習過程中比較不那麼……