實踐大學

新手請益

2021年10月27日 12:38

各位前輩們好身為初學前端新手的菜鳥想請教一些事情目前還在任職當中，工作是資訊服務工程師接觸到的語法主要為Sql，協助用戶端排除一線問題及資料庫view建置跟修改、維護公司POS及簽核系統等等設定、跟工程師聯繫處理用戶端提出的問題因為工作的部門在資訊部常在部門開會中覺得工程師們都好強啊！所以年初就報名了六角學院的前端課程一開始也是學習前端必備的 HTML CSS Js 近期開始接觸 bootstrap. RWD. Vue.Js 還有一些課程尚未上完的有Jquery 除了六角學院的課程外，也有至YouTube學習簡單的Git指令（上傳、下傳初始化等等最基本的目前主要會使用Bootstrap搭配Vue.js及少許的jquery完成課程中的作業及小作品（例如：BMI計算、to-do list、旅遊網串接等等小作品，近期跟著課程中的vue 出一個電商，在學習新作品的練習）想請問各位前輩，如果年初想開始投遞履歷的話還需要具備什麼條件或者提供哪些作品集比較好呢！（離年初還有一陣子，我的目標是更熟悉框架及再多做一些作品熟悉程式的應用，因為在上課的期間體會到，真的要動手做才會更熟練! 再麻煩願意停留在此文章的前輩們，提供一些寶貴的經驗，謝謝！

・留言 18

文章資訊

前端工程師

每週有 6 則貼文

熱門留言

這裡想給原 PO B0 一些建議，前半段會先分享如何發想作品，後半段我再針對你的背景提供作品方向建議~ 首先在作品發想上，確實如同 B1 說的，不要拿課程作品去面試，因為線上課程所提供的作品，主要目的都是在「提升學員技能熟練度」所設計的。再來就是在市場上的個人辨識度極低，且容易撞作品的情況下，容易造成面試官第一觀感不好。那麼該如何做出高辨識度的個人作品呢？我這裡提供三個方向給原 PO。 ## 方向一：對喜歡的平台服務致敬，或進行重製再重製現在網站平台很多，相信你自己也有自己常逛的平台，例如 Dcard、蝦皮、訂票網、電子商務網站。說到這裡，你腦袋一定會有些立即想出來的網站，那麼不妨就嘗試將他們重製出來看看。當然，並不是要你全部都做出來，而是在有限的時間內，做一個陽春版的版本。我們就以 Dcard 為例子，並以 user story (使用者故事) 來說明要做哪些功能，使用者故事最好的條列方式就是，「我是什麼角色，我可以操作平台哪些功能，獲得預期的利益」。舉例來說： 1. 我是前台使用者，我想使用註冊功能，獲得會員資格 2. 我是前台使用者，我想使用發文功能，發布一篇文章 3. 我是前台使用者，我能進入會員中心修改個人資料，並成功修改個人密碼 4. 我是後台管理者，我能從首頁儀表板，觀看到今天有多少人註冊 Dcard 資訊。 5. 我是論壇管理員，我能進入後台管理的文章管理，去刪除指定文章，同時前台也會顯示文章被刪除先列出你想做的功能，最後再來思考，哪些「核心功能」，是你比較有把握，且較能彰顯你的能力的？且時間花在刀口上，你也不能任何功能都做，勢必來說都得進行刪減，像是上面有談到三個角色，也就是前台、後台管理者、論壇管理員，當角色變多時，也會增加你的開發量，所以如果時間不夠時，你大可先針對一個角色先高度優化，真的有時間再來做第二角色的功能。在時間規劃上，會建議你安排時間以 1.5~2 個月，也就是 6~9 週來打磨一個作品。挑這個時間點的用意來說，太短功能容易規劃得少，太長又容易中途放棄。所以挑選這時間會比較合適。如果以 8 週來說，那麼可以做以下的安排： - 第一週：思考主題，可以先選 2~3 個，若沒想法，也可以丟到前端版問問哪個題目，市場接受性比較高，Dcard 大家都很友善，你可以獲得更多資訊 - 第二週：規劃 user story，建議先規劃到 20~20 個，最後再增減到 12 個上下，並思考哪些算是你會花比較多時間的「核心功能」 - 第三~四週：依照核心功能開始切版，若對佈局沒有想法，或非 UI 背景，那麼找相似網站參考網站動線。可以找免費圖庫 unsplash

、iconfinder

來作為素材。或是採用 Bootstrap 的格線與元件，畫面也不會太醜。請至少頁面要做到 5~8 頁，CSS 量要足夠多，可以的話盡量嘗試用 SCSS 整合管理 Code，並嘗試用些設計模式(BEM、OOCSS 等等)。 - 第五週：規劃 API 功能，可能會出現的問題會在 API 從哪裡生，建議可以用 mock 模擬 API 來接，或者是用 JSON server

套件也可，如果想接圖片上傳功能，可以試試 imgur

。如果想要一條龍去做到資料庫+登入註冊+檔案上傳的話，firebase 會是個不錯的選擇。許多中小企業都會透過它去做最小可行性服務。但缺點就是 API 部分準備時間會拉長你的作品時間。建議 API 支數至少 10 支以上，不單純只有 get，也有像是 post、put、delete 等 API - 第六~八週：好好的用你學會的 JS 框架(React、Vue、Angular)，去整合你自己準備的 API，專注打磨你的作品，也可適時整合各種第三方套件，例如日曆、圖表、圖片輪播等等。在文中你有提到自己在職，那麼你大可將上面的各週數，當作你的里程碑目標，並逐步攻略。 ## 方向二：蹭時勢流量，做一頭站在風口上的豬如果對題目沒想法時，有時做最近比較火熱的話題也不錯，舉些例子給你參考 1. 最近在進行總統大選，而也有工程師開源 API 提供即時投票資訊，於是你用了 D3.js 做了視覺化圖表顯示戰況 2. 你所在縣市的登革熱非常嚴重，政府為了讓大家看到噴灑藥物軌跡，提供了路線 OPEN DATA API，你藉由這資料集做了 Google Map 儀表板資料 3. 某個耳聞人知的大網站，因為 UI 或前端動線很差，被大家念爆，於是你藉由這題目來思考，如果是你，會如何重製網站動線。 4. 參加業界皆知的熱門技術活動，例如 IT 邦連續 30 天寫文活動、特定主題技術黑客松，趁這機會短時間累積能量，同時參與的技術活動內容，也可放到履歷上加分 5. 近期元宇宙趨勢火熱，你也對 VR 議題有興趣，所以搭建了一個網站，搜集 VR/元宇宙的資訊，來介紹何謂元宇宙。而做這種題目有一個好處，當第一關人資 HR 看你的履歷時，儘管他不懂技術，但至少在作品辨識上，能知道你透過技術來跟上時代流行，相對來說也加分不少。 ## 方向三：思考周遭有沒有自己想解決的問題這個方向是我最推薦的，但相對來說也可能最花時間，但就我歷往經驗來說，也是被邀請面試率最高的。因為他是最能彰顯自己「有解決問題能力」的作品，以下我就舉一些例子給你參考： 1. 你以前做韓國衣飾網拍，想要幫自己搭建一個網站，來推銷自己的產品 2. 女朋友最近在開早餐店，所以想依照早餐店情境，幫她做一個線上點餐系統，幫助他的客戶點餐可以更順利 3. 你很喜歡旅遊，並到各咖啡廳遠端工作，你很希望能獲得店面是否有插座的情報，但 Google Map 通常都不會顯示，於是你起心動念，做了一個咖啡廳地圖情報網，讓數位遊牧民族都能一起提供適合工作的咖啡廳情報 4. 曾經是國中老師，對那時的校務系統的爛介面耿耿於懷，於是想重製一款專給校園用的校務系統 5. 母親是做民宿，但找不到合適的訂房系統，於是你一手包辦網站開發+訂房系統這些題目都有個共通性，那就是「有故事性的」，沒有人不喜歡聽故事，更喜歡聽你是工程師，你透過自己的技術，去解決你周遭遇到的問題。所以不妨從你自己的興趣、經歷、親友難題，來用紙筆都記錄下來你的人生歷程遇到的事情，或許靈感就不經意就蹦出來了。 ## 做作品的兩個小叮嚀叮嚀一：盡量不要做太冷門，大家都沒接觸過的題目，舉例來說「YSC 偶像介紹網站」、「阿克希原料庫存」。有可能在你的小圈圈裡，他可能真的很有名，但不代表整個就業市場與 hr 都知道該領域。如果你的題目難以讓 HR 人資理解時，被刷掉的機率就高很多。所以真的想到題目時，可以找朋友問問，知不知道這題目或領域，避免好不容易做的題目，而沒有被看見的機會叮嚀二：要有個提前認知，「你的作品主題，就容易吸引到相關產業對你有興趣」，但該產業是否是你喜歡的？或者是不排斥的？或者是否有前景？這也是你可以衡量的一環。以目前前端工程師來說，也就有接案、傳產、電商、行銷、顧問公司、博弈、SaaS、半導體、科技產業等等產業，只要有 web 的需求就可能會招聘前端工程師。你大可用「前端+產業名稱+評價」去搜尋，讓自己對該產業有個基本認知。更甚者去尋找些相關產業龍頭公司，去天眼通看看評價，也能獲得一些情報。這樣才不會真的進去後才發現，產業不如自己的預期，或是你不喜歡的工作內容。 ## 最後提供給 B0 的建議首先你目前有擔任資訊服務工程師，這個是非常有加分的，再來你 SQL 操作上，也多少因為工作需要，而多少有所小成。為了結合你這份工作的經驗值，讓你在就業時，能夠與目前市場上的初級前端工程師，有些明顯的辨識度。那麼我會建議妳學一個後端，並嘗試接自己寫的 RESTful API，文中你有提到有在 Node.js 也可以，或者是你既有公司已經有接觸的後端語言，不然一些比較熱門像是 PHP、Python 都 ok。資料庫也可用你習慣的 SQL 整合。你不需要學到很精深，只需要能做到能自己開 API ，對 junior 初級前端工程師來說就已經非常足夠了。會有這樣的考量，是因為這樣在履歷撰寫上，公司在看你的經歷背景是有加分的，例如妳背景本來是用 SQL 做維護與第一線排除，但後來發現自己對前端有興趣，於是結合自身所學的 SQL 知識並掌握一個後端，讓自己開始朝向前端為主，後端為輔的技能樹去拓展自己的職涯。這樣在資歷上相對來說也比較加分，但如果相對的，如果你的網站都沒有介接 API，或是單純只有接幾個 get API，這樣可能就比較偏向靜態網頁，求才公司看到你的履歷時，也會比較黑人問號，明明上個公司都已經都在寫 SQL，怎麼作品上比較少有關於 Client Side Render 的單頁式複雜應用。這樣他們就反而會質疑你上份工作的經驗，在經歷認知上，還是會認為你與其他初級前端工程師來說，沒有太大辨識度。那麼在後端的學習路線上，也多少給你些方向。 1. 先挑選一個你比較有把握的後端語言 2. 網路上一定有教學，教你去做 RESTful API ，並搭配 SQL 資料庫整合 3. 會員註冊、登入功能，可以先做個小 project ，做一個會員登入後，才可以留言的留言板，來當作練手 4. 上傳圖片功能，若覺得困難，可以搜尋 imgur 的介接 API 教學，這樣不用自己處理 storage 檔案存放問題如果覺得時間有限，了解前兩點，並把程式部署到 heroku 主機上，自己的前端就能接自己的 API 了。但如果做到第三點，也就是「登入後，自己才能做的功能」，可以玩得事情才會相對多，例如做一個論壇服務，客戶必須註冊才可以在論壇裡發表訊息等等。第四點則是若是有上架產品功能、上傳相簿功能時，若有個上傳圖片功能，也能有效美化或擴充服務。 — 但文中你也有提到自己想要年初開始投遞，那這樣的話，去找一些熱門 API，或者是自己用 Mock API、JSON Server 並整 imgur ，也能同時做到接近上面的效果。且你目前工作也是跟程式有相關，至少了解軟體公司的文化與開發維護細節，相對來說背景上來說，也比起白紙一張，第一份工作就是前端工程師的求職者們還有優勢加分多了。 B0 看到您與其他 Dcard 網友的誠懇對談互動，能看出您也是相當認真，想突破自己發展的勇者，也促使我寫文想盡些棉薄之力，希望以上個人經驗多少能幫助到您。

B152021年11月6日

你可能感興趣的文章

共 18 則留言

辛普森荷馬

只能說課程的作品產物已經爛大街了要放在作品集可以，但不能只有那些真的想脫穎而出就要做出不一樣的

B12021年10月27日

淡江大學

不要只拿六角的作品出去面試，有些主管看到你六角出來的刷掉了，建議找個有興趣的主題做

B22021年10月27日

國立高雄科技大學

找個有興趣主題做不然就是延伸一些小project 像是我做todolist就會串上map的api

B32021年10月27日

國立勤益科技大學

感覺你的資歷會串api、會正確處理資料應該就可以了上述你講的技能如果你都熟悉，那妳一定非搶手但是要什麼程度才能稱為熟悉？舉例將陣列清空你可能會這樣寫 Let testArray=[1,2,3,4,5]; testArray=[]; testArray.splice(0,testArray.length); testArray.length=0; while(testArray.length>0){ testArray.pop() } 同樣都可以達成目的但是performance 就不一樣這些細節就覺定你的熟悉程度

B42021年10月27日

國立屏東科技大學

你先去報精神時光屋吧下周開賽下下周輪到前端

B52021年10月27日

原 PO - 實踐大學

B1 真的在各大平台出現類似作品我會努力！感謝分享

B62021年10月27日

原 PO - 實踐大學

B2 感謝分享！

B72021年10月27日

原 PO - 實踐大學

B3 ！！！感謝你也列入練習作品🤩🤩🤩

B82021年10月27日

原 PO - 實踐大學

B4 第一個念頭出現是 testArray.length=0; 不過後來突然萌生如果 testArray= a； a同時也會被清空～ splice也是但如果是test=[]; 是重新指派所以不會影響到陣列複製以上～如有錯誤的話希望能指教😅 我想我欠缺的是熟悉度，目前還是以不斷產生作品來累積，畢竟在做作品的時候，常常會遇到很多小錯誤，恍然大悟時，會覺得自己又多學會了一些東西

B92021年10月27日

原 PO - 實踐大學

B5 昨天已報名！聽說第一階段跟旅遊導覽有關😆😆

B102021年10月27日

國立成功大學

六角cp值最高的應該是切版直播班 Vue講很淺而且都實做為主沒有自己持續精進以及在GitHub產出作品可能光面試那關就過不去了

B112021年10月28日

淡江大學

B10 我可以問問原po 從零基礎到學會大概花多久時間嗎？

B122021年10月31日

原 PO - 實踐大學

B12 其實中間有斷斷續續過一直到今年6月開始每天練功到現在的，現在還在學習Node.js跟jquery中還沒完全學完～～但如果是html、css、js 之前大學是資訊相關科系所以有點熟悉但vue.js跟切版外加上面三大柱的再練習也在一邊工作一邊讀的情況下進行了快一年