3 Working with fonts, colors, and headings

 

This chapter covers

  • Understanding the role of fonts in web page design
  • Creating a color scheme for your page
  • Making a page easier to read with headings
  • Prompting ChatGPT to build a personal home page
  • Examining and customizing the ChatGPT code

In chapter 2, I took you through the process of creating a functioning web page from scratch using a relatively simple ChatGPT prompt. The resulting page worked well, but it wasn’t much to look at. That plain page was fine because I wanted to keep things simple, but if you’re going to build some kind of presence on the web, you’ll definitely want the resulting page to look good.

In this chapter, you take the first step in that direction by examining several page formatting options that can go a long way toward making any web page more attractive and more readable. These options include typefaces, type sizes, colors, and headings. Here, you’ll learn why these are important and how you can get ChatGPT to help you make these design choices for your page. All this information then goes into a detailed prompt that you’ll pass along to ChatGPT to produce the web page code for a personal home page that gives you a slice of the web that you can call your own. If you’re curious, this chapter also explains the code generated by ChatGPT and shows you a few ways to customize the code without having to prompt ChatGPT all over again.

3.1 Taking a peek at this chapter’s project

 
 
 

3.2 Building the personal home page

 
 

3.2.1 Getting site title and subtitle suggestions

 

3.2.2 Styling the typeface

 
 
 

3.2.3 Setting the type size

 
 
 
 

3.2.4 Working with type styles

 

3.2.5 Getting typeface suggestions from ChatGPT

 
 

3.2.6 Generating a color scheme

 
 
 

3.2.7 Understanding web page headings

 
 

3.2.8 Crafting the prompt

 
 
 

3.3 Examining the personal home page code

 
 
 
 

3.3.1 Examining the HTML

 
 
 

3.3.2 Examining the CSS

 
 

3.4 Customizing the personal home page

 

Summary

 
 
sitemap

Unable to load book!

The book could not be loaded.

(try again in a couple of minutes)

manning.com homepage
test yourself with a liveTest