How to Get Started with WebSlides

You can build your first WebSlides presentation with only a basic knowledge of HTML. The workflow is: download WebSlides, pick a demo that matches your content, then customize the slides by editing the markup. No build tools, frameworks, or advanced CSS skills are required to get a working deck.

What you need before you start

WebSlides is an HTML and CSS presentation framework, so the only real prerequisite is a working understanding of HTML structure — tags, elements, and nesting. If you can read and edit an HTML file, you can use WebSlides.

You do not need to know JavaScript to make a basic deck. The site describes the markup as "intuitive" and built on "popular naming conventions," with no need to overuse classes or nesting.

Step 1: Download WebSlides

The site offers a free download of the framework, described as "pay what you want." That means you can download it at no cost, and paying is optional. There is no stated account requirement or login gate mentioned in the available material.

Once downloaded, you have the WebSlides CSS and the demo files to work from.

Step 2: Choose a demo and customize it

The recommended path is to start from an existing demo rather than a blank file. The site states there are "120+ premium slides ready to use" and that you should "simply choose a demo and customize it in minutes."

Demos listed on the site include:

• Netflix
• Landings
• Portfolios
• Keynote
• Guides

Pick the one closest to your purpose, open it, and replace the content with your own.

Step 3: Understand the slide structure

The core rule is simple: each direct child of the #webslides element is one slide. That means your deck's structure looks roughly like this:

<div id="webslides">
  <section>Slide one content</section>
  <section>Slide two content</section>
  <section>Slide three content</section>
</div>

To add a slide, add another child element. To remove one, delete it. This is why the framework is described as "clean and scalable" — the structure maps directly onto the content.

Step 4: Use the built-in components and layout helpers

WebSlides ships with reusable pieces so you don't have to style everything yourself:

Navigation is handled for you — arrow keys and a presenter mode are built in.

Step 5: Add media and animation if you need them

The framework is "built to expand." For richer slides you can bring in:

• Background images — the site points to Unsplash
• CSS animations — via Animate.css
• Long-form scroll effects — via Animate on scroll

These are optional add-ons, not requirements for a working presentation.

Where to get help

If you get stuck, the site points to tutorials covering Components and Classes, plus WebSlides examples on CodePen. These are the right places to look when you need to know which class produces which layout.

Common sticking points

• Editing the wrong element. Only direct children of #webslides become slides. Nesting a slide deeper will not create a new slide.
• Skipping the demo step. Starting from a demo is faster than building from scratch, because the layout classes are already applied.
• Assuming you need to write CSS. For most decks you only edit HTML content inside existing components.

Is this the right starting point for you?

Choose WebSlides if you want a presentation that lives in a browser, is easy to version-control or host, and can be customized by editing HTML. If you need a drag-and-drop visual editor with no code at all, this workflow will feel indirect — the site is explicit that "just a basic knowledge of HTML is required."