---
title: Codepen
slug: th/user-guides/codepen
description: ค้นพบว่า CodePen ซึ่งผสานรวมกับ Archbee ช่วยเพิ่มประสิทธิภาพการเขียนโค้ดได้อย่างไร โดยอนุญาตให้แก้ไข HTML, CSS และ JS แบบเรียลไทม์ เหมาะอย่างยิ่งสำหรับไกด์สไตล์และการใช้งานด้านการศึกษา
image: https://cdn.images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/Bvl-ub3oavd0E5Xf7Hpq-_archbee-codepen.png
icon: {"lucideIcon":"Codepen"}
createdAt: 2022-06-10T12:04:54.000Z
---

::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Bvl-ub3oavd0E5Xf7Hpq-_archbee-codepen.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### CodePen คืออะไร?

**CodePen** ช่วยให้ผู้ใช้สามารถแก้ไข **HTML** ได้อย่างง่ายดาย, **CSS**, และ **JavaScript** บน **เบราว์เซอร์ของพวกเขา**, และด้วย **Archbee** กระบวนการนี้ยิ่งราบรื่นขึ้น โดยไม่ต้องติดตั้งซอฟต์แวร์ใดๆ การผสานรวมนี้ช่วยเพิ่มประสิทธิภาพและความสะดวกในการพัฒนา

ส่วนที่ดีที่สุดคือสามารถเห็นผลลัพธ์ได้แบบเรียลไทม์ ทำให้การดีบักรวดเร็วขึ้น นักพัฒนาและนักออกแบบยังสามารถสร้างและแชร์โค้ดสไนเป็ต (ที่เรียกว่า pens) กับคนทั่วโลกได้

### CodePen ใช้ทำอะไร?

1. **จัดทำ Style-Guide ให้โปรเจ็กต์ของคุณ** - คุณสามารถใช้ตัวแก้ไขโค้ดออนไลน์ของ CodePen เพื่อสร้างสไตล์สำหรับองค์ประกอบในโปรเจ็กต์ของคุณได้เสมอ วิธีนี้ช่วยให้คุณมั่นใจได้ว่าสไตล์ของคุณจะไม่ถูกโค้ดขององค์ประกอบอื่นรบกวน คุณสามารถมองมันเป็นผืนผ้าใบเปล่าๆ ได้
2. **เรียนรู้เฟรมเวิร์กหรือไลบรารีใหม่** - คุณไม่จำเป็นต้องตั้งค่าสภาพแวดล้อมใหม่ทุกครั้งที่ต้องการทดสอบว่าการเปลี่ยนแปลงของคุณได้ผลหรือไม่ มุมมองตัวแก้ไขจะแสดงพื้นที่แก้ไขทั้งสามส่วนพร้อมกับตัวอย่างแบบพรีวิว ซึ่งจะอัปเดตผลลัพธ์สุดท้ายทุกครั้งที่มีการเปลี่ยนแปลง

### กรณีการใช้งาน

1. ลูกค้าสามารถฝัง URL ของ CodePen บน Archbee เพื่อแสดงตัวอย่างที่ช่วยเสริมเอกสารของเขา
2. การฝัง CodePen สามารถใช้เป็นคู่มือผู้ใช้ได้ หากเป็นมาตรฐานในองค์กรของลูกค้า

::codepen{url="https://codepen.io/DragosBulugean/embed/vqrgYq"}