Starting to build my site (Homepage)

Before most of us were going to Barcelona, i wanted to get started on my website, so i could feel happy leaving for Barcelona, knowing that i had done some work for my site and so i could come back to my site and continue with it.

So to begin with since we had to use columns for our main way of creating the site i began with the navigation button (home), since it was going to be at the top of the page and i wanted to work my way down. I began by adding the code in shown below, so that i could i could have it appear on the page and also so that the image would be a link.

This above is what the page looked like with the navigation, and also i added a background colour as well. After adding the basic code in, i then wanted to create an image swap and the way i did this was naturally to youtube and google it and i managed to find a handy video, which is an easy and simple way to hand code some javascript, in order to create an image swap navigation. Below is the video i used to help guide be through the process of this task.

After following this process i ended up with code like this below, and because this person only used one example of an image swap instead of multiple ones as i wanted other navigation buttons to display i had to rename most of my 'imgOver' and 'imgOut' tags to 'imgOverr' 'imgOutt' for example so that it would still work and be able to work for multiple navigation buttons as well.

I used this process for my other navigation which i'll talk about later, but all i had to do to get it to work with multiple image links is just to slightly change the tags as i mentioned above. After using that tutorial i was able to get my home navigation working, so when you hover over it, it lights up as well as grows slightly downwards so its more obvious to the user that they are hovering over the element and know whether they want to click it or not.

                                                             not over                                  over

After sorting out my home navigation i then started to get my logo up on the main homepage and i began by adding the essential code with the <img> tag as well as the <a> tag so that i could link the logo and i would have it link to home as well. Essentially there are two home buttons the main and more obvious one and the logo so its more convent for the user. The code i added for the logo was this. 

The reason i added a width and a height of this is because i wanted to make the top of the main page simple with the hove nav and the logo quite large so it would be engaging and more eye-catching than having a small logo and a bunch of content near it.  I also gave the sixteen columns and extra class with 'logo_holder' and i used this so i could give more space for the logo to breath and centre nicely without any content underneath to pop up, as i wanted it spaced out nicely.

Here is the css i used for the logo and logo holder to get it where it is. 

And this is how it looks, which i was very pleased with when i achieved this!

This is how it looked when smaller, and the way i did this to make the logo shrink was add some css code, shown below, and this code helps to shrink the cogent according to when the screen size shrinks.

Once i had my home navigation and my logo i then was ready to start creating my main navigation for the pages where my content would be placed. I started by doing all the link coding and image coding and then went to use javascript to create the image swap, like i did before with my home navigation, so it was an easy process, and for the boxes to sit on the columns i create two eight column grids for the buttons to sit nicely where i wanted them, and then i added a 'text-align:center' in the css so it would sit nicely in the middle of the screen.

When you hover over one of this image links it will decrease slightly in size, and this was a way to keep the interactivity slightly more fun and engaging and more obvious to the user what they are hovering over to give them the best user experience possible. The navigation also does shrink move with the screen when the screen decreases, and it pushes the content so it can fit. The reason why this works is because of the column grid which the content sits on and automatically pushes the content so  it can fit on any scale.

Above to left the tablet size and the right is the mobile size and i'm so pleased when i got this to work, i'm starting to get used to the skeleton column grid system!


After i was able to get this all working i then added the 'crack' image i wanted, which was to fit in the middle of the navigation. i added some code within the css after giving the image a class. Once i got it to work i then went to the layout.css to make the image display none on all of the other platforms apart from the desktop, because i knew the image wouldn't work and it would be hard to incorporate it into the smaller devices.  So below is how it looks on desktop!

I was so pleased with my efforts at this point and was hyped to continue as i felt i was getting better. After finishing my main homepage i then began creating pages and linking them for my chapters and then creating section pages and adding the basics like background colour etc. After i had done that it was time for Barcelona.