So what does a front end developer actually do? Let’s start with the “front end” bit. A website can be broken down into two main bits, the front end, and the back end.

The Front End

The front end of a website is the visual bit that the user interacts with. This includes the design, images, colours, buttons, forms, typography, animations and content. It’s basically everything that you as a user of the website can see.

The Back End

The back end of the site is the bit that you don’t see. It’s the code that makes e-commerce sites work, the database where your Amazon wishlist is stored, it’s all the magic that happens behind the visual part of the website that makes the website actually work.

Now for the “developer” bit. To explain what a developer does, I should probably clarify what a designer does.

The Designer

Designers decide how a website is going to look, what the colour scheme will be, how all the headings will look, and how all the pages will work together. They usually build a flat visual graphic of the site which has pictures of how the site will look and how each of the interactions will look. At this stage you can’t interact with it, it’s just a picture. They then hand this file to the developer.

The Developer

The developer takes the file that the designer has sent them, and they look at it and work out how they are going to build the site so that it will work in a browser. (A browser is the bit of software that you use to look at websites. There are lots of browsers including Internet Explorer, Firefox, Safari…).
Developers will break the design up into components, and start to build these into a website using code. They then test the site in lots of different browsers, and sometimes on mobile phone browsers too. Each browser treats the code slightly differently, and the developer has to make sure that the site is accessible for lots of different users on lots of different browsers, and on different sized screens.
They have to make sure the text can be resized without breaking the site, that the site is readable by search engines like Google, and people with visual disabilities using screen readers, or people with old technology. They have to make sure the site looks as close to the design they have been given as possible.

The Front End Developer

So combining these two things, a front end developer works on the code that makes a website look the way it does. They use HTML to build the content, CSS to style the pages, and sometimes use JavaScript and PHP to make the pages more dynamic.

Now, this is all a bit of a generalisation. There is a lot of crossover with roles, and my role as a front end developer may be different to someone else who also calls themselves a front end developer, and it all depends on their skills and background. There are also many different roles within front end and back end which I will probably go into another time.

I really like what Chessbrook are doing, and they were perfect clients to work with.  At the end of the project, I did usability testing with the students to get their feedback on the website.

The navigation was a bit of a challenge.  The selected state was quite fiddly to develop because I wanted the text to resize without dropping out of the green strip. Here’s what I did…

Above is the text at normal size, and below is the text 5x bigger than normal.

I extended the white background at the top of the image so that it would cover the green strip when the text is resized and not look too out of place.  The selected state is actually two images.

This is what the background image for the right half of the link looks like.  It’s long to allow for long links.  When the link is small, it looks shorter.

While I was working on the site, Nat showed me a really good way to make the site more maintainable and use less code.  The site is made up of strips of content – the header, main content, sponsors and footer, and these all have very similar properties (things like they all have a width of 80% and the same amount of margins).  Rather than repeating the CSS for each class, we added a class within each strip called “section”.  So if we needed to make a change to the layout and instead make the width 70%, we would only need to change this in one place.

While interning at Clearleft, I helped work on the front end code for the Mozilla Addons site, pair programming with Natalie Downe.

This was the first project I worked on while interning at Clearleft. I pair programmed with Natalie Downe on the HTML and CSS.

The Portland Arms pub website was commisioned by the landlady to provide information to locals about events at the pub, as well as an up-to-date seasonal menu. The pub dog, Buster, updates his online blog (http://www.theportlandarmspub.co.uk/blog/bustersblog.html) with his perspective of life at the Portland Arms, with photos of the people, and other dogs, he meets.

The landlady takes photos using her iPhone of the food served in the kitchen and uploads them to the website via Flickr. She also takes photos at special events, and these are automatically posted to a slideshow on the site (http://www.theportlandarmspub.co.uk/gallery.php). Many locals didn’t know where the pub was, so I added a Google map which shows users where the pub is, and they can plan their route to the pub using this feature.

The British Band Instrument Company website was launched as an online brochure of instruments being sold to across the world, specifically in the Middle East. I added a translation feature, and made all the text editable so it could be translated into different languages. After some research, I placed the navigation on the right rather than the left because people in the Middle East read from right to left. I also added images onto the buttons (using the “sliding doors” technique) so that the user could visually distinguish the instruments. I used the sliding doors technique to speed up load time and ensured the site was usable on IE6 at a screen resolution of 800×600, as I anticipated that many users in this part of the world would not have fast Internet speeds or high-end technology.