Skip to content
Sign inJoin waitlist

Tustel documentation — HTML

Everything you need to go from the downloaded folder to a published portfolio. Read in this order, or jump to what you need.

Guide What it covers
Editing the site Opening the site, editing text, links and images, the sections that repeat, adding and removing pages, projects and posts
Making it look like your brand Colours, the logo, the font, the Tailwind classes, rebuilding the stylesheet, the header, the style guide, motion
Forms Making the contact form deliver to you
Editing without touching HTML Your options when someone else needs to edit the site without touching HTML
Going live Pre-launch checklist, uploading, domains, what to do after launch
Troubleshooting and questions Errors, questions and answers

In a hurry: the first 15 minutes

Section titled “In a hurry: the first 15 minutes”
  1. Open index.html in your browser. That is the whole site: no install, no build.
  2. Open the folder in a code editor (VS Code is a good free one).
  3. Replace “Alex Carter”, the contact details, the booking link and the demo domain across all files with your editor’s find and replace in files (Editing the site).
  4. Replace the photos in assets/images/: keep the file names and every page picks them up (a project cover or a gallery photo of another shape also needs its size in the HTML, Editing the site). Replace your portrait (portrait-alex-carter.jpg) and the sample client logos too (client-*.svg, Editing the site).
  5. Replace the logo (Making it look like your brand), the icons and the share image in the root folder (icon.svg, apple-icon.png, opengraph-image.png).
  6. Put your form endpoint in assets/js/config.js (Forms).
  7. Upload the folder to your host (Going live).

How this template is put together

Section titled “How this template is put together”
  • One HTML file per page. about.html is /about.html; each project and post has its own file in portfolio/ and blog/.
  • One stylesheet. assets/css/style.css, built from src/css/style.css with Tailwind CSS. You only rebuild it when you use a class that isn’t in the site yet, or change the theme (Making it look like your brand).
  • One script. assets/js/main.js runs the header and the phone menu, the texts and blocks that appear, the slideshows, the tickers, the counters, the Catalog / List switch, the services, Works and the Blog loading more, the form and the hovers. You rarely need to touch it: your settings go in assets/js/config.js.
  • Photos set the shape. Project cards, covers and galleries take each photo’s own proportions, written next to the image in the HTML (Editing the site).
  • No framework, no dependencies at runtime. The pages work from any static host, and even straight from disk.

If you will add projects and posts every week, choose the Tustel Astro or Tustel Next.js edition instead: a new item is one entry in a data file, and every page, list and sitemap line follows (Editing without touching HTML).

Getting help

Section titled “Getting help”