Woman working on a laptop computer with grayed out icons

A Reboot of Introduction to HTML5

Monica Miklosovic, Course Operations Manager Senior, Office of Academic Innovation
@mmiklo7

Colleen van Lent, Lecturer IV in Information, School of Information
@ColleenAtUMSI

When Web Design for Everybody (Basics of Web Development and Coding) launched in 2015, it became a place for learners to explore into the practical, foundational concepts of HTML5.  Its goal was to help learners uncover the “mystery” behind the Internet; jump into coding; and become familiar with the important but often overlooked concepts of validation and accessibility.

Since the original version of this course launched, new tools have emerged for writing, testing, and sharing code. Trends have shifted with respect to browser usage.  Also, we wanted to create more hands-on, authentic, ways for learners in our community to share work and learn from each other.

To that end, our course teams decided to revise Introduction to HTML5 from start to finish.  The final project in this was redesigned and switched to peer-graded. A number of other updates to the course content were made as well, including several brand new demonstrations of how to use the tools learners work with throughout course!

Highlights of the new version include:

  • Demos of the latest tools including GitHubPages, CodePen, FontAwesome, and a new interactive textbook
  • New how-to’s and resources for web accessibility
  • Redesigned practice opportunities and assessments, including a final project with demo

 

GitHubPages, CodePen, FontAwesome, plus a new interactive textbook

The revised version of Introduction to HTML5 includes a suite of demos to guide learners through the tools introduced throughout the course. These resources are used by industry professionals to share and test work, create portfolios, and integrate graphics and icons frequently used on websites today.

GitHubPages is service for free hosting of a site.  When we first launched this course, students couldn’t easily share their work.  Now, with GitHubPages learners can host their code and share their finished projects with friends, family, and peers.  This means that final portfolios can be hosted so people see the final product, not just the code.

CodePen allows students to easily practice editing code created by the instructor, or create their own code.  This tool allows for HTML5, CSS3, JavaScript as well as common frameworks such as Bootstrap and jQuery.

FontAwesome is a resource for graphics, icons, and images that are popularly used by designers to represent calendars, social media icons, and more.

Learn to Code HTML & CSS by Shay Howe is a new online textbook resource that we’ve included in this version of the course. The textbook covers HTML in depth, and also includes links to CodePen, an interactive platform for writing, testing, and sharing code (above). This inclusion was very important because it lets students get their hands dirty, so to speak, as they work through projects.  

 

Resources and how-to’s for web accessibility

As we introduced new tools and resources, it is important for learners to make sure their sites are still accessible.  For instance, in the previous version of the course students learned the importance of using alt text on images. While still a standard, learners now also need to know about concepts like aria-labels for icons.  

While it is often difficult  to know if projects are accessible, Introduction to HTML5 includes guides for tools available to help.  In this new version of the course we include links to some automated testers such as Wave and Funkify. These tools provide quick and simple ways to make sure that learners can create the best possible experience for the widest range of people.

 

Redesigned practice opportunities and assessments, including a final project with demo

As we interacted with learners in the initial run of this course, we paid attention to what worked, and what didn’t. Multiple choice quizzes can be an effective way for learners to fill in gaps missed during lectures and/or readings. To better support knowledge acquisition, all of the quizzes were recently redone to add additional questions and topics.

However, web design is also about creation.  In the original course the final project was autograded.  But we decided that our diverse group of students deserved a more robust way of grading.  There are so many different ways to make a page, and we wanted the student to explore the freedom.  The final project has been replaced by a peer graded assignment. This lets students share their work with a wider audience, as well as see what their peers have created.  It creates an opportunity for learners to share unique perspective, goals, and interest within our diverse community.

 

We invite new learners and people who have taken the course before to come explore the new features of this  updated version of Introduction to HTML5.  It is designed to align to the current trends and high quality resources now available.  Our goal is that this will create a space for learners to interact not only with the content, but in authentic situations and in a community with each other.

Learn more and enroll in the course on the Introduction to HTML5 Michigan Online course webpage.