Home page task

Achieve a Goal Challenge, home page
If you just happened to pass by and aren’t sure what I’m talking about, you can read the Achieve a Goal Challenge Page
I use this challenge to get rid of some back log tasks I have ‘laying around’.

Task of this week
For the first challenge post I chose the task to create a more neat homepage.

Content of task
Every element its own spot
Before I started this task I had one bigger area to work with for my home page, because I use a full width page of this template. I didn’t want to have a widget on the front page. I tried to keep everything in place, but I encountered issues. Html can act funny if it has room to do that. Therefore, I ruled it was time to throw in a table to keep everything in place, figuratively speaking. I wanted to win the challenge of keeping everything in place and not allow one more element to make a move to a spot I didn’t tell it to go. Time to roll up my sleeves!

Main image is out the door
I decided to get rid of the main image. No, I didn’t just carelessly throw away all the work I’ve put in that picture. At least, not until I re-used the elements to create separate images. As part of my digital cleaning rules I could throw out that image as soon as I had created new images.

Self-created menu
On friday I got a bit reckless and thought I could add a self-created menu, to replace the existing black menu bar, into this task. I don’t like the existing menu’s separate from the main white page.

The menu had to be an html-based only, otherwise it wouldn’t work. That’s because the area where we create our pages and posts is basically only the body of an html document. For more advanced menu’s you need more than html, like jQuery. You have to implement that part of the code into the head of an html document. I’m not that advanced myself yet to know where and how.

My idea then was to create button images and turn those into links, neatly behind each other without white space in between. I got quite far, I even was almost done. Where it went wrong was that I should’ve used more than 35 px for the height of the buttons or a different easier readable font. I thought to correct that by fixing the height here manually in the code. Somehow, the height of the buttons refused to show the number I had given. When I right-clicked to open the image in a new page, it showed me the size only was 25 px height. How was that possible? They were 35 px originally and I’d tried to enlarge, not made smaller! I couldn’t wrap my head around that.
I gave up for that day. Concluded, this part has to wait until I get new courage, to be busy with it again. That might not be too soon! At least I do know how to solve it.

Move on
I just had taken on too much with that menu. It could wait. I comforted myself by saying to myself that at least I had practised and that I almost succeeded. Instead, I worked ahead with the original task. I can tell you, it took me hours to finish that. This certainly wasn’t done in a 30 minute time span. I’d wish! A lot of trial and error I had to deal with.

Table

Start to finish
The table
To create the table I used a word processor program and opened a new html document. Of course, I could’ve implemented the basic html table codes into the existing page and work from there. But I found it personally easier to work behind the scenes. I implemented and adjusted all the achieved code on-line later, to make it fit. And that was where the trial and error started. I had a smaller area to work with than in my word processor. The table I created at first couldn’t be used in that shape on my website. Its content in that form just didn’t fit. I needed to use a different approach with less cells. Just when I thought it was better to continue on Sunday, after a good night sleep, I tried one last time.  I’m glad I did. Suddenly it worked out. It started to look as I had planned.

Five images
Instead of six images I ended up with five. Four of them function as a clickable image. The Thanks for Visiting image on top is just for visual purposes. I didn’t feel the need or see the value to create a page to link to that one.

Achieved
I feel I accomplished a more neat, better functional home page. Of course, this is a start, but I have a good frame-work now and I can go from there. My mission for this week in this particular case is accomplished. Hopefully yours turned out good as well and I am curious about your finished task for this week!

Please (only) leave your short summary with the link to your blog post in the comments. I’ll visit and leave a comment on your blog.

Advertisements

Author of (based on) True Crime and articles based on injustices.

Tagged with:
Posted in Challenge

Express your opinion

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: