Thursday, January 30, 2014

MVA Course "Developing in HTML5 with JavaScript and CSS3 Jump Start"

This is the first time I've worked through one of the courses offered by Microsoft Virtual Academy. In the interest of targeting my efforts toward the specific job I want, I've decided to go after the MCSD: Web Applications certification, which consists of three tests: 70-480 "Programming in HTML5 with JavaScript and CSS3", 70-486 "Developing ASP.NET MVC 4 Web Applications", and 70-487 "Developing Windows Azure and Web Services". This first course is targeted at 480, and is a pretty basic overview of HTML, CSS, and JavaScript, though I did learn a couple new things. The last module dealt with "Promises" which was a completely new concept for me. I'd seen asynchronous functionality in JavaScript before but this was a pretty interesting new take on it, definitely worth some additional follow up. Overall it was a pretty easy 6ish hour course.



They were nice enough to provide a "Certificate of Completion":


The modules basically broke down as follows:


  • HTML5 Semantic Structure covered:
    • New semantic tags that replace need for certain IDs and classes such as headers, nav, footers, etc.
    • New form features such as "required", "placeholder" and regex pattern matching
    • Audio and video integration
    • Canvas and SVG for graphic creation 
  • CSS Selectors and Style Properties
    • covered some of the basic CSS selectors (type, .class, #id, etc.)
    • covered descendant, child, and sibling combinators
    • colors and opacity can be specified multiple ways
    • basic text properties (decoration, transforms, shadow)
    • font properties, including how to specify a custom @font-face
    • columns
    • box properties (offset, margin, border, padding, content)
    • sizing (width, height, min/max, content-box vs border-box
    • visibility (display, visibility, white-space, overflow)
    • box shadow and border radius, gradients. (both are used sparingly in Win 8 design)
  • Advanced Layout and Animation
    • Legacy or Traditional layout using positioning (relative, absolute), display properties, float, z-index
    • Flexbox, which is currently only supported by Microsoft, is geared toward simplifying layout for small devices (with say one row of items in a single plane of scroll)
    • Grid, which provides table like layout capabilities
    • For flexbox and grid, the "fraction" unit of measure basically allocates a proportion of available space to each item according to its fraction, which is like a weight.
    • Elementary transforms such as rotate, skew, scale, and translate
    • Transitions and animations
    • Can use @keyframes to define a series of changes
  • JavaScript Core Capabilities
    • JavaScript started in 1995 at Netscape before being formalized as ECMAScript in 1997
    • prototype-based (not true OO), dynamic and weakly typed, functions are first class citizens, syntax is C-like (curly braces, semi-colons, etc.)
    • Variables can be typical static types (string, bool, int, etc.) or function declarations
    • Functions are callable behaviors implemented as objects. Functions that are initialized as functions (function x (a, b) {}) are hoisted, meaning they can be used before their declaration. However, functions created as variables are NOT hoisted. Functions can take any number of arguments regardless of how they are declared because of JS use of the arguments[] variable.
    • Methods are functions called from an object or class.
    • Function scope determines where a function is visible within the program.
    • Immediate functions execute ... immediately.
    • "Module Pattern" is common in web development
      var mod = (function(){
          var m = 2000, c = 0, d = 10, y = 2;
          return {
              getHiddenYear : function() {
                  return m + c + d + y;
              }
          }
      }());
      var x = mod.getHiddenYear(); // x == 2012
    • Arrays are lists of items that are simple to declare and instantiate
    • Array functions include push, pop, concat, map, filter, some, every, forEach, reduce, sort, splice, slice, join, reverse. 
    • Objects can have properties added when they are declared, or added dynamically in code
    • Functions are objects
    • Briefly covered JSON
  • DOM Interactions
    • querying DOM using getElementById, getElementsByTagName, querySelector, and querySelectorAll.  querySelectors use the same basic selectors as in CSS. querySelectorAll and getElementsByTagName return node lists, whereas the other two methods return single elements.
    • there are functions to add and remove children nodes, create new nodes, and change various attributes of nodes including style and class
    • event listeners can be added two ways: declarative (in the HTML on the element itself) or programmatically using the .addEventListener method. The later method is recommended.
  • Advanced Topics
    • Talked a lot about promises, some exception handling.
    • Michael Palermo had a blog post about promises and exception handling that he suggested for further reading.
    • Foster has a similar blog post on his site codefoster.com

No comments:

Post a Comment