[{"data":1,"prerenderedAt":337},["ShallowReactive",2],{"post-\u002Fblog\u002Fstart-from-scratch":3,"post-surroundings":303},{"id":4,"title":5,"body":6,"date":288,"description":289,"desktopCover":290,"extension":291,"isPopular":292,"meta":293,"mobileCover":294,"navigation":295,"path":296,"seo":297,"slug":296,"stem":298,"tags":299,"__hash__":302},"blog\u002Fblog\u002Fstart-from-scratch.md","自學前端不用怕：從零開始的三大關鍵",{"type":7,"value":8,"toc":275},"minimark",[9,23,123,178,233,261,264],[10,11,12,16,20],"content-space",{},[13,14,15],"h2",{"id":15},"前言",[17,18,19],"p",{},"嗨，我是 Alyse，一名前端工程師兼職涯諮詢師。一直以來，我都很喜歡在部落格分享學習與工作心得，也常有讀者問：「我想轉職\u002F自學前端，該從哪裡開始？」",[17,21,22],{},"其實自學的過程既自由又具挑戰性。我整理了三大關鍵，幫助你在短期內建立紮實基礎，並快速累積實戰經驗。希望能替你的前端之路帶來一些啟發與動力！",[10,24,25,30,34,70,98,117],{},[26,27],"prose-img",{"alt":28,"src":29},"前言圖片","\u002Fdesktop\u002Fblog-content\u002Fcontent1.webp",[13,31,33],{"id":32},"打好基礎htmlcssjavascript","打好基礎：HTML、CSS、JavaScript",[35,36,37,42,45,48],"content-block",{},[38,39,41],"h3",{"id":40},"html-與語意化","HTML 與語意化",[17,43,44],{},"為何重要：HTML 是網頁結構的根基，語意化寫法（如 header, main, footer 等）能讓網頁更具可維護性與 SEO 效益。",[17,46,47],{},"建議做法：",[49,50,51,67],"ol",{},[52,53,54,55,59,60,59,63,66],"li",{},"學習常見標籤的用途與屬性，如 ",[56,57,58],"code",{},"\u003Csection>","、",[56,61,62],{},"\u003Carticle>",[56,64,65],{},"\u003Cnav>","。",[52,68,69],{},"善用 MDN、W3Schools 等官方文件，找尋範例程式碼並練習。",[35,71,72,76,79,81],{},[38,73,75],{"id":74},"css-佈局與預處理器","CSS 佈局與預處理器",[17,77,78],{},"為何重要：好看的網站來自穩定的排版與佈局，掌握 Flexbox、Grid 能讓你隨心所欲打造響應式頁面。",[17,80,47],{},[49,82,83,86],{},[52,84,85],{},"先掌握基礎 CSS 後，再學習 SASS 或 LESS 這類預處理器，提升樣式開發效率。",[52,87,88,89,97],{},"善用 ",[90,91,96],"a",{"href":92,"rel":93,"target":95},"https:\u002F\u002Fcss-tricks.com\u002F",[94],"nofollow","\\_blank","CSS-Tricks"," 等資源，了解常見版型技巧。",[35,99,100,104,107,109],{},[38,101,103],{"id":102},"javascript-核心觀念","JavaScript 核心觀念",[17,105,106],{},"為何重要：互動效果、資料處理、前端邏輯都仰賴 JavaScript。",[17,108,47],{},[49,110,111,114],{},[52,112,113],{},"先打穩 ES5 與 ES6 語法基礎，理解閉包 (Closure)、原型鍊 (Prototype) 等核心機制。",[52,115,116],{},"學會事件監聽、API 資料串接等常見應用，增添網站互動性。",[118,119,120],"blockquote",{},[17,121,122],{},"小結：在學習基礎語法時，同步進行小專案實作（如 Todo List、計算機、切版作品集）會讓你進步更快，也能累積展示用作品。",[10,124,125,129,131,146,153,167,170],{},[26,126],{"alt":127,"src":128},"擅用主流框架與工具","\u002Fdesktop\u002Fblog-content\u002Fcontent2.webp",[13,130,127],{"id":127},[35,132,133,137],{},[38,134,136],{"id":135},"reactvue-先挑一個","React、Vue 先挑一個",[138,139,140,143],"ul",{},[52,141,142],{},"React：生態系豐富、社群支援強，適合喜歡客製化的工程師。",[52,144,145],{},"Vue：上手容易、檔案結構直覺，適合對「漸進式開發」有興趣的開發者。",[35,147,148],{},[118,149,150],{},[17,151,152],{},"TIP：可以先看官方文件或跟著基礎教學做出小專案，感受哪個框架更順手。",[35,154,155,159],{},[38,156,158],{"id":157},"版本控制協作與建置","版本控制、協作與建置",[138,160,161,164],{},[52,162,163],{},"Git 與 GitHub：一定要掌握分支、Pull Request、Code Review 等流程，並熟悉 Git Flow 或 Trunk Based Development。",[52,165,166],{},"打包工具：了解 Webpack、Vite、Parcel 等常見工具的基本原理與設定，對於優化與部署大有幫助。",[38,168,169],{"id":169},"自動化測試與最佳實踐",[138,171,172,175],{},[52,173,174],{},"測試框架：Jest、Mocha、Cypress 等，建立單元測試與 E2E 測試思維。",[52,176,177],{},"程式結構與品質：遵循程式風格 (Lint)、維持命名規範、模組化思考，確保專案可維護。",[10,179,180,184,186,206,219],{},[26,181],{"alt":182,"src":183},"持續練習與參與社群","\u002Fdesktop\u002Fblog-content\u002Fcontent3.webp",[13,185,182],{"id":182},[35,187,188,192],{},[38,189,191],{"id":190},"多參加前端挑戰-hackathon","多參加前端挑戰 \u002F Hackathon",[138,193,194,197],{},[52,195,196],{},"在實作中快速累積經驗，也能認識更多同好。",[52,198,199,200,205],{},"像是 ",[90,201,204],{"href":202,"rel":203,"target":95},"https:\u002F\u002Fwww.frontendmentor.io\u002F",[94],"Frontend Mentor"," 提供多種真實設計稿，可練習切版與互動。",[35,207,208,211],{},[38,209,210],{"id":210},"打造個人作品集網站",[138,212,213,216],{},[52,214,215],{},"部署在 GitHub Pages 或其他免費\u002F付費主機。",[52,217,218],{},"整合自己做過的小專案，並用文字介紹技術棧與實作細節。",[35,220,221,225],{},[38,222,224],{"id":223},"社群互動分享心得","社群互動、分享心得",[138,226,227,230],{},[52,228,229],{},"參與線上或線下的技術交流、讀書會、Meetup，與同行討論，能啟發更多想法。",[52,231,232],{},"有餘力可將學習過程寫成部落格文章或筆記，進一步強化自己的理解。",[10,234,235,239,241,251,258],{},[26,236],{"alt":237,"src":238},"結語","\u002Fdesktop\u002Fblog-content\u002Fcontent4.webp",[13,240,237],{"id":237},[35,242,243],{},[17,244,245,246,250],{},"自學前端可能遇到卡關、挫折，但同時也具備很高的自主性。只要把 基礎、框架、實踐 三大面向做好，就能在前端這條路上穩步前進。若你在學習過程中需要更多建議或想要職涯諮詢，歡迎透過",[90,247,249],{"href":248},"mailto:alysewang@hexschool.com","聯絡方式","與我聯繫！",[35,252,253],{},[118,254,255],{},[17,256,257],{},"「程式替你開路，諮詢替你指路，一起走向更寬廣的未來。」",[17,259,260],{},"感謝你的閱讀，如果這篇文章對你有幫助，別忘了幫忙分享，或在下方留言告訴我你的想法，也讓更多人一起受益吧！",[13,262,263],{"id":263},"延伸閱讀",[138,265,266,269,272],{},[52,267,268],{},"前端面試不再慌：破解常見提問的三大策略",[52,270,271],{},"掌握前端測試：從單元測試到端對端測試的完整攻略",[52,273,274],{},"SEO 與前端最佳實踐：讓搜尋引擎看見你的網站",{"title":276,"searchDepth":277,"depth":277,"links":278},"",2,[279,280,281,285,286,287],{"id":15,"depth":277,"text":15},{"id":32,"depth":277,"text":33},{"id":127,"depth":277,"text":127,"children":282},[283],{"id":169,"depth":284,"text":169},3,{"id":182,"depth":277,"text":182},{"id":237,"depth":277,"text":237},{"id":263,"depth":277,"text":263},"2024-10-21","嗨，我是 Alyse，一名前端工程師兼職涯諮詢師。一直以來，我都很喜歡在部落格分享學習與工作心得，也常有讀者問：「我想轉職\u002F自學前端，該從哪裡開始？」 其實自學的過程既自由又具挑戰性。我整理了三大關鍵，幫助你在短期內建立紮實基礎，並快速累積實戰經驗。希望能替你的前端之路帶來一些啟發與動力！","\u002Fdesktop\u002Fblog\u002Fstart-from-scratch.webp","md",false,{},"\u002Fmobile\u002Fblog\u002Fstart-from-scratch.webp",true,"\u002Fblog\u002Fstart-from-scratch",{"title":5,"description":289},"blog\u002Fstart-from-scratch",[300,301],"前端開發","職涯成長","GyHI50u0bBmPfnZfHYNl53uvILA-HvU1ZouiQiWQNyw",[304,305,308,311,314,317,320,323,326,329,332,334],{"slug":296,"path":296,"date":288},{"slug":306,"path":306,"date":307},"\u002Fblog\u002Freact-intro","2024-10-11",{"slug":309,"path":309,"date":310},"\u002Fblog\u002Fgood-resume","2024-09-07",{"slug":312,"path":312,"date":313},"\u002Fblog\u002Fcss-magic","2024-09-03",{"slug":315,"path":315,"date":316},"\u002Fblog\u002Fmental-journey","2024-07-09",{"slug":318,"path":318,"date":319},"\u002Fblog\u002Fjob-interview","2024-07-08",{"slug":321,"path":321,"date":322},"\u002Fblog\u002Fvue3-composition-api","2024-06-29",{"slug":324,"path":324,"date":325},"\u002Fblog\u002Fgit","2024-05-04",{"slug":327,"path":327,"date":328},"\u002Fblog\u002Fseo","2024-05-01",{"slug":330,"path":330,"date":331},"\u002Fblog\u002Fautomation","2024-02-17",{"slug":333,"path":333,"date":331},"\u002Fblog\u002Ftypescript",{"slug":335,"path":335,"date":336},"\u002Fblog\u002Funit-test","2024-02-07",1793785242272]