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

更新於 發佈於 閱讀時間約 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
3會員
37內容數
零基礎到成功轉職,一路上會遇到哪些挑戰、應該如何解決? - 猶豫階段:「這適合我嗎?薪水如何?...」 - 起步階段:「怎麼開始學?要不要做 side project?...」 - 成長階段:「如何優化開發效率?選擇框架?...」 - 面試階段:「怎麼準備技術和行為面試?...」
留言0
查看全部
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 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題