前端初學者的學習規劃指南

更新於 發佈於 閱讀時間約 2 分鐘

前端初學者容易因為要學的知識太多,而不知道該如何取捨。這邊推薦依序完成以下三個專案,並配合專案實作來逐步學習相關的技術與知識。


第一階段:建立個人履歷網站

開發基礎網站,作為未來的求職履歷

必備技能(Must Have)

  • HTML、CSS

推薦技能(Nice to Have)

  • VSCode:開發工具,可大幅提高開發效率。
  • Chrome DevTool:當網站顯示內容與預期不符時,可用於找出原因。
  • Git:可查看修改紀錄與還原修改內容。
  • GitHub:將專案備份於雲端,同時作為線上履歷的一部分。


第二階段:製作個人專案

學習 JavaScript ,開發互動功能。

必備技能(Must Have)

  • JavaScript

推薦技能(Nice to Have)

  • npm:安裝與管理第三方套件,透過使用套件可降低開發困難度。
  • Vite:整合第三方套件與搭建開發環境。
  • Prettier:自動排版程式碼,確保一致性。
  • ESLint:檢查代碼潛在錯誤,提高程式碼品質。


第三階段:製作個人專案(進階)

學習業界實際需要的技能,為求職做準備。

必備技能(Must Have)

  • JavaScript 框架(擇一):如 ReactVue
  • CSS 框架/套件(擇一):如 TailwindCSSSCSSBootstrap 等。

推薦技能(Nice to Have)

  • API 串接:學習如何與後端伺服器溝通,來開發更複雜的功能。
  • 響應式網頁設計(RWD):確保網站能在不同尺寸的裝置上正常顯示。


希望這篇指南能幫助你設定學習目標並順利入門前端開發!

avatar-img
5會員
40內容數
零基礎到成功轉職,一路上會遇到哪些挑戰、應該如何解決? - 猶豫階段:「這適合我嗎?薪水如何?...」 - 起步階段:「怎麼開始學?要不要做 side project?...」 - 成長階段:「如何優化開發效率?選擇框架?...」 - 面試階段:「怎麼準備技術和行為面試?...」
留言
avatar-img
留言分享你的想法!

































































前端轉職經驗談 的其他內容
上一篇文章提到了 成為優秀 PM 重要的三件事。這邊也分享我認為從 PM 的角度,成為優秀的工程師最重要的三件事。如果有其他不同的想法,也歡迎留言補充與指教。 1. 持續同步資訊 當進度落後或遇到問題時,第一時間說明潛在風險與影響,不要到最後一刻才揭露問題。 另外,也不要只專注於程式碼開
前陣子與同事閒聊時,發現大家對某位 PM 一致給予了高評價。因此思考了一下是哪些行為,能讓 PM 成為工程師們想合作的對象,並寫下了這篇文章。 內容為個人觀點,如果有其他不同的想法,歡迎留言補充與指教。在下一篇文章中,我會反過來從 PM 的角度出發,分享成為優秀的工程師要掌握的三件事。
當要顯示的文字過長時,一般會使用 CSS 隱藏超出的部分,並在文字尾端顯示 ... 來表示內容並未完全顯示。 Demo:https://codepen.io/lwxidmpx-the-scripter/pen/MYgVmjm 單行文字截斷 overflow: hidden; whi
文章介紹如何使用 Next.js 和 Vercel ,透過串接 OpenAI API 來建立具備 AI 功能的網站。
滿足個人的必要條件後,優先選擇能持續成長的環境
上一篇文章提到了 成為優秀 PM 重要的三件事。這邊也分享我認為從 PM 的角度,成為優秀的工程師最重要的三件事。如果有其他不同的想法,也歡迎留言補充與指教。 1. 持續同步資訊 當進度落後或遇到問題時,第一時間說明潛在風險與影響,不要到最後一刻才揭露問題。 另外,也不要只專注於程式碼開
前陣子與同事閒聊時,發現大家對某位 PM 一致給予了高評價。因此思考了一下是哪些行為,能讓 PM 成為工程師們想合作的對象,並寫下了這篇文章。 內容為個人觀點,如果有其他不同的想法,歡迎留言補充與指教。在下一篇文章中,我會反過來從 PM 的角度出發,分享成為優秀的工程師要掌握的三件事。
當要顯示的文字過長時,一般會使用 CSS 隱藏超出的部分,並在文字尾端顯示 ... 來表示內容並未完全顯示。 Demo:https://codepen.io/lwxidmpx-the-scripter/pen/MYgVmjm 單行文字截斷 overflow: hidden; whi
文章介紹如何使用 Next.js 和 Vercel ,透過串接 OpenAI API 來建立具備 AI 功能的網站。
滿足個人的必要條件後,優先選擇能持續成長的環境
你可能也想看
Google News 追蹤
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題