Create Websites with CHEETAH

The most important design elements at a glance (20)

As you can see, you can create quite impressive effects using small HTML snippets in "Cheetah". This alone should be a reason to learn a bit about HTML, CSS and JavaScript. Furthermore, you can use such snippets to create your own elements to extend the functionality of "Cheetah", which you can then store under their own name in your template library. In our example here, this means that you simply create a template with the name "Modal Image Display" via the header menu of the iFrame / HTML - element. You will then find it in the "Templates" section of the side menu under "iFrame":

To use it on other web pages, you just have to drag it to the appropriate web page and change the image link in the embed code.

With the help of the iFrame / HTML - element you can also use external HTML editors, for example to create tables for your website, which is not so easy with "Cheetah". Also for this an example.

Note: Please note that if you are working with inline HTML, you will of course have to provide responsive code yourself if you want to use it for the mobile version of your website as well. Sometimes it is unavoidable that you have to use two iFrame / HTML - containers each, one of which contains code for the desktop variant and the other code for the mobile variant and then hide them alternately.

A relatively simple and also largely intuitive HTML5 editor can be found, for example, via the following

LINK: HTML5-Editor.Net

Snippet collections on the Internet

The same applies to web programming: you don't have to invent everything yourself. On the Internet there are a lot of sites where you can find HTML snippets. A very nice collection can be found on, for example.

LINK: Code snippets for HTML, CSS and JavaScript

Most of them can be adopted immediately with a few individual adjustments. However, it is better to use them as suggestions and motivation to understand how they work, in order to be able to program such snippets yourself one day.

Another very extensive snippet collection is offered by the website "webdesignerwall":

LINK: Design elements, playground and code snippets für Bootstrap HTML/CSS/JS framework  

It has a search function and is also otherwise very clearly structured:

To use the code, first copy the HTML code into a text editor, then (framed by the tags ) the inline - CSS - code and finally, if necessary, between the tags the associated JavaScript. By changing the CSS entries, you can conveniently customize the element for your purposes. The rest should be clear.

Tip: Save the complete iFrame with the code in your "Cheetah" templates to be able to use the corresponding snippet later in other web projects.

TB Amazon