五倍直播間

Blogs - Sidebar

## 參加 React 完全進階攻略 動機

在五倍參加完 ASTRO camp 幸運的很快速找到工作，但第一份工作居然是要寫 React ？！因為看到五倍也有開設 [React 完全進階攻略](https://5xruby.tw/courses/react) 課程，加上在 ASTRO camp 其間有上過一堂奶綠老師的基礎 React 課程，喜歡老師在課堂中會穿插一點笑話，讓整體課程不會過於沉悶的教學風格，於是乎我又再度回到五倍的懷抱，利用假日來上奶綠老師的 React 完全進階攻略 課程，如此一來我就可以平日上班實作 React 專案，假日跟著老師了解 React 原理，以及學習怎樣叫做漂亮的 Pure Function 。

## 課程內容貼合業界

雖然課程名稱是 React 完全進階攻略 但老師上課會由淺入深的帶入，從 Components 如何撰寫，到 Testing Library 測試，所以相信跟我一樣對於 JavaScript 有基礎，但對 React 幾乎是零基礎的人，也可以跟得上進度，加上我自認自己滿幸運的，一起上課的學生們大部分都跟我一樣工作上有運用到 React ，除了老師上課舉例是業界工作上實際會遇到的雷外，同學們也會提問自己專案上遇到的問題，這堂課幾我可以說是完全貼合現在業界的需求。

## 怎樣的人適合這門課程

在工作與學習並行的情況下，我每週學習到新的或是更好的寫法時，都可以立即運用在專案上，抑或是遇到一些困難點，也可以跟老師討論一下大方向，非常慶幸自己在剛上工即報名課程，大大縮短了我上工時的陣痛期。我覺得這門課程除了適合對 React 有興趣的人外，更適合目前工作上也會用到 React 的人，可以在課程中發現自己寫 code 的盲點，或是了解更好的做法。

以我自己為例：像是簡單的 Modal 開關，在上課前的我絕對是利用 `useState` 控制開合，再在最外層 `useEffect` 時打 API 資料，內層需要資料時再一層一層將 props 傳入，實際上這個做法會導致傳入一堆 props ，讓自己距離 Pure Function 更加遙遠（因為層層互相影響），且平行層級的 `Components` 用此方法非常難拿到資料；但在上課後，學到了 `useContext` 、 `useReducer` 等更進階的用法原理時，我就像是打通任度二脈，可以節省很多參數傳來傳去的弊端!

在學會更進階的用法後，就變成如下的範例，如此一來程式碼可讀性提高，且光看英文大概都可以知道是在控制不同 Modal 開關！

```javascript
import { BuyListContext } from "components/buyer/list"

// 在最外層的元件包 BuyListContext.Provider 可以使內層的元件在不用傳 props 的狀況下拿到 value
<BuyListContext.Provider value={{ state, dispatch }}> 
    // 元件內容...
</BuyListContext.Provider>
```

```javascript
import { useContext } from "react"
import { Modal } from "components/shared" // 客制 modal 元件
import { SubmitButton } from "components/shared" // 客制 SubmitButton 元件
import { BuyListContext } from "components/buyer/list"

// 用 open 傳入 modal 開合的布林值
const CancelHintModal = ({ open }) => {   
  const { dispatch } = useContext(BuyListContext)

  const handleBackOrderDetial = () => {
    dispatch({ type: "CANCEL_HINT_MODAL_SWITCH", payload: false })
    dispatch({ type: "ORDER_DETAIL_MODAL_SWITCH", payload: true })
  }

  const handleToCancelReason = () => {
    dispatch({ type: "CANCEL_REASON_MODAL_SWITCH", payload: true })
    dispatch({ type: "CANCEL_HINT_MODAL_SWITCH", payload: false })
  }

  return (
    <Modal open={open} showIcon={false}>
      <h3>取消訂單提醒</h3>
      <p>為保障買賣雙方的權利，若商品為已發貨，將不能取消訂單。</p>
      <div>
        // 若點下取消，則關閉此 modal ; 且開啟訂單詳細資訊 modal
        <SubmitButton value="取消" isHollow={true} atClick={handleBackOrderDetial} />
        // 若點下繼續，則開啟取消原因 modal ; 且關閉此 modal
        <SubmitButton value="繼續" atClick={handleToCancelReason} /> 
      </div>
    </Modal>
  )
}
```

## React 完全進階攻略 課程最讓我覺得物超所值的是

因為奶綠老師本職就是業界的資深工程師，除了上述說到老師會舉實際上工作會遇到的雷外，更會介紹很多實際 React 專案會用到的套件或是小工具，讓我們可以更快上手。但撇除以上幾點，我自己最喜歡這堂課的最關鍵點是，每堂課都會有個回家作業，當交作業後，老師會親自幫你 code review ，畢竟要寫得出功能或許不難，但要寫出好的 code ，對現階段的我來說還是非常不足的，而參加 React 完全進階攻略 除了可以學到 React 的運用及原理，附加價值更是可以獲得業界資深工程師親自 code rewiew，對我這個小菜雞來說已經太超值！以上參加課程的心得希望可以幫助到，對 React 有興趣，或是正在猶豫的大家～

本文引用自 [Krystal 的桃花源](https://kkrystalll.github.io/) - [從原理到精通的 React 全攻略課程](https://kkrystalll.github.io/2023/02/19/5xCampus-React-course/)

> 👩‍🏫 課務小幫手：
> ✨ 想掌握 React.js 觀念和原理嗎？<br />
> 我們有開設 📒 「[React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)」課程唷 ❤️️

React 課程

從原理到精通的 React 全攻略課程

## 報名契機

寫程式很強的老師，未必就是一個很會教的老師，就好比學校老師跟補教名師的差別，記得以前在學校的時候，雖然教授很厲害，但很遺憾的就是沒遇到很會教的老師，所以在校時學習得不好，技術能力與經驗的欠缺讓我在工作上吃盡苦頭，所以常常在工作上或者工作之餘，遇到問題時就是要 Google 相關資料，或者上相關技術社群發文求助。由於學習到的知識相當零碎片段而不是一個有系統且循序漸進的完整知識，往往都是一知半解，事倍功半，大大減低了工作效率進而影響到工作績效，績效的優劣自然也影響到薪水。

後來選擇到五倍紅寶石專業程式教育機構的 [Vue.js 3x 與 Pinia 前端開發實戰課程](https://5xruby.tw/courses/vue-js)，來補足技術上的基礎，而這次的課程老師是許國政 (Kuro老師)，老師除了本身是一名程式設計師、技術社群參與者、前端程式設計課程、技術書籍作者之外，還身兼 Vue.js Taiwan 社群主辦人，對 Vue.js 程式圈是為極具有影響力和貢獻的人物，能有機會上到老師所開課的課程是與有榮焉的事情！

![Vue.js 上課照片](//images.ctfassets.net/8er52l3j5u76/65yMWr3vFoa4BGxu5STm6L/f856dc2e964e55697f6cdbd9af4790cb/vue-course.jpg)

## 不用擔心初次接觸Vue.js

在確定要報名該課程之前，我完全沒有接觸過 Vue.js，因為工作上的需要，主管讓我報名該課程，由於沒有接觸過此語言深怕上課時跟不上，還在課程開始前稍微惡補了一點基礎的概念並安裝好開發環境。

正式上課前，老師有特別告知學員需要安裝和建議安裝的開發及除錯套件，正式上課時從基礎概念並配合實例做教學，課程中也會安排實做，且老師會不斷巡視各學員的學習狀況，若有遇到問題也會立即協助學員，課後練習也讓學員更瞭解自身的學習狀況，且也能透過 Discord 與老師互動。對於第一次接觸該程式語言的人完全不用擔心跟不上的問題。

許國政 (Kuro老師) 不僅認真教學，表達能力也相當不錯，就算是初次接觸該語言的人也能一點就通，簡直就是補教名師級的人物，雖然**補習是需要費用的，但上過課之後感覺非常超值**，這些對自我能力的投資將來都能十倍奉還的，好比練功打怪一樣，手無寸鐵的上場很快就被打趴了，來五倍紅寶石專業程式教育機構練功好比配備更多精良的武器，不管是求職面試，或者是工作效率上都能大大加分，很快地就能從未來的收入上展現出來了，千萬別吝嗇於對自我技術上的投資。

![Vue.js 課程封面](//images.ctfassets.net/8er52l3j5u76/wcTofv8uLP7OZsqxHRW5s/c9831ff31002905c89685b151d989d73/course-cover.jpg)

## 從 Vue.js 核心觀念開始打好基礎，將實戰練習應用在工作中

目前 Vue.js 已開始應用在工作專案上，最常使用的就是 `v-for` 列表渲染。如果要把一個陣列渲染到物件，我們最常使用的就是迴圈或 `forEach` 的方式將資料顯示於畫面上，在 Vue.js 裡要遍歷陣列的方法非常的簡單，大大的降低程式碼的撰寫，也增加程式的易讀性。

```
<q-chip v-for="units in unitOptions" :key="units.value" icon="local_library"
  :size="(unitSelected == units.label)?'15px':'14px'"
  :color="(unitSelected == units.label)?'orange-4':'orange'"
  :text-color="(unitSelected == units.label)?'black':'white'"
  :label="units.label"
  clickable v-model:selected="LineModel.Unit[units.value]"
  @click="actSetLineUnit(units.value, LineModel.COUNTRY);actGetLinesData()">
</q-chip>
```

## 完課後的收穫

初次在五倍紅寶石上課，感覺受益良多，而且發現其實報名上課的學生比我想像中的還要多呢，深深體會到自己所學的不足，學如逆水行舟，不進則退，看到別人都這麼認真的學習新技術我怎能偷懶對吧，**未來若有機會仍會選擇五倍紅寶石來增進自己的專業能力。**

>👩‍🏫 課務小幫手：
>
>✨ 想掌握 Vue.js 觀念和原理嗎？
>我們近期也有開設 [Vue.js 3x 與 Pinia 前端開發實戰課程](https://5xruby.tw/courses/vue-js)喔！


Vue.js 3x 與 Pinia 前端開發實戰

Vue.js 與 Pinia 前端開發實戰 - 學員課程心得

我是在 ASTRO camp 的分組專案第一次碰到 React.js，那時候是在實作前後分離的專案，而前端我們選擇用 React.js 來開發，在沒有上過課的狀態下，只好自己摸索這陌生的框架，卻不知不覺地在實作上喜歡上用 React.js 來開發。因為 React.js 帶來的便利性真的太多了，例如採用 functional programing，讓程式碼好閱讀和維護。

## 基礎到進階，一網打盡

在還沒找到工作前就覺得學會 React.js 是一件重要的事，便再次報名五倍紅寶石的 [React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)。奶綠茶老師是業界非常資深的前端工程師，在這邊最常聽到的就是：「這題我面試一定會考！」事實上，老師講得真的就是業界需要具備的即戰能力。

而我覺得在這邊學扎實的基礎功並具備進階自學的能力，這是一門讓前端開發者可以從 junior 成為 senior 的修煉課，而老師會時不時帶入 JavaScript 的基礎概念，讓你溫故知新，知其所以然。

```javascript
const [count, setCount] = React.useState(0);

React.useEffect(() => {
  setCount(count + 1);
}, []);
// 像是如果要達成每次執行都要上個數字加一，以上寫法就是錯誤的，錯在閉包，要改成以下寫法

React.useEffect(() => {
  setCount((prev) => {
    return prev + 1;
  });
}, []);
```

其實任何框架都離不開 JavaScript 的核心觀念，若老師能一起帶入講解，那就能串連並吸收得更完全，再加上老師在 code 上對自己非常要求 (code潔癖？)，所以他會不斷地強調他寫 code 的經驗談，還有各種 React.js 新手或是工作多年的開發者會踩到的地雷！**在五倍真的可以吸取更多業界資深工程師的團隊協作經驗，以及業界的第一手消息，這都是自學不曾獲得的收穫。**

## 學 React.js 遇到什麼困難

自己在觀念還不清楚的時候常常會遇到自己無法預期的事件，像是剛認識 React 的我也曾犯了以下的錯：

```javascript
const Example10 = () => {
  const [list, setList] = React.useState(["Ted", "要", "學會"]);
  const atAddClick = () => {
    list.push("React");

    // 這邊的setList無效，因為這邊的帶入值list與第二行的list為相同的記憶體空間，故雖然上一行有用push增加值，但React只要是同一個記憶體空間就不會觸發rerender
    setList(list);
  };
};
```

又或是效能上遇到很多瓶頸，因為對觀念不熟或者因為經驗不足，導致很多地方沒有注意到，很多時候都會感到非常無奈，常常在同一個 bug 卡很久，而上網查了非常多資料但都沒有命中重點，最後乾脆就用暴力解決，導致最後的專案有些地方都有效能上的不足，之後面試時也常常就被問起這些狀況該怎麼解決?

來到五倍，聽了奶綠茶的課，才有種豁然開朗的感覺，很多的 bug 都是源自於基礎的不穩，在聽課時，**我常有種感覺自己正站在奶綠茶老師肩膀看事情，角度反而更宏觀和多元了！**

## React.js 上課模式

奶綠茶老師的上課方式由淺入深，基本上都是從觀念入手，老師也很歡迎同學們直接在上課時舉手問問題，在課間因為我有做過專案踩雷的經驗，當下我有滿肚子的疑惑，而老師也不吝解釋，這也是我喜歡五倍的課程的原因，每個老師都提倡有問題就要馬上問，**能馬上解決問題讓我很心安。**

除此之外，除了讓我們自己把功能寫出來之外，老師還會提供他的程式碼範例，讓我們可以從老師的 Code 去真的認識到正確的寫法跟觀念，老師更會導入大量業界使用情境，聽起來更具體，學習起來也特別有感覺，對於新手來說是非常實用的上課模式，至少我收益良多。

## 謝謝奶綠茶老師的協助，讓我在面試的時候有好表現

我在面試時只要提到我會 React.js 方面的技能，就會被問到相關的觀念及技術題，通常問題都是觀念導向的，在這方面我也很慶幸能跟到奶綠 React.js 的課，在面試時，能有不錯的發揮。我更相信我在這裡收穫，不僅僅只是 React.js，更是 JavaScript 基礎功的提升，完課之後我終於可以更有信心地繼續我 的 React.js 之旅了。

最後，如果想要更加瞭解 React.js，真的推薦五倍紅寶石的 [React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)，相信我，你一定會在課堂間得到受用無窮的收穫。

![React - 奶綠茶](//images.ctfassets.net/8er52l3j5u76/l0LhMAJ2pUqPl9GzMpZH6/3cf8956dbcea04fbb19492a53dde2fe3/react-milkmidi.jpg)

> 👩‍🏫 課務小幫手：
> ✨ 想掌握 React.js 觀念和原理嗎？
> 我們有開設 📒 「[React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)」課程唷 ❤️️

React

收穫, 不止 React.js

作為一名前端工程師，由於在日常工作中經常使用 React.js，而且也非常地喜愛這個前端框架。所以，為了更加了解 React.js，並且能更精進自我，我決定選擇了「[React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)」這門課程，由五倍學院舉辦，並由奶綠茶老師教導。

## 為什麼選擇這門課？

為什麼選擇上這門課？首先是因為我本身對 React.js的興趣，希望在這門課中學到更多的知識。其次，五倍紅寶石在業界十分著名，師資團隊一字排開都是業界的大神，也都擁有豐富的教學經驗，因此我對這門課非常感興趣，也覺得可以為我的職涯帶來幫助。

## 這門課帶給我什麼幫助

在這門課中，我學到了很多實用的知識。老師會由簡入深帶領我們一步一步學習，老師自己也準備許多有趣並且實際運用的專案。平常一些覺得枯燥乏味的部分，在幽默風趣的奶綠茶老師講解後，也都覺得非常的生動活潑。例如 React.js 元件的生命週期、處理資料與狀態管理等。這些知識不僅讓我更加了解 React.js，也知道了一些程式碼底層如何運作，對於 React.js 有非常深刻的了解。

除此之外，奶綠茶老師也教導我們一些在開發實戰的經驗與技巧，還有如何讓 React.js 能夠更節省效能。例如，我學到了如何實現 React.js 元件的 lazy loading，以提高網頁的載入速度，還有運用 useMemo 和 useCallback 來優化網頁的渲染。

老師除了教導各個 React.js Hooks 的使用以外，同時也與時俱進地更新 React.js 版本，React.js 18 更新了什麼都講解的非常地仔細。而在狀態管理部分，奶綠茶老師也教我們如何使用 Context API 來處理資料與狀態管理，還有使用知名開源套件 Redux，這對我在工作中實現組件間的資料共享和狀態管理有很大的幫助。

除此之外，這門課還教授了 React.js 開發的最佳實踐，例如如何設計優秀的 React.js 元件和如何使用 React Router 來實現頁面路由。最後也一再強調測試對於開發的重要性，教我們該怎麼使用 Jest 和 React Testing Library 來測試。

## 感謝 x 五倍

最後，我要感謝五倍紅寶石。在這門課中，我不僅學到了很多知識，也在一個輕鬆愉快的環境中享受到了學習的樂趣。我對五倍紅寶石的教學團隊表示敬意，每當我有任何疑問想要詢問時，課務人員都會非常有耐心，並且不厭其煩地回答我的任何有關課業上的問題，非常感謝他們為我提供了如此寶貴的學習機會。

我深刻地體驗到了五倍紅寶石對學生的關心和支持，因此我強烈推薦五倍紅寶石的課程給所有對前端開發有興趣的人。如果你對 React 有興趣的話，那麼 React.js 全攻略是一門不可錯過的課程，不管是剛入門或是資深的工程師，它都會為你提供更多有用的知識和實踐經驗。

![React 課程合照](//images.ctfassets.net/8er52l3j5u76/ZDOMIGZkTIK4b0RlPYIFx/24b4a7b4047394a5581f16333c00c3a8/react-group.jpg)

本文引用自 [Bucky's f2e bucket](https://bucky0112.github.io/) 的文章 -  [React.js 全攻略班推薦給想要精進自我的前端工程師](https://bucky0112.github.io/2023/02/15/react-class-experience/)

> 👩‍🏫 課務小幫手：
> ✨ 想掌握 React.js 觀念和原理嗎？
> 我們有開設 📒 「[React.js 全攻略 - 入門到進階](https://5xruby.tw/courses/react)」課程唷 ❤️️

React.js 全攻略班推薦給想要精進自我的前端工程師

喜歡自學的朋友有福了！

五倍學院準備數個月，打造了一個全新的[線上課程學習平台](https://base.5xcampus.com/)，提供給所有的學生和專業人士一個新的學習的管道。課程內容從入門到進階，讓你可以彈性安排自己的時間，挑選合適的課程，扎實打穩網頁基礎。

## 這個線上課程平台適合什麼人呢？

「如果你是 ⋯⋯」

✔︎ 非本科系卻對開發有興趣的人
✔︎ 想要知道怎麼跟工程師溝通的 UI / UX 設計師
✔︎ 已經是工程師，想要對技術做更進階的研究
✔︎ 不住在北部，無法通勤報名實體課程的朋友

那麼你就很適合認識這個[線上課程平台](https://base.5xcampus.com/)，以一名新手來說，平台裡有許多基礎課程可以挑選；又或是你一位已在業界一陣子的工程師，這裡也有合適的進階課程可以進修。

## 課程內容

課程的講師都是業界或技術社群的專業人士，擁有豐富的知識和實務經驗，課程的內容豐富多元，多種主題如：前端、後端和資料庫課程等，讓學習者可以依照興趣選擇需要的課程主題。

## 課程的特色

### 會員福利

- 只要註冊會員後，馬上獲得 [Git 小教室](https://base.5xcampus.com/courses/git-tips)課程首禮！趕快加入會員，跟我們一起開始探索學習之旅。
- 五倍將不定期上架**會員專屬**的免費課程。

### 成為會員後

##### 享有終生觀看制

只要購買課程後，你可以不限時間和地點無限次觀看影片，亦能按照自己的習慣和步調每天安排學習進度。課程上線後，你隨時隨地都可以透過電腦、手機或平板觀看課程影片，沒有時間和地點的問題！

##### 隨時解決你的學習疑惑，學習終身保固

每個課程單元和作業下方都有專屬的留言討論區，可以把遇到的問題或卡關的地方留言給老師，讓你不再求救無門。

## 付費方式

我們提供線上刷卡、ATM 轉帳等多種不同的付款方式。購課後，五倍線上課程平台將合法開立免稅電子發票，若有進一步的問題，歡迎[私訊小編](https://www.facebook.com/5xruby)了解。

## 學習之旅，現在就啟航

五倍紅寶石致力讓「寫程式」這件事，不再只是紙上談兵，而能從零開始解決問題、建立作品，為工程師職涯鋪路。


線上課程

隆重推出五倍學院線上課程平台，讓你自學也能打穩基本功

五倍紅寶石專業程式教育機構講師團隊的專業師資 - Amos Lee（李建杭），一開始從事平面設計，後來轉職成網頁設計師，這陣子更是出了一本暢銷的技術書籍 - [金魚都能懂的CSS必學屬性：網頁設計必備寶典](https://www.tenlong.com.tw/products/9789864348824)，解決了許多新手或 CSS 苦手的使用困擾。雖然 CSS 看似簡單，其中卻有很多技術上的「眉角」，很多屬性之間會互相影響而產生各種意想不到的效果，特別是新手學習 CSS 初期若用死背的，在版面需要進階變化時就會出現 Bug，而不同的瀏覽器可能會有不同的細節和眉角要注意，但 CSS 真的如大家所說那麼難學嗎？

若你有這樣的困擾，不如閱讀以下這篇直播活動的紀錄文，讓 Amos 跟你分享更多 CSS 突飛猛進的訣竅和方法。

## 是什麼原因讓 Amos 想要再度出 CSS 的相關書籍
隨著技術圈的發展，網頁設計資訊量非常龐大，但每個人的學習時間是有限的，但新手苦於無法判斷哪些東西需要優先學習，因此，這本書篩出最重要且新手必需要知道的基本觀念，以及九成以上的開發者必需要知道的基本屬性！新手可以藉由這本書掌握最基本的技術；除此之外，使用者也可以將這本書當作百科全書來用，當你看到不熟的屬性，就可以翻閱該書再次確認屬性的原理和使用方式。

## 什麼樣的人適合讀這本書？
無論是新手入門網頁設計，又或是初學者在做網頁設計時會遇到的狀況，都可以靠這本書來解惑。
當然網頁設計學習者也可以把這本書當成字典來查詢，當你看到某個語法想學習或確認，都可以透過翻閱這本書來找到屬性的原理和定義。

## 覺得 CSS 最難懂，最多人卡關的地方？
Amos 老師提到，很多人在寫 CSS 的時候，會碰到定位的問題或尺寸計算錯誤，導致畫面跑版，而這些畫面不如預期的效果，往往跟基本觀念不夠扎實穩固有關係。

老師更建議大家，切版是一件很活的事情，但並不能學，唯有打穩基礎，完全的理解原理，這樣才能快速開發。

## Tailwind CSS 是一個值得學的工具嗎？
在技術快速發展的現在，每個工具的發明都是為了解決開發者的問題，因此 Amos 老師建議大家要懷抱的開放的心態去擁抱新技術，了解每個工具的適用性和和開發情境，只要用對了，那這就是一個好工具。

> 👉 課務小幫手：如果你想了解 Tailwind CSS，可以了解五倍紅寶石的短期課程 - [升級前端技術從 Tailwind CSS 開始](https://5xruby.tw/courses/tailwindcss)

![Tailwind CSS](//images.ctfassets.net/8er52l3j5u76/1d35AsSk65MdhXVQnUyYPf/93071c6b78838ddbe321e7c88fdcb84e/tailwindcss.jpeg)

## 如果想找一群夥伴共讀，會建議如何共通讀這本書

這本書其實對很多人來說就像本活字典，遇到問題去翻閱就會找到對應的原理和範例。老師非常鼓勵三五好友揪團開讀書會，大家可以藉由共讀的方式，聊聊自己的使用經驗和分享自己與書上不同的寫法，藉著彼此交流相互成長。若是未來想要邀請老師一起加入讀書會，老師也很樂意參與，除了可以和大家經驗交流，也可以以作者的角度分享一些心法和祕技。

## 新手常常覺得懂了原理，但碰上實戰就很卡

很多人在碰到問題時，會在網路上搜尋對應的資源，找到語法後也只是套用並沒有真的透徹理解，建議所有新手在學的時候，理解其原理，後續的進階應用才會更有效率。

Amos 老師也提到，常碰到新手跟他說：「因為自己有些不熟的地方，所以覺得要多寫才會記住。」老師認為大量練習是有效的，但是新手很容易會落入一個迷思，只要一直寫就會進步，如果你只是學會複製貼上，那麼就算是大量的練習，你也不會有明顯的進步，大量練習的目的除了熟能生巧之外，重要核心精神是要正確練習，並且要理解為何這麼寫。

而老師在 code review 的時候，常會反問學習者為什麼要這麼寫，但對方常會誤解，認為這樣的舉動是在找麻煩，其實這些反問的過程，都是要讓學習者去思考這樣寫的邏輯以及原因，去判斷是不是真的理解，並適時補充，這樣的輸出才能有真實的效益。

上課時，老師常發現學生會同步抄寫老師講解的 code，其實 Amos 和五倍紅寶石專業程式教育機構創辦人 - 龍哥都認為這不是個好方式。因為這些跟著敲打的瞬間，你會以為自己做出效果了並且學會了，但這其實是`進步的假象`，兩位老師建議大家最好的學習方式，是要能夠在第一時間聽懂原理，接著再實際演練自己聽懂的語法。

## 有考慮出電子書嗎？

Amos 老師表示，目前自己的著作並沒有電子版本的計畫，除了老師比較喜歡紙本的溫度之外，老師也很擔心資訊被剽竊，畢竟每一本著作都是作者的心血，更重要的是翻閱紙本時，會有些記憶效應，在翻到某個章節時，會寫起曾經記下的一些重點，那是電子版本所難以達到的效果。

## Amos 老師有遇過有學生怎麼講都聽不懂的情況嗎
其實 Amos 老師在上課前會希望能知道這個班級的性別和年齡組成，又或是每位同學來自什麼背景，當同學卡關的時候，老師就會試著用跟學習者領域相仿或相關的知識去做類比，讓大腦產生關聯性。

倘若學習有時限的壓力或是馬上要提交給客戶的設計稿，但怎麼樣都想不通其原理，老師會請你先用背的記下來，雖然這不是一個好的方法，但是學習就跟拼圖一樣，哪裡有洞就補哪裡，這個地方卡關，先休息或換拼別的地方。有時候當你轉個彎，或先做別的事，隔一小段時間再回頭看，你會意外發現自己卡關的地方竟然開竅了。

## 要如何保持顛峰，維持學習狀態

Amos 提到維持學習狀態最好的方式就是對技術保持熱情，而五倍紅寶石專業程式教育機構創辦人 - 龍哥也認同，畢竟不同的工具會解決不一樣的問題，抱持著開放的心態去學習，除了學到技能本身，也會認識其生態圈和更多與原本領域不同的文化。

## 一般 104 上的網頁設計師的職缺需求能力要到什麼程度

網路上的職缺大概簡單來說可以分成三大類，一個是純設計但不切版，另外一種則是會設計和切版，也會知道怎麼使用套件，最後一種則是前端工程師，設計的部分相對少了，除了切版之外，還會搭配 JavaScript 和串 API 等技術，而薪資當然會隨著你的技能多寡而有所不同。

## 要如何看到版面，馬上就知道怎麼切？

其實這些都跟經驗有很大的關係，當你做過的作品越多，練習過的版面越多，你會越來越知道某個畫面可以很快用什麼方法切出來，其實要可以快速切版，和你對原理的熟悉程度有很大的關係，而成功地不二法門，唯有大量且正確的練習！

看完這些直播活動的精彩紀錄，有沒有受益良多的感覺呢？趕快回放再次觀看當天的直播活動- [CSS 真的這麼難學嗎？Amos 老師指點你學習捷徑！](https://www.youtube.com/watch?v=d6SjTcTPzQY)

> 👉課務小幫手：如果聽完這場活動想要了解更多關於網頁設計的開發課程，也歡迎報名[網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)，讓我們陪妳從零基礎前進網頁設計師之路。

![Code for Girl](//images.ctfassets.net/8er52l3j5u76/2Foib3Khc7YRkRIQX8kgZJ/6605e33ebf5aaf785da9844095aea910/amos-girl-power.jpeg)

CSS 真的這麼難學嗎？Amos 老師指點你學習捷徑！

在技術圈打滾多年的我，當初讀書時接觸 ASP.Net WebForm，藉著這個技能在業界磨練了多年，但，任誰也沒想到近年來的前端技術大噴發，讓我頓感自己是否還適合這個圈子，以及是不是要去認識一些新東西，一開始我先嘗試 Angular，摸索了一陣子發現入門門檻實在有點高，心想老闆要的不是追求強壯的坦克，而是能到達目的地的跑車，於是便將焦點移到了 Vue.js 身上。

畢竟要馬上應用到職場上，選擇了中文官方文件多的 Vue.js，以便查找資料時可以更快找到方向，為了用最短的時間就能學好 Vue.js 的核心開發實務，便決定報名了五倍紅寶石的 [Vue.js 與 Vuex 前端開發實戰課程](https://5xruby.tw/courses/vue-js)

其實我是個不容易舉一反三的人，很多新知識要反覆練習才能真的理解和融會貫通，上課之前我也曾擔心學習狀況不如預期，意外的是，我非常喜歡 Kuro 老師的教學節奏和口條，他的節奏雖不是很慢，但配合著他的教學口條，卻讓我沉浸在他的授課內容中而慢慢變強卻不自知。**講師能力強的人很多，但會教的並不多，非常感謝五倍開了這堂課，讓我可以在業界多待個幾年。**

## 老師的課間經營法寶

老師在課堂上，除了會分享很多開發相關的好書之外，甚至會自掏腰包根據我們的需求送書或是舉辦有獎徵答，可謂佛心無敵！感覺得出來，他有在意每位學習者的學習感受和狀況，這樣子的課室經營，讓班上的互動率大幅提升，大家都很投入和享受上課的氛圍，而課堂上會搭配大量的實例引導，每個小段落也都會有重點抽問，讓我們可以階段性地檢視自己的學習狀況，每個段落的規劃都感覺是有設計巧思的，我相信班上的同學也都能深刻感覺到老師的用心。

### 不只教 "武器用法"，也給你內功心法

在課間，老師會從一般入門寫法慢慢修改成業界較專業的方式，不僅讓你了解怎樣優化，更讓你知道為什麼要優化。

例如元件化開發是 Vue 的重要功能與觀念，但老師並不會直接就以元件思維來授課，而是實作出傳統寫法，透過這樣的方式讓學員先了解目的，才開始針對頁面區塊進行元件化改良，學員從無到有，到元件化的過程是透徹理解的，在職場上的專案開發會更知道怎麼拿捏細節和元件化設計！

## 課後服務，終身保固

課堂結束後，當然就要真正運用在戰場上，還好五倍針對課程都會開設一個 LINE 群組，Kuro 老師、五倍的課務夥伴們和所有同學都在裡面，很多關鍵性的問題都可以透過這個群組發問而得到解答，除此外，五倍每個禮拜二晚上都會對外開放教室，辦理[默默會活動](https://www.facebook.com/rubymokumokukai/)，讓大家有機會彼此分享與解惑並交交朋友。我記得有次我寫滿了密密麻麻的問題要問Kuro老師，而老師也二話不說在默默當天來到五倍，非常有耐性的一項一項把我的腦洞打開!

就連已經結訓一年多，我在職場上碰到問題，只要在群組上詢問，快則半天，遲則一天，無論如何都會等到老師的建議。我時常在想自己真的很幸運，遇到一個很棒的老師，就像在技術領域認識到一個很棒的前輩，無論何時都可以從他身上學到很多！

謝謝老師打開了我的技術視野，讓我在一開始的學習就有好的起點！
**我想只要我待在這個產業的一天，應該就離不開 Vue.js 了。**

>👩‍🏫 課務小幫手：
>✨ 想掌握 Vue.js 觀念和原理嗎？
>我們有開設 [Vue.js 與 Vuex 前端開發實戰 ](https://5xruby.tw/courses/vue-js)課程唷 ❤️️


Vue and Javascript

學 Vue.js 與 Vuex 前端開發實戰

[Free Stock photos by Vecteezy](https://www.vecteezy.com/free-photos "Free Stock photos by Vecteezy")

## 網頁前端設計女性專班的緣起
「五倍紅寶石專業程式教育機構」是由台灣的 Ruby 程式語言開發者和愛好者所創立，我們希望透過各種形式的程式與社群活動，讓大家都有機會體驗有趣的程式學習。

開課幾年下來，發現技術市場的性別比例十分失衡，表示不少人依然存有只有男生才可以學習程式的刻板印象，但是工程師這個職業，真的是只有男生才可以勝任嗎？我們都知道答案不是肯定的，於是五倍決定開設網頁前端設計的女性專班課程，讓女孩們也能有機會自在的學習網頁開發。

## 妳知道嗎？其實第一位工程師就是女生
其實歷史上第一位工程師就是女生！<br>
Ada Lovelace 是19 世紀英國的數學家，她也是史上第一位程式設計師。當時 Ada 的母親希望她順著興趣學習，堅持讓她從小開始學習邏輯、科學和數學，而 Ada 也因為對於數理的熱情，最後成為歷史上第一位女性工程師。<br>
當興趣慢慢走向專業，重要的是有沒有熱情而非性別，歷史上第一位的女性程式設計師就是很好的例子。五倍願意用最誠懇的心，陪女孩們裝上自己夢想的翅膀，讓妳們能無懼眼光自在飛翔！

## 一個人，走得快；一群人，走得遠
這個社會，一定有一群女孩們懷抱著成為工程師的夢，我們想邀請妳們來到五倍，一起重新定義自我價值。在這裡，會有一群志同道合的夥伴彼此陪伴，就算碰到問題也不再是孤軍奮戰，大家擁有同樣信念，力量就擁有加乘的效果，一起實現深埋心中的小小夢想 - 網頁前端設計師。

![two-friends-smiley-enjoying-working-together-in-a-coffee-shop](//images.ctfassets.net/8er52l3j5u76/1fU9u7HfgiE7VeCQj0F536/629fae77cebf49f9ff38fe778723b774/3146191-two-friends-smiley-enjoying-working-together-in-a-coffee-shop.jpeg)

[Stock photos by Vecteezy](https://www.vecteezy.com/photo/3146191-two-friends-smiley-enjoying-working-together-in-a-coffee-shop "Two friends smiley enjoying working together in a coffee shop. Stock photos by Vecteezy")

## 網頁前端設計課程 - 為妳而生
「當妳真心想完成某件事情，全宇宙都會聯合起來幫妳。」在這門課裡面，所有的女孩都沒有寫過程式的相關經驗，也沒有畏懼去嘗試接觸，大家都把對方視為夥伴，一同學習、一同探索、一同互相幫助，因為她們深信，努力會有所收穫。

在職場前進的路途中，我們不求自己是個完美的人，不強求讓所有人喜歡，更期許自己面對未來無所畏懼。因為秉持著這樣的信念，五倍紅寶石為女孩們量身打造了女性網頁設計專班，來帶領女孩們一步一步的完成夢想。

## 三大課程特色

__(1)全女性環境__<br>
在彼此身旁都是女性的環境裡，女孩們一起交流討論，不再因為「男生才會寫程式」的想法而害怕與同學交流。

__(2)上課節奏與學生吸收程度同步__<br>
以活潑有趣的方式一步步耐心指導，穩紮穩打，不用擔心來不及吸收。用心肯學習，程式定會在妳心中留下好印象！

__(3)課後讀書會 & 線上社群__<br>
課後將不定期舉辦讀書會，並有 Line 群組，幫助學員聯絡感情與持續交流，成為學習階段的重要夥伴。

## 為自己的職涯和興趣勇敢一戰
五倍永遠把妳們在意的事情擺在心上，盡全力提供給女孩們安心的空間，好發揮最大的自我價值，去顛覆市場的想像，找回學習的成就。

五倍更不吝展現對細節的專注，無論妳們在程式學習路途所遇的各種挑戰，五倍紅寶石總能提供支持力量，陪伴大家深入面對，在這條學習的路上，女孩們絕不孤單！

別害怕！五倍讓刻板的程式碼生動化，帶妳解構學習步驟再重組，鍛鍊屬於妳的程式教育最強模組，手把手帶妳製作出自己的專屬網頁。相信做好準備的妳們，會吸收所有的專業知識並內化成展翅高飛的力量。

追夢，讓妳的世界無限放大！ <br>
五倍紅寶石陪女孩們追求自我，一一克服學習上的障礙和難關，五倍專屬課程和社群陪妳們從零基礎開始直至踏上網頁設計師之路，總有一天也能在職場上閃閃發亮！

![3666767-two-beautiful-women-talking-everything-together-at-coffee-shop-cafe](//images.ctfassets.net/8er52l3j5u76/xU62nsykf5BbM8J7bWoai/e7be2a7738cbdfac3cb77789e0ff5096/3666767-two-beautiful-women-talking-everything-together-at-coffee-shop-cafe.jpeg)

[Stock photos by Vecteezy](https://www.vecteezy.com/photo/3666767-two-beautiful-women-talking-everything-together-at-coffee-shop-cafe)

---

### 推薦課程

> 👩‍🏫 課務小幫手：
>
> ✨ 想了解更多 HTML / CSS 知識和技巧嗎？
> 也歡迎報名課程 👉 [網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)

五倍消息