Course

Build a site with this theme, start to finish.

A course about this theme on HubSpot CMS. It starts with an empty portal and ends with a site an editor can run without you. Every part is built against the templates and modules that ship with the theme.

Read the documentation
Working through the course
Before you start

Who it is for, and what you need first.

It is written for the person who has to deliver the site: an agency developer, a marketer who edits templates, or a designer handed a portal and a deadline.

hub

A HubSpot CMS seat

Starter, Professional or Enterprise. A free CRM account cannot upload a custom theme, so the first part cannot be followed on one.

cloud_upload

A portal you are allowed to break

A sandbox or a development portal. Part one uploads a theme and switches presets, which is not something to do first on a live site.

assignment

A page you have to build anyway

The course works better against real content. Bring the brief you are already behind on rather than a made-up example.

code

Reading HTML and CSS helps, writing it does not

Nothing in the course requires you to write code. The parts that open a template explain what is on screen for people who do not.

Getting from a purchase to a working portal, and understanding what you have.

  • Uploading the theme and activating it
  • What a HubSpot CMS seat has to be for any of this to work
  • The folder layout: templates, sections, partials, modules
  • Creating the first page from a template and publishing it

Ends with a published page you did not design, running the theme defaults.

The part that does most of the work. Light, Dark, Midnight, Warm, Forest and Custom each set colours, type, spacing, shadows and radii, and every setting under them still applies on top.

  • Switching preset and watching the whole site follow
  • Overriding one token under a preset, and what that does to the rest
  • Brand colours, typography, buttons, forms, cards and layout, group by group
  • Choosing an icon library so every module changes with it

Ends with the site in your own colours and type without a line of CSS.

Where pages come from. The section partials are the fast path and the drag-and-drop modules are the flexible one, and knowing when to use which is the difference between a two-hour page and a two-day one.

  • Including a section partial and passing it content
  • Building the same page again with modules, then comparing
  • Drag-and-drop areas, and what an editor can and cannot move
  • Anchors, in-page navigation and the section seams between blocks

Ends with a homepage and a landing page built from the same parts.

Every module is a set of fields, and every field drives a value the CSS reads. This part opens the ones that carry most pages.

  • Banner, Feature Grid, Tabs, FAQs, Steps, Timeline and CTA Banner, field by field
  • Layout and style groups, and why they are separate from content
  • Overriding a module inside a template rather than in the editor
  • When a repeater is the answer and when a second module is

Ends with a page whose look is entirely field-driven.

The pages people forget until launch week.

  • Blog listing and post templates, and the reading layout
  • Header and footer as global partials, and what changes everywhere
  • Search results, password prompt, subscription preferences and the error pages
  • Making the system pages inherit the theme rather than look borrowed

Ends with every page type on the site sharing one set of tokens.

Building the site is the short half. This part is about the site surviving without you.

  • Setting up templates so an editor cannot break the layout
  • What to lock, what to leave open, and how to tell the difference
  • Writing the short internal note that replaces answering the same question monthly
  • Updating the theme later without losing the settings you chose

Ends with somebody else publishing a page while you watch.

A tab strip switching between preset, colour, typography and layout settings
Part two

Theme settings and presets

A vertical timeline with photographs beside each numbered phase
Part three

Building pages from sections

A blog listing with a search field, tag chips and post cards
Part five

Blog, navigation and system pages

At the end

What you can do when it is finished.

cloud_upload

Stand a site up from an empty portal

Upload, activate, and publish a working page on the same afternoon.

palette

Put a brand on it without CSS

Pick a preset, then override the tokens underneath it until the site is yours.

view_agenda

Assemble a page from sections

Know which of the two routes a page should take before you start building it.

tune

Change a module through its fields

Find the field that drives a value instead of writing an override that a release will undo.

article

Finish the pages nobody remembers

Blog, search, error and preference pages that look like the rest of the site.

group

Hand it to someone else

Set the site up so an editor can publish without asking you first.

For parts one and two, yes — you need it uploaded to a portal you can change. The rest can be watched without it, but you will be reading rather than building.

No. The course never asks you to write CSS. It does open template files so you can see where a value comes from, and it explains what is on screen for people who do not read HubL.

An afternoon if you watch it through, a fortnight if you build your own site alongside it. The second is the point.

A part is re-recorded when a release changes enough of what is on screen that following the old one would put your portal in the wrong state.

Yes, and the handover part is worth doing that way — the developer and the person who will edit the site afterwards should watch it in the same room.

Bring the page to office hours. Send the portal and the page you are stuck on, and we will look at the actual site rather than a description of it.

Course

Start where the portal is empty.

The first part gets a site published before anything is designed. Everything after that is decisions.

Start with part one It runs against the theme this site is built on, so what you see here is what you get.

  • cloud_upload Upload and activate, then publish a page the same day
  • palette Presets and tokens shown in the settings panel while you change them
  • forum Office hours for the parts where your portal disagrees with the video
See what part one covers Read the documentation

The course is written against this theme, so every screenshot matches what you have.