آموزش استفاده از سایت Codepen

آموزش استفاده از سایت Codepen
سلام دوستان امروز میخوایم یکی دیگر از سایت های کاربردی به نام  codepen را بررسی کنیم.
دوستانی که HTML , CSS, JS کار کرده اند ممکنه که تا به حال برای نوشتن یک سری افزونه ها مثلا چرخش دکمه یا باز شدن یک لیست به صورت فانتزی به مشکل بر خورده باشند .
یک سری برنامه نویس ها کد این نوع افزونه ها رو می نویسند و روی اینترنت منتشر میکنند تا برنامه نویس های دیگر از انها استفاده کنند .
برای مثال سایت Codepen  که ما امروز به شما معرفی میکنیم از قبیل سایت هایی است که کد های اماده داخل آن قرار داده شده است .
روش استفاده از سایت Codepen
شما به چند روش میتونید از این سایت استفاده کنید.
روش اول ثبت نام و وارد شدن در سایت هست .
این روش یک مزیتی که داره این هست که میتونید خودتون هم افزونه هایی بسازید و داخل سایت قرار بدید.
هم برای استفاده دیگر برنامه نویس هایی که احتیاج به این افزونه ها دارند.
و هم برای این که یک آرشیو از افزونه های خودتون رو داشته باشید که بعدا استفاده کنید ازشون یا اونها رو ویرایش کنید .
روش دوم استفاده بدون عضویت هست .
شما در بالای سمت راست سایت روی بخش Create کلیک کرده و گزینه New Pen  رو میزنید .
در این بخش سه تکست باکس برای شما به نمایش در میاد که در داخل سمت چپی کد های HTML  در داخل وسطی کد های CSS و در داخل سمت راستی هم کد های جاوا اسکریپت یا JS رو میتونید بنویسید .
خروجی کد مورد نظرتون رو هم میتونید در داخل بخش سفید رنگ پایین صفحه مشاهده کنید .
نکته ای که در این بخش وجود داره این است که شما لازم نیست کد های پایه مثل Body , Head , Title  رو استفاده کنید.
چون به صورت پنهانی خودش قرار میده .
روش سوم استفاده از کد های اماده هستش .
وارد سایت که شدید در وسط سایت بخشی هست به نام Picked pen شما روی View more pens  کلیک کرده و وارد بخش افزونه های اماده میشوید .
از هر افزونه ای که خوشتون اومد رو عکسش کلیک کرده و همانند قبل کد های HTML, CSS, JS   اون رو میتونید مشاهده کنید .
برای ادامه اونها رو کپی کرده و داخل فایل مورد نظر خودتون قرار بدید و به فایل اصلی لینکش کنید .
امیدوارم از این بخش لذت برده باشید .

مطالعه بیشتر