Creating an inviting course home page

Stef_retired
Instructure Alumni
Instructure Alumni
192
91508

The course home page is a critical navigation waypoint for students. As course designers, we can choose from numerous style ideas to make the course home page inviting and intuitive for our students.

This is a stripped-down version of a course home page I'm currently using.

Buttons-for-home-page.png

I created this home page using a table, and I used the "btn btn-info btn-large" attribute for the buttons.

The functionality of this home page style is compatible with mobile devices, but the buttons themselves won't appear in the app. This is how the same home page looks in the Canvas App on an iPad.

Home-page-code-in-Canvas-iOS-app-resized.png

The image below shows examples of other button styles.

button-codes.png

The button code is inherently versatile. For example, using this code:

<p><a class="btn-large btn-block btn btn-danger btn" style="width: 100%;" title="Click here to view the Course Announcements" href="https://community.canvaslms.com/courses/[insert-course-number]/announcements" target="_blank"><strong>Course Announcements</strong></a></p>

...I can create a clickable button across the top of my home page to direct students to announcements:
Button-for-course-announcements.png

At many schools, teachers are tasked with creating their courses and course home pages. I'm currently training a cohort of teachers, and more often than not, when they create their syllabus page, they simply insert a link to their own syllabus file at the top of the page. The result is neither pretty nor inviting--so I've been teaching them the method of having the syllabus file auto-open for inline preview.

How do you create your course home pages? Do you have a standard template that is used across all of the courses at your institution? Do instructional designers create the pages, or are your teachers given instructions on how to create their own, and what they must include on them?

[Note: Need help with HTML? Read snugent​'s awesome blog, Rich Content Editor HTML Cheatsheet]

192 Comments