Task 2: Build the Website

Week 5 to week 9 where build the website weeks this is where we took our previous knowledge and what we where currently learning to create a website that followed our clients requirements. Using social media plugins, Responsive design and current trends in 2016 to create a appropriate website the client would be happy with.


A lot was considered when i started designing my website one of my key concerns was browsers choice, majority of views come from three browsers: Explorer, Chrome and Firefox. I have tested the website on all three and also tested on mobile platforms (this is shown later in the document).

Connection speeds is also another issue with the average user waiting no longer than 8 seconds for a website to load this is something to consider when creating your own website. I have kept the pages simple with not a lot of information and chosen appropriate file types for my images, as this is a website focused on the clients images this was a huge concern when creating the website.

Colorblindness/ partial blindness was also another concern so appropriate descriptions for the images where used and colors that reflect well for the website.


At the beginning of this project i had a bit of knowledge with HTML5 and CSS and wanted to work on it more by exploring responsive design and Frameworks.

Some of the websites that i visited the most often where:


Majority of my problems came from a responsive web page and incorporating Medium into the website, these issues where resolved by research from the links above. I will continue to read and test making my websites more mobile friendly in the future as i feel i am not 100% confident but with this example i am happy. Over the past 5 weeks i have learnt a lot more about what goes into creating a website and what to consider when drafting your website so that it is a well designed website for 2016. Other issues where the appropriate css attributes.

Validation Results

Index, No errors occurred during build phase, No issues with Instagram embed code or footer or header code during building.

Projects, No alt tags and corrections made no issues after.

About, No issue same as index html other than the exception with <p> tag.

Blog, Issue with table rows corrections made now no errors

Contact, Table header where not used correctly showing multiple errors correction made no noticeable change from users prospective.

Browser testing

Internet Explorer, Chrome and Firefox (left to right)

Index Page

Index, Uses a basic header and footer with the uses of Font Awesome and Instagram embed code when the user scrolls down. Google fonts was also used throughout the website.

Projects Page

Projects, Same design as the main page with the a table showing clients previous work as the main focus this time.

About Page

About, clients brief description to the right and link to Facebook page slightly to the left. No issues on the different browsers.

Blog Page

Blog, Client required a way to post there blogs onto there website. Medium was chosen showing the last three current post. No issues to report.

Contact Page

Contact, Simple php contact form with a table to the right showing relevant information.

Mobile front page view.

No issue running on three different browsers as shown above. The final version represent my draft from the beginning of the course with a few corrections.

Development Environment

Brackets: A modern, open source text editor that understands web design.

Features like Live preview and quick edit and the ability to add extensions make this my go to Editor. Also the look and feel of Brackets.

Like what you read? Give Kyle Holmstrom a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.