In this video, I’m taking you behind the scenes into my thought process for designing effective and engaging Canvas LMS wiki pages using AI-generated HTML and inline CSS. Rather than focusing on technical demonstrations, I discuss the reasons behind my design choices, explaining how I leverage AI to quickly produce visually appealing and functional pages.
You’ll learn how to:
- Decide on the ideal structure for maximum clarity and engagement.
- Use AI to efficiently generate HTML and inline CSS tailored to my educational goals.
- Select visual elements and multimedia to enhance the learning experience.
Whether you’re a teacher exploring AI’s potential or a course designer seeking innovative approaches, this video will inspire you to streamline your workflow and improve your Canvas pages. Don’t forget to subscribe to The Canvas Champion for more tips, tutorials, and creative strategies for mastering Canvas LMS! #CanvasLMS #WikiPageDesign #EdTech #AIinEducation #CanvasChampion
The following code blocks are the different parts to the wiki page as demonstrated in the video suitable for Canvas. Remember you cannot use external CSS or CSS in the page header (as its not accessible to you through a RCE in a wiki page), no JS or similar.
Instructions
Copy and paste the code and add it to the HTML view of the RCE in Canvas
Replace the images for your own. If you see no images when you copy them over, that will be the reason. REMEMBER EACH CANVAS SITE HAS ITS OWN INTERNAL ID. IF THAT NUMBER DOESNT MATCH OR IT DOES BUT YOUR IMAGE ISNT IN YOUR FILES AREA, THE IMAGE WILL NOT SHOW (https://canvas.instructure.com/courses/11184717/pages/grid-page)
This is the URL to each image in the code blocks: You need both numbers to match your course and the image id from the file in then files area. You CANNOT do this via the image upload in the RCE, but only in the HTML view of the RCE url(‘/courses/11184717/files/288949564/preview’)
Grid of 4×2. Does not respond correctly
<div style="max-width: 1000px; margin: auto; font-family: Arial, sans-serif; padding: 20px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 15px; background-color: white;">
<div style="background: #E6E6E6 url('/courses/11184717/files/288949564/preview') center/cover; color: white; border-radius: 15px; padding: 20px; grid-column: span 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100px;">
<div style="font-size: 14px;"><strong>Jamie</strong><br /><strong>Homewood</strong></div>
</div>
<div style="background: #E6E6E6 url('/courses/11184717/files/288949569/preview') center/cover; color: white; border-radius: 15px; padding: 20px; grid-column: span 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100px;">
<div style="font-size: 14px;"><strong>Brand &</strong><br /><strong>Marketing Central</strong></div>
</div>
<div style="background: #E6E6E6 url('/courses/11184717/files/288949565/preview') center/cover; color: white; border-radius: 15px; padding: 20px; grid-column: span 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100px;">
<div style="font-size: 14px;"><strong>Events</strong><br /><strong>Calendar</strong></div>
</div>
<div style="background: #E6E6E6 url('/courses/11184717/files/288949566/preview') center/cover; color: white; border-radius: 15px; padding: 20px; grid-column: span 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100px;">
<div style="font-size: 14px;"><strong>Global</strong><br /><strong>News</strong></div>
</div>
<div style="background: #E6E6E6 url('/courses/11184717/files/288949567/preview') center/cover; color: white; border-radius: 15px; padding: 20px; grid-row: span 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100px;">
<div style="font-size: 14px;"><strong>Knowledge</strong><br /><strong>Hub</strong></div>
</div>
<div style="background: #E6E6E6 url('/courses/11184717/files/288949568/preview') center/cover; color: white; border-radius: 15px; padding: 20px; grid-column: span 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100px;">
<div style="font-size: 14px;"><strong>Human</strong><br /><strong>Resources</strong><br /><strong>System</strong></div>
</div>
<div style="background: #E6E6E6 url('/courses/11184717/files/288949887/preview') center/cover; color: white; border-radius: 15px; padding: 20px; grid-column: span 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100px;">
<div style="font-size: 14px;"><strong>Learning &</strong><br /><strong>Development</strong><br /><strong>Community</strong></div>
</div>
<div style="background: #E6E6E6 url('/courses/11184717/files/288949367/preview') center/cover; color: white; border-radius: 15px; padding: 20px; grid-row: span 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100px;">
<div style="font-size: 14px;"><strong>People</strong><br /><strong>Directory</strong></div>
</div>
</div>Grid of 4×2. Better Responsiveness, Square Tiles
<div style="max-width: 1000px; margin: auto; font-family: Arial, sans-serif; padding: 20px; display: flex; flex-wrap: wrap; gap: 15px; background-color: white; justify-content: center;">
<div style="background: url('/courses/11184717/files/288949564/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Jamie</strong><br /><strong>Homewood</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949569/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Brand &</strong><br /><strong>Marketing Central</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949565/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Events</strong><br /><strong>Calendar</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949566/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Global</strong><br /><strong>News</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949567/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Knowledge</strong><br /><strong>Hub</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949568/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Human Resources</strong><br /><strong>System</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949887/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Learning & Development</strong><br /><strong>Community</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949367/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>People</strong><br /><strong>Directory</strong></div>
</div>
</div>Little Tile, Big Tile
<div style="max-width: 1000px; margin: auto; font-family: Arial, sans-serif; padding: 20px; display: flex; flex-wrap: wrap; gap: 15px; background-color: white; justify-content: center;">
<div style="background: url('/courses/11184717/files/288949569/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Jamie</strong><br /><strong>Homewood</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949569/preview') center/cover; color: white; border-radius: 15px; height: 500px; width: 500px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Jamie</strong><br /><strong>Homewood</strong></div>
</div>
</div>Rectangle Tile with Right Aligned Text
<div style="max-width: 1000px; margin: auto; font-family: Arial, sans-serif; padding: 20px; background-color: white;">
<div style="display: flex; flex-wrap: wrap; gap: 15px; align-items: center;">
<div style="background: url('/courses/11184717/files/288949569/preview') center/cover; color: white; border-radius: 15px; height: 200px; flex: 1 1 200px; min-width: 200px; display: flex; align-items: center; justify-content: center; text-align: center;">
<div style="font-size: 14px;"><span style="font-size: 18pt;"><strong>Tile Title</strong></span></div>
</div>
<div style="flex: 2 1 300px; min-width: 250px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae urna in sapien fermentum tempus. Integer non arcu quis nulla cursus ullamcorper. Fusce euismod eros ut nisi malesuada, vel sollicitudin purus tincidunt. Aliquam erat volutpat. Donec at urna a felis tincidunt tempor sed nec libero.</p>
<p>Phasellus vitae consequat nisi. Cras dignissim ante id augue ullamcorper, nec pharetra est dapibus. Suspendisse ac lacus arcu. Duis vehicula, mauris nec tempus aliquet, dolor justo vestibulum nibh, at sollicitudin est risus a magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae urna in sapien fermentum tempus. Integer non arcu quis nulla cursus ullamcorper. Fusce euismod eros ut nisi malesuada, vel sollicitudin purus tincidunt. Aliquam erat volutpat. Donec at urna a felis tincidunt tempor sed nec libero.</p>
<p>Phasellus vitae consequat nisi. Cras dignissim ante id augue ullamcorper, nec pharetra est dapibus. Suspendisse ac lacus arcu. Duis vehicula, mauris nec tempus aliquet, dolor justo vestibulum nibh, at sollicitudin est risus a magna.</p>
</div>
</div>
</div>Left Square Tile with Wrapped Text
<div style="max-width: 1000px; margin: auto; font-family: Arial, sans-serif; padding: 20px; background-color: white;">
<div style="float: left; background: url('/courses/11184717/files/288949567/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; margin: 0 15px 15px 0; display: flex; align-items: center; justify-content: center; text-align: center;">
<div style="font-size: 14px;">Tile Title</div>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae urna in sapien fermentum tempus. Integer non arcu quis nulla cursus ullamcorper. Fusce euismod eros ut nisi malesuada, vel sollicitudin purus tincidunt. Aliquam erat volutpat. Donec at urna a felis tincidunt tempor sed nec libero.</p>
<p>Phasellus vitae consequat nisi. Cras dignissim ante id augue ullamcorper, nec pharetra est dapibus. Suspendisse ac lacus arcu. Duis vehicula, mauris nec tempus aliquet, dolor justo vestibulum nibh, at sollicitudin est risus a magna.</p>
<p><span class="badge text-bg-warning" style="background-color: #ffde21;">Warning</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a justo quis arcu fringilla volutpat. Sed malesuada eros non orci consequat, vitae pharetra lacus suscipit. Vestibulum et arcu ut velit tincidunt pretium. Aliquam non malesuada diam, vitae aliquet sapien.</p>
</div>
</div>Header, Paragraph, Grey Sub-Header, 4×1 row of Tiles
<div style="max-width: 1000px; margin: auto; font-family: Arial, sans-serif; padding: 20px; background-color: white;">
<div>
<h2><strong>Lorem ipsum dolor sit amet</strong></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae urna in sapien fermentum tempus. Integer non arcu quis nulla cursus ullamcorper. Fusce euismod eros ut nisi malesuada, vel sollicitudin purus tincidunt. Aliquam erat volutpat. Donec at urna a felis tincidunt tempor sed nec libero.</p>
<p>Phasellus vitae consequat nisi. Cras dignissim ante id augue ullamcorper, nec pharetra est dapibus. Suspendisse ac lacus arcu. Duis vehicula, mauris nec tempus aliquet, dolor justo vestibulum nibh, at sollicitudin est risus a magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a justo quis arcu fringilla volutpat. Sed malesuada eros non orci consequat, vitae pharetra lacus suscipit. Vestibulum et arcu ut velit tincidunt pretium. Aliquam non malesuada diam, vitae aliquet sapien.</p>
<h3 style="background-color: #eeeeee;"><strong>Vivamus a justo</strong></h3>
<p>Phasellus vitae consequat nisi. Cras dignissim ante id augue ullamcorper, nec pharetra est dapibus. Suspendisse ac lacus arcu. Duis vehicula, mauris nec tempus aliquet, dolor justo vestibulum nibh, at sollicitudin est risus a magna.</p>
<div style="max-width: 1000px; margin: auto; font-family: Arial, sans-serif; padding: 20px; display: flex; flex-wrap: wrap; gap: 15px; background-color: white; justify-content: center;">
<div style="background: url('/courses/11184717/files/288949564/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Jamie</strong><br /><strong>Homewood</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949569/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Brand &</strong><br /><strong>Marketing Central</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949565/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Events</strong><br /><strong>Calendar</strong></div>
</div>
<div style="background: url('/courses/11184717/files/288949566/preview') center/cover; color: white; border-radius: 15px; height: 200px; width: 200px; display: flex; align-items: flex-end; justify-content: center; padding: 10px; text-align: center;">
<div style="font-size: 14px;"><strong>Global</strong><br /><strong>News</strong></div>
</div>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a justo quis arcu fringilla volutpat. Sed malesuada eros non orci consequat, vitae pharetra lacus suscipit. Vestibulum et arcu ut velit tincidunt pretium. Aliquam non malesuada diam, vitae aliquet sapien.</p>
<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
</div>
</div>
</div>