Course Builder and HTML Templates

Using the Course Builder to build an out­line or course skele­ton is where the heavy lift­ing of course design hap­pens. You can use the drag-and-drop func­tion­al­i­ty to cre­ate a struc­ture for your course that out­lines the top­ics and mod­ules you want to cov­er in your course.

Cre­at­ing a sol­id out­line is a crit­i­cal first step in design­ing an effec­tive course as it pro­vides a roadmap for the rest of the design process and helps ensure that all nec­es­sary top­ics are cov­ered in an orga­nized and log­i­cal way.

Course Builder

  1. Nav­i­gate to Tools > Course Builder

On the left side of the screen you’ll find tools and place­hold­ers, the cen­ter of the screen is where you’ll build and on the right side you can fine tune things by access­ing edit­ing tools.

Course Builder Navigation

Tip: Keep three brows­er tabs open at same time: nav­i­gat­ing Con­tent, Course Builder and Man­age Files eas­i­ly. Watch this video to learn more. 

  1. Start Build­ing (Drag & Drop)

Sim­ply choose the desired com­po­nents, such as mod­ules, HTML pages, assign­ments, quizzes or dis­cus­sions, from the menu on the left-hand side of the screen and drag them into the cen­ter. From there, you can cus­tomize each com­po­nent to fit your course needs, such as adding con­tent or set­ting due dates. The drag-and-drop func­tion­al­i­ty makes it incred­i­bly easy to build a course from scratch or add new com­po­nents to an exist­ing course.

Course Builder Navigation

HTML Templates

Using HTML tem­plates saves time and main­tains con­sis­ten­cy in course design by pro­vid­ing pre-designed lay­outs and styles that can be eas­i­ly cus­tomized and reused across mul­ti­ple cours­es. Addi­tion­al­ly, HTML tem­plates can help ensure acces­si­bil­i­ty and respon­sive­ness across dif­fer­ent devices and plat­forms.

To access the selec­tion of HTML tem­plates you must be in the ‘Con­tent’ area of your course.

Select the HTML page you’d like to add the tem­plate to and click edit (3 dots in right-hand cor­ner of the screen). From the edit win­dow, you will see the blue ‘Select Tem­plate’ menu. Click its down arrow to choose from the 10 avail­able tem­plates. Fol­low the instruc­tions on each tem­plate to cus­tomize your con­tent.

Available Templates

Exam­ple of the Basic Page HTML tem­plate below. It includes a ban­ner image across the top, a main head­ing, a sub-head­ing and instruc­tions on copy­ing and past­ing text.

Learn More

  • Design and Acces­si­bil­i­ty
  • Adding Media 
  • Adding Dates and Restric­tions