Build A Pet Adoption Center Page in HTML - Part 2

This is the solution for the Project on building a pet adoption center page in HTML

Sep 12, 2025

a gray and white cat laying on the ground — Photo by Đồng Phục Hải Triều on Unsplash

Introduction

Welcome to the second part of this project tutorial post where you will be learning how to build a Pet Adoption Center page in pure HTML as a complete beginner in coding with HTML!

In the previous part of the same project, I had mentioned the project details and provided hints detailed guide to solve the project. As promised, this is the sequel of the previous week’s post where you learnt how to build the project. From the previous post, I am copying the requirements for the project and then I will explain the steps to solve the same.

Project Recollect Points

You need a main heading title for the title of the page
You need to write a paragraph right below the heading
You need to write a sub heading above the images/image of the pets
You need to write two sub headings, each having a paragraph under the respective sub-headings with a clickable link that contains the url to lead the user to visit the respective pages.

How To Build The Page

In the following steps I am going to explain in a very basic manner since this is a very simple project and you need to do this project to get a hang of what html code feels like. I am not using the html boilerplate here as I need to write a new post the following week to explain the basics of the html boilerplate. So, this one is going to be really basic! Read till the end to get a good grasp of the code used here.

Create the heading for the page

For any page or document we need a big heading which is indicated by the element h1 and usually not repeated in the same page. So, we will use the h1 element to write the heading of the page , whch is , in this case, “Catryn Adoption Center” . Now, this is my choice for the heading since I love cats , but, it is your choice to choose a nice heading for your page!

Write the code for the h1 element

<h1>Catryn Adoption Center</h1>

Create the first paragraph for the page

Next we need to write a cute paragraph describing the page and also welcoming the visitors to this page, so , we need to use the paragraph element, or what you call it as the p element. Let’s code that now! For the text content inside the paragraph, I am going to write some ipsum lorem text since this is for demonstration purpose to show you the code, but, I suggest, that when you code this page, please write proper English sentences to fill up your paragraph for thi page that you are building.

Write the Code for the p element

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

Create the sub-heading for the images of the pets

For writing sub heading, you need to use the h2 element and let us write the code for the sub heading right above the image that we are also going to create for this page.

Write the Code for the sub-heading

<h2>See our cats!</h2>

Create the Image to show under the sub-heading

For creating the image we use the img element and src attribute and let us do that right away! Let us grab a picture from pexels website and right click on ‘copy image link” and then just paste that url link inside the src attribute, within open and closed quotes as shown below. It is very important to right click on ‘copy image link’ so that you get the link with the jpeg or png at the end of the url link!

Remember to write something inside the alt attribute as well. The alt attribute is useful for someone with vision impairments or in such a situation where the image is mutilated or not clear, then, the user of the page will atleast get to know the content of the image.

<img src="https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg" alt="Five cats looking around a field.">

Create clickable links

Create two sub-headings each with a paragraph and a clickable link to lead the user to another page. Let’s do that now! This is the last step to finishing your page, so exciting!

For sub headings we know we need to use the h2 element and for the paragraph we need to use the p elements as we did above and for the clickable links we need to use the a element along with the href attribute as I had explained in my previous post. For writing the clickable link inside the href attribute, remember to use preferrably, a url with a dot com or dot org etc., so that it feels like a web page that you are visiting. I just grabbed the respective links for the siamese cat adoption center and the Persian cat adoption center by googling the key words : “Siamese cat adoption centers” and “ Persian cat adoption center” respectively and I got loads of websites out of which I just chose the ones that I have written below! So, let’s do that and our page is ready to view!

Let’s code the last part of the page:

<h2>Adopt a Siamese cat!</h2>
<a href="https://siamesehaven.com">Visit Siamese cats page</a>

<h2>Adopt a Persian Cat!</h2>
<a href=" https://www.chewy.com/g/cat-persian_ga1" >Visit the persian cats page</a>

Congratulations! Our HTML page for a pet adoption center is ready to view! In this post I am not using the HTML boiler plate so, when you view the final page in different devices, the proportion is not symmetrical but we learnt how to build this cute page in html!

In the next post we will do the same project by using the html boilerplate and then you will learn why we are using it !

The full source code for this project

<h1>Catryn Pet Adoption</h1>
<p>Welcome to the Catryn Adoption Center ! Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>

<h2>See our cats!</h2>
<img src="https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg" alt="Five cats looking around a field.">


<h2>Adopt a Siamese cat!</h2>
<a href="https://siamesehaven.com">Visit Siamese cats page</a>

<h2>Adopt a Persian Cat!</h2>
<a href=" https://www.chewy.com/g/cat-persian_ga1" >Visit the persian cats page</a>

I had promised to provide the source code, so, you can view the full page in my source code editor.

Conclusion

Congratulations on building an interesting but simple Pet Adoption Center page in HTML in less than an hour! In the next post, I will do this project with you by using the HTML boilerplate with explanation of the usage of the boilerplate. I have not yet completed the HTML cheat sheets , but still working on them! Here is the HTML checklist for your future reference.