Ready to take your LMS page design to the next level? Learn how to use HTML and inline CSS to create engaging online courses that are visually appealing and accessible. Using hands-on activities, you will practice several layout and styling elements and then create your own design.
Faculty Course Developers and Instructional Designers building courses on LMS platforms are usually limited in the customizations they can make to their pages. However, there is still a good amount of styling and layout that we can achieve through the HTML editor.
This session will explore how Faculty Course Developers and Instructional Designers can create engaging and effective online courses using HTML and inline styling. Participants will be able to customize the look and feel of course content in their LMS and create a unique and visually appealing experience for their online learners. They will be able to accomplish responsive pages with design elements unavailable in the rich content editors of their LMS. Moreover, having basic HTML skills can also improve efficiency in course design.
We will be using Canvas LMS, and therefore this session is most relevant for Canvas users. However, most of the content applies to any LMS platform that allows users to edit pages via an HTML editor.
Basic knowledge of HTML tags, (e.g., identifying paragraphs, headings, lists) would be helpful but not required.
The HTML and CSS used in the workshop examples, as well as additional web resources, will be distributed to learners to review and reuse when they return to their course development activities at their institution.
By the end of this workshop, participants should be able to:
-
Identify and use common HTML tags to design page layouts.
-
Use Canvas-friendly HTML attributes and inline CSS to apply custom styling to page elements.
-
Generate ideas for course page design.
The workshop structure is as follows:
-
Introduction and set up – 15 minutes.
-
Instructor-led practice (Learning Outcomes 1, 2) – 45 minutes: Facilitators will demonstrate a series of design elements, and participants will build along with them. We will go from a page with basic Rich Text Editor design to a complex design achieved through the HTML editor. The examples covered will go beyond what can be built through a Rich Content Editor or found in the Canvas style guide (https://canvas.instructure.com/styleguide). We will highlight accessibility considerations throughout the demo.
-
Try it yourself (Learning Outcomes 1, 2, 3) – 30 minutes: Participants will apply what they have learned to design their own page. They can work individually or in a group. Facilitators will monitor and help as needed.
Materials required:
-
Projector and screen
-
(Depending on the size of the room) Microphone and sound system
-
Wi-Fi with High-speed internet access for both presenters and attendees
-
Power outlets
-
Seating and tables
-
Presenters and attendees will need to bring their own laptop with access to their LMS.