Codepen چیست؟

Codepen پلتفرمی است که می توانید کدهای خود را ویرایش کنید، کتابخانه، فریمورک یا مؤلفه ای را آزمایش کنید و تغییرات را درست جلوی چشمان خود مشاهده کنید و همچنین می توانید پروژه های خود را با توسعه‌دهندگان دیگر به اشتراک بگذارید یا از آنها کپی کنید تا مهارت‌های کدنویسی خود را بهبود ببخشید، شما می توانید کارتان را سریعا اشکال‌زدایی کنید و الهام بگیرید، کد پن، که خود به عنوان «محیط توسعه اجتماعی برای طراحان و توسعه‌دهندگان فرانت‌اند» توصیف می‌شود. یک پلتفرم توسعه است که در آن هرکسی میتواند زبان های فرانت اند مانند HTML، CSS و جاوا اسکریپت را از مرورگر خود بدون دانلود هیچ نرم افزاری ویرایش کند. یکی دیگر از خصوصیات کد پن این است که می توان نتایج را همان موقع مشاهده کرد و امکان اشکال زدایی سریعتر را فراهم می کند. توسعه‌دهندگان و طراحان همچنین می‌توانند قطعه‌های کد (که pen نامیده می‌شوند) ایجاد کرده و با بقیه دنیا به اشتراک بگذارند.

codepen برای چه مواردی استفاده می شود؟

در این پلتفرم شما میتوانید ایده های خود را بادیگران به اشتراک بگذارید به لطف جامعه بزرگی که CodePen ایجاد کرده است، هزاران کاربر وجود دارند که ایده‌های خود را درباره ی انیمیشن‌ها و حتی طرح‌بندی‌های تقریباً تمام شده صفحات وب ایجاد کرده و به اشتراک می‌گذارند. اگر ایده‌هایی از خود دارید که ممکن است برای دیگر متخصصان حرفه‌ای مفید باشد، اینجا بهترین مکان برای به اشتراک گذاشتن آنها است. شما حتی می توانید با استفاده از این پلتفرم با کتابخانه هاو فریم ورک های جدیدی نیز آشنا شوید. تنها چیزی که نیاز دارید این است که مطمئن شوید کد شما فاقد حق چاپ است.

نحوه ی کار با کدپن

هنگامی که از وبسایت کدپن بازدید می کنید می توانید با گزینه های زیر وارد شوید:

1. حساب توییتر
2. حساب فیس بوک
3. حساب گیت هاب

همچنین می توانید با یک آدرس ایمیل ثبت نام کنید و نام کاربری و رمز عبور ایجاد نمایید. پس از ایجاد حساب کاربری، باید یک ایمیل از CodePen دریافت کنید. آن پیام را باز کنید و آدرس ایمیل خود را تأیید کنید.

پس از تأیید آدرس ایمیل خود، باید مستقیماً به ویرایشگر قلم (pen) منتقل شوید. اگر ویرایشگر نمایش داده نشد، می توانید بر روی قلم واقع در سمت چپ صفحه اصلی کلیک کنید.

ادیتور پن خودش به سه قسمت تقسیم می شود که شامل  HTML، Css، java scriprt می شود.

پروژه ها

یک ویرایشگر پروژه از چندین فایل HTML، CSS و جاوا اسکریپت پشتیبانی می کند. با اکانت رایگان فقط می توانید یک پروژه و ۱۰ فایل داشته باشید. اگر علاقه مند به ایجاد پروژه های بیشتر هستید، باید به اکانت Pro ارتقا دهید.