webdevpuneet.com

Online Course Website Template

A sales page that turns visitors into students: a clear course promise with a lesson preview, what students will be able to do, the curriculum module by module, who teaches it, results from past students, one simple price with a money-back guarantee, and answers to the usual questions.

One page keeps everything on a single scrolling page. The 8-page website opens all its pages in the editor: Home, Pricing, FAQ, Log in, Sign up, Journal, Article, Privacy.

Full page preview · scroll to see it all
The complete Online Course Website template: Simple Sticky Navbar, SaaS Split Hero, Icon Grid Features, Video Section with Poster, Alternating Feature Rows, Horizontal Timeline, Testimonial Spotlight, Single Plan Pricing, FAQ Accordion, Popup & Promo Modal, Minimal Footer, Back to Top Button

Online Course Website Template — Patreon, Editable, Export HTML

Education · One page or 8 pages · 12 sections · Plus Jakarta Sans + DM Sans · Responsive · GSAP animation

Updated October 20, 2026

Extend with AI

Take This Template Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

Multi-page version

Pages in the 8-Page Online Course Website Template

Home (index.html): 7 sections, the home page
Pricing (pricing.html): 1 sections
FAQ (faq.html): 1 sections
Log in (login.html): 1 sections
Sign up (register.html): 1 sections
Journal (blog.html): 1 sections
Article (article.html): 1 sections
Privacy (privacy.html): 1 sections

What's included

Sections in the Online Course Website Template

Simple Sticky Navbar: A clean, responsive site header: logo on the left, navigation links, a log-in link and a call-to-action button
SaaS Split Hero: A two-column SaaS landing page hero: an announcement badge linking to news, a bold headline with a highlighted phrase, supporting text, primary and secondary buttons, a social-proof line and a product screenshot in a glowing frame
Icon Grid Features: The classic features section: an eyebrow, a centred heading and intro, then a responsive grid of cards, each with an icon, a short title, a sentence of detail and an optional link
Video Section with Poster: A video section that stays fast and private: a heading, a 16:9 poster image with a large play button and optional duration, and a row of key points underneath
Alternating Feature Rows: A zig-zag feature section: a centred heading, then rows that alternate image-left and image-right
Horizontal Timeline: A horizontal timeline for company history, roadmaps and project milestones
Testimonial Spotlight: One customer story, told big: a large quote that reveals line by line, the customer’s photo with their name, role and company, and a row of result stats (like "3× faster reporting") with a link to the full case study
Single Plan Pricing: Pricing for products with one plan: on the left a heading, intro and a two-column "everything included" checklist; on the right a price card with the plan name, a monthly/yearly switch, the price, a button and a money-back guarantee line
FAQ Accordion: A centred FAQ section: heading and intro, then a single column of questions that expand smoothly to show their answers, one at a time, with a rotating plus/minus icon
Popup & Promo Modal: A popup or promo modal that opens by itself: in the middle of the screen with a dimmed page, or as a small card in a corner or along the bottom or top edge with no overlay, which the visitor can dismiss with ×
Minimal Footer: A small, tidy footer for landing pages and simple sites: logo on the left, a single row of links in the middle and social icons on the right, with a thin divider and the copyright line underneath
Back to Top Button: A floating scroll-to-top button that appears after the visitor has scrolled down a distance you choose and glides back to the top of the page when clicked

Checklist

What a online course Website Needs

The outcome in the headline and the start date in a badge
A week-by-week curriculum with a project for each module
A student story with a before-and-after result
One clear price, what it includes and the refund policy
An FAQ on time commitment, access and prerequisites

About this template

A Free Online Course Website Template You Can Edit Online

A sales page that turns visitors into students: a clear course promise with a lesson preview, what students will be able to do, the curriculum module by module, who teaches it, results from past students, one simple price with a money-back guarantee, and answers to the usual questions.

Use it as one scrolling page, or as a 8-page website (Home, Pricing, FAQ, Log in, Sign up, Journal, Article, Privacy) sharing one navbar, footer and theme. The one-page version is built from 12 sections of the Website Section Templates library and opens in the free Website Builder, where you can change every word and image, swap sections, set your own colours and fonts and export the finished site as clean HTML pages. The page is responsive, accessible and animated with GSAP, with content that stays visible without JavaScript.

The template ships with a Plus Jakarta Sans and DM Sans font pairing and a colour theme suited to online course websites; switch to any Google Font, upload your own, or apply your brand kit in one click.

Extras included

Extras Built Into the Online Course Website Template

Beyond the standard sections, the Online Course Website template includes 2 extras that you can edit, move or remove in the builder.

Horizontal Timeline: a pinned horizontal syllabus that walks through the eight weeks of the course.

Back to Top Button: a floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return.

Each extra has its own page in the free Website Section Templates library, where you can try its settings on their own before you use it here.

Make it yours

How to Get the Most From the Online Course Website Template

A course page has to sell a transformation, not a syllabus. This template opens with a badge for the next start date and a clear promise, lists the skills students gain, walks through the curriculum week by week, adds a featured student story and then shows a single price with everything included. An FAQ handles refunds, time commitment and access, which is where most last-minute doubts sit.

Write the headline as the outcome, such as the portfolio piece or job skill students leave with, and show the real project from each module. Keep one price and one enrol button to avoid choice paralysis, and state the start date and the guarantee clearly. The multi-page version adds Pricing and FAQ pages if you want separate addresses for them. Connect the enrol button to your checkout page on Stripe, Gumroad or your platform. A preview-lesson video section sits after the benefits, so prospective students can see the teaching style before they enrol.

Who it’s for

Best For

★
Online courses and cohorts
A ready-made starting point for online courses and cohorts, with real copy you can adapt in minutes.
◆
Workshops and bootcamps
A ready-made starting point for workshops and bootcamps, with real copy you can adapt in minutes.
●
Ebooks and digital products
A ready-made starting point for ebooks and digital products, with real copy you can adapt in minutes.

Step by step

How to Use This Template

  1. 1
    Open the templateClick “Use as one page” or “Use as 8-page website” to load it in the Website Builder. Your current website is kept in Saved.
  2. 2
    Make it yoursClick any section to change its text, images and links; upload your logo and photos.
  3. 3
    Set your brandPick colours and fonts in the Theme tab, or apply your saved brand kit.
  4. 4
    Adjust the pageAdd sections from the library, drag to reorder, duplicate or remove what you don’t need.
  5. 5
    Export and publishDownload the ZIP (one HTML file per page for the multi-page version) and upload it to Netlify, Vercel or any host.

Got questions?

Frequently Asked Questions

The result students get, who the course is for, the curriculum, proof from past students, the price and an FAQ on refunds and time commitment. Keep one enrol button repeated down the page.

Yes. Each button has a link field: paste your checkout URL from Stripe, Gumroad, Teachable or any platform. The page itself does not process payments.

The alternating features section works well for modules: one row per week with a heading, text and an image, which you can reorder or extend. Add the project students complete at the end of each module.

Both. For a cohort, use the start-date badge and a deadline in the call to action. For a self-paced course, remove the date and lead with lifetime access and a refund guarantee.

The Online Course Website template is a Patreon template. Anyone can preview and edit it for free. Exporting and forking it are for Patreon supporters ($3 a month, with a 7-day free trial), who enter the supporter passcode once; designs you make with it can then be used in personal and commercial work. No attribution is required.

Click “Use this template” to open it in the free Website Builder. Click any section to change its text, images and links, change colours and fonts for the whole page in the Theme tab, and add, remove or drag sections to reorder them.

Both. Use it as one scrolling page, or as a 8-page website (Home, Pricing, FAQ, Log in, Sign up, Journal, Article, Privacy) that opens with every page in the editor. The pages share one navbar, footer and theme, and the menu links to every page automatically. Add more pages (About, Pricing, Contact, Blog and others) or remove any you don’t need in the builder’s Pages tab.

Yes. As one page you get a ZIP with index.html and an assets folder. As a 8-page website you get one HTML file per page (index.html, pricing.html, faq.html, login.html, register.html, blog.html, article.html, privacy.html), a shared styles.css and script.js, and an assets folder with your images, then upload it to any web host. Links between pages also work when you open the files from your computer.