First HTML Coded Website

At the beginning of my HTML coding journey, I did not think I was going to understand the basics of creating a web page. After seven weeks of learning and trying new things, I learned a lot about the HTML language. 

Creating my final project was no easy task. I had to use everything that I’ve learned in the past seven weeks. I was given a template code for a website, but I needed to add all of my information, images, and more. 

Below are images from the template that I received. The left-hand side is the code, and the right is how it looks. It’s a slideshow of images to show you the different parts of the site template.

I knew I would have to tackle all parts of this code, so I started with the easiest part, which was the Contact Info at the bottom of the page. I replaced all of the given information with mine. 

After that, I figured out what I wanted in my Navigation bar, so I changed that. I added About MeBlog, and I changed the drop-down menu to include Illustrations. Now that I had the two simplest pieces done. I moved on to the header image. 

I originally had three images that had a slide show effect, but the more I worked on the site, the more I realized that I didn’t like that effect. I didn’t know why I didn’t like it, so I moved on to work on my About Me and Blog section. Once I finished my site, I went back to the header images and deleted them. That’s why there’s only one image. 

The About Me section is next. I added my writing and title to this section. Originally the paragraphs weren’t identical, so I had to tweak some of the code to ensure they were all uniform. I decided to have them all in the center as a stylistic choice because when they were based on the left-hand side, it didn’t fit the overall style of the site. The template had three images in the first section, but I decided only to do two because I didn’t want it to be the same as the template. 

The next section was my Blog section. This took me the longest to do. I chose to add my blog to this HTML coded site because I wanted to showcase and challenge myself to add links. I was successfully able to add the images and a sentence from three of my blog posts. 

After adding the writing portion, I needed to focus on the “Read Me” button. This was the hardest part. I could not figure out how to make sure the button worked as a link, so I did some research and created a new button that worked. But I found the style of the button to be too dull and boring. So I continued to mess around with the template code until I figured out a way to incorporate the button I successfully coded into the button that was already coded. Coding this button tested my patience, but I ultimately got it. 

Here is the link to my fully HTML coded website.

Working on this last project was incredible. I overcame challenges, and it was amazing to see my knowledge and everything that I’ve learned come together for one project. 

Leave a Reply

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

You are commenting using your 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