What do we mean by Front End Editor?
The Front End Editor is a tool inside Banana that allows you to edit the HTML, CSS and JavaScript of a skin.
Our Front End Editor provides you with a familiar and intuitive interface, similar to platforms like CodePen, where you can freely experiment and create your own skins. The editor is composed of 3 panels HTML, CSS, and JS, allowing you to write and preview code in real time.
You can preview the skin you are creating in desktop, tablet and mobile versions.
In each panel section (HTML, CSS, JS), in the top right-hand corner, there is an eye symbol. By clicking on it, you can hide the section you do not need at the moment, to enlarge the space of the section you are working in. This will make your work much more comfortable!
In this example, the CSS and JS sections have been closed by clicking on the respective eye symbols.
HTML Section
The HTML section is where you define the structure and content of your web page.
Use the editor to write your HTML code. You can add tags, elements, and content to create the structure of your webpage.
CSS Section
In the CSS section, you can style your HTML elements and make them visually appealing. Write your CSS code in this editor. Apply styles to HTML elements using selectors, properties, and values.
JS Section
The JS section is where you can add interactivity and functionality to your webpage. Write JavaScript code to create dynamic behavior and respond to user interactions.
Preview
Clicking on ‘Render’, allows you to preview the changes that affect the webpage's appearance and behavior.
Don’t forget to click ‘SAVE CHANGES’ when your skin is ready!
