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.