۲ ابوالفضل
چگونه از code pen استفاده کنیم
جامعه Html & CSS ایجاد شده در ۰۷ آذر ۱۴۰۳

سلام 

من به یه مشکل اساسی خوردم نمیدونم چطوری از کدپن استفاده کنیم تاشما کد هارو در اختیار شما قرار بدم تا متوجه مشکل بشید 

اگه ممکنه طریقه استفاده از کدپن رو قدم به قدم توضیح بدید

تاجایی که براتون امکان داره زود‌تر جواب این سوال رو بدید🙏

ابوالفضل ۰۷ آذر ۱۴۰۳، ۰۸:۱۰

سلام. وقتتون بخیر
باید عضو بشید در سایت، از وی‌پی‌ان استفاده کنید چون گاهی بدون اون ورود/عضویت انجام نمی‌شه.

گوشه بالای صفحه سمت راست یه دکمه هست که نوشته "Sign Up". روش بزنید.

اطلاعاتتون رو وارد کنید برای ثبت‌نام (ایمیل و تعیین رمز عبور) یا ورود از طریق گوگل رو بزنید.

اگه ایمیل وارد کردید، یه ایمیل تأیید براتون میاد. برید تو ایمیلتون، روی لینکی که فرستادن کلیک کنید تا حسابتون فعال بشه.

بعد از ثبت‌نام آماده‌اید که باهاش کار کنید:

بعد از ورود به حساب کاربری، بالای صفحه یه دکمه هست نوشته "Create Pen". روش کلیک کنید.
یه محیط ساده باز می‌شه که شامل 3 بخش هست:
HTML: کدهای مربوط به ساختار صفحه.
CSS: استایل و ظاهر صفحه.
JS (جاوااسکریپت): رفتار و تعاملات صفحه.

کدهای مربوط به هرکدوم رو سر جای خودش وارد کنید (بهتره تو کد ادیتور سیستم خودتون مثلا vs code کدهاتون رو بزنید فقط زمانی که می‌خواید با کسی share کنید از اونجا کپی کنید و در کدپن قرار بدید کدهاتون رو به صورت کامل و درست و share کنید با فرد مورد نظر نه این که تمرین/پروژتون رو از اول تو کدپن انجام بدید.)

پس تو هر بخش کدهای خودتون رو بنویسید. به محض اینکه چیزی بنویسید، نتیجه رو پایین صفحه (یا سمت راست، بسته به تنظیمات) می‌بینید.

وقتی کدتون آماده شد، بالای صفحه روی "Save" کلیک کنید. حالا می‌تونید لینک کدتون رو کپی کنید و با بقیه به اشتراک بذارید.

سحر پاشائی ۰۷ آذر ۱۴۰۳، ۱۳:۵۵