This is a personal website
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
Implement and manipulate document structures and objects
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 HTMLSolution
This site uses section, article, nav, header, footer and aside tags.
Write code that interacts with UI controls
Programmatically add and modify HTML elements; implement media controls; implement HTML5 canvas and SVG graphicsSolution
SVG graphics are used as the icon for the menu flyout when the site is viewed for smaller devices.
Apply styling to HTML elements programmatically
Change the location of an element; apply a transform; show and hide elementsSolution
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.
Implement HTML5 APIs
Implement storage APIs, AppCache API and Geolocation APISolution
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.
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 globallySolution
All variables and functions have been scoped at the local level to keep objects out of the global namespace.
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 methodsSolution
- Create the document structure
Implement program flow
Implement program flow
Iterate across collections and array items; manage program decisions by using switch statements, if/then, and operators; evaluate expressionsSolution
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 functionSolution
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.
Implement exception handling
Set and respond to error codes; throw an exception; request for null checks; implement try-catch-finally blocksSolution
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"" pointerSolution
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.
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 workerSolution
- Implement program flow
Access and secure data
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 inputSolution
HTML5 element validation is demonstrated in the contact form (e.g.: required fields, maximum lengths, email-only field).
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 injectionSolution
Consume JSON and XML data; retrieve data by using web services; load data or get data from other sources by using XMLHTTPRequestSolution
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 encodingSolution
- Validate user input by using HTML5 elements
Use CSS3 in applications
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 shadowSolution
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.
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.
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 nestingSolution
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.
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 controlsSolution
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.
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");).
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.
- Style HTML text properties