Developing a New Website #1

The Old Website

The development of my first website was during my first year of University. The creation of this website was a long process of coding, testing and creativity. In this project I collected resources for a template.  The website contains a large variety of website templates that do not necessarily need to be used, but it is a great way to gather inspiration. Other resources included edited images from Adobe Photoshop, saved for web which increased optimization.

The old website aesthetic design was messy and unorganized, as well as the code.

The New Website

Skip resources

Useful resources

Before getting started, here’s a list of different websites to support your HTML, CSS and JavaScript development.

HTML:

• Vocabulary and associated APIs for HTML and XHTML:
  https://www.w3.org/TR/html5/
• Documentation for HTML (includes CSS, JS and more…):
  https://developer.mozilla.org/en-US/
• Outline structure of your HTML:
  https://gsnedders.html5.org/outliner/
• ARIA table:
  https://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html

CSS:

• Media Queries:
  https://mediaqueri.es/
• Fonts:
  https://fonts.google.com/
• Normalize your CSS:
  https://necolas.github.io/normalize.css/
• Reset your CSS:
  https://meyerweb.com/eric/tools/css/reset/
• Colour Scheme:
  https://coolors.co/
• CSS documentation:
  https://tympanus.net/codrops/css_reference/
• Image placeholders:
  http://unsplash.it/

JavaScript:

• Online linter for JS:
  http://jshint.com/
• Minify your JS:
  http://www.minifier.org/

Getting Started

Firstly, I will download the HTML5 Boilerplate which has everything you need in terms of file structure. Here’s the layout of my folder:

I’ve added the files about.html and portfolio.html, since these are the additional pages needed for my website. I want to span my content across my site equally, I do not want it piled onto one page since that would be very unreadable and the user experience will be poor.

User experience is the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.

I want to structure my page correctly with HTML, and account for accessibility (screen readers) using the role attribute for my header, navigation, main, article, and footer.

I will add Bootstrap 3 (CSS/JS) to my code as well by using the CDN links listed on their website. This could also be done via downloading the CSS/JS files.

Here is a very clear and concise video tutorial by ‘The Website Boy’.

https://www.youtube.com/watch?v=GU6EWzBGo64

I will also add Google analytics and signed up to this service via https://www.google.com/analytics/. I will use the UA ID and implemented that into my Javascript script tag.

To conclude on this blog, we now have an organised and well drafted code boilerplate, with some good HTML structure. Progress can be viewed at https://lwest2.bitbucket.io/.