網誌有圖好讀版 : https://yschen25.blogspot.com/2019/07/blog-post.html 如果你有以下困擾，歡迎參考此篇文章 : 1. 我是初學者，有沒有推薦的學習資源 2. 有沒有推薦的書籍 3. 想去實體店面翻書，有沒有推薦的店家 4. 原文書很貴，想買又不確定適不適合自己 5. 有沒有論壇可以和大家互相交流 6. 我想要問問題，是要直接把程式碼貼上去問嗎 7. 切版很需要素材，有沒有推薦的網站 而網路上已經有很多為什麼要轉職前端工程師、如何轉職成前端工程師的文章，這邊也有 一篇 2018 年成為 Web 開發人員的路線圖可以參考來決定方向，這邊就不複述了。 這篇主要是寫給對於前端有興趣的「初學者」、「非本科想轉前端」的人，可以利用哪些 網站來幫助自己學習；因為我個人是非本科轉前端，到現在差不多兩年多了，想分享些自 己當初到現在用過覺得不錯的學習資源、書籍與素材。 ==前端學習網站== * MDN https://developer.mozilla.org/zh-TW/ 提供了許多關於網站相關技術的說明和學習文件，雖然有些區塊還沒翻譯，但講解清晰有 範例，比起底下的 w3schools 更推薦看這個，正確性比較高。 * w3schools https://www.w3schools.com/ 大名鼎鼎的 w3schools，初學者入門款，我用過 freeCodeCamp、code School、codecademy 等 ，但還是覺得 w3schools 最好用。有 HTML、CSS、JavaScript 等課程。 優點是版面乾淨清楚，且每個章節都有範例可以讓你參考，如果在學習過程中有些概念想 實現看看，或是還不熟悉如何使用編輯器，可直接在範例上修改程式碼來驗證自己的想法 。 * Remove w3Schools plugin 這是個題外話，據我所知有些人不喜歡搜尋時看到 w3schools 的資料，覺得上面太多錯 誤資訊，所以還專門寫了一個套件，裝了之後可以在 google 搜尋中移除顯示 w3schools 的相關資訊。 不過我覺得不管是上網查資料、看書或是聽他人教學或多或少都有可能聽取到錯誤的資訊 ，所以不管資訊來源是哪，都不能完全盡信，還是要依靠邏輯、經驗等去做判斷。 再說回來這網站就初學者前期來說是值得使用的。 然後還記得當時會有個迷思是，是不是要把全部的 HTML、CSS 內容都看熟才開始切版， 結果會記了很多標籤、屬性、屬性值等卻沒辦法活用，建議可以看大概 3/5 就可以試著 切版，一邊切一邊學，比較可以知道自己觀念哪裡沒弄清楚，不然很容易看過就忘了，或 是以為自己已經會了。 * freeCodeCamp https://learn.freecodecamp.org/ 使用關卡方式一步步教你觀念，但實際用起來會覺得已經有基礎觀念的人，再用這網站會 學的比較紮實。 * jQuery 官網 http://api.jquery.com/ 詳細解釋每個 api 用法，底下也有效果範例教學。 * udemy https://www.udemy.com/ 有時候只是看文字解說不夠清楚，這網站就有提供影音教學影片，除了程式相關，也有如 設計、市場行銷等課程，國內國外的講者都有；常常特價，有很多內容實在還附上程式碼 可供下載的英文課程才台幣 300 多元，經濟實惠，大推!! 有時候也會提供免費課程，可以加入這個FB社團 : Soft & Share 軟體開發資訊分享，就 能隨時收到免費課程提醒，像是這樣 : 這些課程都是我免費拿到的 但說實在的，若需花大量時間去找免費資源，所花的時間都可以學更多東西了，有些必需 的軟體、書和課程之類，在經濟可負荷下就直接買了，不需要省這些錢。 * 100 個 udemy 的免費課程 https://udemycoupon.learnviral.com/coupon-category/free100-discount/ udemy 無限制時間提供的 100 個免費課程。 * CSS-tricks https://css-tricks.com/ 詳細的 CSS 用法，常會分享一些樣式的小 tip。 * zlargon 大大的Git 教學 https://zlargon.gitbooks.io/git-tutorial/content/ 圖文並茂，相當詳細易懂的教學。 * Git常用指令 | qwerty http://gitqwerty777.github.io/git-commands/ 列出常用的git指令，後面都會簡略敘述功能，快速查詢指令時很方便。 ==論壇== * Stack Overflow http://stackoverflow.com/ 程式人必用網站，任何可以想得到的問題上面 99% 都有解答，只是是英文且搜尋時要下 對關鍵字；剛開始時不會下關鍵字時可以試著打幾個重點描述，然後在一邊找的時候，可 以一邊看別人是怎麼下關鍵字的。 * 掘金 https://juejin.im/timeline 包括前端、後端的技術討論，從基礎到鑽研都有；喜歡的文章可收藏很方便。 * 牛客網 https://www.nowcoder.com/7729538 有各種程式試題可刷，除了有 CSS、JS、PHP，還有JAVA、GO 等等，能選題目類型、調難 度，還能記錄題目，註冊後可以看到答案解析，也有人會在底下分析、討論。 有線上編程，可以線上刷題，還能看到其他人的解法。 還有各種筆試題、面試題可以刷，也有蒐集公司實際的試題、前端校招面試題目合集、JS 面試經典題目合集之類。 * ithome 鐵人賽 https://ithelp.ithome.com.tw/articles?tab=ironman 這個超棒的，有各種神人挑戰 30 天寫技術文章，版面乾淨清楚好上手，文章內容也是很 詳細。 ==書籍== 如果覺得單看網站不夠，希望能更有系統性的學習，可以考慮搭配以下書籍；這幾本是我 去過好幾家書店翻過後，覺得講的最清楚的，圖文並茂，且很不會一下就用很艱澀的名詞 去解釋，對於不習慣工程師語言的人來說平宜進人。 但不管別人再怎麼推薦，最好還是自己去翻翻看，挑選自己容易理解的，畢竟最後還是要 自己能夠看得下去。 * HTML5。CSS3 最強圖解實戰講座 * HTML&CSS：網站設計建置優化之道 * JavaScript & JQuery：網站互動設計程式進化之道 * jQuery 最強圖解實戰講座 ==線上編譯== 當遇到有問題想問人時千千萬萬不要直接貼一串程式碼上去啊 QAQ，這樣不但對方難以閱 讀，也難以幫忙 debug，這時候可以利用線上編輯器，而且也不用考慮建環境問題。 * JSFiddle https://jsfiddle.net/ 如果常上 Stack Overflow 的人，一定常常可以看到回答問題的人用這個 Demo * JS Bin https://jsbin.com/xigodol/edit?html,js 保哥這有詳細的解說如何操作 *CodePen https://codepen.io/ 版面簡潔乾淨，但功能強大。 ==書局== 天瓏書局 地址 : 台北市中正區重慶南路一段107號 有超多電腦書，號稱全台電腦書最齊的一家。有簡體、繁體、原文書，價格比較便宜；感 覺店員也受過相關訓練，在購買時還會跟你確定版本或附件，之前還聽到店員跟外國人解 釋兩本程式書的差異。 ==Plugin== * CSSPeeper 可以偵測該網站的配色，並顯示色號；也可以顯示使用的圖片，並可以打包下載，很適合 切版練習用 (不是讓你去盜別人圖片啊 XD)。 * ColorPickEyedropper 可以偵測你選取地方的色號，很方便抓在網站上看到喜歡顏色的色號。 ==素材網站== * Pixabay https://pixabay.com/ 在搜尋框旁有教學如何下關鍵字，可以搜尋到不少好照片。 * Pexels https://www.pexels.com/ 充滿各式豐富的照片。 * Everypixel https://everypixel.com/ 大推!! 功能強大，可以選擇篩選條件為 Free、直向橫向照片、照片主要顏色、照片哪些 地方需要留白、照片是否為單一人物、照片作者名稱。 * Unsplash https://unsplash.com/ 這網站很適合找有質感很有意境的照片，解析度也很高。特色是每隔 10 天會上傳 10 張 新的高解析度攝影照片作品。 * Streetwill http://streetwill.co/ 跟前一個很像，有很多有質感、意境的照片。這網站提供願意免費分享攝影作品的攝影師 上傳高解析照片，可以在這裡找到對於世界上不同景物的不同攝影角度照片。 * Foodiesfeed https://www.foodiesfeed.com/ 也是很有質感、以食物為主題的照片分享網站，可以打包下載漢堡、水果等等的美食主題 照片。 * Stocksnap https://stocksnap.io/ 充滿各式豐富的照片。 * Subtlepatterns https://subtlepatterns.com/ 偏向網站底圖。 * Freepik http://www.freepik.com/ 提供 Psd 檔可以直接下載修改。 * 365 psd http://365psd.com/ 很多免費的 Psd 檔可以下載，如果要你分享按讚，隨便點一下再取消就可以下載了。 * Free psd http://all-free-download.com/free-psd/ 也是有免費的 Psd 檔可以下載，但資源沒那麼多。 * Psd Finder https://psdfinder.co/ * Flaticon https://www.flaticon.com/ 有豐富的 Icon 可以下載。 * Iconfinder https://www.iconfinder.com/ 和 Flation 一樣能下載 icon，但能線上編輯選擇的 Icon，並能下載不同 size。 * Fontawesome http://fontawesome.io/ 將 Icon 都以文字型式呈現，切版時常會用到。 ==配色== * Coolors https://coolors.co/ 可以隨機幫你產生一組色號，省下配色的時間。 * Nippon Colors http://nipponcolors.com/#tsuyukusa 以日式配色為基調的網站，選色後背景顏色會跟著變讓你可以看整體顏色。 ==靈感== * Pinterest https://www.pinterest.com/ 不管是配色、網站設計、圖案設計等，都可以在上面搜尋，相信這網站會給你帶來不少靈 感。 * CodePen https://codepen.io/ 上面有很多精采的前端作品，還可以看到別人的程式碼，也可以將自己作品放上去。 * Codrops https://tympanus.net/codrops/ 也是有很多精采的前端作品，有教學並供程式碼下載 * Awwwards https://www.awwwards.com/ 這個網站定期蒐集優秀的網站設計案例，是追蹤最新網頁設計趨勢的重要平台。 * Code My Ui https://codemyui.com/page/1/ 有很多日常想不到的小巧思，找不到靈感時可以上去看看。 如果還有什麼推薦資源，歡迎補充~

大家好，小妹第一次發文，有爬了一下聯成的文章，幾乎都是轉售的 所以完全不知道這樣的價格值不值得，想請教各位 我的課程內容包刮: 整合品牌行銷實務、商業平面設計、跨平台商業網站設計 會學到PS、AI、RWD、CSS3、HTML5、與雇主溝通協調等接案技巧 說是保證接案保證就業，會有作品和三張國際證照 主要要上的課是3月~8月每周日整天 有三年實體課程+五年的線上課程學習 一直對設計有點興趣，也曾經自學小摸PS和AI， 但是因為完全不是本科，加上是雜亂無章的網路自學，所以完全不是可以自己接案的程度 就算技巧夠，也不知道如何開始接案，但也找過網路上有些針對接案的教學文章 因為目前的工作大約工作時間不長，無須加班 所以覺得做外包接案對於增加薪水是很好的方法 所以想朝這裡前進看看，不然就是直接兼個本科的兼職...... 但這樣價格約十萬 因為他一開始報的價格更高，後來有這個價格每月分期我覺得還能接受一個衝動就報了 ... 但是現在如果要退的話只退90% 表示我要賠9900阿天啊，不知道這個價格到底值不值得QQ 不知道各位這樣聽下來，有什麼意見可以建議我嗎...... 謝謝大家看到最後QQ ~ ~ ~ 編輯文章 (^Z/F1)說明 (^P/^G)插入符號/範本 (^X/^Q)離開 ║插入│aipr║ 20: 1

   表單製作也是網站設計中滿常用到的一個功能，有時為了避免填寫表單的客人們少填寫了些欄位資料就需要使用到些驗證，針對各欄位在送出表單前做一驗證的動作。除了Dreamweaver 中有內建一個陽春的表單檢驗功能，大家還可以參考這隻有馬老師中文化的，還滿適用的，大家可以試試。

WHAT WE DO : 
網站設計
標誌Logo設計
品牌設計

Partake是由Easondesign創造的一個分享平台，藉由採訪台灣的故事，讓年輕人更有一個借鏡及參考的方向，並也藉此分享台灣。在LOGO的設計上面使用較為手稿體的字體結合對話框框，朔造一種我們正在用討論溝通聊天來分享台灣的美好！

社會中心／綜合報導

警方最近破獲一起智慧型犯罪，嫌犯為北市「數位基因公司」董座許迺赫與其公司股東洪維昇，他們在今（2015）年3月至4月間數度入侵高鐵網站，利用網站設計漏洞來竄改票價、升等包廂，但落網後許嫌竟稱犯案「只是為了挑戰自己」，不是為了錢。許嫌犯案後還在個人臉書上發文酸民間企業的資安，說他們是「銅牆鐵壁卻忘了關門」。

http://www.targetscope.com/