در این مقاله قصد داریم 9 وب سایت برتر را که ویرایشگر آنلاین html هستند، به شما معرفی کنیم. با استفاده از آن‌ها می‌توانیم به ساخت کد html آنلاین بپردازیم و به صورت آنلاین کدهای خود را ویرایش کنیم و در همان لحظه خروجی کد را ببینیم. در واقع آن‌ها به نوعی سایت برنامه نویسی آنلاین هستند و همچنین امکانات زیادی را در اختیار ما قرار می‌دهند.
Editorهای آنلاین
همان‌طور که پیش‌تر گفتیم Editorهای آنلاین امکانات زیادی را در اختیار ما قرار می‌دهند. برای مثال ساخت کد html آنلاین را برای ما راحت می‌کنند. تا بتوانیم کد را به صورت آنلاین تست کنیم. لازم به ذکر است، برای استفاده از بعضی از این سایتها نیاز است در ابتدا در سایت ثبت نام کنید. یکی از مزیت هایی که می‌توان برای ویرایشگر‌های آنلاین نام برد، قابلیت save کردن می‌باشد. به این صورت که کد‌ها را در بخش‌های مورد نظر قرار داده و از آن‌ها خروجی می‌گیریم. با این کار سایت لینکی را در اختیار ما قرار می‌دهد که با استفاده از آن می‌توانیم کدهای خود را به اشتراک بگذاریم. تعداد این ادیتورهای آنلاین بسیار زیاد است که ما در ادامه بهترین آن‌ها را به شما معرفی می‌کنیم.
CodePen
CodePen یکی از محبوب‌ترین ابزار‌های آنلاین برای نوشتن کدهای CSS ،HTML و JS است که همزمان با نوشتن کد می‌توانید خروجی کد را نیز مشاهده کنید.
CodeSandBox
CodeSandBox یک ادیتور آنلاین قدرتمند است که محیطی مانند محیط IDE دارد و می‌توانید از پروژه‌ی خود خروجی ZIP نیز دریافت کنید. همچنین می‌توانید پروژه‌های مختلفی را با React ،Angular ،Vue ،Node HTTP Server و ... بنویسید.
HTMLCodeEditor
HTMLCodeEditor یک ادیتور آنلاین برای نوشتن کدهای HTML است که ابزار‌های مفیدی را نیز در اختیار شما قرار می‌دهد.
HTMLhouse
HTMLhouse محیطی شبیه به HTMLCodeEditor دارد و اگر می‌خواهید فقط کدهای HTML بزنید و یا کدهای HTML را ویرایش کنید، گزینه‌ی بسیار مناسبی است.
Liveweave
Liveweave یکی دیگر از ادیتورهای آنلاین است که مانند ادیتورهای قبل می‌توانید به زبان‌های CSS ،HTML و JS کد بزنید. همچنین یک Tab به نام Library دارد که می‌توانید کتابخانه‌هایی مانند Bootstrap، jQuery، Three JS و ... را در پروژه‌ی خود استفاده کنید.
PlayCode
PlayCode نیز امکاناتی شبیه به Liveweave دارد.
JSFiddle
JSFiddle یکی از ادیتورهای محبوب آنلاین است که مانند سایر ادیتورهای آنلاین می‌توانید در آن به زبان‌های تحت وب CSS ،HTML و JS کد بزنید.
Repl.it
Repl.it محیطی را فراهم می‌کند که می‌توانید علاوه بر زبان‌های تحت وب، به زبان‌های دیگر مانند ++Java، C، C و ... نیز کد بزنید.
JSBin
JSBin نیز مانند سایر ادیتورهای آنلاین است و امکانات متعددی را در اختیار شما قرار می‌دهد.
جمع‌بندی:
در این مقاله به معرفی 9 سایت کد نویسی انلاین پرداختیم، شما برای ساخت کد html آنلاین تجربه‌ی استفاده از چه ابزاری را دارید؟ خوشحال می‌شویم که در بخش نظرات با ما و کاربران سون لرن به اشتراک بگذارید.
اگر به یادگیری بیشتر در زمینه HTML , CSS و طراحی وب علاقه مند هستی با شرکت در دوره متخصص طراحی وب ، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام ، دریافت پروژه و کسب درآمد هستی.
سلام میخواستم بدونم ابزاری هست که زمان کد زدن بهمود بگه که کد نویسی مون استاندارد هست یا نه (برای طرا حی وب)
سلام.
ابزار WaKaTime یکی از گزینه های خوب در این زمینه هست و به صورت پلاگین روی IDEهای مختلف (برای طراحی وب روی VSCode) نصب میشه.
یه نکته ای هست که این ابزار و کلا هر چیز دیگه ای که هست، صرفا از روی زمان باز بودن محیط ویرایشگر روی فایلهای یک زبان خاص (مثل جاوا اسکریپت) میاد محاسبه میکنه که شما چند ساعت برنامه نویسی کردید. دلیلش هم اینه که هیچ ابزاری نمیتونه متوجه بشه صرفا IDE باز بوده یا واقعا در حال کدنویسی بودید. برای همین ممکنه شما امروز یکساعت فول تایم کدنویسی کنید و فردا 5 ساعت فایل روی صفحه شما باز باشه اما مشغول فیلم دیدن باشید 🙂 اینجا ابزارها اون 5 ساعت رو بیشتر از 1 ساعت در نظر میگیرند.
اما در مورد اینکه مثلا 3 ساعت کدنویسی استاندارد هست یا 2 ساعت، برای اینم ابزار خاصی وجود نداره چون بستگی به مشکلی داره که براش برنامه نویسی میکنید. برای این بخش پیشنهاد میکنم از سایتهای افزایش مهارت حل مسائل برنامه نویسی استفاده کنید. چون این سایتها معمولا برای هر سوال یه تایم مشخص در نظر میگیرند و اینطوری میتونید سرعت خودتون رو محک بزنید.
خیلی ممنون از جوابتون. تست کردم الان. تقریبا همون چیزیه که مد نظرمه
فقط اینکه این سرویس محدودیتی برای آی پی ایران که نداره؟
و اینکه من میخوام کاربر بتونه تو همون پست سایت اون کد ها رو ویرایش و نتیجه تغییر رو ببینه؟ میشه برای این مورد هم راهنمایی کنید؟
برای ایران محدودیتی نداره ولی اگر بخواید کاری کنید که کاربران بتونن اون رو ویرایش کنن و … باید پول پرداخت کنید و اکانت Codepen خودتون رو Professional کنید
با Pro کردن اکانت امکانات زیاد دیگه ای هم در اختیارتون قرار داده میشه که خیلی بدرد بخور هست
در این لینک میتونین اطلاعات بیشتری بدست بیارید
http://codepen.io/pro/
خیلی ممنون آقای اسفندیاری. سرویسشون ارزشش رو داره اما الان برای سایت نوپا نمیصرفه. اگه پلاگینی چیزی پیدا کردید لطفا اون رو هم معرفی کنید
تشکر
بله پیدا کردم چشم
موفق باشید
سلام
ممنون بابت مقاله خوبتون
ببخشید برای سایتای وردپرسی همچین پلاگینی وجود داره؟ که بشه تو محتوا، مثلا همین صفحه کد های مختلف رو گذاشت و پیش نمایش اون رو هم دید و یا کاربر بتونه کد ها رو ویرایش کنه؟
منظورتون رو دقیقا متوجه نشدم ولی شما مثلا میتونین یک کد رو درون Codepen بنویسید و اون رو درون سایت خودتون Embed کنید تا دیگر کاربران اون رو ببینن.
سلام واقعا مطالب عالی است.ممنون