How To Make Live Code Editor Using HTML CSS And JavaScript | Online Code Editor Like CodePen
HTML-код
- Опубликовано: 31 май 2024
- Learn How To Make Live Code Editor Using HTML CSS And JavaScript | Online Code Editor Like CodePen
#HTMLAndCSS #JavaScript #WebDevelopment
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video, we will create a Live code editor where you can write your HTML, CSS and JavaScript code and preview the website also.
We will make this Live code editor with the help of HTML, CSS and JavaScript.
Live Code Editor, Live HTML Editor, Online Code Editor, Online HTML Editor
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
This is the best explanation I've ever come across. You made each and every point Crystal clear. Insightful tutorial indeed on live code editor so far. Massive love from Bangladesh.
Only one your video change my life all is understand HTML,CSS and JavaScript bundle of thanks.
Really a nice one for a reason. Easy to understand for begginers. Thank You
really helpful Sir!! You explained all the things in such a simple manner. Thanks a lot!!!!!!!!!!!!!!!!!!!
Hello bro, I like your tutorials alot ❤, and this video is too helpful. Can you please make a newer version (with advanced features like a console and other languages) for this.
OMG..... This is really fabulous..... very well explained and that too with easy coding.....
Your explanation is very clear sir thanks for doing
Thank you for making such a useful projects Avinash.
Thanks so much! Is there any way to use to display an already predefined HTML code (not as input field) and only use CSS input field for live code preview to apply to that HTML?
Thank you so much for the wonderful teaching
Can I please have the source code because the code doesn't work as expected.
i did't thought that it is so easy
thanks for this
You are the great we need javascript course please
highly recommended this amazing channel. Thank you for create these attractive video for us. keep it up man. ❤
Glad you like my tutorials
You are amazing sir 😍
Please teach us javascript sir , all videos are super I learned html, css from your video sir .please teach us Javascript, django .and other step by step sir
Nice video! where can I find some info on updating this? I want to create a full application with more features.
Toppp! 👏🏻👏🏻👏🏻👏🏻
very cool animation thank you
Amazing videos.
Awesome!!
This is amazing, thanks a lot! Can you make a same in react?
awesome video i have never seen before. Congratulations on such a great video Sir. thanks
Glad you like this tutorial to make live code editor
Amazing. Now, please, how to make the changes persistent on localStorage? Thanks.
very helpful video brother ,easiest explanation,project was also good for beginners .well done
Thanks you so much, glad you liked this JavaScript project tutorial. I hope you will like this 30 JavaScript projects playlist: ruclips.net/p/PLjwm_8O3suyOgDS_Z8AWbbq3zpCmR-WE9
Perfect ❤
Awesome big brother...👍
Please make the javascript tutorial playlist...🙏.
I have learned all html and css from watching your videos.
But I have not knowledge in javascript, so please make the JavaScript playlist🙏.
Yes .. please do
Please make the javascript tutorial playlist...🙏.
I respect you, you have expirience that most luck . Nice video
Thanks!
Bro plz make one tutorial for code editor with HIGHLIGHTING syntax , tnq for this one
You have changed my life your teaching is incredible thanks and God bless you
You are very welcome
@@GreatStackDev Please provide the code files and the links in the description as soon as possible 🙏 thank you so much.
thanks dear
Thanks Bro! amazing!
Glad you like this tutorial to make live code editor
Love it.... ❤️
glad you liked this tutorial
sir i successfully made a live html editor but when i right click and select the view frame source of the html editor it comes empty i also want the code to be updated in the frame source is it possible
Please do a video on a web based Qr code authentication system for products
Sir Your Videos Are Informative. Thx
Thank you for your comment
Is it possible to implement Emmet into such project?
Please make on JavaScript tutorial step by step ..
Please can you do a tutorial on javaScript for beginners
Great bhaiya ❤️❤️
Thanks Sanket bro
amazing, you made it so simple. love it.
Glad you liked it!
@@GreatStackDev are you going to make syntax highlighter in future ??
Sir can you make a course for video subtitles (Str) editor like youtube.
Sir can I add this project in my resume as a fresher?
on this can we run all language program
awesome!
Thanks!
Isme Syntax Highlighting jesa feature kese add kar skte hai?
Awesome sir
Glad you like this tutorial to make live code editor
sir your voice resembles " leranik " youtube channel he teaches graphic design video editing
Why do I feel like this is illegal to know😅. Can't believe it's this easy. Now how to add the highlight color to respective languages?
how to synthax highlighting?
Hi sir 👋
First of all thanks for the tutorial and I have a doubt 🧐
Can we add auto coding and deletion with live output?
ofcourse
so long as it is front end
Hi. How can i reach you to make this simlar project ?
bro jo app ne last mein kya bta do plz mene pora code likha hai
Can we deploy into web?
How to change input textarea color bro?
thanks sir
Most welcome
how to add auto suggestions of html tags in this code editor.
Hello
How can Add language option on site
Hi Bro, The video awesome, easy to understand, Can you implement the same in REACT?
i imagine it will be the same, just make different components for each reusable piece of code and literally use the same code for the , maybe run root.render for an update though
Please is ko responsive bhi bna dena ek video mai
hello sir
when i entered js code it will shows an error on the consile
thx bro to make this project it help me a lot love you bro
Thanks Akshdeep, Glad you like this Live code editor Tutorial
Hi sir can you teach us javascript?
No
Mimo android app
How to through errors in output section?
Hi sir i had made same but one mistake is that whatever can we write in html showing all things just i want to make thing like just only tags and code apply in the editor how can i do it please reply sir as fast as possible
you can either make it to where when you press a button, then it sets the innerHTML of the - or you can write a regex that ignores certain characters. Finally, you could create a function that runs a setTimeout on keydown. Basically, whenever there is a keydown event, the function waits for a set time before updating the innerHTML, and if another keydown event occurs, then it returns and calls the function again, or something like that. There are other ways to achieve this, but here are a few ideas
@@odupree33113 Thanks 🤗
hello please make JS tutorail i only see HTML and css
Can you give sours code because in got error and error.
i coppied the exact code but still my output screen is just white plz help
QR code scan order food on restaurant one website bro
output display nehi ho raha
hai
I have some problems. Can you send me the project file?
Sir can you make simple static website for coaching institute
already have tutorial to make full website for institute: ruclips.net/video/oYRda7UtuhA/видео.html
Okay 👍🏻 sir Thanks a lot... for making
hello brother, I was done this code editing after I watched your this video. and I am also did exactly what you did in this video . but why I am don't know my output was not coming .
yeah same problem..if you found the solution pls help
I have written the same code but the output is not showing i've tried to do queryselector and others stuff but the value is not fetched from the textarea field. Why is that so?
Did u get I am also facing same issue
same
My contentDocument don't work what can i do plz suggest me😭😭😭😭
I am so sad , due to you have not provided source code....
Please make me happy by guving the sourse of above files ....
Can you show how to add save option to the code editor?
that is the most cursed code editor ever
no syntax highlighting and the font is not monospaced
it doesn't show the output.can someone help
Heyo...I am the first to comment 🥳🥳
🎉
Plz make it all mediya responsive 😢
How to add open, save and save as tab😅
sir when i insert in html so no output generated can you resolve my issue
you can write me on email with screenshot of your code. Email [avinashdm@outlook.com]
. value showing error
Mera website localhost par Sahi kam kar raha hai lekin Jab Main use live-server per upload karta hun to to us mein Kisi - Kisi page mein CSS kam hi nahin karta iska kya upay Hain, aapko kya lagta hai ki CSS Sheet link karne mein Maine galti ki Hogi yah hosting kya problem ho sakta hai
kisi kisi pages me hai then khud ka koi mistake hoga
@@GreatStackDev lekin use page mein localhost per proper kam kar raha hai
you have to be really careful while making these kind of editors as it can acces your file system if not handled properly
Source code pls js code is not working
mere work nhi kar raHA code plzzz help me
chal nehi raha hai plz
please share source code
Bro source code please
the bad thing about this project when your refresh the page all your code gone!
"Window localStorage" can be used here to keep your code in textarea after refreshing the website
1000000000000 likes
Bro I entered the exact code but output is not showing. Please help me
I also face this problem plz ... guide me about this problem
I want only this line
" Output.contentDocument.body.innerHTML = htmlCode ; "
Note working can u comment this line
Toppp! 👏🏻👏🏻👏🏻👏🏻