🔥 หากวันนึงคอมเสียแล้วจำเป็นต้องแก้โค้ด ณ. จุดนั้น หรือไม่อยากติดตั้งโปรแกรมให้วุ่นวาย วันนี้แอดมีของดีมาแนะนำกับ
.
🌍 "เครื่องมือให้เราเขียนโค้ด แสดงผลการทำงานแบบฟรี ๆ ผ่าน Web Browser"
.
ซึ่งแต่ละเจ้าก็มีข้อดี จุดเด่นที่แตกต่างกันออกไป เหมาะสุด ๆ ทั้งงานเฉพาะกิจ และ น้อง ๆ ที่ยังไม่อยากซื้อคอมใหม่มาเขียนโค้ด เอาเป็นว่างั้นแอดขอไม่พูดมาก มาดูพร้อม ๆ กันเลย
.
1. codesandbox.io
"ใช้งานได้ง่ายหมือน VS Code, เขียน React ก็ได้ เชื่อมกับ GitHub ก็ยังได้ มี NPM Package ให้ใช้อีก "บอกเลยว่าใครต้องการพัฒนาเว็บ หรือ ฝั่ง JS ใช้เว็บนี้ตัวเดียวจบจ้า แถมตัวฟรียังแทบไม่จำกัดฟีเจอร์หลักด้วย
📌 เข้าใช้งานได้เลยที่ https://codesandbox.io/pricing
.
2. W3Schools Online Code Editor
"จะดีแค่ไหน ถ้าเป็นได้ทั้ง Code Editor และ Tutorial ที่สอนวิธีการเขียนโค้ดไปด้วยกัน" กับ W3School ที่สอนทุกคนทำ HTML, CSS และ JavaScript ออนไลน์เห็นภาพจริงเมื่อสั่งทำงาน !
📌 เข้าใช้งานได้เลยที่ https://www.w3schools.com/tryit/
.
3. CodePen
"ให้การเขียนโค้ด HTML CSS และ JavaScript ของเรา เป็นวิทยาทานแด่ผู้คนทั่วโลก !"
เพราะทุกโค้ดสุดเจ๋งที่เรานำมาทดสอบ สามารถแชร์ไอเดียเหล่านี้ให้เพื่อนดูได้แถวยังดูไอเดียจากเพื่อน ๆ ได้อีกด้วย
📌 เข้าใช้งานได้เลยที่ https://codepen.io/
.
4. Play Code
"จะ jQuery, React, Vue หรือ JS ตัวไหนก็ไม่กลัว" เพราะ Play Code สามารถให้เรารันงานเหล่านี้ได้ง่ายจัด ๆ" ทดสอบได้ผ่านหน้าเว็บรูปแบบออนไลน์ได้เลยไม่ต้องติดตังโปรแกรมให้วุ่นวาย !
.
5. Repl.it
"มี 55 ภาษาให้เลือกเขียน โหดกว่านี้ไมมีอีกแล้ว" สำหรับใครที่ชอบ Python, C, C++,C#, Kotlin, Java และอีกกว่า 50 ภาษาต้องห้ามพลาด แถมยังมีระบบให้แชร์งาน หรือ ทำโจทย์ร่วมกับชาวบ้านอีกด้วยนะ !
📌 เข้าใช้งานได้เลยที่ https://repl.it/
.
6. Dev Lab 3
"Code Editor รูปแบบออนไลน์ที่ช่วยให้คุณได้มาฝึกสกิล พัฒนาทักษะ Algorithm แบบฟรี ๆ" เหมาะสำหรับท่านที่อยากลองของ หรือ อยากอัพสกิลด้านเขียนโปรแกรมให้เก่งยิ่งขึ้น แก้ปัญหาเขียนโค้ดไม่ออกกับเว็บนี้ได้เลย
📌 เข้าใช้งานได้เลยที่ https://www.borntodev.com/intro-devlab-3-pro/
.
ซึ่งทั้งหมดนี้เป็นเว็บไซต์ที่ให้เราเขียนโค้ดรูปแบบออนไลน์ได้ และ บางเว็บมีโจทย์ให้ลองทำกันแบบฟรี ๆ ด้วย เอาไว้อัพทักษะกันได้เลย <3
.
หากเพื่อน ๆ มีเว็บไหนที่อยากแนะนำพิมพ์ไว้ด้านล่างได้เลยคร้าบผม :D
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
「css w3school」的推薦目錄:
- 關於css w3school 在 BorntoDev Facebook 的最佳解答
- 關於css w3school 在 紀老師程式教學網 Facebook 的最佳貼文
- 關於css w3school 在 W3Schools CSS Background Tutorial - YouTube 的評價
- 關於css w3school 在 How can I customize w3-button-hover class in w3school css ... 的評價
- 關於css w3school 在 AOS - Animate on scroll library 的評價
- 關於css w3school 在 w3schools/index.html at master · douglasabnovato ... - GitHub 的評價
- 關於css w3school 在 W3Schools Online Web Tutorials | Color picker ... - Pinterest 的評價
css w3school 在 紀老師程式教學網 Facebook 的最佳貼文
[好站介紹] 五個學習程式設計的教學網站
5/1 勞動節快樂!
前幾天連續介紹了一些影音教學網站:「CodeRibbit」、「The New Boston」跟「Wap2Learn」,不知道大家看了覺得如何呢?今天要跟大家介紹的,是我在國外網站逛到的一篇報導,介紹了幾個作者覺得不錯的程式設計教學網站。其中有幾個網站我也很愛!也還沒在這個粉絲頁介紹,就借花獻佛,把原文簡單翻譯一下,分享給大家。
首先給大家看一下原文連結:
"Best websites to learn Programming"
http://www.technotification.com/2014/05/best-websites-to-learn-programming.html
鑑於並非每個人閱讀英文都沒啥困難,所以小弟就「簡單」(原諒我的懶惰... :-P)翻譯一下,希望對大家有幫助。該篇文章介紹的五個網站如下:
1. The New Boston
------------------
http://www.thenewboston.org
* 性質:影音教學網站
* 內容:C, C++, HTML, Javascript...等電腦語言
* 難易度:簡單
來了來了!果然英雄所見略同!The New Boston 果然在國外鄉民的眼中是第一名啊~~ 這個網站我已經在前天的文章介紹過,所以這裡就省略了!想回味一下的網友,可以點擊底下的連結:
http://on.fb.me/1GnYM3M
2. Codecademy
--------------
英文: http://www.codecademy.com
簡中: http://www.codecademy.com/zh/
* 性質:實作型教學網站
* 內容:著重網頁設計。包含:HTML, Javascript, CSS, Python, Ruby, PHP
* 難易度:簡單
Codecademy 大約在 2011 年竄起。由於它透過實作的方式教會大家寫程式,不僅少見,也備受眾程式講師推崇。這部分國內有報導,就讓我借用一下:
T 客邦:「Codecademy 讓你一年內學會寫程式,或許能賺更多錢」
http://www.techbang.com/posts/8212-codecademy-makes-you-a-year-to-learn-about-programming
看完相信各位對 Codecademy 應該就有基本認識了。原文沒有「簡中」的網址,我幫各位補上了。目前還沒有繁中網站,不過我想台灣或香港的朋友,看簡體字應該還應付得過去才是。
3. Learn Code The Hard Way
---------------------------
http://learncodethehardway.org
* 性質:電子書、影音教學
* 內容:Python, Ruby, C, Regex(Regular Expression), SQL...。
* 難易度:簡單
這個網站的電子書比它的影音教學出名十幾倍!主要是它的影音教學要錢(一門課約 US$30 左右,也不多就是了),但電子書免費。偏偏它的電子書寫得超好!還被很多人翻譯成各國語言。所以想省錢的可以看它的電子書。如果英文聽力夠好,想聽影音教學,可以付個 US$30 左右試試看。
其實這個網站小弟也在 2012/02/16 於本版介紹過。只不過年代久遠,大家可能忘了。我貼一下當時的連結給大家參考:
http://goo.gl/arYJlD
為了大家方便,若某一版本有簡中或繁中版的,我直接把該網站的電子書連結附在下方,希望對大家有幫助。沒有中文版的,有可能是我才疏學淺找不到,或者該項目太冷門,沒有人翻譯(看到小弟這麼努力,是不是來點虛榮心、幫忙轉寄按個讚咧?哈哈哈~):
- Learn Python the Hard Way
英文: http://learnpythonthehardway.org/book/
簡中: http://goo.gl/t7O3V5
- Learn Ruby the Hard Way
英文: http://learnrubythehardway.org/book/
繁中: http://lrthw.github.io/
- Learn C the Hard Way
英文: http://c.learncodethehardway.org/book/
簡中: http://goo.gl/IujZJk (尚未翻譯完成,有找到完整版的麻煩補一下連結 m(- -)m )
- Learn Regex the Hard Way
英文: http://regex.learncodethehardway.org/book/
- Learn SQL the Hard Way
英文: http://sql.learncodethehardway.org/book/
4. WiBit.Net
-------------
https://www.wibit.net
* 性質:影音教學
* 內容:程式入門、物件導向基礎、C/C++、Objective-C、Java、C#、Python、與腳本語言。
* 難易度:簡單
一句話描述這個網站:「程式初學者的可愛風學習網站」!主頁用許多可愛的圖片,來代表每一門課程。該網站是兩位程式師,以對談聊天的方式(這種錄影腳本比獨白難寫多了... :-P),介紹 C/C++、Objective-C、Java、C#...等課程。而且...完全免費!可愛這種東西用講的很難形容,不妨大家點點看他們的網址,就知道我的意思了!
5. W3School
-------------
http://www.w3schools.com
* 性質:網頁文章教學
* 內容:HTML, CSS, JavaScript, VBScript, PHP, ASP.NET, XML
* 難易度:簡單
老牌的網頁程式設計教學網站!這個網站很久了!當年 YouTube 還沒紅時,它就以滿滿的網頁程式設計範例,風靡國外鄉民們。它的特色就是「範例、範例、範例」,一大堆循序漸進的範例!我蠻喜歡這種教法的。畢竟讓我看一眼跑出來的結果,我有興趣再去研究裡面的程式碼是怎麼寫的,比直接看一本可以砸死唐伯虎那過世的寵物簡單多了... XD。不過它也有缺點:近年來興起的各種 JavaScript 框架,如 jQuery, Angular.js, Node.js...等,它就沒有教了。不過仍無損它在「網頁程式設計」教學的地位!
[2015/05/02 補記] ---------------
感謝 Dennis Kuo 網友補充。W3CSchools 的確已經有 jQuery 與 Angular.js。不過 Node.js 我沒找到。如果有找到的朋友再麻煩補充一下。
另外,對英文苦手的朋友,也可以看看由中國網友熱心翻譯的 w3schools 簡體中文版。網址是: http://www.w3school.com.cn/
-----------------------
今天的五個網站,大家看了還滿意嗎?喜歡的話,麻煩轉寄給你的朋友、或按讚鼓勵小弟一下喔!!
css w3school 在 AOS - Animate on scroll library 的推薦與評價
yarn add aos npm install aos --save bower install aos --save. CDN sources. CSS. <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">. JS. ... <看更多>
css w3school 在 W3Schools CSS Background Tutorial - YouTube 的推薦與評價
Video tutorial from the CSS Background chapter of the CSS tutorial on w3schools.comhttp://www.w3schools ... ... <看更多>