Search
💡 อยากเขียน HTML CSS และ JavaScript แต่ไม่อยากโหลดโปรแกรมให้ยุ่งยากต้องทำยังไง ??
.
ถ้าอยากรู้...มาดูกงนี้ !! 🤣 เพราะแอดได้รวบรวม IDE Online ดี ๆ ที่จะทำให้เพื่อน ๆ เขียนโค้ดผ่านหน้าเว็บอย่างง่ายดาย แถมยังแชร์การทำงานกับเพื่อน ๆ ได้อีก !
.
มีอะไรบ้าง ไปดูกันเลยจ้า 🔥
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#code #editor #BorntoDev
🔥 หากวันนึงคอมเสียแล้วจำเป็นต้องแก้โค้ด ณ. จุดนั้น หรือไม่อยากติดตั้งโปรแกรมให้วุ่นวาย วันนี้แอดมีของดีมาแนะนำกับ
.
🌍 "เครื่องมือให้เราเขียนโค้ด แสดงผลการทำงานแบบฟรี ๆ ผ่าน 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 - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
🔥 "สาย Front-End ต้องแชร์ !!" กับสรุปรวมเครื่องมือ และ Framework ดี ๆ ที่ต้องบอกต่อสำหรับคนทำหน้าเว็บ <3
.
ต้องบอกว่าวันนี้แอดและทีมงานได้รวบรวมเครื่องมือเครื่องไม้ ที่จะทำให้งานยาก ๆ กลายเป็นงานง่าย ๆ ไว้ในที่เดียวให้แล้วว
.
⭐️ ใครที่กำลังเริ่มสาย Front-End หรือ ต้องการหาของดีรีบเข้ามาดูได้เลย สำหรับลิงก์ในการเข้าไปดาวน์โหลด / อ่าน Doc / วิธีการใช้งาน ดูด้านล่างได้เลยคร้าบผมมม ^__^
.
👩🎨เครื่องมือเด็ดที่คุณต้องแชร์ของสาย Frontend
.
📚 JavaScript Framework
.
Vue.js
https://vuejs.org/
.
Angular
https://angular.io/
.
React
https://reactjs.org/
.
Backbone.js
https://backbonejs.org/
.
🎨 CSS Framework
.
Bootstrap
https://getbootstrap.com/
.
Materialize
https://materializecss.com/about.html
.
Pure.css
https://purecss.io/
.
Bulma
https://bulma.io/
.
Semantic UI
https://semantic-ui.com/
.
📖 Library
.
sweetalert2 : สำหรับสร้าง Alert สวยๆได้ง่ายๆ
https://sweetalert2.github.io/
.
AlertifyJS : สร้าง Alert สวยๆเหมือนกัน
https://alertifyjs.com/
.
Chart.js : สำหรับสร้าง Chart แบบมี animation
https://www.chartjs.org/
.
jQuery : ใช้งาน JS และจัดการ DOM ได้ง่ายขึ้น
https://jquery.com/
.
DataTables : เปลี่ยน Table แบบเดิมๆให้ดูดีมี function ได้ง่ายๆ
http://fredsarmento.me/frontend-tools/
.
Quill editor : Text Editor สำหรับใส่ในเว็บเครื่องมือครบๆ
https://quilljs.com/
.
🧰 Developing & Debugging Tools
.
Chrome DevTools : เครื่องมือ Debug เว็บ เพียงแค่กด F12 เบราเซอร์อื่นๆก็มีเหมือนกัน
https://developers.google.com/web/tools/chrome-devtools
.
CodePen : Online Editor ที่สามารถจำลอง enviroment ที่เหมาะสมได้เขียนแล้วเห็นผลทันที
https://codepen.io/
.
WebStorm : Web Editor ที่รองรับ Framework ที่หลากหลาย
https://www.jetbrains.com/webstorm/
.
🍱 Other (Asset)
.
Google Fonts : font ฟรีสวยๆของ google
https://fonts.google.com/
.
awesome : Icon ฟรีสวยๆ
https://fontawesome.com/
.
figma : สำหรับออกแบบหน้าเว็บ จัดวางองค์ประกอบหรือแม้แต่สร้าง Prototype
https://www.figma.com/files/recent
.
Visual Inspector : extension chrome ที่ช่วยให้ตรวจสอบองค์ประกอบต่างๆของเว็บได้ค่อนข้างครบถ้วน
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc
.
CSS Peeper : extension chromeอีกหนึ่งตัวที่ใช้ตรวจสอบองค์ประกอบเว็บ
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk
.
" หรือถ้าใครเคยใช้ตัวไหนมาแล้ว สามารถมาแบ่งปันประสบการณ์ในการใช้งานใน Comment กับแอดได้เลยยย ใครมีตัวไหนแนะนำใส่มาได้เต็มที่เลยคร้าบผมม <3 "
.
#BorntoDev - 🦖 Coding Academy ให้การพัฒนาเทคโนโลยีเป็นเรื่องง่ายสำหรับทุกคน
Editor. Rich IntelliSense, Validation. TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML. Basic Syntax Colorization. ... <看更多>
JavaScript Online Editors - https://blog.education-ecosystem.com/10-best-online-javascript-editors/JavaScript ... ... <看更多>
javascript online editor 在 playcode - Online Javascript Editor - GitHub 的推薦與評價
Online Javascript Editor. Contribute to playcode/playcode development by creating an account on GitHub. ... <看更多>