How to use Chat GPT to generate code for TeleportHQ
Let’s go over a method in which you can use Chat GPT to create projects or components that work in TeleportHQ.
This is a more advanced concept which requires advanced development knowledge.
Generate code with Chat GPT
Add generated code to TeleportHQ
VIDEO - How we used ChatGPT to create an animated card
Start by opening Chat GPT.
The first few prompts should be used to set up what kind of code Chat GPT will generate.
A good example could be something like this:
You are a front-end developer using HTML, CSS and JavaScript. You can only write classes for each element and you like to use display: flex instead of other display values like block or inline. Also separate any animation keyframes, nested styles that require complex css selectors or pseudo-element css code from the rest of the code and give it to me as the last code snippet. Finally wrap everything in a <style> tag.
This setup phase is important as there are quite a few limitations when copy-pasting code directly into the platform, such as: HTML tables, nested CSS classes and others.
Once it’s set up you can give a more direct prompt, something like:
With the instructions above give me the code for an animated card with an image, text, description and button.
Once ChatGPT generates your code there are two ways to add it to the platform.
The first method is to import the HTML code directly using Copy Paste into the playground.
This is the preferred method because it will import elements that can be later edited individually.
To add the CSS part of the generated code, go to the Left panel -> Elements and drag an Embed code element to the canvas.
Inside the window paste the CSS code and make the necessary adjustments.
The second method is to take the generated code and add it using Code embed .
This is a less than ideal method as all of the elements will be bundled together in the Code embed element and you will not be able to select and edit them individually.
Here is a demonstration of how we created a few animated cards using code generated by ChatGPT.
This is a more advanced concept which requires advanced development knowledge.
Generate code with Chat GPT
Add generated code to TeleportHQ
VIDEO - How we used ChatGPT to create an animated card
Generate code with Chat GPT
Start by opening Chat GPT.
The first few prompts should be used to set up what kind of code Chat GPT will generate.
A good example could be something like this:
You are a front-end developer using HTML, CSS and JavaScript. You can only write classes for each element and you like to use display: flex instead of other display values like block or inline. Also separate any animation keyframes, nested styles that require complex css selectors or pseudo-element css code from the rest of the code and give it to me as the last code snippet. Finally wrap everything in a <style> tag.
This setup phase is important as there are quite a few limitations when copy-pasting code directly into the platform, such as: HTML tables, nested CSS classes and others.
Once it’s set up you can give a more direct prompt, something like:
With the instructions above give me the code for an animated card with an image, text, description and button.
Add generated code to TeleportHQ
Once ChatGPT generates your code there are two ways to add it to the platform.
Using copy-paste
The first method is to import the HTML code directly using Copy Paste into the playground.
This is the preferred method because it will import elements that can be later edited individually.
To add the CSS part of the generated code, go to the Left panel -> Elements and drag an Embed code element to the canvas.
Inside the window paste the CSS code and make the necessary adjustments.
Using Embed code
The second method is to take the generated code and add it using Code embed .
This is a less than ideal method as all of the elements will be bundled together in the Code embed element and you will not be able to select and edit them individually.
VIDEO - How we used ChatGPT with TeleportHQ
Here is a demonstration of how we created a few animated cards using code generated by ChatGPT.
Updated on: 21/07/2023
Thank you!