Website Progress and Responsive Website Coding

Before going to OFFF i had some progress on my website. I thought i would use this blog post to talk about the progress of my website and the coding behind it all.

This is a current screenshot of my website in the desktop view. So far i am currently happy with the way it is going. My main focus is to add all the content in first and then design it all later as that takes a lot more time and effort and i would rather have all the information i needed in first.


With having experience from my A Level courses in Web Design, I found it easy to get back into coding again. There were a few changes to now having to work in HTML5 and CSS3 but luckily they were not major changes and actually made some tasks easier for me to handle.

To start off we were shown a basic skeleton frame that changes the layout of a column and makes it responsive for desktop, tablet and mobile. We would be using that frame for our own website to make the responsive side of it a lot easier to handle.

Skeleton CSS

This is a screenshot from the Skeleton CSS page. As you can see the container is 960 pixels wide and it is split into 16 columns. Depending on which column you choose will determine the size of the column

Skeleton FrameWork HTML Example

This is what it looks like in Chrome or any web browser. As you can see it is the same group of text just copied and pasted into different columns, you can also see how the columns shape the text to fit perfectly within the container for the desktop size. I also added in some lines to go across the page to add some style and to show the separation of the columns more clearly.

My HTML for My Website

So for my Website i have included in the Head Tag so that the skeleton framework will be applied to it. It also includes the Specific Media sizes so it will work for on Tablets and for Mobile.

Media Queries

Here is some Media Queries for my website that applies to different width sizes of the browser, depending on what device you are viewing it on. For example I have a slideshow in my website that you can view on the desktop and tablet, however i decided to remove it for mobile devices since the images would be too small and it wouldn't look as effective as it does on the other devices. To be able to achieve this i use this code in the Mobile Portrait size to Mobile Landscape and Mobile Landscape to Tablet Portrait media query. .slideshow { display: none; } This would then remove the slideshow when i shrink it down to mobile size.

The screenshots above show the difference between the 3 devices on which my website is displayed, you can see the difference in font size, the slideshow not appearing on the mobile site and the navigation is styled differently.

I am happy with the progress i have made with my website and out of all my websites i have created this one is the one i'm most proud of, so far i've encountered no major problems with my coding (yet!) so with this progress i hope to be finished soon and will post some more blog posts about other elements of my website.