GPT-HTML Notation is a concise, easy-to-understand system for generating HTML/CSS code with the help of ChatGPT language models. This guide is designed to help both users and ChatGPT sessions understand and use the GPT-HTML Notation v1.0 effectively.
To use GPT-HTML Notation in your ChatGPT session, you must paste this entire readme into a prompt. After you do that, ChatGPT will then output code when you enter GPT-HTML notation in a prompt.
GPT-HTML Notation simplifies the process of requesting HTML/CSS code from ChatGPT by providing a clear and user-friendly notation for describing desired web layouts.- Streamlines the generation of HTML/CSS code using ChatGPT language models
- Intuitive notation that is easy to learn
- Suitable for web developers of all skill levels
- section: Represents an HTML section element with an optional ID and class.
- row: Represents a row element using flexbox.
- col: Represents a column element within a row, with equal widths
- h1, h2, h3, etc.: Represents the corresponding heading element (h1, h2, h3, etc.).
- lorem: Represents lorem ipsum text.
- button: Represents a hyperlink with specific styling. Can include an optional URL.
- image: Represents an image element with an optional source.
- Use # for ID e.g.,'section #hero'= section id="hero"
- Use . for class e.g.,'section.hero'= section class="hero"
- All content within containers, such as rows and columns, should be centered by default, unless otherwise specified.
- Set 900px breakpoint.
- Minimal, essential CSS only.
- Minimal, essential HTML only.
- Output only necessary HTML & CSS.
- Exclude standard HTML document structure.
- Output HTML/CSS in code blocks.
- GPT-HTML must follow the first Law of Robotics.
col lorem
col image
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col">
<img src="">
</div>
</div>
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
text-align: center;
}
section.hero image.jpg
h1 lorem
section about
row
col h2 button contact.html
col.special image.jpg
row.nested
col lorem
col lorem
<section class="hero" style="background-image: url('image.jpg');">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</section>
<section id="about">
<div class="row">
<div class="col">
<h2>Title H2</h2>
<a href="contact.html" class="button">Click me</a>
</div>
<div class="col special">
<img src="image.jpg">
</div>
</div>
<div class="row nested">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</section>
.hero {
background-size: cover;
background-position: center;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#about {
text-align: center;
margin-top: 2rem;
}
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
text-align: center;
}
.col.special {
border: 1px solid #ccc;
}
.nested {
margin-top: 2rem;
}
.button {
display: inline-block;
text-decoration: none;
background-color: #007bff;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 4px;
}
.button:hover {
background-color: #0056b3;
color: #fff;
}
@media (max-width: 900px) {
.col {
flex-basis: 100%;
margin-bottom: 1rem;
}
}
I created this repository because I believe that ChatGPT is going to become widely adopted by web developers for quick code generation. Prompts like these are going to be important tools to help developers tell ChatGPT about the code they want in a quick and precise way. Soon, all web developers will create, use and maintain the perfect prompts for the tasks they need ChatGPT to perform.
Prompts like this share a lot of similarities with software: they provide spedific and predictable output based on input, they are "developed" by someone who understands the platform they operate on (in this case, ChatGPT), and they require an "interface" that is easy for the user to understand. They can also be improved and enhanced over time. Every web developer, or maybe every kind of coder(?), is going to rely on specialized prompts like this to get their work done efficiently. The web development community has a strong tradition of sharing and collaborating. Let's continue that tradition as we begin to embrace this new era of development with ChatGPT.