HTML Canvas Course

The Course

This Canvas course hosts my section of USD260’s Technology and Careers course, which is a required class. There are four teachers for this course, across two middle schools, but our Canvas pages are designed individually. Because this is a core class, but not a tested subject (like math or ELA), I have a lot of freedom in planning all learning activities and course content. It is rare that we complete a paper assignment in class, and students are all provided with a Macbook Air for use during class (and for them to learn a new operating system).

This is the sixth iteration of my Technology & Careers Canvas course, and each update has been born from student and parent feedback, as well as personally observing student interactions with the course. This most recent iteration is by far the easiest to navigate, with both physical and digital cues for students to help them find what they need.

The Students

The students who will use this course are 7th graders (and the guardian assisting them at home, on occasion), meaning they are generally 12-13 years of age. We have a diverse population in regards to race, ethnicity, gender identity, among others.

For anyone unfamiliar with 7th graders, below are some common phrases heard over 5 times each period:

  • “What are we doing right now?”
  • “I wasn’t sure where I was supposed to be.” (in response to being asked why they aren’t on the same page or activity as the rest of the class)
  • “What week is it?”
  • “What day is it?”
  • “Wait, what did you just say? I wasn’t listening.”

Obviously, this led to my number one challenge: Creating navigation that is intuitive enough that even a 12-year old can use it!

When designing the landing/home page, I have tried many things but finally settled on a template that is easy for students to use and low-maintenance for the course facilitator.

The design to the left was created to be eye-catching (if it isn’t interesting, 7th graders will ignore it), simple, and easy to use.

The top heading clearly identifies the course name, and allows students to know immediately if they are in the correct class for the current hour.

The week buttons are prominent, and match a physical poster that is placed at the bottom of our presenting TV (which is centered in the front of the classroom). Students are trained from the first day of the school year to look at the poster to find which week to click on.

The three buttons at the bottom are rarely used, but are still there so that students don’t have to hunt them down if they need them.

Once a student selects the current week from the homepage, it navigates in a new tab to their weekly agenda. This format has also gone through multiple iterations, and now the only changes that are made are minor.

The top of the agenda identifies the week days, from Sunday to Saturday. Below, there are tabs for each school day. The day is also posted on the TV at the front of the room, so they don’t have to ask.

For each day, there is a to do list at the top, school-wide announcements or reminder in the center, and an early finishers button at the bottom (that links to their choice board).

The to do list contains the items we are going to complete in class, with colored hyperlinks to relevant assignments as needed. In previous iterations, these links were color coded for starter activities, template links, and turn in pages, but this design was really unfair to students with colorblindness, especially red-green. As a result, the link’s color doesn’t mean anything, and just sets it aside from the non-hyperlinked text.

To aid in ease of use, the pages are set ahead of time to publish at midnight the day they are needed (same as assignments).

In general, 7th graders do not use any sidebar navigation. It’s very rare that they will click on modules or assignments, and typically look for any necessary navigation in their daily agenda (like assignment links or reminders).

Because of this, the assignments and modules pages are accessible for students, but only used in practice by the facilitator.

Assignments are sorted into grade book categories so that they will sync to our grade book (Skyward). This is unfortunate, but unavoidable, because if they are retitled, they do not sync. If possible, I would use more relevant categories so that students could use them.

Modules are the weekly agenda pages sorted into each quarter of the school year. Again, all modules and assignment pages do not publish until they are needed, and do so without the facilitator needing to manually publish them. This also keeps 7th graders who like to work ahead unable to access future assignments, while avoiding the difficulty that using module prerequisites can cause (if they haven’t submitted an assignment, they may be unable to access the day’s content).

Scroll to Top