[爆卦]html教學w3school是什麼?優點缺點精華區懶人包

為什麼這篇html教學w3school鄉民發文收入到精華區:因為在html教學w3school這個討論話題中,有許多相關的文章在討論,這篇最有參考價值!作者yschen25 (卡)看板Soft_Job標題[心得] 想轉職前端工程師? 幫你蒐集教學資源!...



網誌有圖好讀版 : 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/
有很多日常想不到的小巧思,找不到靈感時可以上去看看。



如果還有什麼推薦資源,歡迎補充~



--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.194.142.182 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1562589512.A.CBA.html
※ 編輯: yschen25 (123.194.142.182 臺灣), 07/08/2019 20:39:53
dddingnan: 感謝整理 07/08 20:49
play714: 推,請問你是如何練習的? 07/08 21:01
我是會找網站 別人建好的Template
照著他的版型和功能去切出來
然後比對別人和我切法的差別是什麼
網站可以上比如templatemonster去找~
GGFACE: .... 07/08 21:22
s93061018: 感謝分享 推推 07/08 21:23
Hevak: 趁亂推兩個可以線上分享有資料夾結構和引用 npm 的環境: 07/08 21:39
Hevak: https://stackblitz.com/ 07/08 21:39
Hevak: https://codesandbox.io/ 07/08 21:39
Hevak: 這兩個在碰到 react vue angular webpack 之類複雜狀況的 07/08 21:41
Hevak: 時候非常的好用,反之 jsbin jsfiddle 比較適合貼簡短的 07/08 21:42
Hevak: 另外私心比較喜歡 jsbin 因為他手機版界面有 console... 07/08 21:42
感謝分享!!
我也比較喜歡有console的XD
laplacian: 推整理! 07/08 21:43
pkro12345: 居然沒codepen= = 07/08 21:43
Codepen我放在靈感那了 再來補在線上編譯那 感謝~
miaosue: 請問有推薦撰寫技術筆記的工具嗎? 07/08 21:51
如樓下大大所說 hackmd好用
Hsins: hackmd 阿 07/08 21:53
Hsins: github 開個 repo 都用 markdown 也行啊 07/08 21:54
richard07250: 推分享 不過w3c真的不推... 07/08 22:03
richard07250: 建議改mdn https://developer.mozilla.org/ 07/08 22:04
richard07250: 跟w3c類型相似 不過我覺得整理得更好 07/08 22:04
喔喔好喔~這個的確更好 感謝分享
※ 編輯: yschen25 (123.194.142.182 臺灣), 07/08/2019 22:19:52
mioaria: 感謝分享 07/08 22:36
paint: Nippon Colors看起來很酷 07/08 23:40
SmallDruid: 用心推 07/09 00:17
zyxl3102: 推!!! 07/09 00:37
sb107912: >100個udemy的免費課程 連結失效囉 07/09 00:59
感謝提醒~以補上
cd8275: 推 07/09 01:16
stiky7624: 推 07/09 01:34
highland: W3C跟W3School完全無關,是不一樣的東西,前者是開spec 07/09 10:20
了解! 謝謝指正 已修正= =+
kingnamefu: 推~感謝分享! 07/09 10:38
l823qqqqqqqq: 感謝分享,很需要素材 07/09 10:59
tina7996: 謝謝整理 07/09 14:19
paul800526: 推 07/09 15:26
io2601: 推~~ 07/09 16:11
sssh5566: Udemy建議買熱門的吧,我以前上免費的都很差 07/09 16:39
triplee: 現在要查文件可以直接查MDN 內容跟觀念都比w3school要清 07/09 18:33
triplee: 楚太多了 w3school做一些簡單的速查即可 07/09 18:34
toothlesses: 太強大啦 感謝造福大家 07/09 19:13
toothlesses: 另外寫技術文件我建議使用github+hugo 07/09 19:14
qq076qq076: 推用心 07/09 19:34
※ 編輯: yschen25 (123.194.142.182 臺灣), 07/09/2019 22:53:10
yschen25: 希望有幫助到大家XDD 07/09 22:55
vmjoxjp: 用心推 07/10 03:25
jack42107: 真的不要推 W3School… 會害到人 07/10 09:26
oppi19: 不推鐵人賽 07/10 13:58
rinmai: 太棒了 感謝分享 07/11 02:21
powergreen: 推整理 07/11 03:59
luffy84217: 推整理 07/13 09:54
assassin762: 優質好文,感謝有你 07/13 14:24
Haruna1998: 推 優質好文 謝謝你 07/21 20:36

你可能也想看看

搜尋相關網站