Code Editor a simple text editor that is specialized for writing software. A source code editor may be a stand-alone program or part of an integrated development environment (IDE).They make writing and reading of code easier and convenient.
As a part of Crio ##IBelieveinDoing program I tried to build an Online Code Editor just like other online code editors such as codepen, codeSandbox, W3school, JsBin, etc.
It is a code editor for HTML, CSS and JS code snippets using HTML, CSS and JQuery. The code editor’s functionality is similar to that of jsbin.
There are 2 ways to start using jQuery on your website -
1.Download the jQuery library from jQuery.
2.Include jQuery from a CDN (Content Delivery Network)
<head> <script src="jquery-3.5.1.min.js"></script> </head>
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
HTML is the standard markup language for creating Web pages.
HTML describes the structure of a Web page.
CSS stands for Cascading Style Sheets.CSS saves a lot of work. It can control the layout of multiple web pages all at once.
The #iframe tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
To add toggle functionality to tabs using a single function was a new learning and challenge to understand. Tips and sample code example provided in the project guide was very helpful to understand and implement the logic.
Another challenge was to understand and implement the output section using iframe. This section is very deep and there were many new concepts used. Through this section I learnt about HTML iframe tag, contents() function , val() etc.
This is my first real programming project and it was very insightful and great learning journey through entire project creation. I was able to built a very basic view of the project. In the entire process I learnt about many new CSS style, HTMl , and JS function. Also through this project I landed up writing my first blog which I had never thought.
I am sharing my code repo and web-app link below:
Welcome for any suggestion and review.
A huge thanks to @Crio Team, @Som, @ajay for bring up such projects ideas for beginners and designed it is so simple that a even a non-coder like me could understand and begin from basics.