For my last week of ICM 505, I set out to make a full, working webpage that fully looks like a webpage. As I said before, the most experience I have had with HTML was back when I was adding glitter text to my MySpace page. At the end of my introduction to HTML journey, I learned how useful templates can be.
W3 has a ton of easy to use templates to build great looking websites.
I chose to use the Parallax template from w3schools to build the bare bones of what I hope to be my professional website. I felt the set up would be best for displaying visuals while also getting across the general information I think is important to share.
The template was surprisingly easy to use! Using the things I learned in this class, I was able to easily replace all the images with my own images and insert text in the appropriate places. The template had helpful notes to help separate all the sections for the site, making it easy to figure out what I need to put where.
The LOAD MORE button was pushed slightly to the right and it was driving me crazy!
I got a more in-depth experience with style sheets using this template. When I was adding my own content to the portfolio section, the LOAD MORE button shifted slightly to the right. It wasn’t incredibly noticeable, but it very much bothered me that it wasn’t centered. Originally, I thought I could just add the element align=center; to the style section of the div tag but when I did that, nothing changed. Then I attempted to assign a container to align the button in the <style> section, but that just ended with the portfolio section becoming a complete mess. It was then that I realized that the button was part of a style sheet and followed a certain set of specifications. So, I took to the style sheet and looked up the specifications for this button. It turned out that I needed to tweak the margin size. Bumping it up a couple hundred pixels moved the button to where I wanted it to be.
After consulting the w3 style sheet, I figured out where I needed to make a quick tweak to fix the button.
Another learning experience was when I attempted to link my social media to the icons in the footer. When I inserted my href link, a small underscore appeared between the icons. It wasn’t glaringly obvious, but it also wasn’t nice looking. I was fully stumped here because everything looked right to me but using what I learned in this class I turned to the markup validator to tell me where I went wrong. It turns out that I forgot to close my href tags with </a>. Once I did that, the underscore went away.
It’s easy to forget to close a tag in a big project, so thank you Markup Validator!
Obviously, there is so much more for me to learn when it comes to HTML. What this exercise taught me is that templates are an easy way to set up something of substance while also presenting new and interesting ways for me to poke around and learn new aspects of HTML. Seeing the changes I make happen in real time helps me better understand what I’m doing. Now that I feel a little more confident using templates, I will definitely continue tinkering around with coding and seeing what new things I can learn.
A screenshot of my finished website! Click here to see the full site.
Comments