In this article you'll manually add data to your portfolio page.
So far, the data you have added to your website has been limited to page titles, and one-off “about us”-style text. Now, you need to start adding book data to your website, in two sorts of patterns: a list of books, and then one page per book. These are patterns you see all over the internet: think of Amazon, who have listing pages of a category of books, then one page per book. These pages are automatically generated from databases that in turn are populated by data sources such as your ONIX feeds. Pages like these are what you’re going to build now.
Add one book to the portfolio
You’ll start by adding one book to your portfolio page. Open portfolio.html. Replace the words “Book list goes here” with the following code:
Take the time to align and nest the code properly, if pasting has misaligned it. Save the file. The whole file should look like this:
Refresh the browser to see what the page looks like.
Very good, but one book does not a portfolio make. How do you add more?
Add more books to the portfolio
Copy and paste the <li>...</li> block of code a few times, so your file looks like this:
Well, you have a portfolio page, but you can see this is now very manual to maintain. I don’t know about you, but I don’t want to sit and type in all that data for every book. Ideally, you want to be able to have just one block of <li>...</li> code, and programmatically insert the data in to it, getting the code to repeat itself once for each book. That’s what you’ll do next.
What you’ve learned
You can add HTML to a page
But duplicating it is manual and requires too much maintenance.