Coding: Template Web Pages
I'm new to the world of coding, but I was able to achieve a new skill! I downloaded a web page template from W3 Schools and edited the code to make it my own. Here's how it went.
CMS Systems & Coding
As you may or may not know, the website that you are reading my blog on right now is on Wordpress. Wordpress is a Content Management System (CMS). Websites like Wordpress, Wix, and others are amazing for new website owners because there are a lot of templates to work from. The downside though, there's a limit to the customization and functionality based on the template one uses. Coding can obviously be a tedious process, and requires a LOT of knowledge and skill. BUT, if you can learn how to read and edit code, you can really tailor each web page to make it your own.
Step 1 - Template Choice
First off, if you have never used W3 Schools before, DO IT. It's an incredible free tool that informs you about HTML, CSS, Java, etc and even has digital sandboxes to mess around in, without the fear of breaking something.
Web Page Template
I browsed around their web page templates and picked one called Parallax Template. It's modern, clean, and I could see myself using it as a portfolio-type page. Here is the sandbox page if you'd like to play around with it yourself. I really have enjoyed using Adobe's Dreamweaver, a website design software, so I took the W3 template code and pasted it into Dreamweaver to get started.
Step 2 - Editing the Template
I love the look of the template, but I needed to edit its contents and tweak a few things.
Replacing text and photos
The first thing I did was replace all of the Latin "Lorem ipsum" filler with my own copy. I worked my way down the page, replacing text, and uploading my own images. You may notice I also changed the fonts on the page, from Lato to Gotham.
The biggest changes I made within the template was adding my brand color and switched out the numbers column. I was able to navigate the code enough to find the coloring and simply typed in cyan, replaying the gray.
Before and After
You can see a snip-it of the code here where I changed the color to teal:
Dreamweaver code
I didn't want to use the grey column with the numbers, so I ended up finding the "Key Features" section in another template and copied it in where I deleted the numbers column. It ended up working out better than I thought, and I was able to change the colors on the icons as well.
Since video is a big part of what I do, I decided I wanted to embed a video onto the page. It was quite simple, I went to my Vimeo page, copied the embed code, and entered it into Dreamweaver.
Embedding Video
Lastly, the hardest task was actually making the social icons "clickable" in the footer. I knew how to create links, using the <a href="website.com"></a> code, but not a button. For example I centered this link below a header:
<p class="w3-center"><a href="https://www.bunch-media.com">www.bunch-media.com</a></p>
I tried this code on the button and it created an underline, as it would when a line of text is linked. I think the issue here was that I needed to put the <a href="website.com"></a> code before the class. For example:
<a href="https://www.linkedin.com/in/jacklyn-bunch"><i class="fa fa-linkedin w3-hover-opacity"></i></a>
I'm not sure if this truly was the reason why I had trouble, but let me know if you do!
Step 3 - Upload & Enjoy!
After I finished my changes, I uploaded my html and its accompanying photos to FileZilla. My final web page is now online! Check it out!
http://mywebspace.quinnipiac.edu/jcbunch/W3%20Template%20Bunch.html
Dreamweaver
I had a lot of fun experimenting with html, css, and Dreamweaver over the last few weeks. Learning the ins and outs of code is so interesting and very useful to this digital platform and world we live in. I'm excited to learn more and really personalize my Wordpress website soon. Thanks for reading!