Ben Schofield is a 23 year old adventure sports fanatic. From December 2013, Ben has started a new career in digital technology, startups and entrepreneurship. Follow this blog as Ben writes about his experiences, learning a new industry from scratch as an Apprentice to @r3trosteve
Following on from designing and building a brief for Websters, it is time to get stuck in and build the code.
I have chosen to build this holding page, as I feel it has a really soft and modern design to it and follows today's trends within web design.
I opened up Sublime text and created a new document where I will write my code. Secondly, I created a Websters folder in which I would store all the images and files I would need to build the page.
Since it was a while ago that I last wrote some code, I felt I needed a refresh, so I went back onto the Lynda.com training course which I completed just under 2 months ago. This helped me to refresh on the basics, after which, I got on with coding the basics of the holding page.
The next stage is to add CSS to the text and get it formatted "centrally".
So, I have managed to figure out how to format that text to how I wanted it, it's not yet the correct fonts, but it is in the right place. which I'm happy with. The next stage is to add the background and effects to the photo via Photoshop, to give it the soft translucent feel to it which will be very eye catching and effective.
Monday 3rd February:
So today, I have been researching non standard web fonts and how to Code and implement them into my design to get the style and look I'm after. It has taken me a while to get my head around how to do it, looking at various forums such as http://stackoverflow.com/questions/7717734/using-non-standard-font-in-web-pages.
Reading through articles and googling questions on how to code NSF into HTML and CSS, using the font-face attribute to stylise the font-family. I then visited the font-face website (http://www.font-face.com/) where I followed their simple instructions, and it just clicked. So I have now changed the standard web font to something more appealing to the eye, however I am going to change the font on the paragraph as I feel it is a little difficult to read But I do like how it looks on the "Coming Soon" heading.
Below is the css I used to implement the non-standard font:
I have come across a problem. Before I figured out to code non standard fonts, I had worked out how to set an background-image using CSS however, when I input the code for the @fontface within the style, it erased my background image and turned the background white again, I have been trying to find why this has happened but have had no success yet.
The next step is to work on the background image again and really get it looking to what I had hoped for.
Today, I have been researching background images and have managed to go get the background to display correctly in the window, however now it is hiding all my text. I don't know if it is the way in which Im putting the code in order or wether it is something else, I have been moving it around but nothing seems to work.
I have been lookingat trying two different techniques to implement my background image, the easiest way in which to do it I found was by:
/* preserve aspet ratio */
here is a link which I used to help me solve the problem: http://css-tricks.com/perfect-full-page-background-image/