Let’s Build Together: A Friendly Guide to the HTML Template
As your course development journey continues, we're excited to share a tool that can elevate your course experience—our HTML template. Whether you're an experienced course designer or just getting started, this walkthrough will help you confidently use, customize, and share back your HTML templates in Brightspace.
This article outlines the key steps in the videos below, giving you a written guide to refer to as needed.
🎥 Watch the Walkthrough Videos
Before diving into the guide, we encourage you to watch the short walkthrough videos below. These videos will:
- Introduce the template’s structure and purpose
- Show you how to create a page using both static and dynamic components
- Demonstrate tips for customizing your content
Use these videos as your visual companion throughout the process. Each section below corresponds to a part of the video series, so feel free to jump between the two as needed.
Handover - Classic View with Creator+
Handover - Lessons View with Creator+
Handover - Classic View
Handover - Lessons View
🧭 Where Your Template Lives
Most templates start from a common location: the Public Files repository in your Brightspace environment. By keeping the HTML template files here, multiple courses can access them easily, helping your content stay visually consistent across departments or programs.
- Look for the folder titled D2L. It contains the primary scripts—these typically shouldn’t be edited.
- The folder titled HTML Template Library is where your customizations live. You can tweak the CSS or add new template pages here. This is your safe space to experiment with small adjustments.
🧱 Understanding Template Structure
Inside the provided course shell, you’ll find a variety of modules to support you:
- Demos: Contains a user guide and quick videos that mirror the steps you're learning here.
- Creator+ Practices and Elements: Great for inspiration and seeing best practices in action.
- Components & Template Pages: These are your building blocks—ready-to-use static and dynamic components, and simple layout pages.
- Sandbox: Your playground to build and test pages before they go live.
✨ Working with Template Components
The template includes four main types of components:
- Typography: Headers, lists, and stylized text.
- Static Components: Callouts, panels, tables, images, etc.
- Dynamic Components: Interactive elements like accordions, tabs, flip cards, and quick assessments.
- Layout Elements: Headers, banners, page breaks, and footers.
Each component has a helpful “Copy Code” button, which let you grab just what you need without worrying about the code. The “Reveal Code” button is for those course builders with a bit of HTML experience who want to look under the hood.
🛠️ How to Build a Page from a Template
When you're ready to build, follow these simple steps:
- Create a New Page: Give it a title.
- Apply the Template: Choose from the dropdown before adding any content—this step replaces existing content in the editor.
- Add Your Content:
- Paste your course material as plain text to avoid unwanted styles.
- Choose static or dynamic components from the template course and insert them using either:
- The start copy/end copy tags (for static components).
- The Insert Stuff > Embed Code method (for dynamic components).
- The Creator+ authoring tool if you want to use interactive elements like click and reveals.
- Preview and Save: When you're happy with your design, remove the copy tags, then preview and save your work.
📄 Template Page Examples
The template includes several starter pages you can reuse:
- Basic Page – a clean, content-ready layout.
- Course Introduction Page – a welcome space for your learners.
- Module Introduction Page – perfect for weekly overviews.
- Video Lecture Page – includes an embedded, responsive video frame.
- Conclusion Page – wraps up a module and suggests next steps.
- Blank Page – a flexible space for custom content.
- Image Samples Page – offers tips for aligning and formatting images.
🌱 Tips for Getting Started
- Draft first: Know what you want to build before opening the editor.
- Set up your space: Keep the template guide open beside your work for easy reference.
- Use a sandbox: Practice before publishing to a live course.
- Explore freely: Try different components to find what works best for your learners.
- Leave copy tags in place until you’re done: This ensures styling isn’t accidentally broken as you build.
You now have the tools and structure to create engaging, visually consistent, and learner-friendly HTML pages. Don’t worry if it takes a bit of experimenting at first—your sandbox is there for play, and we’re always here if you need support.
Happy building! 🌟