This is a personal website

This website is a personal website. It has been produced professionally by myself with 100% hand-coded client-side web programming skills using HTML5, CSS3, and JavaScript. In addition, the range of skills have also been designed to demonstrate those that I obtained from the Microsoft Specialist: Programming in HTML5 with JavaScript and CSS3 certification on 29 September 2016.

The remainder of this web page describes the mapping between the certification skills and the various components of this website. There are 21 sub-objectives spread across the 4 main objectives. Note that the sub-objectives are generally not demonstrated exhaustively in the interests of brevity and to be practical to the needs of a personal website.

70-480 exam skills measured

1. Implement and manipulate document structures and objects
   1. Create the document structure
      
      Structure the UI by using semantic markup, including for search engines and screen readers (Section, Article, Nav, Header, Footer and Aside); create a layout container in HTML
      Solution
      
      This site uses section, article, nav, header, footer and aside tags.
   2. Write code that interacts with UI controls
      
      Programmatically add and modify HTML elements; implement media controls; implement HTML5 canvas and SVG graphics
      Solution
      
      SVG graphics are used as the icon for the menu flyout when the site is viewed for smaller devices.
   3. Apply styling to HTML elements programmatically
      
      Change the location of an element; apply a transform; show and hide elements
      Solution
      
      Transforms are used to gradually change the colour of the menu items when the mouse hovers over them. Showing and hiding is used for the menu flyout when the site is viewed for smaller devices.
   4. Implement HTML5 APIs
      
      Implement storage APIs, AppCache API and Geolocation API
      Solution
      
      The Geolocation API has been implemented to get the user's location for the purposes of giving a weather forecast on a separate weather page.
   5. Establish the scope of objects and variables
      
      Define the lifetime of variables; keep objects out of the global namespace; use the "this" keyword to reference an object that fired an event; scope variables locally and globally
      Solution
      
      All variables and functions have been scoped at the local level to keep objects out of the global namespace.
   6. Create and implement objects and methods
      
      Implement native objects; create custom objects and custom properties for native objects using prototypes and functions; inherit from an object; implement native methods and create custom methods
      Solution
      
      Some native objects are implemented (e.g.: Map, Date). Some native methods are implemented (e.g.: document.getElementById(), document.getElementsBy­ClassName(), Map.set(), date.getFullYear(), geolocation.getCurrentPosition(), numerous JQuery methods). Custom methods are created to modularise JavaScript code.
2. Implement program flow
   1. Implement program flow
      
      Iterate across collections and array items; manage program decisions by using switch statements, if/then, and operators; evaluate expressions
      Solution
      
      The collection returned from document.getElementsBy­ClassName() is iterated over to assist with the menu flyout when the site is viewed for smaller devices. Arrays are defied and used in referring to page elements on the weather page. Program decisions are managed with if-statements in numerous places (e.g.: Checking that a CSS class can be retrieved for an active menu item). Expressions are evaluated for essential JavaScript (e.g.: String concatenation to formulate URLs for AJAX requests).
   2. Raise and handle an event
      
      Handle common events exposed by DOM (OnBlur, OnFocus, OnClick); declare and handle bubbled events; handle an event by using an anonymous function
      Solution
      
      The OnClick event is wired up to handle to click events on the menu flyout when the site is viewed for smaller devices. The OnClick event is also wired up for validating the query form when the site is viewed for larger devices. These events are also implemented with anonymous functions.
   3. Implement exception handling
      
      Set and respond to error codes; throw an exception; request for null checks; implement try-catch-finally blocks
      Solution
      
      The separate weather page throws an exception whenever the geolocation or Open Weather Map services fail.
   4. Implement a callback
      
      Receive messages from the HTML5 WebSocket API; use jQuery to make an AJAX call; wire up an event; implement a callback by using anonymous functions; handle the "this"" pointer
      Solution
      
      The separate weather page uses JQuery.ajax() to make an AJAX call to the Open Weather Map for a weather forecast. As per B.2, the OnClick event is wired up to handle to click events on the menu flyout when the site is viewed for smaller devices, and this event is implemented with an anonymous function.
   5. Create a web worker process
      
      Start and stop a web worker; pass data to a web worker; configure timeouts and intervals on the web worker; register an event listener for the web worker; limitations of a web worker
      Solution
      
      Web workers allow you to implement multithreading so processing can be offloaded to separate background threads to prevent unresponsive behaviour from long-running tasks. This site does not have a need for web workers, so the limitations of a web worker are described instead as a point of theory: (i) A web worker is isolated from the web page and other web workers, so it cannot access the web page or its data or JavaScript; (ii) A web worker can access only a subset of JavaScript functionality; and (iii) A web worker JavaScript file must be hosted on the same site.
3. Access and secure data
   1. Validate user input by using HTML5 elements
      
      Choose the appropriate controls based on requirements; implement HTML input types and content attributes (for example, required) to collect user input
      Solution
      
      HTML5 element validation is demonstrated in the contact form (e.g.: required fields, maximum lengths, email-only field).
   2. Validate user input by using JavaScript
      
      Evaluate a regular expression to validate the input format; validate that you are getting the right kind of data type by using built-in functions; prevent code injection
      Solution
      
      JavaScript validation is used for the search form when the site is viewed for larger devices, to check that one or more query terms are supplied.
   3. Consume data
      
      Consume JSON and XML data; retrieve data by using web services; load data or get data from other sources by using XMLHTTPRequest
      Solution
      
      A separate weather page has been created to consume data from the Open Weather Map.
   4. Serialise, deserialise, and transmit data
      
      Binary data; text data (JSON, XML); implement the jQuery serialise method; Form.Submit; parse data; send data by using XMLHTTPRequest; sanitise input by using URI/form encoding
      Solution
      
      The same weather page is also being used to deserialise data from the Open Weather Map.
4. Use CSS3 in applications
   1. Style HTML text properties
      
      Apply styles to text appearance (colour, bold, italics); apply styles to text font (WOFF and @font-face, size); apply styles to text alignment, spacing and indentation; apply styles to text hyphenation; apply styles for a text drop shadow
      Solution
      
      Bold style is used for menu headers. Font sizes are increased when the site is viewed on smaller devices. Alignment is centered for menu items. Text drop shadow styles are applied to give the banner text a fuzzy white outline.
   2. Style HTML box properties
      
      Apply styles to alter appearance attributes (size, border and rounding border corners, outline, padding, margin); apply styles to alter graphic effects (transparency, opacity, background image, gradients, shadow, clipping); apply styles to establish and change an element’s position (static, relative, absolute, fixed)
      Solution
      
      Sizes are applied to key regions (e.g.: content pane, header, navigation, footer). Blue borders are applied around navigation items. Rounded borders are used on the portrait on the homepage and second-level menus when applicable. Padding and margin properties are applied in numerous places to control white space. The seascape image in the header banner is implemented as a background image. Black shadows are applied on the left and right borders of the main content pane when the site is viewed for larger devices. Positioning styles are applied to implement the menu flyout when the site is viewed for smaller devices.
   3. Create a flexible content layout
      
      Implement a layout using a flexible box model; implement a layout using multi-column; implement a layout using position floating and exclusions; implement a layout using grid alignment; implement a layout using regions, grouping and nesting
      Solution
      
      The flexible box model is applied to apply page layout in numerous places such as the vertical page regions (i.e.: center content pane, and empty panes on the left and right when the site is viewed for larger devices), horizontal page regions (header, navigation, article, and footer), and components of many of these for fine-tuning layout. Position floating is used for the homepage portrait image and second-level navigation menu when the site is viewed for larger devices. Grouping and nesting of CSS selectors are applied commonly to target the correct page elements.
   4. Create an animated and adaptive UI
      
      Animate objects by applying CSS transitions; apply 3-D and 2-D transformations; adjust UI based on media queries (device adaptations for output formats, displays and representations); hide or disable controls
      Solution
      
      Transitions are applied for hover styles of the menu elements. Media queries are used to significantly change the appearance of the site when viewed on smaller devices. Some controls are hidden when the site is viewed for larger or smaller devices as appropriate. The submit button on the contact form is disabled for one second after it is clicked to prevent multiple submission of the form.
   5. Find elements by using CSS selectors and jQuery
      
      Choose the correct selector to reference an element; define element, style and attribute selectors; find elements by using pseudo-elements and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)
      Solution
      
      Fine grained selectors are implemented to find the correct element (e.g.: nav > a), numerous selectors are defined (e.g.: header > form > input[type=submit] as an attribute selector), the :hover pseudo-class is an example of a commonly used pseudo-class, jQuery is used to find elements too (e.g.: $(".dropdown-items").toggleClass("show");).
   6. Structure a CSS file by using CSS selectors
      
      Reference elements correctly; implement inheritance; override inheritance by using !important; style an element based on pseudo-elements and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)
      Solution
      
      My CSS file is structured with over 400 lines of CSS code (e.g.: aside#steven-burrows-portrait > img for referencing the portrait on the homepage), the :first-child and :first-of-type pseudo-classes are other examples of a commonly used pseudo-classes.