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.

It used to be that much of the design process was conducted with static graphic designs, produced in photoshop or fireworks - finally being handed off from the “web designer” to the “web developer” to convert the static designs into valid html and css.

Today is different. I’m a strong believer that there is no difference between a graphic designer and web developer when it comes to implementing front end web designs. Designers have to code, coders have to design.

So, the sooner we get into code, the better - particularly when you consider other challenges front end developers face, particularly when developing websites that will work effectively across the myriad of devices and display sizes that we now have to work with. It’s much easier to work this out in code, that creating dozens of iterations in static graphic format.

We’ll get into some of the tools available to make this easier in the development stage - where we can build on popular design patterns for responsive websites.

So, in summary: Designers need to code, as early as possible in the design phase.

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. 

This is the HTML markup - which provides us with a structure of content for the page. After speaking to Steve, What I would like to do with the page requires quite a bit of Jquery and JavaScript which he is going to go through with me at some point. As It is only a single page, I haven't created a style sheet to attach to the page as I will be simply be able to edit and format the text etc in HTML. ( I hope). 

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:

@font-face {

    font-family: pistara;

    src: http://www.dafont.com/pistara.font?text=Coming+Soon;

    font-weight:400;}

        h1 { 

             font-family: pistara;

            font-size: 40px;

            margin-top: 200px;

            text-align: center;}

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:

Websters'

 #bg {

            position: fixed;

            top: 0;

            left: 0;

            /* preserve aspet ratio */

            min-width: 100%;

            min-height: 100%;}

here is a link which I used to help me solve the problem: http://css-tricks.com/perfect-full-page-background-image/

Try using Google Web fonts again.

If you add a font to your collection, you can do the following:

1. Add the stylesheet to your web page via a normal tag that you are used to. e.g.
’ < link href=’http://fonts.googleapis.com/css?family=Hammersmith+One’ rel=’stylesheet’ type=’text/css’ >’

You can copy and paste this from the google fonts library. As it says, make sure you paste it above your other stylesheets (order is important)

2. Use the correct “font-family” name in your CSS

font-family: ‘Hammersmith One’, sans-serif;

This will call the Hammersmith One font, and then fall back to browser default sans-serif font for unsupported browsers.