The Puzzling Pieces Of Web Design
Working on websites is a little like putting together a puzzle, especially when the objective is to use a template that has already been put together.
Do not get me wrong, a template is a great starting point for creating something you can be proud of. Starting points are important because the more you do something, the easier it gets.
This week, I used a template on W3 Schools and made several modifications to make it my own.
The process was simple, yet if you are new to web development, it could be a bit of a scavenger hunt for the first couple of days.
The best thing about using W3 Schools is that the site is setup as a split screen with one side setup with code and the other displaying a live view. When you click “Run” at the top of the screen, the live screen updates with the latest code. If you break something, you can always start over from the basic code.
Rather than lose any progress, I used the Sublime text editor and created an index, index-staging, and css.html pages that I could modify and update. When I was happy with the way something appeared, I uploaded the latest index.html page to the server using FileZilla.
Just like the cliché of eating an elephant one bite at a time, I took this site on, “one bite at a time,” beginning with the title – I changed it to “Greg Wehner’s Wonderful Site.”
The site can be found by going to http://mywebspace.quinnipiac.edu/gwehner/
At the top of the screen, one of the first things I noticed were several images, so I copied one and pasted it in Photoshop, where I used the dimensions and uploaded my own photos. I then uploaded the images to the server and used the paths to change out the old photos with mine. I also modified the text that appears within the images.
The next bite I wanted to take was with the navigation bar. I kept with the original format, though I changed out the color using a stylesheet that is linked to through the html – I chose “Amber,” because “amber is the color of your energy.” That is a 311 reference.
Keep with the color amber, I went ahead and created an “About” section on the site and used style.css to create a custom p-tag and give it the color of amber. The tag is used in the first graph to make it pop.
One of the convenient mechanics of the site is that it is setup as a single page. When navigation items are clicked, the page jumps down to the section. As a developer, you do not have to worry about creating a sticky navigation that follows you down the page as you scroll because it automatically does that.
When you click on “Stories,” the site jumps down to a section where I setup three images that I created and linked to various sites where my work can be viewed. MuckRack.com has a page that pulls in every story I ever wrote for the Southampton Press. Rather than frame in a site, I wanted to link the image to the site in a blank window. Although the link takes people away from my site, mine remains running in the background.
For Photos, I created a simple photo gallery using CSS and html found on W3 School’s website and created my own graphics using images I took myself.
Adding videos to the site was a little complicated but using <div> and <iframe> tags, I was able to pull in four different videos I created and stack them one on top of the other. For responsive design, the videos appear better on a mobile phone than on a desktop.
Although I do not use Twitter as much as I should – something I swear I plan on changing sometime soon – I used JavaScript to pull in a feed from ElfSight.com. Elf Sight allows a developer to create a widget for embedding social media feeds onto any type of site, including HTML sites. Originally, I tried to use an embed tool that Twitter offered, but the feed ran too long.
The “Contact” form is basic and looks like the one that was on the site template initially.
In the footer are four social media icons, which I modified using Font Awesome. The entailed adding a link inside the <style> tags at the top of the page, to Font Awesome’ s CSS site. Once that was added, I could have added several different icons – including Pied Piper from the TV show Silicon Valley – but I chose to stick with Facebook, Instagram, Twitter, and LinkedIn. Once the icons were added, I linked them to my own feeds using the <a href…> tag.
Going through the motions of creating a site from a template, like I said earlier, is sort of like a scavenger hunt for puzzle pieces. The good news, all the pieces are there; they just must be found.