蒐集各種自由工作難題的系統思考思維模型,經驗萃取成即戰力的企劃、具體錦囊與實用攻略
【文科生的煉金術】把AI當助教轉職前端工程師
【文科生的煉金術】把AI當助教轉職前端工程師

【文科生的煉金術】把AI當助教轉職前端工程師

身為純文科生,我對「透過寫程式與電腦有效溝通」這件事一直興趣盎然。因此幾年前有上過全端工程師課程,之後也陸續上過實體課程與線上課程,一路上花了不少錢,可是我真的太笨了,台上老師很有耐心也很認真教,可是我程式碼還是一行都敲不出來遑論debug。我一直苦於無法把自然語言有條理地轉換成一步步程式碼,在班上怎麼努力學習都是最後一名。

自從ChatGPT橫空出世後,我把過去怎麼樣模仿都不明白的程式碼作業餵給它一行一行解釋給我聽。把AI當助教後,它用的比喻讓我瞬間秒懂,以前怎麼上實體/線上課程,讀教材、看講義我就是笨,怎麼聽都聽不懂的地方,這麼多年過去AI這樣講我竟然就懂了,有種豁然開朗的感覺,覺得對未來轉職似乎看到一絲曙光,雖然能不能成功不知道,至少卡了很多年的我今天終於邁進了一小步,這一步對我來說非常不容易。

就以前端的css舉例,以前老師在台上示範在網頁的畫面中間畫一個圓,裡面有 ”Hello World” 字樣。這樣做通常會放display: flex;,我一直不懂這是什麼意思。因此我下了以下的提示prompt:

「你是前端工程師,教我Html和CSS。我想在網頁的畫面中間畫一個圓,裡面有 ”Hello World” 字樣,並『用小學生能理解的方式」』解釋一行行程式碼。」

它的回答讓我或然開朗,讓我卡了很多年的問題在3分鐘內解決了,其回答如下:

  • 你可以把 display: flex; 想象成是一種魔法,這種魔法可以讓一個箱子裡的東西變得好排列。
  • 有一個圓形的箱子(這就是 .circle),裡面有一個小玩具 “Hello World”。現在你想把這個小玩具放在箱子的正中央。
  • 如果沒有 display: flex; 這個魔法,你可能需要手動去調整小玩具的位置,這可能會很困難,因為你需要精確地計算出應該把它放在哪裡才能剛好在中央。
  • 但是如果你用了 display: flex; 這個魔法,事情就變得非常簡單。你只需要告訴箱子你想要小玩具在中央(這就是 justify-content: center; 和 align-items: center; 的作用),然後箱子就會自動把小玩具放到正確的位置。
  • 所以,display: flex; 就像是一種魔法,可以讓你輕鬆地控制箱子裡的東西要如何排列和放置。
  • 如果還是不明白,我們以一個更簡單的方式來解釋這個問題。
  • 你可以把我們的網頁想像成是一個大的房間,這個房間就是我們的 body。而 circle 則是房間裡的一個小圓桌。
  • 在這個房間裡,我們想要將小圓桌放在房間的中心。這就是為什麼我們要對 body 使用 display: flex; 以及 justify-content: center; 和 align-items: center;。這三行程式碼的作用就是告訴房間:「嘿,我想要你把小圓桌放在你的中心」。所以,現在小圓桌就在房間的中心了。
  • 再來,我們在小圓桌上放了一個「Hello World」的標語。我們希望這個標語能夠在小圓桌的中心。所以,我們同樣對 .circle 使用了 display: flex; 以及 justify-content: center; 和 align-items: center;。這三行程式碼的作用就是告訴小圓桌:「嘿,我想要你把這個標語放在你的中心」。所以,現在標語就在小圓桌的中心了。

以上是AI的描述,讓我這麼笨的人都能瞬間理解,程式碼也能順利敲出來。

總而言之,這篇文章想分享的心得是善用AI真的是純文科生轉職工程師的好幫手。轉職的路上並不輕鬆,的確,一路上我們一定會碰到數不盡的酸民/長輩/前輩/自傲的理科生們想看我們笑話。這麼多年過去了我還是想重新轉職這條路想再試試看,就把它當成考公務員國考那樣決心做準備。

除了收入有機會大幅提升之外,藉由「敲打程式碼跟電腦溝通」這件事我真的很有興趣。如果你同樣身為文科生無論什麼原因想轉職工程師,非常歡迎一起抱團取暖,我有花點小錢請朋友當我的程式「教練」(專門點出我盲點的,不是家教的身分),搭配AI一起學習。這輩子想挑戰轉職,抵抗周遭酸民的閒言閒語想一起努力,非常歡迎私訊與我聯繫。

我Email:[email protected]

文科生們不要輕易放棄,我們一起加油找出路!