Skip to main content

blog

Websites Blog

Eleanor Yeo website build

15th April 2014

Each of the apprentices has been given a pilot business to work for as a way to build their skills and experience; one of the tasks includes a website. My name is Jack and I have been given the job of making the Photoshop designs of the pilot businesses come to life by typing neat sentences in the languages of HTML, CSS, and a Content Management System (CMS). Cosmic build websites using a variety of CMS'. These allow the user to take complete control of the content within the site, so they can edit all the text images and news items.

The client I’ve been working for so far is Eleanor Yeo, an independent florist. These CMSs, like most websites, are built using HTML (HyperText Markup language the main code used in building websites) and CSS (Cascading Style Sheets these control the look of the site be it fonts or colours). This allows the site to be accessed across a range of devices – PC, laptop tables, and other mobile devices and complies with accessibility standards (allowing users who are blind and partially sighted to use the site, and for those who don’t use a mouse). It also allows future developments of the site to be made with ease.

divide_into_sections

Div tags

I’ve probably spent most of my time experimenting with control over div tags, because they are like the bricks that websites are built from. The main thing that I’ve learnt is that divs are an instruction that tell the browser to refer blocks of HTML code to a style sheet. Style sheets are written in CSS; this sits in a separate section of the Content Management System from the HTML. <div id=”tagname”>your content</div> (in the HTML) and the corresponding #tagname {your styles} (in the CSS) There have been many issues in what I do, so I need to be careful and to make sure that I keep track of what changes I’ve made with a lot of copy and pasting. Despite this effort, different browsers have different compatibilities, so I need to make sure that I use CSS sentences that do the same thing, but work for as many browsers as I can test. For example, Firefox required that Eleanor’s site required the CSS ‘border: none;’ to leave the menu icons as they are, and Google Chrome did not. What I found interesting was how my interest grew the more analogies I noticed between the languages I’ve been using and the one I use to talk with, which are all dependent on some underlying context; decided or left to explore. I also gained a hard-earned appreciation for the importance of keeping every single thing neat and simple, so that everything else becomes as least complicated as possible i.e. browser compatibility. (CSS has motivated me to tidy my room!) So I started off with a design; I made a draft in a text editor of the overall layout in a text editor before the CMSMS account was built; I then began to copy and paste over what I had done with all its incompatibleness and then spent the rest of the time making it fit the CMS, taking requests, and finding out, with much support, how I could have done it a lot quicker and easier! So I’m looking forward to making the next process more simple and efficient, and I hope Eleanor enjoys her new site.