This week, I worked to manipulate an HTML template to create a site customized to my liking. This was a great learning process for me. With CMS tools such as this one (WordPress) I don’t really get to see the behind the scenes. A lot of the customization of this site comes from a list of selections in my settings. In an HTML template, I get to see how the website is built. By just looking at a site without seeing it’s code, it’s hard for the average user to understand how certain elements are placed into a site.

I used one the templates from http://www.w3schools.com. I decided that I was going to try and re-create the homepage to my actual WordPress site as much as I could. Because I am so new to coding, I approached the process slowly. I first played around with the code to see what things affected what elements. For example, I had changed the background image and it took away from my name, making it hard to read. I wanted to add the black solid background I had seen on some other text in the template that looked like this:

I was able to isolate which tag controlled the black background and add it to my name. That was my first big victory because I wasn’t just filling in my own content from the template, but really applying tags where I wanted them to be. Some of my final coding looked like this and as you can see, my name stood out nicely with the black background. I did end up putting my first name in all capital letters in my final product, but that’s what drafts are for!

From there, I added a small bio and even a “Contact Me” form at the bottom. I actually found the form quite confusing at first because the names displayed in the boxes were slightly hidden in the code, but once I found them, I was able to customize it to my liking.

Another victory I had during this process was successfully uploading images using the correct image path! This was one of my biggest struggles when I first began coding. I found it confusing to type out, but this time I pulled photos from my WordPress site and copied the image address, pasted it into my code and then made sure to upload the original image from my computer onto FileZilla.

I learned a lot of valuable things during this process and it really helped my understanding of coding and brought me to the next level. It also gave me a boost of confidence in my ability to do this. This is a great tool for any beginner coder to use because you can easily manipulate the code without consequence. I wasn’t afraid of messing with anything permanently and when I was ready, I was able to copy and paste it into my own document and upload it onto my server.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s