How to make HTML presentations with webslides

In a world where show our ideas on the internet has become increasingly necessary and where the diversity of tools has led us to create amazing presentations, which in many cases end up being incompatible with some media, without a doubt, the HTML presentations they will continue to be the universal alternative in this area.

But it's no secret to anyone that creating beautiful HTML presentations can take a long time and require somewhat advanced knowledge of HTML, CSS, and in some cases JavaScript. From these problems, an excellent tool emerges called webslides.

What is webslides?

It is to call it somehow an open source "framework", made by Jose Luis Antunez, that allows us create HTML presentations quickly and easily. The tool has the essentials for you to make your own presentations, likewise, you can take one of the demo presentations and customize it to your liking in a matter of minutes.

The HTML presentations that I made with this tool will have an impressive aesthetic. It is worth noting that this tool requires very basic knowledge of HTML and CSS, so it is ideal for all types of users, who should only focus on the content and very little on how they prepare the presentation.

How to download webslides?

To download webslides, just carry out the following command from your favorite directory:


You can also clone the official repository with

git clone

Inside the project folder you will get the necessary js, css and demos to start creating your own HTML presentations easily.

How to use webslides?

The biggest advantage of webslides is its ease of use, this tool really makes it easy to create presentations with various objectives and its demo series speeds up the presentation creation process by a very high%.

What do we get when we download webslides?

When downloading webslides we access various folders, which include demos and images (devices and logos).

  • The css folder will store the styles of our presentations
  • The necessary javascripts will be stored in the js folder, including the fundamental webslide.js which is where most of the magic is done.
  • The images and html files of the demos will be saved in the images and demos folders respectively.
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Creating HTML presentations with webslides

There are 2 fundamental advantages when using webslides, which we mention below:

  • The code is clean and scalable. It also includes intuitive markup with the use of the most popular nomenclatures. There is no need to use classes, or overuse nesting.
  • Cada <section> in #webslides it represents a slide. So the pagination is extremely simple.
Slide 1  Slide 1

In the same way we can make vertical slides, adding a vertical style

Classes that make up the websides CSS

  • Typography: .text-landing, .text-data, .text-intro ...
  • Background Colors: .bg-primary, .bg-apple, .bg-blue ...
  • Background Images: .background, .background-center-bottom ...
  • Cards: .card-50, .card-40 ...
  • Flexible blocks: .flexblock.clients, .flexblock.metrics ...

Extending to webslides

webslides allows us to add new styles and functionalities, for example we can add some of the following resources:

HTML presentation demos made with webslides

You can see a series of demos of HTML presentations made with webslides here!. Similarly, when you download the framework you can access the coding of each of these demos.

Demo HTML Presentations

Demos Portfolios 2 This is a tool that will allow us to create HTML presentations quickly and with great finishes, but it will also help us to focus on the content and achieve results that we did not imagine before.

The content of the article adheres to our principles of editorial ethics. To report an error click here!.

3 comments, leave yours

Leave a Comment

Your email address will not be published.



  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   Alan Fuentes said

    Very good, I find the tool quite interesting although to my taste reveal.js is quite easier to use as it is a tool based on web technologies such as HTML, CSS and JS, with having basic knowledge of these technologies you can make your presentation look like much more interesting.


    1.    lizard said

      Hiding in an anonymous profile is very easy to criticize and say what you want, but unfortunately it is understandable that your coefficient does not look beyond where your eyes can see, this article has been written entirely by me based on the official documentation and in the review I have done on the tool. Which one to give you an idea, I got to know it thanks to the fact that it is the most voted application in recent days on github… However, it is very important for us that you have taken the time to look for some other site where they also write about the same as us, so you can apply to the reviewer vacancy, which I think would only remain an applicant because I doubt you have the criterion for deciding something suitable.

bool (true)