Working with HTML Templates

Navigating my way through the basics of HTML this semester has proven to be a journey filled with twists, turns, and many rabbit holes. The challenge was ultimately rewarding, especially after creating my own fully functioning page with the help of W3School’s templates.

For the final, I decided to focus on one area of my work, which is photography. As these templates are quite simple and visual-based, creating a fun and functional page that also incorporated my personality felt the most logical. I chose a template that was traditionally created for black-and-white design because I liked how minimal it was. Now, I am someone who does love color, so this template ended up looking pretty different from its original state, shown below.

This project really tested my abilities in coding. Although we were working with templates, there was only so much that they could provide. For example, I wanted to add an image to my “About” section, but there was nothing in the template that achieved the look I was going for. I think that was a huge part of the process, going through different types of grids and testing them until I achieved something I liked. When I did end up getting there, I realized that the format wasn’t responsive and the text would roll over the image if I tried to make the screen smaller. Going through countless trials and errors once again, I finally ended up at a responsive version of the site that you can find on my page now.

Image optimization was another major part of this process. At one point, I noticed that my images were not showing up as quickly as they should or in the way I wanted them to look. This was because there were a few that were PNG files and much larger than the other JPG files I had uploaded. After I noticed that, I went in and made sure all my images were consistent in size and format.

I spent a lot of time reading through and referring back to the external CSS style sheet while building this site. At first glance, it was a bit scary considering how much was there. Once I was fully immersed in the site and knew exactly what I was looking to style or change, it ended up being more readable than it seemed, and I was able to understand how external CSS works on a much deeper level.

So. much. CSS.

Overall, I really enjoyed taking a template and diving in. Customization is always one of my favorite parts to any project of this nature, and I love to see how much I can change something to make it fully my own. I think no matter how hard I try to stay minimal, both aesthetically and in my work, I always end up with something completely different. Although it can be frustrating at times, there are truly endless possibilities in HTML, which made this entire process extremely engrossing. Click the button below to take a look at my web page!