Now that you know the basics of HTML & CSS, today's post is reviewing more Codecademy tutorials for different projects for your portfolio. So far we have built a basic web page and a social networking profile. These projects use only HTML, but you were able to add some more styles to each project to fit your personality.
Today's tutorial is once again coming from Codecademy. I will teach you how to build a clickable photo page, another project from the HTML & CSS lesson. This post will guide you through the steps to building your photo page.
Anyone who is just learning how to code or just starting to code projects should check out the page How to Set Up Your Workspace in the navigation. It goes over everything you need to do to be organized before you even start your project.
Hereβs how you do it.
We are only focusing on the HTML for this post, but feel free to add some style and customize your website as you see fit. This might include adding a style sheet. If you are planning to add some style to your website, you should review how to do this in The Newbie's Guide to CSS post in the Skillcrush 101 series.
1. Create a table
Inside the body tag, create some table tags. Inside your new table tags, add tbody tags.
2. Add three table rows
There is nothing in our table tags yet, but that changes in this step with Codecademy requesting three table rows. To make a table row, just add tr tags inside the tbody tags. If you want to add more pictures, feel free to add as many rows as you like. For this post, I'm following Codecademy's example of using three.
3. Add cells to the table.
Now that we have all the rows set up, it is time to start adding the cells to create the table columns. This is where all your pictures will go. Inside your tr tags, you will add td tags for the table data. Codecademy just wants three td tags in between each tr tag set you have, but you can add more tr tags if you like if you plan on adding more pictures.
4. Create a table header.
Chances are you have a bunch of ideas for what your photo page should be. Once you picked an idea, let's add a table header. Table headers are where users will go first to see what your photo page is all about.
Before your tbody tag, add the thead tag. The thead tag lets the computer know this is the table header. Inside your thead tags, use the th tags to put the name of your photo page.
5. Add the colspan attribute to your table header.
Now that we have a header for our table, Codecademy wants the header to go across all of our columns. This is where we use the colspan attribute. Colspan tells the computer the header will take up 3 column spaces instead of the default of one.
Inside your opening thead tag, add the colspan attribute and set it equal to 3. This is how it should look in your code.
<head>
<th colspan ="3">Name of Your Photo Page</th>
<thead>
When the computer reads your code, it makes the header go across three columns. If you are adding more columns and rows, this number will be different so you'll have to play around with the colspan number.
6. Add images.
The table is done, so it is time to start adding your pictures. Inside each of your td tags, you will start adding your images.
7. Add links
The last step of this tutorial is adding links. Codecademy made their images act as links to different websites so I'm going with the same approach. Just wrap your img tags with a tags with the href attribute set to any URL you want.
You are now finished with your photo page.
This is just a basic photo page so now would be a great time to add some CSS style or play around with the existing code you have to make it fancy. Not sure if you are on the right track? Here's some of the sample code I wrote in my text editor for you to check with to see if you are on the right track.
<body>
<table>
<thead>
<th colspan="3">Downton Abbey Characters</th>
</thead>
<tbody>
<tr>
<td><a href="http://downtonabbey.wikia.com/wiki/Violet_Crawley"><img src="https://vignette2.wikia.nocookie.net/downtonabbey/images/0/0b/Violetdowager.jpg/revision/latest/scale-to-width-down/250?cb=20160221113938" alt="violet"/></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Robert_Crawley"><img src="https://vignette2.wikia.nocookie.net/downtonabbey/images/1/11/111.jpg/revision/latest/scale-to-width-down/250?cb=20160707162748" alt="robert" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Cora_Crawley"><img src="https://vignette2.wikia.nocookie.net/downtonabbey/images/c/c2/87.jpg/revision/latest/scale-to-width-down/250?cb=20160707164650" alt="cora" /></a></td>
</tr>
<tr>
<td><a href="http://downtonabbey.wikia.com/wiki/Elsie_Hughes"><img src="https://vignette4.wikia.nocookie.net/downtonabbey/images/5/54/ElsieCarson_.jpg/revision/latest/scale-to-width-down/250?cb=20151231154018" alt="mrs.hughes" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Charles_Carson"><img src="https://vignette4.wikia.nocookie.net/downtonabbey/images/9/9d/Charles_carson.jpg/revision/latest/scale-to-width-down/250?cb=20151027113932" alt="carson" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Beryl_Patmore"><img src="https://vignette1.wikia.nocookie.net/downtonabbey/images/7/7e/Mrspatmore.jpg/revision/latest/scale-to-width-down/250?cb=20151207174044" alt="mrs.patmore" /></a></td>
</tr>
<tr>
<td><a href="http://downtonabbey.wikia.com/wiki/Mary_Talbot"><img src="https://vignette3.wikia.nocookie.net/downtonabbey/images/0/06/Mary_with_flapper_look.jpg/revision/latest/scale-to-width-down/250?cb=20160222161727" alt="mary" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Tom_Branson"><img src="https://vignette2.wikia.nocookie.net/downtonabbey/images/b/ba/Tom_.jpg/revision/latest/scale-to-width-down/250?cb=20151203125350" alt="tom" /></a></td>
<td><a href="http://downtonabbey.wikia.com/wiki/Edith_Pelham"><img src="https://vignette4.wikia.nocookie.net/downtonabbey/images/d/d7/Edith_in_gold_with_headband.jpg/revision/latest/scale-to-width-down/250?cb=20160219164217" alt="edith" /></td>
</tr>
</tbody>
</table>
</body>
Conclusion
<Your photo page is now done! During this tutorial, you took your new HTML skills and built your very own photo page complete with links and images. If you would like to look at a sample project to see if you are on the right track, feel free to use the one in Codecademy or look at the pen below to see a sample project I made just for this post.
The sample project I made is based on the characters of Downton Abbey, but you can use any images you want for your photo page. Tomorrow, we will be starting the first CSS projects. This means we will be adding style to text and playing with CSS properties.
The first CSS project you'll be doing is designing a button for a website from the Codecademy HTML & CSS section. You can work ahead on these projects if you like or go back to review any of the CSS topics featured on this blog or in the Codecademy tutorials.
This post was originally published on August 2, 2017 on the blog The Original BritishPandaChick as How to Make a Clickable Photo Page with Codecademy. I made minor changes to the original post to work here on CodeNewbie.
Top comments (2)
I'm quite picky about the quality of the images and videos these days. I was happy with the stock options and creative architecture photography. It's great that you can find a source with such useful information that can help you do your job better.
Great walkthrough on making a clickable photo page! For those diving into this project and looking for ways to add more flair to their images, I highly recommend checking out Skylum Luminar's image tinter tool. It's a fantastic way to add unique color schemes to your photos, making them stand out even more on your clickable pages. skylum.com/luminar/image-tinter image tinter can elevate the visual appeal of your project, ensuring that your clickable photo pages are not only functional but also visually captivating."