วิธีดูตัวอย่างโค้ดของคุณด้วย codepen

หนึ่งในหลาย ๆ สิ่งที่น่าผิดหวังเกี่ยวกับการพัฒนาเว็บคือไม่มีวิธีง่ายๆในการแบ่งปันโครงการของคุณกับผู้อื่น ในหลายกรณีคุณจะต้องโฮสต์โครงการของคุณบนเว็บเซิร์ฟเวอร์หรือส่งไฟล์ที่เกี่ยวข้องทั้งหมดให้กับบุคคลที่ต้องการเห็นสิ่งที่คุณสร้างขึ้น แต่ด้วยเครื่องมือออนไลน์ที่เรียบร้อยที่เรียกว่า CodePen คุณไม่ต้องกังวลเกี่ยวกับสิ่งนั้นอีกต่อไป

CodePen.io

CodePen เป็นเครื่องมือฟรีที่จะช่วยให้คุณโฮสต์โครงการออนไลน์โดยไม่ต้องจ่ายค่าเล็กน้อย ในการเริ่มต้นตรงไปที่ CodePen.io และสร้างบัญชีฟรี

เมื่อดำเนินการเสร็จแล้วคุณสามารถสร้าง“ ปากกา” ได้โดยคลิกปุ่ม“ ปากกาใหม่” ที่มุมบนขวาของหน้าจอ

หลังจากนั้นคุณจะสามารถเพิ่ม HTML, CSS และ JavaScript ใด ๆ ลงในช่องที่เกี่ยวข้องได้ เมื่อคุณเริ่มเพิ่มในโค้ดคุณจะได้เห็นตัวอย่างสดของสิ่งที่คุณสร้าง คุณสามารถตั้งชื่อปากกาแรกของคุณที่มุมซ้ายบน หลังจากคลิก "บันทึก" ครั้งแรกคุณจะสามารถแบ่งปัน URL ของหน้าเว็บกับเพื่อนครอบครัวและเพื่อนร่วมงานเพื่อให้พวกเขาเห็นสิ่งที่คุณกำลังทำงานอยู่

นี่คือลักษณะที่ปากกาของคุณจะมองด้วยรหัสบางส่วน (ความอนุเคราะห์จากโครงการค่ายรหัสฟรีที่เรียกว่าหน้าบรรณาการ):

เมื่อสร้างปากกาของคุณเองคุณจะต้องผ่านการตั้งค่าก่อนเริ่มต้น เมื่อคุณคลิกที่ปุ่ม“ ปากกาใหม่” คุณจะเห็นเทมเพลตปากกาพร้อมให้คุณเริ่มป้อนรหัส ที่มุมขวาบนจะมีปุ่ม“ ตั้งค่า” คลิกที่ (คุณจะเห็นหน้าจอด้านล่าง)

ที่นี่คุณจะสามารถอ่านแท็บ HTML, CSS และ JavaScript เพื่อเพิ่มข้อมูลบางอย่างได้ ในแท็บ HTML คุณจะสามารถเพิ่มข้อมูลเมตาสิ่งที่ควรทำใน แท็บและอื่น ๆ ภายใต้ CSS คุณจะสามารถเพิ่มตัวประมวลผลล่วงหน้า CSS เช่น LESS และ Sass ไม่เพียงแค่นั้น แต่คุณสามารถเพิ่ม CSS ภายนอกเช่น Bootstrap และ Foundation ใต้แท็บ JavaScript คุณสามารถเพิ่มในตัวประมวลผลล่วงหน้า JavaScript เช่น Babel หรือ CoffeeScript นอกจากนี้คุณสามารถเพิ่มเฟรมเวิร์ก JavaScript ภายนอกเช่น Angular, React, Lodash, D3 และอื่น ๆ

ในที่สุด CodePen จะช่วยให้คุณเปลี่ยน "มุมมอง" ที่คุณกำลังดู มุมมองเริ่มต้นคือมุมมองแก้ไขช่วยให้คุณสามารถป้อนรหัสของคุณและดูตัวอย่างเล็ก ๆ ในคอนโซลด้านล่าง แต่มีตัวเลือกอื่นด้วยเช่นกันโดยเฉพาะมุมมอง "เต็มหน้า" ซึ่งคุณจะได้เห็นโปรเจ็กต์เสมือนอยู่บนเว็บไซต์ มีจำนวนของมุมมองอื่น ๆ ที่พร้อมใช้งานที่จะเปลี่ยนเป็นมันคุ้มค่าที่จะเล่นกับ!

CodePen เป็นเครื่องมือที่ใช้งานได้จริงและเราได้สัมผัสกับพื้นผิวที่มีประโยชน์ มันคุ้มค่าที่จะมุ่งไปยัง CodePen.io และใช้มันเพื่อทำงานในโปรเจ็กต์ต่างๆจากนั้นหากคุณรู้สึกอยากแบ่งปันกับเพื่อนหรือเพื่อนร่วมงานของคุณ

คุณคิดอย่างไรกับ CodePen คุณใช้เครื่องมือที่คล้ายกันหรือไม่ แจ้งให้เราทราบในส่วนความเห็นด้านล่าง!