Last week I completed part 1 of the edX HTML5 Coding Essentials and Best Practices course facilitated by the W3Cx group. It’s the first HTML related course I’ve taken since I started the FreeCodeCamp curriculum (one day I’ll make it back over there).
My reasons for enrolling in this course were to reacquaint myself with HTML5 specifications. I’ve used HTML since I was a teenager so I’m comfortable with markup but everywhere I’d see mention of HTML5 this or that so I figured there is always more to learn. I received the email about the course starting and immediately enrolled in Part 1 and Part 2, which began last week covers more advanced topics. I debated whether it would be a good use of my time, and time for everyone is very limited but for me, it’s very important given my short term and long term goals.
Let us begin!
This my first course on the edX platform and in my opinion it is very easy to navigate. I did not take the introductory course (I believe one is offered) on navigating through the edX site, as I felt it was self-explanatory.
The course was broken out into weeks and within each week are different topics and within those topics, there are lessons, which could range from 1-8 slides. Most of lessons followed a format of: introductory video, resource slide(s), example slides, and next steps/project ideas for students). The course also includes a discussion forum but I never used it so I can not comment on it.
Because this course was focused primarily on HTML5, it did not cover previous specifications, mostly new features, elements, attributes and APIs. Some of it, I was familiar with because of my work with WordPress themes which follow the HTML5 document layout suggestions with headers, sections, asides, etc.
Below are the topics covered:
Basics
- Introduced to the new HTML elements and attributes and best practices for accessibility
- I used what I learned in this part of the course to create my own basic HTML boilerplate. It provided great explanations on why content should be structured a particular way. I’d seen the implementation in WordPress but never questioned it.
- I learned about polyfills (a term I’ve seen before) and why they’re used – basically because all of the HTML5 features don’t have full browser support, so polyfills are used as a fallback when you’re creating a site with HTML5 and need it to be supported across older browsers.
- This course also covered microdata. I’ll have to do more individual study on this.
Multimedia
- The section of the curriculum introduced us to features that allow developers to incorporate video and audio into web pages without using the old standby of Flash. It’s extensive too, with examples & explanations for styling video/audio controls with CSS, incorporating JS, and even including subtitles/closed captioning – for accessibility.
- I have a multimedia project I’m planning out and I think this will prove very valuable once I get started on development.
Graphics and Animations
- Graphics and Animations were my least favorite parts of the course. It introduced the new
<canvas>element and how to use the Javascript API to draw various shapes and animate. It explained the difference use cases for<canvas>and<svg>, the former being for pixel-based graphics and the latter with vector. Big ass light bulb moment. I mean I’ve seen so much writing about SVG but almost nothing about canvas, and that’s probably because it’s not scale-able. - I think I struggled to get through these two weeks of the course because I couldn’t see how/why I’d implement this into my workflow. That is not to say that I won’t in the future for more “creative” projects. The entire time I kept thinking, “but is there a better way of doing this?” because it seemed very tedious, and I might not be but from what the course covered and my #codenewbie eyes, it appeared as such.
- I did like that it used JavaScript and the different examples were fun to play around with. In fact, I spent more time tinkering with their JSBins and testing out different things. Anytime JS is incorporated in a course, I feel like I’m learning more and improving my understanding of how things work.
Forms
- There are 13 new input fields for forms and this section covered how and why they’re used. It shared best practices for accessibility – which is clearly a big priority for the W3C group, given how ubiquitous the web is everyone’s lives.
- The course covered the enhanced input validation capabilities that don’t require any JS, which is good to know because I recall my intro to forms years ago was very basic and anything you could do with forms required additional backend functionality. There are a lot of features that don’t have full browser support yet, so of course it covered fallbacks & polyfills as well.
- I liked that this part also included common developer critiques of the new HTML5 features. For example with forms, the “color” attribute which enable users to input/select colors does have customization options via CSS. If used in the HTML, how and where it appears varies from browser to browser. I noticed this when I would test the examples between browsers (on my computer I have Chrome, Firefox, and Edge). Chrome and Firefox generated pop-up color selectors that looked completely different from each other and then Edge just showed the hexadecimal value with no option for a pop-up, meaning the user would have to input a value if no polyfill was used.
Basic APIs
- This was my favorite part of the course, I think because I could actually see use cases for it in projects I plan to work on. It covered a variety of APIs.
- Cache API: Provided steps developers can take to implement a cache, setting up a manifest document, and showing how it works via video live coding. They also explained why and how it improves performance. The course also included plenty of resources to assist with it like ManifestR.
- Web Storage API: This was another light bulb moment for me. I learned the difference between cookies, localStorage and sessionStorage, how all of them are used to save user input, and how to access that data via developer tools. In addition, I learned how JSON is used to store more complex data in localStorage. I’ve heard about JSON but didn’t really know what it was. I’ll have to do more individual study on it.
- The File API is used to access files (images, texts, videos) on the client-side. From the explanation in the course, the technology in this API can be used to read and manipulate your local files on the web. So you could create a webapp that would allow you to create Snapchat like filters on photos stored on your local harddrive. Fun fun fun! *birdman handrub*
- And lastly the Geolocation API which can be used to access locations. We see how this type of technology is used by sites like GrubHub or store finders.
This course met my expectations and I think its a great resource for developers who are already very familiar with HTML/CSS syntax and also some JavaScript. Having completed it, I think it’s something I will refer to when I’m working on something. So much information was covered, it is very overwhelming.
I didn’t think the evaluations were all that helpful, just asking questions about different concepts learned, different tags you might need to do xyz – those are not ways that I learn things. The course did outline projects but I did not do any alongside the program, but I do intend to experiment. So if you’re like me and basically just reading through everything, you might walk away feeling like “yea that was great! let me get back to this when I’m actually working on something.” But if you’re a better student than me and coded along with your own individual projects, you might retain more information. I can’t say.
I also didn’t start the course on time, I started the week of 6/20 and the course actually started on 5/16 (remember how I said May was an awful month for me… we’ll yes I’m still playing catch-up). Anyway, I’m trying to figure out whether I’ll follow along with Part 2, since I know it’s far more advanced and I’m still marinating on what I learned in Part 1.
I do recommend the course for anyone just looking to brush up on their HTML5 knowledge. Everything you learn won’t be useful in every project, but I like to think that if in the near or far future a client or manager has a request for something I’ve never done but I’ve heard about, I can reach back into my memory and remember that I at least crossed paths with it, therefore it is in fact “do-able.”