presentation with html

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

Right-to-left support
Extensive JavaScript API
Auto-progression
Parallax backgrounds
Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

DEV Community

Posted on Jan 11, 2019

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

We're going to be using an awesome framework called Reveal.js . It provides robust functionality for creating interesting and customizable presentations.

Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

Open index.html
Change the CSS import to reflect the theme you want to use

The theme files are:

solarized.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Creating A Custom Theme

Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
Create a new .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be .css , not .scss .
Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

Title Font: Viga
Content Font: Open Sans
Code Font: Courier New
Cursive Font: Great Vibes
Yellow Color: #F9DC24
Add a .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the !importants .

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

Mixins You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

fade-in-then-out
fade-in-then-semi-out
highlight-current-blue
highlight-red
highlight-green
highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial . All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Top comments (18)

Templates let you quickly answer FAQs or store snippets for re-use.

Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

Location Stockholm
Education Siena College
Work Software Engineer at Spotify
Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

Location Antibes, France
Work Senior Software Engineer at Spotify
Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

Location Lake Villa, IL
Education Bachelor in Electronics Engineering
Work Computer & Technology Enthusiast
Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

Location Singapore
Work Web Developer at FirstCom Solutions
Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

Email [email protected]
Location Indianapolis, IN
Education Purdue University
Pronouns he/him
Work Senior Frontend Engineer at Whatnot
Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

Email [email protected]
Location New Delhi, India 🇮🇳
Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

Location Saratoga Springs,NY
Education BA, University of Michigan
Work Documentarian
Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

Location Toronto, ON
Education MFA in Art Video Syracuse University 2013 😂
Work Cannot confirm or deny atm
Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

Location Palm Bay, FL
Education FullSail University
Work Developer Relations Manager at MetaMask
Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

Email [email protected]
Location Abuja Nigeria
Work Project Manager Techibytes Media
Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

Email [email protected]
Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

Copy an existing presentation folder
Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section>  </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

Location Los Angeles
Education Engineering, Physics, and Math
Joined Sep 6, 2018

Fantastic post. I just loved it.

Location France
Work Co-Founder of Depot
Joined Sep 2, 2017

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

It’s not just you, Next.js is getting harder to use

Victoria - May 14

Release of Node.js 22 [Live] What is new?!

Evotik - Apr 25

JavaScript Histogram of Gaussian Distribution

Omar Urbano | LightningChart - Apr 25

Witty Works scales their AI-augmented DEI solution with a new PaaS 💚

Celeste van der Watt - Apr 24

We're a place where coders share, stay up-to-date and grow their careers.

How to Create a Slideshow with HTML, CSS, and JavaScript

A web slideshow is a sequence of images or text that consists of showing one element of the sequence in a certain time interval.

For this tutorial you can create a slideshow by following these simple steps:

Write some markup

Write styles to hide slides and show only one slide..

To hide the slides you have to give them a default style. It'll dictate that you only show one slide if it is active or if you want to show it.

Change the slides in a time interval.

The first step to changing which slides show is to select the slide wrapper(s) and then its slides.

When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval.

Keep it in mind that when you remove an active class from a slide, you are hiding it because of the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style display:none to display:block , so the slide will show to the users.

Codepen example following this tutorial

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

HTML Presentations Made Easy

Created by Hakim El Hattab / @hakimel

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

Vertical Slides

Slides can be nested inside of other slides, try pressing down .

Basement Level 1

Press down or up to navigate.

Basement Level 2

Basement level 3.

That's it, time to go back up.

Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es .

Point of View

Press ESC to enter the slide overview.

Hold down alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Reveal.js comes with a few themes built in: Default - Sky - Beige - Simple - Serif - Night Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link> .

Global State

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Slide Backgrounds

Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.

Image Backgrounds

Repeated image backgrounds, background transitions.

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide" .

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Pretty Code

Courtesy of highlight.js .

Intergalactic Interconnections

You can link between slides internally, like this .

Fragmented Views

Hit the next arrow...

... to step through ...

Fragment Styles

There's a few styles of fragments, like:

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue

Spectacular image!

Export to pdf.

Presentations can be exported to PDF , below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

Try the online editor
Source code on GitHub
Follow me on Twitter

BY Hakim El Hattab / hakim.se

Build and Publish a Presentation with RevealJS and Github

If you've ever given a presentation at a conference, meetup, or even a lunch and learn for your colleagues at work, you probably needed some slides to go along with your talk. The standard tools to make these are Microsoft PowerPoint, Apple Keynote, or Google Slides. These will get the job done, with PowerPoint and Keynote being more feature rich than the free Google Slides.

However, if you're a web developer, there is another option. RevealJS is a JavaScript framework that allows you to leverage your HTML, CSS, and JavaScript skills to build beautiful and polished presentations. Some benefits this has over the standard software packages include being able to use version control (since the presentation is just html, css, and js files rather than a proprietary binary format), collaborate with others, and the sheer joy of using your favorite web technologies and text editor.

This post will walk you through how to get started with RevealJS, build a simple presentation, and publish it to Github Pages so you can share it with the world. If you want a quick "reveal" so to speak, here is the sample presentation we're going to be building and the source .

Getting Started

The build tooling for RevealJS uses Node.js so make sure you have that installed. I like to be on the latest LTS version.

Start by cloning the RevealJS repo from Github, installing the dependencies, then run the dev server:

At this point, you should be able to navigate to http://0.0.0.0:8000 and view the simple presentation that comes with the repo. Use the left/right arrow keys to navigate back and forth, or click on the caret icons displayed on the bottom of the slide. As you navigate the slides, notice the url changes, eg: http://0.0.0.0:8000/#/1 and a blue progress bar animates across the bottom of the page. All these features are configurable as we'll learn later.

Now we're ready to start building the presentation.

Open the demo-presentation project (or whatever you called it in the Getting Started step earlier) in your editor of choice. I'll be using VS Code.

Open the file index.html - this is where you'll be making the majority of changes. The entire presentation is contained in a div with a class of slides , which is contained in another div with a class of reveal . Each <section>content...</section> element denotes a slide.

Right now it looks as follows:

Delete the two <section> elements that came with the repo, and replace them with some content as shown below:

As soon as you save the changes, the presentation should refresh in the browser. The auto-refresh feature is provided by the development server that comes with the project. At this point, there are still two slides but the content has changed. Notice the default styles that get applied for <h1> , <h2> , and <p> elements. Don't worry if you don't exactly like these styles, everything's customizable.

Also notice how everything is centered and pleasing to look at. Try resizing the browser window or use Device Mode in Chrome devtools. Mobile/responsive design is already built into the presentation styles, nice!

Vertical Slides

Generally a presentation progresses linearly from left to right across each slide. But sometimes, the content needs to go off on a tangent, say to explain some point in more detail before moving on with the rest of the presentation. Vertical slides are a great way to organize this type of content. To try this out, nest a <section> element inside another element like this:

Save the changes, then navigate to the third slide in the presentation. Notice there's now a down caret in addition to the left pointing caret. Click it (or press the down arrow), the slides will now start to transition according to the nested <section> elements. This only works one level deep, do not try to nest any deeper. At any point the usual left/right key or arrow navigation still works to move to the previous or next slides.

With a lot of vertical slides, it can be useful to jump out and get a bird's eye view of the entire presentation. To do this, press the o key from any slide. It should look something like this:

Press the esc key to return to regular slide mode.

To add images to the presentation, make an images directory in the project root and place any image(s) you'd like in this directory. Then simply use the standard html <img> tag to display the image centered in the slide, don't forget the alt tag:

Note: The framework is not opinionated about where the images are placed so feel free to name this directory anything you like or even to place the images in project root if there's not too many of them.

Of course you can also simply link to an image from the internet, for example:

Full Screen Background

By default, all the slide content is contained within a portion of the screen to fit any display and scale. But if you want to break outside of this container to use up the entire background, this can be done with the data-background attribute on any <section> element.

For example, to have an animated gif take up the entire slide:

Animate in Visibility

Fragments are used to animate content in a slide, one element at a time. This is useful when you don't want all the content to show up at once. A classic example is a bullet point list where you want to talk to each point one at a time. To add visibility animation to any element, simply add class="fragment" .

For example:

Use the left/right arrow keys to have the elements animate in, or click on the caret icon at the bottom of the presentation.

By default, fragments will animate in the same order that they appear in the DOM. The order can be controlled by adding data-fragment-index to any element that has a class="fragment" . For example, to display a list in reverse order:

The default animation is for elements to fade in. But there are a number of other animations available such as fade up, down, left, right, changing color etc. To use these other effects, add the appropriate class to the fragment. For example:

The RevealJS docs list all the possible fragment animation classes .

The framework comes with a lot of built in styles for headers, paragraphs, lists etc. It's possible to customize any of these by adding the data-state attribute to any <section> element.

The data-state attribute causes the value, in this example my-style to be added as a class on the <body> element. This allows for overriding of the framework styles by using a selector such as .my-style p .

One thing I couldn't find in the docs was where to place custom styles. The quickest way for now is to add a file in the dist dir such as dist/custom.css and then add a link to it in the <head> section of index.html , after all the framework css is loaded:

Now edit custom.css - adding a class for the value in data-state , for example, to make the paragraph text bright pink and pop out:

Speaker Notes

One really helpful feature when giving a talk is the ability to have speaker notes displayed in a separate window from the presentation. RevealJS makes it easy to add these. Add an <aside class="notes"> element anywhere in a <section> element (i.e. slide), then that content will not be displayed in the slide, for example:

From the browser where the presentation is being displayed, press s to reveal the speaker notes in a new browser window. This window also conveniently has a timer, and displays the current and upcoming slide to help keep you on track. It looks something like this:

By now you'll have noticed there's some common styling applied to all the slides such as a black background and blocky white text. These styles come from the black theme stylesheet that is referenced in the head section of index.html :

This can be changed to any of the built-in themes RevealJS comes with, which are listed in the dist/theme directory. To change, simply swap out black.css for any other theme, for example, I like moon theme, which has a dark blue background and thick grey text:

Here's one of the slides from our presentation now with moon theme applied:

It's also possible to create a custom theme .

Slide Transitions

Up until now, we've been dealing with the HTML and CSS. But to further customize the presentation, there's a <script> section at the bottom of index.html where the framework gets initialized. Here you can control many features of how the presentation will behave. For example, by default, the slides transition with a slide animation going from right to left. This can be changed by specifying the transition property of the object passed to the Reveal.initialize function.

For example, to use a convex transition:

Further Customization

Besides slide transitions, many more features of the framework can be controlled through configuration. Just to list a few examples:

Read about all the configuration options in the RevealJS docs.

Publish to Github Pages

It's time to share our presentation with the world. To do this, we'll use Github Pages , which is free static web site hosting provided by Github. In order to do this, we need to create a new git repository with a branch named gh-pages , then create a corresponding repository on Github, and push the project files to this branch.

Start in a terminal at the project root and run the following commands:

Now login to your Github account and create a new repository. At the time of this writing, the new repo menu button is located at the top right of the Github landing page, given that you're logged in:

Make the repository name the same as your project. For example, mine will is demo-presentation . Optionally add a description. Make sure Public option is checked. Leave all the other checkboxes blank because we're going to be pushing up the project files in the next step:

Now, Github will display a page with instructions for how to push your code up, normally you could just copy paste this, but that will create a default main branch. This case is a little different because we want gh-pages branch for static hosting. Run the following replacing yourGithubUserName and your-repo-name :

After the push has completed, go back to Github in your browser and refresh the project page. The code you just pushed should be displayed.

And now, to finally see your presentation published on the web, click on Settings from your repository page:

Then scroll down to the "GitHub Pages" section. It should show something like the following:

Go ahead and click on the "Your site is published at" link. The presentation is now publicly available at that url, which in general will look like https://yourGithubUserName.github.io/your-repo-name/ .

Of course you're not limited to Github Pages for deployment. Since the project is just html, css, and javascript, it can be deployed to any static web site host.

This post has just barely scratched the surface of all the features that RevealJS provides. Checkout the documentation to learn more about it. There's also a rich ecosystem of plugins in case you need some behavior that's not provided by the framework. I hope you'll give this a try next time you're giving a talk and good luck with your presentation!

5 of the Best Free HTML5 Presentation Systems

Share this article

Google Slides Template

Frequently asked questions (faqs) about html5 presentation systems.

I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away. Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include:

it’s quicker to add a few HTML tags than use a WYSIWYG interface
you can update a presentation using a basic text editor on any device
files can be hosted on the web; you need never lose a PPT again
you can easily distribute a presentation without viewing software
it’s not PowerPoint and your audience will be amazed by your technical prowess.
you require web coding skills
positioning, effects and transitions are more limited
few systems offer slide notes (it’s a little awkward to show them separately)
it’s more difficult to print handouts
S5 — A Simple Standards-Based Slide Show System ( download )
CSSS — CSS-based SlideShow System ( download )
Slides ( download )
HTML5Rocks (no direct downloads, but you can copy the source)

What are the key features to look for in an HTML5 presentation system?

When choosing an HTML5 presentation system, consider features such as ease of use, customization options, and compatibility with various devices. The system should have an intuitive interface that allows you to create presentations without any coding knowledge. Customization options are important for personalizing your presentation to match your brand or style. Additionally, the system should be compatible with different devices, including desktops, laptops, tablets, and smartphones, to ensure your audience can view your presentation without any issues.

How does HTML5 improve the presentation experience compared to traditional methods?

HTML5 enhances the presentation experience by offering interactive and dynamic content. Unlike traditional methods, HTML5 allows for the integration of multimedia elements like videos, audio, and animations directly into the presentation. This makes the presentation more engaging and interactive for the audience. Additionally, HTML5 presentations are web-based, meaning they can be accessed from any device with an internet connection, providing convenience and flexibility for both the presenter and the audience.

Are HTML5 presentations compatible with all browsers?

HTML5 presentations are generally compatible with all modern web browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, there may be slight variations in how different browsers render HTML5 content. Therefore, it’s always a good idea to test your presentation on multiple browsers to ensure it displays correctly.

Can I use HTML5 presentation systems for professional purposes?

Yes, HTML5 presentation systems are suitable for a variety of professional purposes. They can be used for business presentations, educational lectures, product demonstrations, and more. The ability to incorporate multimedia elements and interactive features makes HTML5 presentations a powerful tool for conveying complex information in an engaging and understandable way.

How can I make my HTML5 presentation accessible to all users?

To make your HTML5 presentation accessible, ensure that all content is readable and navigable for users with different abilities. This includes providing alternative text for images, captions for videos, and using clear and simple language. Additionally, make sure your presentation is responsive, meaning it adjusts to fit different screen sizes and orientations.

Can I convert my existing PowerPoint presentations to HTML5?

Yes, many HTML5 presentation systems offer the ability to import and convert PowerPoint presentations. This allows you to leverage your existing content while benefiting from the enhanced features and capabilities of HTML5.

Do I need to know how to code to use HTML5 presentation systems?

While having some knowledge of HTML5 can be beneficial, many HTML5 presentation systems are designed to be user-friendly and do not require any coding skills. These systems often feature drag-and-drop interfaces and pre-designed templates to help you create professional-looking presentations with ease.

Can I share my HTML5 presentations online?

Yes, one of the major advantages of HTML5 presentations is that they can be easily shared online. You can publish your presentation on your website, share it via email, or even embed it in a blog post or social media update.

Are HTML5 presentations secure?

HTML5 presentations are as secure as any other web content. However, it’s important to follow best practices for web security, such as using secure hosting platforms and regularly updating your software to protect against potential vulnerabilities.

Can I track the performance of my HTML5 presentations?

Yes, many HTML5 presentation systems include analytics features that allow you to track viewer engagement and behavior. This can provide valuable insights into how your audience interacts with your presentation, helping you to improve and refine your content over time.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

Create Incredible Web Presentations with Reveal.js

Feb 24, 2023 · 12 min read

Create Incredible Web Presentations with Reveal.js

Reveal.js is an open-source HTML presentation framework. Anyone with a web browser can use it to make attractive presentations for free. The program allows anyone with a web browser to create fully-featured and interactive presentations that support CSS 3D transforms , nested slides, and a variety of other capabilities. It is recommended for those interested in programmable techniques and web technology.

It has lots of benefits. Some of these consist of the following:

Responsive design: Reveal.js presentations scale to fit the user’s screen, making them compatible with a wide range of devices.
Interactive elements: Reveal.js supports these elements, which can improve user experience and make presentations more interesting. Interactive elements include links, images, and videos.
Themes can be readily modified to reflect the user’s brand or tastes to make a presentation look more attractive when the theme matches the content in a slide.
Simple and intuitive user interface: Reveal.js enables users to build and edit presentations with minimal technical expertise.
Open-source: Reveal.js is free to use, and its source code is available for users to examine and edit.

React Reveal vs. Reveal.js: what’s the difference?

The distinction between React Reveal and Reveal.js will be demonstrated in this section:

HTML, CSS, and JavaScript are the foundations on which Reveal.js is constructed, but React Reveal requires React.
Reveal.js is the way to go if you want to make static presentations and need to deal with a vanilla JavaScript-based project. React Reveal is the greatest option for creating interactive presentations if you are working with React.
You can make interactive slides with Reveal.js, which has a number of features like slides and transitions. You can also make interactive slides with React Reveal, but you can also do so while using React components .
Additional capabilities offered by React Reveal include a higher degree of customization and support for animations.

Alternatives to Reveal.js

Many Reveal.js alternatives may be utilized to make engaging presentations with eye-catching visuals. Several well-liked choices include:

Impress.js , a JavaScript library that enables the creation of 3D presentations with a range of transitional effects.
Prezi : An online presentation tool that lets users zoom in and out of slides to make dynamic, interactive presentations.
PhotoSwipe : An open-source JavaScript picture gallery and lightbox, PhotoSwipe. It is modular, independent of frameworks, and made for desktop and mobile devices.
Owl Carousel 2 : Owl Carousel 2 is a jQuery carousel plugin with full customization and touch and drag functionality.
FlexSlider is a fantastic, totally responsive jQuery slider plugin. It offers designers and developers a quick way to launch a slideshow, carousel, or image slider.
Keynote : Apple’s PowerPoint-like presentation software for Mac and iOS devices.
Haiku Deck : A web-based application that enables users to design minimalistic presentations with spectacular visual effects.

Getting Started

In this session, we’ll use Reveal.js to create spectacular presentations by utilizing JavaScript. In this section, we’ll learn everything we need to know to get Reveal.js running on our project. To write code to create stunning presentations, let’s first understand the basic setup and installations before using Reveal.

Installations

The best way to install Reveal.js is to clone the source code on GitHub. Utilizing this is extremely simple for you. Just use the code below in your terminal to clone the GitHub repository.

Run the following command to install all the necessary packages and start Reveal.js after you’ve cloned the repository for it in your working directory.

Furthermore, once Reveal.js has been successfully installed in your project, you must start the Reveal.js server on port 8000 (the default port) by executing the following code:

Please use the code below if you decide to run the Reveal.js server on a different port:

You can easily install Reveal.js manually using npm or yarn if you don’t want to clone the GitHub repository:

You may easily include the Reveal.js file as an ES6 module once it has been installed in your front-end framework, such as React:

Folder Structure

This section will go over Reveal.js’ folder structure. When changes are made, the folder structure might change, but this won’t affect how Reveal.js is utilized in our project.

Since we are not the original developers, we won’t be explaining every file in Reveal.js. I’ll go over the most significant directories and files first:

CSS files that describe how a presentation should appear and be organized are stored in the CSS folder.
The JS folder houses the JS files that provide interaction and other functionality.
The presentation begins with a file called index.html that also contains the HTML markup for the slides.
A reveal.js file contains reveal.js’ setup parameters.

Reveal.js’s folder structure is shown in the image below:

As you can see in the screenshot above, I installed Reveal.js in the opened terminal and launched it by typing npm start .

Starter Template

The starter template is just what is loaded in the index.html page of the Reveal.js folder structure, which we mentioned in the section labeled “Folder Structure” above.

Launch your browser and navigate to the following URLs: http://localhost:8000 The link takes you to the active running page where our presentations will appear in the browser:

This section will concentrate on the contents of Reveal.js. On Reveal Web Presentation, the contents are the components of a responsive presentation. We can use Reveal.js on any project once we have worked with all the components that go into making responsive, stunning presentations, covering Markup, Markdown, Backgrounds, Media, Code Math, Fragments, Links, and Layout.

Markup is the first step in getting started with Reveal.js, and you must use the section element to build markups in Reveal.js. Please remember that the parent class will have the class name . reveal , and the reveal class div will have a child element with the class name .slide . If you place the section element line by line, as in the code below, you will have a slider that moves horizontally.

To make a vertically moving slide, add sections within a section; this is a simple technique; see the code below:

Just use the up and down arrows to view the previous and next slides.

Please use the code below to add a horizontal and vertical sliding format. It’s really simple; the horizontal section of our code will stand alone and not be inside of any section; however, the vertical section will have sections inside of a section.

Backgrounds

It’s simple to add a background color to a slider in Reveal.js; all you have to do is include an attribute that initializes the color for a specific area. You can use the data-background-color attribute to add a background color to a section and specify the value to any color name you choose. View a responsible slider with background colors by referring to the code and outputs below.

Click here to read more about background colors in Reveal.js.

In Reveal.js, media can be used as a presentation. We’ll be showing a video as a presentation in this section. The data-autoplay autoplay attribute must be included in the video tag as an attribute to make the video play when its slide section is open. Code:

You can present codes on the slide and have the code highlighted using Reveal.js. Highlight.js is the only thing that powers the code highlight. You will always use the <code> element when presenting code in Reveal.js, and all you need to do to make HTML escape the default behavior and treat the content as genuine code. Add the data-line-numbers attribute to the <code> element and specify values that will represent the line of code that will be highlighted, as shown below.

In Reveal.js, mathematical expressions can be displayed. To use math in your presentation, you must include the RevealMath.KaTeX plugin, which will reflect the math in your presentation.

Let’s run The Lorenz Equations as a presentation:

The Lorenz equations are a set of partial differential equations that describe two-dimensional fluid flow. Please click here to learn more.

On a slide, fragments are utilized to draw attention to or gradually reveal specific parts. Before moving on to the next slide, each element with the class fragment will be stepped through.

Please include the data-fragment-index attribute and set its value to a number if you wish to use fragments. The number value indexed 1 will appear first, followed by the number 2, in that order.

Session Replay for Developers

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data

Happy debugging! Try using OpenReplay today.

While watching slides, Reveal.js also simplified things for us. The following slide in a presentation can be easily reached by clicking a link , and the previous slide can likewise be reached by doing the same.

If you want to navigate to a slider, be sure that the portion of the slider you are visiting has an Id that matches the value of the “href” attribute on the HTML anchor element that is now being clicked.

To instantly navigate to the first page of the slide without passing through any intermediary sections, add ”#/0” (0 == first-slide) to the clickable link that will take you to the first page of the slide.

This section will go over the layout in Reveal.js. You can change the text size, and you can also construct a slide by showing an item on top of the previous item; this is known as staking.

Let’s practice stacking by simply laying images on top of one another.

Now that we understand how stacking works, let’s spend some time working with FIT TEXT. We’ll display some text in a responsive large format in this part under layout by simply utilizing the class name r-fit-text. Below is a code sample of big text applied to Session Replay:

Please note that you can move forward and backward with the arrow keys.

Customization

In this section, we’ll customize some of Reveal.js’s presentations, focusing on Themes and Transitions, the two most significant things to consider while working with Reveal.js.

Theming is essential for creating anything on the internet. In Reveal.js, you can integrate some theme collections supplied by Reveal.js developers.

To use a theme of your choice, import the theme’s CSS styles into your project. The default theme is black when you install reveal.js or clone the Reveal.js repository. A line of code for incorporating a theme into your project is provided below:

Look closely at the code above; you can see where I wrote theme-name ; please replace it with any of the theme names listed below:

Black (default)

Below, I used a theme name titled sky on a slide:

Utilizing the dracula theme produces the theme below:

Now that we’ve learned more about theming , I’d like you to experiment with different theme names to see how they look on your web presentation slide.

Transitions

Reveal.js provides us with some amazing transition effects to use while making a presentation on the web. It is quite simple to use these transition effects , and some of these transition effects include:

To use these effects, insert a data-transition attribute into your HTML element and set the attribute’s value to the name of the transition effect listed above.

That’s all for transitions in this section; if you want to learn more about Reveal.js transitions, please click here .

We’ll go through presentation features in Reveal.js, such as vertical slides and auto-slide in this section, and since we’ve already covered the implementation largely on vertical slides, we’ll go over more in depth. Let’s get started.

Vertical Slides

Moving between slides by default employs a horizontal sliding transition. These horizontal slides are the main or top-level slides in your presentation. We can’t rely on just one direction in a presentation, and the usage of presenting on slide vertically is critical. We learned how to design a slide that uses vertical direction earlier in this article.

Below is a code sample on utilizing vertical slides:

Auto-Animate

Reveal.js supports auto animation . The auto animate plays a vital role in web presentation. Auto animation applies smooth transition to a slide content, which is noticeable when viewing a presentation. For example, when you set margin-top: 40px to a section, you will see the smooth animation on how the second section comes down slowly. We’ll be implementing some examples here in this section.

To initiate the auto-animate to a section, add the data-auto-animate attribute to the two or multiple sections you want to integrate the auto-animate effect.

The code output above shows that we added margin-top: 100px to the section child (h1) using data-auto-animate , and you can see the effect applied smoothly and removing the default slide horizontal direction to a slightly vertical direction. Please remember that the element in this example is internally hidden but moved using the margin-top attribute. JavaScript will use a CSS transform to achieve fluid movement. Most CSS attributes may be animated and transitioned using the same technique, allowing you to modify positions, font-size, line-height, color, padding, and margin.

We’ll be working on auto-slide in a slide in this section. This is relatively straightforward to accomplish; simply look at our JavaScript code at the bottom of our HTML page and add the autoSlide duration as an integer and set the Boolean value of a loop to true :

JavaScript:

A play/pause icon can be found in the bottom left corner of the slide, as shown in the output above. A round loader describes the progress of the timing function in the icon. The following code is for the output presentation:

Slide Numbers

Numbering is important in slides, and you may add a slider number in two ways: obtain the current slide number and get the slide number and the overall slide count (X/X).

Set slideNumber to true in the config section at the bottom of the HTML page to obtain the real slide number.

Slide Code:

If you look closely at the output above, you will notice a page number counter in the bottom right corner of the screen. When I reached the vertical part while sliding horizontally, the counter format changed to 3.1, which indicates 3 represents the last horizontal slide page and 1 represents the first vertical slide.

To set a slide number in (X/X) format, set your config to the code below:

Please look closely at the bottom right corner of the screen; you will see the page numbering in X/X format. See the code for the output below:

Please, click here to learn more about slide numbers.

Useful hints and guidelines for Reveal.js

In this section, we’ll discover valuable hints and guidelines for working with Reveal.js, which will greatly improve our experience working with Reveal.js for presentation:

Use keyboard shortcuts to navigate through slides: Use arrow keys or the space bar to move ahead and back through slides.
Personalize the appearance and feel of your presentation: You can alter the theme, font, and background color of your slides with Reveal.js.
To add background images to presentations, use the data-background attribute: You can change a slide’s background image by adding the data-background attribute to the slide’ element.
To set the transition effect between slides, use the data-transition attribute: Transition effects such as ‘slide,’ ‘fade,’ ‘convex,’ and ‘concave’ are available.

I hope you enjoyed this article; we covered everything we needed to know to get started with Reveal.js. We also learned about how to use Reveal.js in our project. There are many more features in Reveal.js, and you can learn more by visiting Reveal’s official website . You may also begin integrating presentations into client’s projects or your project by using Reveal.js; this will help you grow your experience utilizing Reveal.js.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo

Engaging with the Developer Community: Social Media for Professionals

{post.frontmatter.excerpt}

Do E2E tests for your React apps with Cypress

Apr 3, 2023, 6 min read

End-to-end (E2E) testing with Cypress

How TO - Slideshow

Learn how to create a responsive slideshow with CSS and JavaScript.

Slideshow / Carousel

A slideshow is used to cycle through elements:

Try it Yourself »

Create A Slideshow

Step 1) add html:, step 2) add css:.

Style the next and previous buttons, the caption text and the dots:

Step 3) Add JavaScript:

Automatic slideshow.

To display an automatic slideshow, use the following code:

Multiple Slideshows

Tip: Also check out How To - Slideshow Gallery and How To - Lightbox .

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top 9 JavaScript frameworks to create beautiful presentation slides

Presentation frameworks are tools or libraries that can help you create presentations using web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You’ll have full control over the appearance and layout of your slides.

They allow you to export your slides as HTML files that can be viewed in any modern browser. You don’t need to install any software or plugin to view your slides. You can also share your slides online using platforms such as Slides.com, GitHub Pages, Netlify.

Reveal ( 64.2k ⭐) — An open source HTML presentation framework that allows you to create beautiful and interactive presentations using web technologies. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Impress ( 37.3k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides.

Sli dev ( 27.3k ⭐) — A web-based slides maker and presenter that is designed for developers. It allows you to create beautiful and interactive presentations using Markdown, HTML, Vue components, and other web technologies. You can also use features such as live coding, recording, drawing, LaTeX, diagrams, icons, and more to enhance your slides.

MDX Deck ( 11.1k ⭐) — A library based on MDX that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- . You can also import and use any React component in your slides, as well as customize the theme and layout of your presentation.

Spectacle ( 9.5k ⭐) — A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code, created and maintained by Formidable Labs. You can use it to create beautiful and interactive slides with animations, transitions, code highlighting, and other features.

Code Surfer ( 6.2k ⭐) — A library that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- , add code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.

WebSlides ( 6.1k ⭐) — A library that allows you to create beautiful HTML presentations and websites. Just choose a demo and customize it in minutes. 120+ slides ready to use. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Fusuma ( 5.3k ⭐) — A tool that allows you to create slides with Markdown easily. You can use HTML, CSS, JavaScript, Markdown, Vue components, and other web technologies to create stunning slides with animations, transitions, code highlighting, and other features.

PptxGenJS ( 2.1k ⭐) — A JavaScript library that allows you to create presentations, compatible with PowerPoint, Keynote, and other applications that support the Open Office XML (OOXML) format. You can use it to generate PPTX files with just a few simple JavaScript commands in any modern desktop and mobile browser. You can also integrate PptxGenJS with Node, Angular, React, and Electron.

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

jQuery Script - Free jQuery Plugins and Tutorials

10 best html presentation frameworks in javascript (2024 update), what is html presentation framework.

An HTML Presentation Framework helps you create a fullscreen web presentation to showcase your web content just like Apple Keynote and Microsoft PowerPoint.

It separates your HTML content into several fullscreen pages (slides) so that the visitors are able to navigate between these slides with certain operations (mouse wheel, arrow keys, touch events, etc).

The Best HTML Presentation Framework

You have been tasked with building an HTML5 presentation application, but where should you start? As there are many frameworks to choose from, it can be challenging to know where to begin.

In this post, we're going to introduce you the 10 best JavaScript HTML presentation frameworks to help developers generate professional, nice-looking presentations using JavaScript, HTML, and CSS. Have fun.

Originally Published Feb 2020, up date d Feb 27 2024

Best jQuery HTML Presentation Frameworks

Full page presentations with jquery and css animations.

A vertical full-page presentation app (also called fullscreen page slider) implemented in JavaScript (jQuery) and CSS animations.

[ Demo ] [ Download ]

jQuery Amazing Scrolling Presentation Plugin - scrolldeck

scrolldeck is a cool jQuery plugin that make it easier to create amazing scrolling presentation like Slide Animation s, Image Slides and parallax effects for your project.

Easy Dynamic Presentation Plugin In jQuery - Presentation.js

A jQuery-powered presentation plugin that allows users to create better professional-looking presentations, with awesome jQuery and/or CSS 3 animations.

jQuery Plugin To Create Amazing Presentations - mb.disclose

An awesome jQuery plugin that provides an amazing way to present Html contents in carousel like presentations. You can customize the CSS3 powered animations for each Html element using Html5 data-* attributes.

Responsive Web Presentation Plugin For jQuery - sectionizr

A really simple jQuery web presentation plugin which presents any html contents in a responsive, fullscreen, carousel-style page UI. Supports both horizontal and vertical scrolling.

Best Vanilla JS HTML Presentation Frameworks

Beautiful html presentation library - reveal.js.

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an iframe or add your own custom behavior using our JavaScript API.

Beautiful HTML Presentation Plugin with jQuery - reveal.js

Fullscreen Scrolling Presentation In JavaScript – Pageable

A lightweight JavaScript library to generate a fullscreen scrolling presentation where the users are allowed to scroll through sectioned pages with drag, swipe, and mouse wheel events.

Amazing Presentation Framework With CSS3 - impress.js

An amazing Presentation framework for modern bowsers. Based on CSS3 transforms and transitions. It doesn't depend on any external stylesheets. It adds all of the styles it needs for the presentation to work.

Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.

When working with WYSIWYG editors, it is easy to get distracted by the styling options. Slidev remedies that by separating the content and visuals. This allows you to focus on one thing at a time, while also being able to reuse the themes from the community. Slidev does not seek to replace other slide deck builders entirely. Rather, it focuses on catering to the developer community.

Shower HTML presentation engine

Shower HTML presentation engine built on HTML, CSS and vanilla JavaScript. Works in all modern browsers. Themes are separated from engine. Fully keyboard accessible. Printable to PDF.

Conclusion:

There is no one right answer. The right presentation framework for you depends on your own project requirements, as well as your personal preferences. However, with the ten HTML presentation frameworks listed above to choose from, you are bound to find one that suits your specific needs.

Looking for more jQuery plugins or JavaScript libraries to create awesome HTML Presentations on the web & mobile? Check out the jQuery Presentation and JavaScript Presentation sections.

10 Best Mobile-friendly One Page Scroll Plugins
Prev: Weekly Web Design & Development News: Collective #330
Next: Weekly Web Design & Development News: Collective #331

10 Best JavaScript Plugins To Paginate Large HTML Table (2024 Update)

10 Best Mega Menu Systems In JavaScript And Pure CSS (2024 Update)

10 Best Rating Systems In JavaScript & Pure CSS (2024 Update)

10 Best Marquee-like Content Scrolling Plugins In JavaScript (2024 Update)

10 Best Tag Cloud Generators In JavaScript (2023 Update)

7 Best Github Style Calendar Heatmap Plugins In JavaScript

Add Your Review

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

html-presentation

Here are 17 public repositories matching this topic..., ksky521 / nodeppt.

This is probably the best web presentation tool so far!

Updated Jan 25, 2021

webslides / WebSlides

Create HTML presentations in seconds —

Updated Dec 10, 2022

apreshill / ohsu-biodatavis

"Take a Sad Plot & Make It Better" Talk @ OHSU's BioData Club

Updated May 13, 2019

ysugimoto / resumify

Capture screenshot and make PDF on your HTML presentation.

Updated Dec 23, 2018

mkearney / xaringan_slides

📺 Links to HTML5 presentations made using the R package {xaringan}.

Updated May 13, 2018

apreshill / blogdown-workshop

Slides and materials for the 2017-09-14 PDX R User Group workshop

ratopi / HTML-presentation-tools

An overview to current HTML presentation tools

Updated Dec 1, 2017

d28b / html-slides

HTML Presentation Slides

Updated Apr 30, 2024

ishandeveloper / PPT-In-Browser

Presentations that come alive right in your browser. Make HTML presentations, landings, and longforms in a beautiful way.

Updated Apr 8, 2020

faridfr / what_is_ssl

A presentation with impress.js

Updated Sep 16, 2018

ibbatta / yarn-presentation

📚 Html presentation to show Yarn package manager pro and cons

Updated Nov 2, 2016

Amarok24 / EB-template

SinglePage XHTML Template with extras

Updated Sep 15, 2020

zglu / ipres

IPRES: a simple html wrapper / presentation editor based on HTML and jQuery. The main purpose of this tool is to create HTML presentation with interactive charts (JS-based, e.g., Highcharts, Chartjs, D3js).

Updated Nov 25, 2018

FerryT / tue-reveal.js

An unofficial TU/e theme for the reveal.js presentation framework

Updated Nov 17, 2018

ryanzhang / ryanzhang.github.io

Updated Apr 19, 2023

edurbrito / revdown-cli

The markdown-to-reveal.js presentation cli "transpiler"

Updated Feb 3, 2021

Vopaaz / EY-DS-Competition-Slides

Presentation Slides for EY Nextwave Data Science Challenge

Updated May 25, 2022

Improve this page

Add a description, image, and links to the html-presentation topic page so that developers can more easily learn about it.

Curate this topic

Add this topic to your repo

To associate your repository with the html-presentation topic, visit your repo's landing page and select "manage topics."

How to Convert PowerPoint Presentations to HTML: A Step-by-Step Guide

Converting a PowerPoint presentation to HTML format can seem daunting, but it’s a straightforward process. Essentially, you’ll be saving the PowerPoint file as a web page, which creates an HTML version of the presentation. This can be done directly from PowerPoint itself, and once complete, you’ll have an HTML file that can be viewed in web browsers.

After you’ve converted your PowerPoint presentation to HTML, you can share it more easily across various platforms. It’ll be accessible to anyone with a web browser, without the need for PowerPoint software.

Introduction

Have you ever created a brilliant PowerPoint presentation and wished you could share it on the web for a wider audience? Well, converting your PowerPoint to an HTML format is the perfect solution! HTML, which stands for HyperText Markup Language, is the standard markup language for documents designed to be displayed in a web browser. By converting your PowerPoint to HTML, you open up a world of possibilities for sharing your content online.

This process is especially relevant for educators, marketers, and businesses looking to distribute their presentations more broadly. It allows for easy sharing on websites, email, and social media platforms. Plus, it ensures that your audience doesn’t need to have PowerPoint installed on their devices to view the presentation. So, let’s dive into how you can turn your PowerPoint slides into a web-friendly format!

Step by Step Tutorial on How to Convert PowerPoint Presentations to an HTML Format

The following steps will guide you through converting a PowerPoint presentation into an HTML format using Microsoft PowerPoint.

Step 1: Open your PowerPoint presentation

Open the PowerPoint presentation that you want to convert to HTML format.

In this step, you’ll need to have your presentation fully prepared and ready for conversion. Ensure all animations, transitions, and multimedia elements are properly set up, as they will be included in the conversion process.

Step 2: Click ‘File’ and select ‘Save As’

Navigate to the ‘File’ tab on the ribbon and select ‘Save As’ from the dropdown menu.

When saving your presentation, you have several format options. For converting to HTML, you’ll need to find the appropriate web format in the upcoming steps.

Step 3: Choose the location to save the file

Decide where on your computer or network you would like to save the HTML version of your presentation.

Consider creating a new folder specifically for web files if you’re planning to upload the HTML presentation to a server. This helps keep your files organized and easily accessible.

Step 4: In the ‘Save as type’ dropdown, select ‘Web Page’

From the ‘Save as type’ dropdown menu, select ‘Web Page’ or a similar option depending on your version of PowerPoint.

This step is crucial as selecting the ‘Web Page’ format is what converts your presentation into HTML. There may be different naming for this option based on the PowerPoint version you’re using, such as ‘Web Page (.htm;.html)’.

Step 5: Click ‘Save’

After selecting the ‘Web Page’ option, click ‘Save’ to convert and save your PowerPoint presentation as an HTML file.

Once you’ve clicked ‘Save’, PowerPoint will create an HTML file and a folder containing all the necessary components for your presentation to display properly in web browsers.

Additional Information

When converting PowerPoint presentations to an HTML format, it’s crucial to consider the compatibility of your presentation across different web browsers. While most modern browsers will display HTML consistently, older versions may have trouble with certain features or animations. Additionally, remember that the HTML version of your presentation will include a folder with supporting files like images and animations. Keep this folder in the same location as your HTML file to ensure the presentation displays correctly.

Another tip is to check your presentation for any proprietary or confidential information before converting it. Once in HTML format, your presentation becomes much easier to distribute, and you’ll want to make sure it’s ready for a wider audience. If you’re using a company or school template, ensure you have the rights to share it online.

Finally, consider the SEO benefits of converting your presentation. With proper use of keywords and descriptions, your HTML presentation can be indexed by search engines, making it easier for people to find your content online.

Open your PowerPoint presentation.
Click ‘File’ and select ‘Save As’.
Choose the location to save the file.
In the ‘Save as type’ dropdown, select ‘Web Page’.
Click ‘Save’.

Frequently Asked Questions

Will my animations and transitions still work after converting to html.

Yes, most animations and transitions will be preserved in the HTML format, though some complex effects might not translate perfectly.

Can I edit my presentation once it’s in HTML format?

Editing the content of an HTML file is possible but can be more complex than editing in PowerPoint. It’s recommended to make any necessary changes in PowerPoint before converting.

How can I share my HTML presentation?

You can share the HTML file and accompanying folder via email, or you can upload it to a web server to be accessed via a link.

Will the HTML file be the exact replica of my PowerPoint presentation?

While the goal is to preserve as much of the original presentation as possible, there may be slight differences due to the limitations of HTML.

Can I convert my HTML presentation back to PowerPoint?

It’s not recommended as the conversion from HTML back to PowerPoint may not preserve the original formatting and interactivity.

Converting PowerPoint presentations to an HTML format is a powerful way to expand your audience and ensure your work is accessible to anyone with internet access. Although there are some considerations to keep in mind, like potential feature loss and file size, the benefits often outweigh the drawbacks.

As we’ve explored, the process is relatively simple and can be done directly from PowerPoint. It’s an excellent skill for anyone looking to share their ideas and presentations online more effectively. So, why not give it a try, and see how your PowerPoint presentations can shine on the web?

Matthew Burleigh has been writing tech tutorials since 2008. His writing has appeared on dozens of different websites and been read over 50 million times.

After receiving his Bachelor’s and Master’s degrees in Computer Science he spent several years working in IT management for small businesses. However, he now works full time writing content online and creating websites.

His main writing topics include iPhones, Microsoft Office, Google Apps, Android, and Photoshop, but he has also written about many other tech topics as well.

Read his full bio here.

site categories

‘oh, canada’ producers talk nerve-racking wait for interim agreement – cannes.

Goodfellas Boards Japanese Director Chie Hayakawa’s ’Renoir’

By Melanie Goodfellow

Melanie Goodfellow

Senior International Film Correspondent

Studiocanal Rolls Out German Trilogy 'Woodwalkers'; Execs Talk Ambitions For New Franchise - Cannes Market

Bill Nighy, Noah Jupe, George MacKay & Matt Smith To Star In Pablo Trapero's English-Language Film Debut '& Sons' From Oscar Winner Sarah Polley's Script -- Cannes Market Hot Project

With her mother stretched between caring for him and holding down a full-time job, Fuki is left to her own devices. Turning to her rich imagination, she becomes fascinated by telepathy and falls ever deeper into her own fantasy world.

The project reunites Hayakawa with Eiko Mizuno-Gray and Jason Gray at Tokyo-based Loaded Films Ltd ( To The Ends Of The Earth , Ten Years Japan), who produced Plan 75 .

French producer Christophe Bruncher at Ici et Là ( Women Do Cry ) and Singapore-based producer Fran Borgia at Akanga Film Asia ( Tiger Stripes ) are on board as co-producers in partnership with ARTE France Cinema.

Further partners include Japanese film companies Happinet-Phantom Studios, which has taken distribution rights for Japan, and Dongyu Club.

Eurozoom has taken French distribution rights.

Must Read Stories

‘emilia pérez’ red carpet, review, ovation; langley talks biz; schrader’s next movie.

‘The Monkey’ Rights Pre-Sell to Neon; Focus Gets Lanthimos’ ‘Bugonia’

Sony & paramount sign nda ahead of talks, but it’s not a $26b bid anymore, breaking baz @ cannes: rothman on how movies endure, charles finch’s columbia soirée.

Subscribe to Deadline Breaking News Alerts and keep your inbox happy.

Sen. Bob Menendez reveals his wife has breast cancer as his trial focuses on FBI raid of his home

FILE - Democratic U.S. Sen. Bob Menendez of New Jersey and his wife Nadine Menendez arrive at the federal courthouse in New York, Sept. 27, 2023. Menendez said Thursday, May 16, 2024, that his wife has breast cancer and will require a mastectomy, a revelation made just as the presentation of evidence began at his New York bribery trial. (AP Photo/Jeenah Moon, File)

U.S. Sen. Bob Menendez, D-N.J., leaves Manhattan federal court after the second day of jury selection in his trial, Tuesday, May 14, 2024, in New York. The Democrat has pleaded not guilty to bribery, extortion, fraud and obstruction of justice, along with acting as a foreign agent of Egypt. (AP Photo/Stefan Jeremiah)

Assistant U.S. Attorney Lara Pomerantz gives her opening statement while gesturing to Robert Menendez, far left, as Judge Sidney Stein presides in Manhattan federal court, Wednesday, May 15, 2024, in New York. (Elizabeth Williams via AP)

In this courtroom sketch, U.S. Sen. Robert Menendez, seated far left, looks at his defense attorney Avi Weitzman give his opening statement during his trial Wednesday, May 15, 2024, in New York. Judge Sidney Stein is presiding. (Elizabeth Williams via AP)

Copy Link copied

NEW YORK (AP) — Sen. Bob Menendez said Thursday that his wife will undergo a mastectomy after she was diagnosed with breast cancer, a revelation made just as the first evidence — pictures of 13 gold bars and over $480,000 in cash seized from the couple’s home — was shown to jurors at his New York bribery trial.

The New Jersey Democrat said he was revealing his wife’s health crisis at her request after repeated inquiries from the media.

“We are, of course, concerned about the seriousness and advanced stage of the disease,” the senator said in a statement.

He added: “She will require follow up surgery and possibly radiation treatment. We hope and pray for the best results.”

Previously, lawyers for Nadine Menendez had requested her trial on charges in the case be delayed after she was diagnosed with what was only previously described publicly as a serious health issue.

Judge Sidney H. Stein had postponed her trial until at least July. Nadine Menendez, who married the senator two years after she began dating him in 2018, has pleaded not guilty.

One of her lawyers declined comment in response to Bob Menendez’s disclosure Thursday.

FILE - A radiologist uses a magnifying glass to check mammograms for breast cancer in Los Angeles, May 6, 2010. An influential U.S. task force now says women should get screened for breast cancer every other year starting at age 40. The U.S. Preventive Services Task Force announced the updated guidance Tuesday, April 30, 2024. (AP Photo/Damian Dovarganes, File)

The senator, on trial with two of three businessmen who allegedly paid him bribes, has pleaded not guilty to charges of bribery, fraud, extortion, obstruction of justice and acting as a foreign agent of Egypt. A third businessman has pleaded guilty in the case and will testify against the others.

Menendez’s statement about his wife was released just after opening statements were completed and the presentation of evidence began at his trial in Manhattan federal court.

The trial’s first witness was an FBI agent, Aristotelis Kougemitros, who described leading a June 2022 raid on the couple’s Englewood Cliffs, New Jersey, home.

He testified that two 1-kilogram (2.2-pound) gold bars, 11 1-ounce gold bars and $486,461 in cash were among valuables found in the home, along with cellphones and jewelry. In all, 52 items were seized.

At first, Kougemitros said, the FBI had directed agents to photograph any cash that was found, but not necessarily to seize it.

But he said that based on his experience and training, along with the “totality of the circumstances,” that he decided the amount of cash was so voluminous that it would be seized.

“I believed there was evidence potentially of a crime,” he said, drawing an objection from Menendez’s lawyer that was sustained by the judge.

Through dozens of photographs and the agent’s testimony, jurors were taken on a tour of the home as Kougemitros described where cash and the gold bars were discovered by a team of eight agents that was later supplemented by two Manhattan agents who brought cash-counting machines.

The gold bars were found in a safe and on the floor nearby inside locked closets in a bedroom, he said. Much of the cash was found stuffed in jacket pockets, in two pairs of boots and on a shelf in the home’s basement, he said.

One pair of Timberland boots contained $14,500 in cash nearly evenly divided while another set of boots also had cash stuffed in each boot, he said.

A black jacket, which was among four jackets found to contain cash, had $21,000 in envelopes in its pockets, Kougemitros said. The other jackets, he added, had $4,300, $6,000 and $8,000.

On a shelf nearby, he said, a plastic bag contained $100,000, while another bag held $95,000.

Earlier in the day, lawyers for New Jersey real estate developer Fred Daibes and businessman Wael Hana delivered their opening remarks to jurors a day after a prosecutor and Menendez’s lawyer gave opening statements .

Attorney Lawrence Lustberg, representing Hana, said prosecutors had built their case against his client on “innocent acts.”

He said Hana was longtime friends since 2009 with Nadine Menendez and that Hana and Nadine Menendez had exchanged expensive gifts over the years. He said there was never a time when Hana either directly to Bob Menendez or indirectly through Nadine Menendez gave a bribe in exchange for official acts by the senator.

Attorney Cesar De Castro, representing Daibes, told jurors the case was about relationships and prosecutors were trying to exploit facts about a three-decade friendship between the senator and Daibes to claim crimes occurred. He said they will conclude his client was not guilty.

On Wednesday, attorney Avi Weitzman, representing Bob Menendez, told jurors his client was unaware that his spouse had accepted gifts from the three businessmen and did not know about cash and gold bars hidden in a closet at their home.

The statement came after an opening statement by Assistant U.S. Attorney Lara Pomerantz in which the prosecutor repeatedly highlighted the gold bars and cash found in the home.

Menendez has held public office continuously since 1986, serving as a state legislator before 14 years as a U.S. congressman. In 2006, then-Gov. Jon Corzine appointed Menendez to the Senate seat he vacated when he became governor.

The trial, which began Monday, is projected to last up to two months.

Catalini reported from Trenton, New Jersey.

OpenAI's big event: CTO Mira Murati announces GPT-4o, which gives ChatGPT a better voice and eyes

OpenAI's "Spring Update" revealed new updates to ChatGPT.
OpenAI CTO Mira Murati kicked off the event.
She announced GPT-4o, its next flagship AI model, with improved voice and vision capabilities.

OpenAI just took the wraps off a big new update to ChatGPT.

Cofounder and CEO Sam Altman had teased "new stuff" coming to ChatGPT and GPT-4 , the AI model that powers its chatbot, and told his followers to tune in Monday at 1 p.m. ET for its "Spring Update" to learn more.

Also ahead of time, Altman ruled that the event would reveal GPT-5 or a new OpenAI search engine, which is reportedly in the works. OpenAI is reportedly planning to eventually take on internet search giant Google with its own AI-powered search product.

But the big news on Monday was OpenAI's new flagship AI model, GPT-4o, which will be free to all users and "can reason across audio, vision, and text in real time." It was CTO Mira Murati who delivered the updates with no appearance on the livestream from Altman.

There were a ton of demos intended to demonstrate the real-time smarts of GPT-4o.

OpenAI researchers showed how the new ChatGPT can quickly translate speech and help with basic linear algebra using its visual capabilities. The use of the tech on school assignments has been a polarizing topic in education since it first launched.

Say hello to GPT-4o, our new flagship model which can reason across audio, vision, and text in real time: https://t.co/MYHZB79UqN Text and image input rolling out today in API and ChatGPT with voice and video in the coming weeks. pic.twitter.com/uuthKZyzYx — OpenAI (@OpenAI) May 13, 2024

OpenAI posted another example to X of how one can interact with the new ChatGPT bot. It resembled a video call, and it got pretty meta.

In the video, ChatGPT takes in the room around it, discerns it's a recording setup, figures it might have something to do with OpenAI since the user is wearing a hoodie, and then gets told that the announcement has to do with the AI — it is the AI. It reacts with a voice that sounds more emotive.

OpenAI also announced the desktop version of ChatGPT, and a new and improved user interface.

In addition to GPT-4o and ChatGPT, OpenAI's other products include its AI-powered image generator DALL-E , its unreleased text-to-video generator Sora , and its GPT app store.

You can catch up on our liveblog of the event below.

That’s a wrap! OpenAI concludes the event without an appearance from Altman.

OpenAI says text and image input for GPT-4o-powered ChatGPT is launching today. Meanwhile, voice and video options will drop in the coming weeks, the company said.

Although Altman didn't step in front of the camera, the CEO posted videos from the audience on X.

He also teases "more stuff to share soon."

GPT-4o can also break down charts

The new AI model can interact with code bases, the OpenAI execs say. The next demo shows it analyzing a chart from some data.

It's a plot of global temperatures. GPT-4o gives some takeaways from what it sees, and CTO Mira Murati asks about the Y axis, which the AI explains.

ChatGPT reads human emotions — with a stumble

For the last live demo of the day, Zoph holds his phone up to his face and asks ChatGPT to tell him how he looks. Initially, it identifies him as a "wooden surface" — a reference to an earlier photo he had shared.

But after a second try, the model gives a better answer.

"It looks like you're feeling pretty happy and cheerful," ChatGPT says, noting the small smile on Zoph's face.

In one of the final tests, ChatGPT becomes a translator

In response to a request from an X user, Murati speaks to ChatGPT in Italian.

In turn, the bot translates her query into English for Zoph and Chen.

"Mike, she wonders if whales could talk, what would they tell us?" she said in English after hearing Murati's Italian.

It's pretty impressive.

The video demo shows how it could help with math homework, including basic linear algebra

OpenAI Research Lead Barret Zoph walks through an equation on a whiteboard (3x+1=4), and ChatGPT gives him hints as he finds the value of x — making it basically a real-time math tutor.

At the beginning, the bot jumped the gun.

"Whoops, I got too excited," it said after it tried to solve the math problem hadn't been uploaded yet.

But it then walked him through each step, recognizing his written work as he tried to solve the equation.

It was able to recognize math symbols, and even a heart.

OpenAI's first demo: Talking to GPT-4o

It's demo time!

The new bot has a voice that sounds like an American female, but no word yet if you can change it.

OpenAI Research Lead Mark Chen pulled out ChatGPT on his phone and asks for advice on giving a live presentation using Voice Mode.

"Mark, you're not a vacuum cleaner," it responds when he hyperventilates, appearing to perceive his nervousness. It then tells him to moderate his breathing.

Some big changes, you can interrupt the AI now, and there shouldn't be the usual 2 or 3-second delay with GPT-4o.

It can also detect emotion, according to OpenAI.

GPT-4o will have improved voice capabilities

Murati emphasizes the necessity of safety with the real-time voice and audio capabilities of the new GPT-4o model.

She says OpenAI is "continuing our iterative deployment to bring all the capabilities to you."

Murati says the big news is a "new flagship model" called GPT-4o.

The new model is called GPT-4o, and Murati says that OpenAI is making a "huge step forward" with ease of use with the new model.

It's free for users, and "allows us to bring GPT-4 class intelligence to our free users," Murati says.

And we're off!

The livestream began with CTO Mira Murati at OpenAI's offices.

OpenAI is going to be announcing 3 things today, she says. "That's it."

For those who want to watch live, you can view the whole event here.

OpenAI will be livestreaming its spring update, which kicks off in less than an hour.

Axel Springer, Business Insider's parent company, has a global deal to allow OpenAI to train its models on its media brands' reporting.

Main content

an image, when javascript is unavailable

Amazon Breaks News, Dazzles Advertisers in Star-Studded First Upfront Presentation

By Joe Otterson

Joe Otterson

TV Reporter

‘Silk: Spider Society’ Live-Action Series No Longer Moving Forward at Amazon 2 days ago
‘Thundermans’ Spinoff Series Set at Nickelodeon, Paramount+ 2 days ago
‘Shogun’: FX Developing Two New Seasons With Estate of Original Author James Clavell 2 days ago

Amazon Prime Video made its first upfront presentation to advertisers on Tuesday in New York, with the streamer bringing out some of its biggest stars to break some news while touting its original series, film and sports offerings.

Amazon took over Pier 36 in Manhattan, which included a large installation dedicated to Amazon shows like “Fallout” and “The Summer I Turned Pretty” as well as movies like “Road House” and their various sports offerings like “Thursday Night Football.”

Popular on Variety

Alicia Keys (making sure to promote her new skincare brand Keys Soulcare, available on Amazon Premium Beauty, naturally) opened the show with a medley of popular tunes, including “No One” and and “Empire State of Mind (Part II).”

Then Prime Video/Amazon MGM Studios senior VP Mike Hopkins welcomed the audience and gave his pitch. Amazon MGM Studios head Salke took the stage next and revealed several announcements while bringing a parade of stars to the stage.

Leading into the presentation, Amazon had already made a number of major news announcements, including: Nicolas Cage starring in their Spider-Man Noir live-action series ; “Mr. And Mrs. Smith” getting renewed for Season 2; “The Boys” getting renewed for Season 5; and the first teaser for the Alex Cross series .

Also revealed: The stars and creator of “The Summer I Turned Pretty” made an appearance, announcing the third season of the YA series would not debut until 2025, but also that it would consist of 11 episodes instead of the seven for its first season and eight for its second.

That was all before Amazon got to their sports programming, including the upcoming debut of NASCAR on Prime Video on top of the streamer’s NFL presence. Dale Earnhardt Jr. took the stage to discuss the NASCAR coverage, which will include a docuseries about his father, racing legend Dale Earnhardt. Then tennis legend Roger Federer came out in support of his feature documentary “Roger Federer: 12 Final Days.”

The list goes on.

Amazon also continued the trend threading its way through this year’s upfronts — the prominent placement of movies. On top of Ferrell and Witherspoon’s presence for “You’re Cordially Invited” and Gyllenhaal for “Road House,” Ritchson talked up his upcoming holiday movie “The Man With the Bag” in which he co-stars with Arnold Schwarzenegger. Salke also mentioned upcoming Amazon originals like “Play Dirty” with Mark Wahlberg and the action comedy “Heads of State” starring Idris Elba, Priyanka Chopra-Jonas, and John Cena.

In the end, Salke saved one last surprise : Witherspoon came out again to reveal that a “ Legally Blonde ” prequel about the high school years of Elle Woods has been ordered to series at Prime Video. Currently titled “Elle,” the logline for the series states that it “follows Elle Woods in high school as we learn about the life experiences that shaped her into the iconic young woman we came to know and love in the first ‘Legally Blonde’ film.”

All in all, not a bad way to make your first upfront appearance.

More From Our Brands

Jake gyllenhaal remembers hosting ‘snl’ all too well, inside the hidden world of private clubs and vip perks at america’s top sports arenas, pga championship prize money up 6% to $18.5 million, the best loofahs and body scrubbers, according to dermatologists, joshua jackson: abc’s doctor odyssey cruise ship sudser is ‘ryan murphy at his outrageous best’, verify it's you, please log in.

The Definitive Voice of Entertainment News

Subscribe for full access to The Hollywood Reporter

site categories

‘tv’s top 5’: the upfronts wrap-up edition.

This week’s podcast breaks down all the news and trends from a wild week of presentations.

By Lesley Goldberg

Lesley Goldberg

Television Editor, West Coast

Share this article on Facebook
Share this article on Twitter
Share this article on Flipboard
Share this article on Email
Show additional share options
Share this article on Linkedin
Share this article on Pinit
Share this article on Reddit
Share this article on Tumblr
Share this article on Whatsapp
Share this article on Print
Share this article on Comment

Welcome to the 259th episode of TV’s Top 5 , The Hollywood Reporter’ s TV podcast.

Every week, hosts Lesley Goldberg (West Coast TV editor) and Daniel Fienberg (chief TV critic) break down the latest TV news with context from the business and critical sides, welcome showrunners, executives and other guests, and provide a critical guide of what to watch (or skip, as the case may be).

Here’s how this week’s episode plays out:

THR Newsletters

More from The Hollywood Reporter

André holland on the tough conversations he had to portray huey p. newton in ‘the big cigar’, jeremy renner recalls falling asleep filming ‘mayor of kingstown’ after accident: “worked me too hard”, bill maher says he doesn’t understand harrison butker’s graduation speech criticism, ‘doctor who’: steven moffat talks algorithms, easter eggs and that explosive casting reveal, diane ford, stand-up comic on hbo specials and ‘an evening at the improv,’ dies at 68, jessica biel says she was ready to quit hollywood if ‘the sinner’ didn’t sell.

IMAGES

PPT
Presentation slides using HTML and CSS
PPT
PPT
HTML Vs CSS PowerPoint Presentation Slides
PPT

VIDEO

12th Tamil Paper Presentation Tips
JavaScript Animated Presentation Slides
Presentation: Work faster than ever with structured content
CSS basics, a quick introduction
Create a “PowerPoint” Like Presentation Using Pure CSS3
Using a JavaScript slideshow template from w3Schools

COMMENTS

The HTML presentation framework
Create Stunning Presentations on the Web. reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your ...
How to Create Presentation Slides With HTML and CSS
All these features will be enabled with JavaScript. Inside js/index.js, we'll begin by storing references to the presentation wrapper, the slides, and the active slide: 1. let slidesParentDiv = document.querySelector('.slides'); 2. let slides = document.querySelectorAll('.slide'); 3.
How To Build A Captivating Presentation Using HTML, CSS, & JavaScript
Making a Presentation. Copy an existing presentation folder; Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2) Making a Slide. Making a slide is pretty simple. Just add a HTML section. <section>  </section> inside the span with the class of "prez-root". Also keep in mind ...
How to Create Beautiful HTML & CSS Presentations with WebSlides
Getting Started with WebSlides. To get started, first download WebSlides. Then, in the root folder, create a new folder and call it presentation. Inside the newly created presentation folder ...
GitHub
reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com. The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax ...
How to Create a Slideshow with HTML, CSS, and JavaScript
The first step to changing which slides show is to select the slide wrapper (s) and then its slides. When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval. Keep it in mind that when you remove an active ...
reveal.js
A framework for easily creating beautiful presentations using HTML. Reveal.js HTML Presentations Made Easy. Created by Hakim El Hattab / @hakimel. Heads Up. ... Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare. Take a Moment.
WebSlides: Create Beautiful HTML Presentations
WebSlides is really easy. Each parent <section> in the #webslides element is an individual slide.. Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast.
Create Presentation Slides with HTML and CSS
HTML/CSS. As I sifted through the various pieces of software that are designed for creating presentation slides, it occurred to me: why learn yet another program, when I can instead use the tools that I'm already familiar with? With a bit of fiddling, we can easily create beautiful presentations with HTML and CSS. I'll show you how today!
Build and Publish a Presentation with RevealJS and Github
Here's one of the slides from our presentation now with moon theme applied: It's also possible to create a custom theme. Slide Transitions. Up until now, we've been dealing with the HTML and CSS. But to further customize the presentation, there's a <script> section at the bottom of index.html where the framework gets initialized. Here you can ...
5 of the Best Free HTML5 Presentation Systems
Google Slides Template. As you'd expect, Google has their own HTML5 presentation template (as well as the one offered in Google Docs ). It's fairly basic when compared to Reveal.js or Impress ...
Create Incredible Web Presentations with Reveal.js
Reveal.js is an open-source HTML presentation framework. Anyone with a web browser can use it to make attractive presentations for free. The program allows anyone with a web browser to create fully-featured and interactive presentations that support CSS 3D transforms, nested slides, and a variety of other capabilities.It is recommended for those interested in programmable techniques and web ...
How To Create a Slideshow
Learn the basics of HTML in a fun and engaging video tutorial. Templates. We have created a bunch of responsive website templates you can use - for free! Web Hosting. Host your own website, and share it to the world with W3Schools Spaces. Create a Server. Create your own server using Python, PHP, React.js, Node.js, Java, C#, etc. ...
Top 9 JavaScript frameworks to create beautiful presentation slides
Impress (37.3k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides.
GitHub
WebSlides = Create stories with Karma. Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — https://webslides.tv/demos.
Presentation Slides with HTML, CSS and JS
About HTML Preprocessors. HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. ... // get elements let presentation = document.querySelector(".presentation"); let slides = document.querySelectorAll(".slide ...
Reveal JS
Today I'm starting a series of short videos on Reveal.js, an HTML Presentation Framework for making beautiful web presentations. In this first video, we'll l...
10 Best HTML Presentation Frameworks In JavaScript (2024 Update)
Best Vanilla JS HTML Presentation Frameworks Beautiful HTML Presentation Library - reveal.js. reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. Presentations made with reveal.js are built on open web technologies.
Reveal JS
This series of short videos explores Reveal.js, an HTML Presentation Framework for making beautiful web presentations. In this fourth video, we'll look at ad...
html-presentation · GitHub Topics · GitHub
Add this topic to your repo. To associate your repository with the html-presentation topic, visit your repo's landing page and select "manage topics." GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
Embed a PowerPoint presentation into HTML
In the power point presentation click Save As and select GIF. Pick the quality you want to display the presentation at. Power Point will save one GIF image for each slide and name them Slide1.GIF, Slide2.GIF, etc..... Create a HTML page and add a image tag to display the Power point GIF images.
HTML BASICS Slides Presentation
HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine.
How to Convert PowerPoint Presentations to HTML: A Step-by-Step Guide
Step 4: In the 'Save as type' dropdown, select 'Web Page'. From the 'Save as type' dropdown menu, select 'Web Page' or a similar option depending on your version of PowerPoint. This step is crucial as selecting the 'Web Page' format is what converts your presentation into HTML. There may be different naming for this option ...
New Mom's Presentation With 'Rules' for Friends and Family ...
The PowerPoint presentation that Kirsten gave to her friends and family, two months before welcoming her son last year. The rules included no kissing, wearing face masks, no passing the baby ...
Goodfellas Boards Sales On Chie Hayakawa's 'Renoir ...
EXCLUSIVE: Goodfellas has acquired world sales rights for Japanese filmmaker Chie Hayakawa 's Tokyo-set drama Renoir ahead of the project's presentation in the Investors Circle event at the ...
Sen. Bob Menendez reveals his wife has breast cancer as presentation of
NEW YORK (AP) — Sen. Bob Menendez said Thursday that his wife will undergo a mastectomy after she was diagnosed with breast cancer, a revelation made just as the first evidence — pictures of 13 gold bars and over $480,000 in cash seized from the couple's home — was shown to jurors at his New York bribery trial. The New Jersey Democrat said he was revealing his wife's health crisis at ...
Google shows off astonishing vision for how AI will work with Gmail
A day after OpenAI impressed with a startlingly improved ChatGPT AI model, Google showed off an equally stunning vision for how AI will improve the products that billions of people use every day.
OpenAI's Big Event: New GPT-4o Model Announced
OpenAI is reportedly planning to eventually with its own AI-powered search product. But the big news on Monday was OpenAI's new flagship AI model, GPT-4o, which will be free to all users and "can ...
Amazon Pulls Out All the Stops in Star-Studded Upfront Presentation
Amazon Prime Video made their first upfront presentation to advertisers on Tuesday, with the streamer making a big splash via a star-studded event.
Upfronts 2024: Break Down of All the News, Trends
By Lesley Goldberg. May 17, 2024 5:00am. Reese Witherspoon and "Bruiser" during the Amazon upfront presentation Slaven Vlasic/Getty Image. Welcome to the 259th episode of TV's Top 5, The ...

The HTML Presentation Framework

Hello There

Vertical Slides

Basement Level 1

Basement Level 2

Pretty Code

Even Prettier Animations

Auto-Animate

Touch Optimized

Fragment Styles

Transition Styles

Slide Backgrounds

Image Backgrounds

Iframe Backgrounds

Marvelous List

Fantastic Ordered List

Tabular Tables

Intergalactic Interconnections

Speaker View

Export to PDF

Global State

State Events

Take a Moment

Create Stunning Presentations on the Web

Ready to Get Started?

Online Editor

Supporting reveal.js

DEV Community

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Built-In Themes

Changing The Theme

Custom Themes

Creating A Custom Theme

Mixins & Settings

Vertical Slides

Transitions

Top comments (18)

SBCompSciClub / prez-software

Run on Dev Server

Making a Presentation

Making a Slide

Adding Text

It’s not just you, Next.js is getting harder to use

Release of Node.js 22 [Live] What is new?!

JavaScript Histogram of Gaussian Distribution

Witty Works scales their AI-augmented DEI solution with a new PaaS 💚

How to Create a Slideshow with HTML, CSS, and JavaScript

Write some markup

Change the slides in a time interval.

Codepen example following this tutorial

HTML Presentations Made Easy

Vertical Slides

Basement Level 1

Basement Level 2

Point of View

Works in Mobile Safari

Marvelous Unordered List

Fantastic Ordered List

Transition Styles

Global State

Custom Events

Slide Backgrounds

Image Backgrounds

Background Transition Override

Clever Quotes

Pretty Code

Intergalactic Interconnections

Fragmented Views

Fragment Styles

Spectacular image!

Take a Moment

Stellar Links

BY Hakim El Hattab / hakim.se

Build and Publish a Presentation with RevealJS and Github

You may also like...

5 of the Best Free HTML5 Presentation Systems

Google Slides Template

What are the key features to look for in an HTML5 presentation system?

How does HTML5 improve the presentation experience compared to traditional methods?

Are HTML5 presentations compatible with all browsers?