How to create responsive HTML and CSS in Moodle content

Name: How to create responsive HTML and CSS in Moodle content
Rating: 4.3 (40 reviews)

How to make your Moodle content stand out from the crowd. Make clean and responsive content for your HTML Moodle course.

Created byChris Richter

Last updated 1/2019

English

What you'll learn

How to create responsive content for the Moodle Learning Management system
How to import content from Word or Google Docs
How to use Bootstrap to create responsive content
How to install and use a plugin called Generico to create templates
How to add responsive template driven videos
How to install the REMUI theme to Moodle

Course content

10 sections • 34 lectures • 1h 39m total length

About the course2:23
Prerequisites for this course1:39
Identify Moodle 3.5+ prerequisites and explore staging versus production setups. Learn to install plugins and use the Boost theme with Font Awesome and Bootstrap for responsive content.

Font Awesome and Bootstrap test5:19
Test theme readiness for Font Awesome and Bootstrap in Moodle by creating a test course, enrolling as manager, and adding HTML pages to verify icons and three-column layout.
Installing the Generico plugin2:47
Test the Generico plugin2:44
Test the Generico plugin by adding a page in a test Moodle course, using Generico tags, saving, and verifying output; enable the plugin via site administration if disabled.
Installing the Generico templates2:33

Creating a course1:20
Preparing your content for Moodle0:57
Structure your content for Moodle with Word or Google docs using headings: heading 1 for lessons, heading 2 for pages, and 3+ for inside page content to enable clean HTML.
Creating the course structure2:14
Create a Moodle course structure by converting the Word document into lessons and pages using Heading 1 for lessons and Heading 2 for pages, with a table of contents.
Adding the course structure to Moodle2:28

Using the Generico template plugin2:06
Generico activity template test2:17
Learn to use the Generico activity template in Moodle to wrap page content in a Generico activity panel with a blue left bar, including images.
Generico activity template in your course1:58
Generico click to view template1:01
Generico click to view template in your course2:18
Embed YouTube using the Generico template1:26
Embed YouTube using the Generico template in your course1:50

Requirements

Access to the Moodle Learning Management system as a content creator or administrator
Access to Moodle 3.5.x, 3.6.x, 3.7.x,

Description

In this course you will learn how to add various content components to the Moodle Learning Management System. You will learn how to make the content more responsive so that it is viewable on mobile devices, tablets and desktop devices.

You will learn how to import content from a Word document as clean HTML into Moodle.

You will also learn how to make templates and use HTML and CSS to quickly make changes to your content and make it much easier to manage and create quality looking and highly functional content.

You will learn quite a lot about HTML and CSS and even more about how you can use Moodle to create and manage content in a much more efficient manner.

This course does assume that you have administrator access to Moodle or at least access to an administrator that can install a plugin, templates and create courses for you.

Many Moodle themes are designed to be more responsive but sometimes the content that is created inside Moodle is far from responsive and suffers mainly because content developers are not taught the different ways they can develop content for Moodle.

During the course you will discover tips and hints to create better content for Moodle.

Who this course is for:

Teachers that develop training materials for the Moodle Learning Management System
Moodle content developers that create training materials for the Moodle Learning Management System
Moodle administrators that want to improve the look and feel of Moodle

How to create responsive HTML and CSS in Moodle content

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 4min

Pre flight checks and installs4 lectures • 13min

Course creation4 lectures • 7min

Content extraction4 lectures • 10min

Generico plugin7 lectures • 13min

Font Awesome2 lectures • 6min

Bootstrap responsive design5 lectures • 20min

Inline CSS4 lectures • 19min

Theme1 lecture • 6min

Thank you1 lecture • 1min

Requirements

Description

Who this course is for: