One of my Lecturer's who knew a charity company called 'Fight 4 Lives'. The company organized boxing events so to raise money for charity. The website was really simple to make but I did learn a few new things while making the website.

They needed a simple website. I did not design the website as I was given the website. I just saw an image of what the website needed to look like, I asked for the supporting assets like the logo & images, and then I created the website.

I used bootstrap to create the website as it makes life easy by providing the mobile responsive support and their grid system.

The website is a one-page website. So if the user clicks on any of the links in the navigation, the website should scroll down to the relevant part of the website. I used jQuery to do this. I created a new script that basically target the "Name" of an anchor "a" tag. So for e.g. I created an "a" tag called Training as it needs to be the first button in the navigation. Then I placed another "a" with the name Training right above the training description, indicating that if the user clicks on Training, the training description should show. Now this is something which automatically happens. What my jQuery script does is it creates a scrolling animation that's lasts for 1500 milliseconds (1.5 seconds) instead of an instant jerky shift in the website. [Refer to Image 2]

The website required me to have a Facebook and Twitter feed imbedded into the website. So a user could see the tweets right there on the same webpage instead of opening a new page with the twitter account. I didn't know how to do this and I wasn't able to display the Facebook news feed into the website but I successfully displayed the twitter feed which was fairly simple.

I did this by logging onto my Twitter account and in the settings page there is a setting called "Widgets". If you create a new widget and type in the account you wish to see the tweets for, it does everything for you. All I needed to do was edit the appearance a little bit, it would give me the code, and all I needed to do was copy and paste it into my website and I would be done. [Refer to Image 3]

Another thing that I learnt was implementing Google Maps. I looked up the Google developer portal where it gave me details as to how to implement Google Maps. I created an empty div with an id "Map" in my html. Then I created a new JS file where I would reference that id. In my JS file I added the longitude and latitude for the area I wanted to display. Had the zoom setting to 14 as I wanted to displayed specific area where the charity is based in Southampton. To be more specific as to where the charity was I also placed a marker to show this is exactly where the main office is. The default that I set to was viewing the map as roadmap but also gave the user to switch between roadmap and satellite. There were also zoom in and zoom out button on the side along with a street view icon. [Refer to Image 4]

There was one thing which really challenged me creating a red border in CSS. It was red straight line with round edges on each side. [Refer to Image 5]

I tried creating that with CSS but it didn't work. It would not look proper. And one time I actually made it from CSS it would mess up if you tried to rescale. That's when I decided to leave it. My way around was that I asked the designer who created the design for an SVG file which I would add. Then give them image a bootstrap class of "Responsive Image". What it does it rescales the image according to screen width. [Refer to Image 6]

I feel that the website was really easy to make. I didn't face any difficulty apart from the creating the red border and displaying the Facebook feed into the website which I was unsuccessful in.