11 Creating a portfolio page

 

This chapter covers

  • Building user interface cards
  • Adding a drop-shadow effect
  • Rounding card corners
  • Making the page responsive
  • Crafting a ChatGPT prompt for building a portfolio page
  • Examining and customizing the ChatGPT-generated code

One of the best reasons for setting up a home on the web is to showcase your personal work or the work of a team, department, or company. Quite a few of this book’s projects have served that goal: the personal home page (chapter 3), the online journal (chapter 5), the interest or hobby website (chapter 7), and the photo gallery (chapter 10).

In this chapter, you learn yet another page structure for promoting the activities of a person, group, or organization: the portfolio page. This page uses images, headings, and text to create an efficient and popular page component designed to showcase whatever you want other people to see. You also learn various ways to customize this component and some techniques that can make your portfolio look its best, not only on a large monitor but also on smaller screens—even smartphones. You then put all this new HTML and CSS know-how to work to create a detailed prompt that enables ChatGPT to generate the web page code for your portfolio page.

This chapter provides annotated versions of the ChatGPT-generated HTML and CSS to help you understand how the portfolio page works. You also get a few useful tips for customizing the code.

11.1 Getting to know this chapter’s project

11.2 Building the portfolio page

11.2.1 Building a card

11.2.2 Making the image extend to the card edges

11.2.3 Adding a shadow

11.2.4 Rounding the corners

11.2.5 Making your page responsive

11.3 Crafting the prompt for the portfolio page

11.4 Examining the portfolio page code

11.4.1 Examining the HTML

11.4.2 Examining the CSS

11.5 Customizing the portfolio page

Summary