You cannot learn to code by reading about code. This project was a Canvas module that teaches CSS the way it actually sticks: by writing it, breaking it, and fixing it. It turns the LMS from a place where content is stored into a place where practice happens.

The challenge

Web-development fundamentals are easy to present and hard to actually teach. It is tempting to hand learners a wall of syntax and hope it lands. The goal here was the opposite: build a Canvas module where every concept is immediately put to work, and where the LMS structure supports active learning instead of passive reading.

The design

The module walks learners through the fundamentals of CSS — syntax, selectors, properties, and values — and pairs each idea with something to do:

• Hands-on coding in CodePen — learners write real CSS in a live editor and see the result instantly, no local setup required.
• Find-and-fix exercises — deliberately broken code that learners have to diagnose and repair, because debugging is a skill in its own right.
• Reflective discussion posts — learners articulate what they learned, which turns doing into understanding.

The through-line is the balance of theory and practice: every concept is introduced, applied, tested against a broken example, and then reflected on. That loop is what moves a learner from recognizing CSS to actually writing it.

See it live

What it demonstrates

• Building an active, hands-on coding course inside an LMS
• Integrating third-party tools (CodePen) into a Canvas workflow
• Assessment through practice, debugging, and reflection rather than passive quizzing

Need a course that teaches a technical skill by doing, not just reading? Let’s talk.