Website kits
Online course curriculum page
Curriculum page: intro with photo, four course totals, video, worksheet and community format, eight modules with their lessons, a sample lesson and enroll band.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page for buyers who want to see exactly what they are paying for before they enroll, which is most of them. The intro and photo set expectations, then four totals give the size of the course at a glance: modules, lessons, hours and worksheets. The format section explains how lessons are delivered — short overhead videos, printable worksheets and a community with a set day for answers — so nobody expects live classes. The full module list sits in an accordion with the lesson count and running time in every title, so the page stays short while every lesson is one tap away. A free sample lesson follows, because one complete lesson answers “will this teacher suit me” better than a description, and an enroll band closes the page. Replace the module titles and lesson lists first, then the totals, and check that the hours add up. A tip: give real running times; buyers trust “1 h 45 min” more than “about two hours”.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 15
- Container (grid) × 3
- Container (grid, 4 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 9
- Heading × 5
- Image × 2
- Counter × 4
- Icon Box × 3
- Accordion × 1
- Video × 1
- Icon List × 1
- Button × 2
Things worth knowing
- The eight modules are details/summary pairs, so they convert to one Accordion widget with eight items; each item’s description and lesson list arrive as HTML in that item’s content field, editable in the panel’s text editor.
- The four totals (8, 41, 14 and 16) convert to Counter widgets with their labels as titles, so the numbers count up when scrolled into view; update them whenever you add lessons.
- Video lessons, Worksheets and Student community become Icon Box widgets (circle, check and heart icons), and the three sample lesson points become an Icon List widget.
- The sample lesson iframe converts to a Video widget pointing at the placeholder film; replace it with a real lesson link. The intro and format photos become Image widgets with empty slots.
- Below 780px the totals drop to two columns and every other row stacks to one, with the sample video above its description.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Curriculum — Loose Watercolor Foundations</title>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:'Nunito',Helvetica,Arial,sans-serif;color:#262a3b;background:#fffdf8}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#262a3b;font-weight:700}
h1{font-size:52px;line-height:1.1;letter-spacing:-.02em;margin:0 0 18px}
h2{font-size:36px;line-height:1.18;margin:0 0 14px}
h3{font-size:21px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#636879;margin:0 0 18px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#22709e;margin:0 0 14px}
.button{display:inline-block;padding:15px 28px;border-radius:12px;background:#c93e64;color:#fffdf8;text-decoration:none;font-weight:800;font-size:16px}
.head{max-width:680px;margin:0 0 40px}
.intro{padding:64px 0 56px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.photo{width:100%;height:440px;object-fit:cover;border-radius:18px;display:block;background:#fde8dc}
.peach{background:#fde8dc}
.stats-band{padding:44px 0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stat{padding:8px 0;text-align:center}
.num{font-family:'Fraunces',Georgia,serif;font-size:50px;font-weight:700;line-height:1.1;color:#c93e64;margin:0 0 4px}
.lab{font-size:16px;font-weight:700;color:#262a3b;margin:0}
.format{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.ways{display:flex;flex-direction:column;gap:18px}
.way{padding:26px 28px;border-radius:18px;background:#fffdf8;border:2px solid #fde8dc}
.way-icon{display:inline-block;color:#22709e;font-size:22px;line-height:1;margin:0 0 12px}
.way p{font-size:16px;margin:0}
.modules{display:flex;flex-direction:column;gap:12px;max-width:880px}
details{border-radius:14px;padding:20px 24px;background:#fffdf8}
summary{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:700;color:#262a3b;cursor:pointer}
details p{margin:12px 0 10px;font-size:16px}
details ul{margin:0;padding:0 0 0 20px;color:#262a3b;font-size:16px;line-height:1.9}
.sample{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:center}
.frame{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#262a3b;box-shadow:0 22px 50px rgba(38,42,59,.18)}
.frame iframe{display:block;width:100%;height:100%;border:0}
.covers{display:flex;flex-direction:column;gap:12px;margin:0 0 28px}
.covers > div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6;color:#262a3b}
.tick{color:#22709e;font-size:17px;font-weight:800;line-height:1.5}
.ink{background:#262a3b;text-align:center}
.ink h2{color:#fffdf8}
.ink p{color:#fde8dc;max-width:600px;margin:0 auto 28px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:36px 0 48px}
h1{font-size:36px}
h2{font-size:28px}
.split,.format,.sample{grid-template-columns:minmax(0,1fr);gap:28px}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.num{font-size:40px}
.photo{height:280px}
details{padding:18px 18px}
summary{font-size:18px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap split">
<div>
<p class="eyebrow">Curriculum</p>
<h1>Eight modules, from your first wash to a finished painting</h1>
<p>Each module teaches one skill, then uses it in a small guided painting. Watch a lesson, paint along, and move on when the worksheet looks right — not when a calendar says so.</p>
</div>
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/course/painting-table.jpg" width="1600" height="1000" alt="Painting table with taped watercolor paper, a small paint palette, two water jars and round brushes in daylight">
</div>
</section>
<section class="peach stats-band">
<div class="wrap stats">
<div class="stat"><p class="num">8</p><p class="lab">modules</p></div>
<div class="stat"><p class="num">41</p><p class="lab">video lessons</p></div>
<div class="stat"><p class="num">14</p><p class="lab">hours in total</p></div>
<div class="stat"><p class="num">16</p><p class="lab">printable worksheets</p></div>
</div>
</section>
<section>
<div class="wrap format">
<div>
<p class="eyebrow">How the course works</p>
<h2>Short videos, paper worksheets and a place to post your work</h2>
<p>Lessons run 10 to 25 minutes, so one fits into an evening with time left to paint. You can watch on any device and download the worksheets to print at home.</p>
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/course/hands-painting.jpg" width="1600" height="1000" alt="Close view of a hand laying a blue watercolor wash across taped paper with a round brush">
</div>
<div class="ways">
<div class="way"><span class="way-icon">●</span><h3>Video lessons</h3><p>Filmed from overhead so you see the brush, the paint and the water exactly as you will at your own table. Captions on every lesson.</p></div>
<div class="way"><span class="way-icon">✓</span><h3>Worksheets</h3><p>Sixteen printable sheets: mixing charts, value ladders and pencil guides for each guided painting.</p></div>
<div class="way"><span class="way-icon">♥</span><h3>Student community</h3><p>A private discussion board where students post weekly paintings. Ines answers questions there every Thursday.</p></div>
</div>
</div>
</section>
<section class="peach">
<div class="wrap">
<div class="head">
<p class="eyebrow">Every module and lesson</p>
<h2>What is inside, in order</h2>
<p>Running times are for the videos only. Allow about the same again for painting along.</p>
</div>
<div class="modules">
<details><summary>Module 1 · Paper, paint and water — 5 lessons, 1 h 20 min</summary><p>Set up a simple, inexpensive kit and learn how much water a brush really holds.</p><ul><li>Choosing paper: cotton, cellulose and weight</li><li>The three-tube palette and how to lay it out</li><li>Holding and loading a round brush</li><li>The water-to-paint ratio, in five strips</li><li>Taping paper flat so it does not buckle</li></ul></details>
<details><summary>Module 2 · Washes that dry evenly — 5 lessons, 1 h 45 min</summary><p>The foundation of every sky, background and soft shadow.</p><ul><li>The flat wash</li><li>The graded wash (free sample lesson)</li><li>The two-color variegated wash</li><li>Why blooms happen and how to prevent them</li><li>Guided painting: a sunset sky</li></ul></details>
<details><summary>Module 3 · Color mixing with three tubes — 6 lessons, 2 h</summary><p>Mix nearly everything you need from a yellow, a red and a blue.</p><ul><li>Building your own color wheel</li><li>Fresh greens without a green tube</li><li>Warm and cool greys</li><li>Color temperature in a simple scene</li><li>The five-step value ladder</li><li>Worksheet: your personal mixing chart</li></ul></details>
<details><summary>Module 4 · Wet-in-wet and soft edges — 5 lessons, 1 h 50 min</summary><p>Let the water do the work while you decide where the edges go.</p><ul><li>Reading the shine on wet paper</li><li>Dropping in color</li><li>Soft edges on purpose</li><li>Saving whites without masking fluid</li><li>Guided painting: misty trees</li></ul></details>
<details><summary>Module 5 · Layering and glazing — 5 lessons, 1 h 40 min</summary><p>Build depth with thin transparent layers and stop before the paper turns muddy.</p><ul><li>When a layer is dry enough to paint over</li><li>Glazing light over dark</li><li>Lifting color with a damp brush</li><li>Shadows that stay transparent</li><li>Guided painting: a pear on a windowsill</li></ul></details>
<details><summary>Module 6 · Painting loose flowers — 5 lessons, 1 h 55 min</summary><p>Turn a flower photo into a few confident shapes.</p><ul><li>Seeing petals as shapes, not outlines</li><li>The light pencil guide (traceable)</li><li>Leaves and stems in single strokes</li><li>Guided painting: a bunch of tulips</li><li>Guided painting: wild roses</li></ul></details>
<details><summary>Module 7 · Simple landscapes — 5 lessons, 2 h</summary><p>Fields, hills, water and sky with three planes and a clear focal point.</p><ul><li>Foreground, middle ground and distance</li><li>Simplifying a reference photo</li><li>Trees and hedges without painting every leaf</li><li>Reflections in still water</li><li>Guided painting: hills after rain</li></ul></details>
<details><summary>Module 8 · Finishing and keeping going — 5 lessons, 1 h 30 min</summary><p>Decide when a painting is done and build a habit that lasts beyond the course.</p><ul><li>The last ten percent: darks and details</li><li>Cropping, matting and photographing your work</li><li>Your 20-minute practice routine</li><li>Choosing your own subjects</li><li>Final project: a painting from your own photo</li></ul></details>
</div>
</div>
</section>
<section id="sample">
<div class="wrap sample">
<div class="frame">
<iframe src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ" title="Free sample lesson: the graded wash, 18 minutes" width="560" height="315" allowfullscreen></iframe>
</div>
<div>
<p class="eyebrow">Free sample lesson · 18 minutes</p>
<h2>Module 2, lesson 2: the graded wash</h2>
<p>Watch a full lesson before you enroll. If the pace and the explanations suit you, the other forty will too.</p>
<div class="covers">
<div><span class="tick">✓</span><span>Tilting the board and loading the brush</span></div>
<div><span class="tick">✓</span><span>Adding water stroke by stroke for a smooth fade</span></div>
<div><span class="tick">✓</span><span>What to do when a stripe appears halfway down</span></div>
</div>
<a class="button" href="/pricing/">Enroll from $149</a>
</div>
</div>
</section>
<section class="ink">
<div class="wrap">
<h2>Start module one this week</h2>
<p>All eight modules open the day you enroll. Paint at your own pace, and email within 14 days if it is not for you.</p>
<a class="button" href="/pricing/">See pricing and enroll</a>
</div>
</section>
</body>
</html>
