It benefits you and your students

You may not be using the Moodle mobile app, but you know students will access content on tablets or mobile devices. You also know that you need to make sure the content responds to all the different screen sizes and device dimensions. 

This course is designed to teach you how to create responsive content in your Moodle course. It will deal primarily with HTML and CSS in course pages as well as using a plugin called Generico.

The course includes how to:

• Create a course
• Create a navigation structure
• Import content from Word or Google Docs
• Clean HTML
• Use Font Awesome
• Use Bootstrap to create responsive content
• Install and use a plugin called Generico to create templates
• Add responsive template driven videos
• Add responsive images and figures
• Add Custom CSS to a course without using a separate child theme
• Add the ultimate theme to Moodle

With all the effort that has gone in to write, validate and construct your course, it would be devastating that students cannot read the information because the last word of each line is not visible because their device is just a little smaller than how the content was designed. 

These are the issues you need to consider to make sure you are delivering your absolute best. 

Bonus Benefits

Aside from the results of great responsive content, you will learn about some extremely useful additional tools that can be used to make templates for content and to give you more creative ideas that you can use in future content. 

Course contents

Introduction

• About the course (2:23)
• Prerequisites for this course (1:39)

Pre flight checks and installs

• Font Awesome and Bootstrap test (5:19)
• Installing the Generico plugin (2:47)
• Test the Generico plugin (2:44)
• Generico Templates (Download)
• Installing the Generico templates (2:33)

Course creation

• Creating a course (1:20)
• The Songwriters Bucket List (Download)
• Preparing your content for Moodle (0:57)
• Creating the course structure (2:14)
• Adding the course structure to Moodle (2:28)
• Songwriters Bucket List Moodle Course Backup (Download)

Content extraction

• Preparing the text content for Moodle (3:11)
• Adding text content to your Moodle pages (2:39)
• Bulk image extraction from the document (1:44)
• Adding images to your Moodle pages (2:47)

Generico plugin

• Using the Generico template plugin (2:06)
• Generico activity template test (2:17)
• Generico activity template in your course (1:58)
• Generico click to view template (1:01)
• Generico click to view template in your course (2:18)
• Embed YouTube using the Generico template (1:26)
• Embed YouTube using the Generico template in your course (1:50)

Font Awesome

• Introduction to Font Awesome (1:47)
• Font Awesome in your course (4:27)

Bootstrap responsive design

• Responsive design (3:05)
• Introduction to Bootstrap (4:19)
• Responsive alert using Bootstrap (5:08)
• Adding a card using Bootstrap (3:40)
• Combining a card with Bootstrap responsive columns (4:13)

Inline CSS

• Tables using Bootstrap (5:19)
• Inline CSS (4:36)
• HTML CSS Arrow Table using Inline CSS (4:24)
• HTML CSS Arrow Table variation using Inline CSS (4:50)

Thank you

• Thank you from Chris Richter (0:45)