Code

As explained in Build a Website with ChatGPT

Web page code is the source code that defines a web page's structure, presentation, and interactive behavior.

Web page code is the set of instructions that turns a page idea into something a browser can display. HTML supplies the page’s structure and content, CSS controls its appearance, and JavaScript can add interactive behavior. On its own, code is just text; it becomes a web page when saved in a browser-accessible file and opened in a browser. section 1.2 section 1.4.3

You do not need to write every line yourself to use web page code. A detailed plain-English request can ask ChatGPT for a complete page, including its title, header, sections, links, images, footer, colors, fonts, and layout. More specific requirements generally produce code that more closely matches the intended page. section 1.2 section 4.0

A practical prompt-copy-save-deploy workflow is:

• Prompt ChatGPT for the page code and describe the required content and design. section 2.1
• Copy the generated code into a text editor and save the HTML as index.html. section 1.4.3
• When CSS is supplied separately, save it as styles.css in the same folder and ensure the HTML links to it. section 6.2.3
• Open the file in a browser to test it, then deploy the HTML file to a web host. section 1.4.6 section 2.1

A two-file page

A request can ask for HTML first and CSS second. The HTML file contains a link such as <link rel="stylesheet" type="text/css" href="styles.css">, which tells the browser where to find the formatting rules. Keeping both files together lets one CSS file style a page or multiple pages in the same site. section 6.2.3 section 7.3

Check the result rather than assuming generated code is perfect. If the page misses the goal, make the request more specific or ask for adjustments in the same chat session. For small changes, you can safely edit visible text, headings, or copied section blocks while leaving the surrounding HTML tags in place. section 1.4.6 section 6.4

Figure 1.6 The code copied from ChatGPT and saved to an HTML file

See the handoff from generated text to a saved HTML file: the small but essential step that makes code ready to open in a browser. section 1.4.3

How Build a Website with ChatGPT covers it

How deep it goes

Introduces HTML, CSS, and JavaScript by role, then gives high-level annotations and safe customization steps rather than deep implementation detail.

Examples

Uses personal home pages, information sites, hobby sites, journals, recipe pages, sign-up pages, and responsive portfolio pages.

What it assumes

Assumes no coding knowledge and teaches enough file handling and code context to use generated pages.

What you can do after

Apply it via ChatGPT to generate, save, test, customize, and deploy simple web pages.

How it connects

Connects HTML, CSS, JavaScript, prompts, web browsers, HTML files, web hosting, navigation bars, and responsive design.

liveBookmanning.com

Read Build a Website with ChatGPT on liveBook Get the book at manning.com

Related concepts

• ChatGPTproduced by · ChatGPT is OpenAI’s conversational AI service, which lets users interact with generative AI models and related tools through natural-language prompts.
• conversational aiproduced by · Conversational AI is artificial intelligence that enables software systems to interact with users through natural-language dialogue.
• fine-tuningused by · Fine-tuning is adapting a pretrained machine-learning model by training it further on targeted data or objectives for a task, domain, or behavior.
• programming languageuses · A programming language is a formal language with defined syntax and semantics for expressing computations and instructions that computers can execute or interpret.
• repositorypart of · A software repository is an organized storage location or collection of project files and related artifacts, often managed with version history and change tracking.
• generative modelingproduced by · Generative modeling is a machine-learning approach that learns patterns or a data distribution to generate new samples resembling the data.

This explainer was generated by Manning's knowledge graph from the text of Build a Website with ChatGPT. The section links point to the parts of the book it draws on.