create html presentation

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

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

Creating your own UI extension points in Umbraco v14 - Part 1: The Basics

Matt Brailsford - Apr 2

Coder's Journey

Rahul Sharma - Apr 2

API Routes in Next.js - Part 4

Pratham Dupare - Apr 2

Tabs Component with RiotJS (Material Design)

Steeve - Apr 1

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

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

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 background.

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

WebSlides Demos

All of these presentations are free and responsive. 40+ components with a solid CSS architecture .

Share your slides using #WebSlides .

Why WebSlides?

General Questions

WebSlides Documentation: Components · Classes · Media .

Why WebSlides? Good karma

There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.

Is WebSlides a framework?

We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic structural components and a scalable CSS architecture .

What can you do with WebSlides?

WebSlides is a cute solution for making HTML presentations, landings, and portfolios. Put content wherever you want , add background images, videos ...

How easy is WebSlides?

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

Loved by designers and developers.

Some of the most famous brands are using WebSlides.

"WebSlides has pushed the keynotes to a new limit. Fantastic work!" Javi Pérez .

"I was immediately thrilled by the simplicity of WebSlides. This is absolutely great." Henrik Ståhl .

"Please make this a trend. The coolest thing I've seen so far in 2017." Austin Guevara .

Start in seconds

Create your own presentation instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

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.

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

Build a Twitter clone with Strapi

{post.frontmatter.excerpt}

Enable text translation between any pair of languages

Sep 5, 2022, 7 min read

Build a Text Translator using React and Swagger UI

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]

Mastering reveal.js

This video course that will teach you how to everything you need to know to create great looking presentations with reveal.js.

We'll start from the basics of installing reveal.js, creating slides and configuring your presentation. Then we'll work our way up to more interesting topics like presenting syntax highlighted code, animating slide content with Auto-Animate and using the speaker view. In the advanced videos we'll explore the reveal.js JavaScript API, plugin creation and how to customize keyboard bindings. (See full list of videos .)

Who is this for?

The course is aimed at people who are new to reveal.js as well as those of you who already understand the fundamentals but are ready to explore the full feature set.

You'll need to have a basic understanding of HTML, CSS and JavaScript. HTML is the backbone of reveal.js and used extensively throughout the course. CSS and JavaScript are mostly used for advanced videos on topics such as creating custom themes, working with the reveal.js API and editing the source code.

Who is presenting?

👋 I'm Hakim—a Swedish front-end developer and the creator of reveal.js. I co-founded and am currently working on Slides.com —a presentation platform and graphical editor built on top of reveal.js. Beyond that I love to work on visual demos and experiments at hakim.se .

I released the first version of reveal.js 10 years ago (!) and couldn't have imagined that it would eventually grow to be used by hundreds of thousands of people. I hope you'll join in and experience first hand why so many choose to create their presentations with reveal.js!

5h 39m total runtime
Stream in HD
Download in 4K
Free updates

The course is sold via Gumroad . VAT is added at the time of purchase, if applicable. 100% money back if the course isn't a good fit for you—no questions asked.

The course is divided into relatively short videos so that you can easily skip topics that aren't relevant to you or that you are already familiar with. The total runtime is 5.5 hours.

Slides.com — the reveal.js presentation editor.

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

Create beautiful stories

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

Why WebSlides?

Presentations , landings , portfolios , and longforms .

An opportunity to engage.

WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

Work better, faster.

Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

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 .

→ Simple Navigation

Slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides demos.

Contribute on Github . View all ›

Apple Keynote

If you need help, here's just three tutorials. Just a basic knowledge of HTML is required:

WebSlides Components .
WebSlides Classes .
WebSlides Media: images, videos...

Built to expand

The best way to inspire with your content is to connect on a personal level:

Background images: Unsplash .
CSS animations: Animate.css .
Longforms: Animate on scroll .

Ready to Start?

Create your own presentation instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

Best, @jlantunez , @belelros , and @luissacristan .

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 Aug 9, 2019

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."

Working as a Senior Fullstack Developer at Yummy Publishing (previously valantic , Sulu and MASSIVE ART ), lecturing at the Vorarlberg University of Applied Sciences , founded and co-organizing the VlbgWebDev meetup , used to co-organize AgentConf .

Creating highly customizable HTML presentations with markdown and pandoc

Update 2021-02-28 : Instead of just having the template I have extracted a markdown-presentation package , which is used by the accordingly updated presentation-template . This allows to adjust styling just once and have it in all my presentations, after updating the package using git submodules. I also got rid of the graphviz integration and adjusted the Makefile , so that dot is only used if the files changed since the last generation, which allowed to shorten the build time by a lot if diagrams have already been generated. Read more about this extraction and the improved build step in another blog .

Warning : This is a rather long blog post explaining also some details. If you are just interested in the end result you might want to jump the the conclusion right away

I love markdown . It’s super easy to write, and also very easy to read, making it a great tool to write e.g. blogs like this one. Since markdown is written using plain text files, it has another bunch of advantages too:

It can be easily versioned using other tools like git
It is guaranteed that the content will still be accessible in many years, without worrying about file format incompatabilities
Tools like pandoc enable us to convert it to many different output files

I have especially fallen in love with pandoc, so that I ended up also writing my master thesis using markdown and pandoc. And of course as a daily GitHub user I am using markdown a lot. It is used when writing issues, PRs, comment on any of these things and even in repositories markdown files are parsed and shown nicely formatted. GitHub has even created its own flavour of markdown and a guide on mastering markdown , another indicator of the importance of this language to this company.

Then I stumbled upon this tweet of Max Stoiber , which sounded interesting. A NPM package that allows to write slides in markdown and afterwards serve them via a webserver using Gatsby under the hood.

How to quickly create a talk from scratch 🔥 Write outline with markdown Install mdx-deck by @jxnblk Add — and in the right places to split outline into slides Done! It does not get faster than presenting your outline 💯 — Max Stoiber ( @mxstbr ) December 1, 2019

First steps with mdx-deck and its obstacles

That sounded great, so I decided to give it a try. The setup went really smooth, and it didn’t take very long to create the first slides. There was an annoying issue that crashed the watch mode , but they seemed to be working on that, so I still decided to give it a try and used it to create the slides for a React lecture I am currently giving. It worked quite well at the start, but it always felt a little bit strange… Probably the weirdest thing for me as a minimalist was that a lot of functionality required to put some JavaScript into the markdown file, which I so desperately wanted to keep clean:

MDX allows to render React components in markdown
Using themes requires an import and export statement in markdown

The pure concept of having any kind of code in a human-readable file format — except if the code itself is what you are writing about — gave me a very bad gut feeling. It eliminated 2 out of 3 advantages I initially mentioned! However, I accepted it for quite some time, but then more issues piled up:

For some reason the watch task only reacted on the first change I made to a file. Subsequent changes were ignored.
Starting the build or watch task took almost half a minute.
I was not able to set a padding on code blocks in the presentation. Somehow the used syntax highlighter added some inline styling I was not able to override (not even with !important ).

All of this was very annoying, but embedding images was the final straw. I wanted to do it the markdown way:

But that does not seem to work with mdx-deck. A tool for preparing presentation slides, that did not even support embedding images? To be fair, there was a workaround suggested , but importing the image and writing the img tag on my own in my markdown file was not acceptable to me. I’ve had accepted (for some reasons I don’t understand anymore) the use of JavaScript in other places mentioned above, but using JavaScript to embed an image was just too much for me.

As a JavaScript developer it felt great to use the tools we are using every day to also deliver presentations. But at this point it just seemed way to bloated for a relatively easy task. And then it hit my mind: Why don’t I use pandoc, which I also liked when writing my thesis? So I took about 1.5 hours (right before my lecture) and decided to give it a try. And that was enough time to come up with a solution, that was almost as good as mdx-deck, but I didn’t have to pollute my markdown with JavaScript code. As a nice side effect the complete build of the same presentation takes now 300ms instead of almost 30s (sic!). Minimalism wins again!

Using plain markdown, pandoc and a few lines of code instead

I’ve first had a quick look at the pandoc documentation and found a section about producing slide shows . It supports different ways of creating slide shows, but none of them suited me for different reasons. Especially that most of them couldn’t be installed via a package manager was odd. And I certainly didn’t want to own the code and copy it into my repository. Additionally, when you think about it, producing a HTML slide show is not very hard. Basically it is styling it in some way that a slide fits exactly the size of the screen, and two event handlers to navigate to the next or previous slides. So I’ve decided to build that on my own and published it as a presentation-template on GitHub . I am still going to run through the most important points.

First of all I had to convert the file I called slides.md written using pandoc’s flavour of markdown to HTML. This is as easy as executing the following command — assuming you have pandoc already installed:

The pandoc command takes the name of the markdown file as first parameter, and will automatically recognize to which format it should be converted by checking the file extension of the -o option representing the output file. Usually pandoc would only create a document fragment, but by adding the -s flag it will also include everything a proper HTML document needs, like html , head and body tags. In order to distribute the file without much hassle I have added the --self-contained flag, which will cause to inline all styles and scripts instead of just referencing them. The --section-divs will wrap every header in markdown in a section tag along with its content. So everything until the next heading of the same level will be included in that section . This is an enormous help when trying to style the presentation! Finally the -c option refers to the file containing the CSS, which is called slides.css in my case and does not contain anything except for plain old CSS, and the -A option to inject another HTML file called slides_before_body.html right before the closing body tag. All this HTML file contains is a few lines of JavaScript, which enable the user of the presentation to go back and forth using the arrow keys. For this it will collect all section tags with an id , so that they can be used as an anchor by just setting the fragment of the URL . It will also add an empty fragment as the first available fragment, because the title slide does not get it’s own section .

So by just using three different files ( slides.md , slides.css and slides_before_body.html ) and the pandoc command we already have a pretty nice HTML presentation, which — unless for the HTML markup at which pandoc does an excellent job — we have full control over. There is no third party script adding some inline styles that causes troubles when styling the presentation, and building the presentation is a matter of a few hundreds milliseconds instead of waiting for half a minute. This even makes the watch task obsolete, especially because it is also easily possible to grasp the structure of the presentation when looking at the markdown source as well.

I could have stopped there, but there was one more thing I was really keen on including into my presentation-template, so that I digged bit deeper and invested about 2 more hours: I wanted to be able to include diagrams in my markdown file by using the dot language of graphviz . You can imagine the dot language to be the markdown of diagrams, using an easy-to-write and easy-to-read syntax to describe diagrams. Since it is so easy-to-read, it felt like the perfect candidate for being embedded in markdown. I imagined that somehow like this:

And after asking on StackOverflow if this was possible, I was redirected to the diagram-generator lua-filter . It looked very promising, but it did a little bit more than I needed, and since I like to keep things minimal I’ve copied it and adjusted it:

This code will convert all fenced code blocks with the graphviz annotation you’ve seen in my example above into a SVG string, which in turn can be embedded in the HTML element. Awesome!

All that was left to do was to include this filter in the pandoc command using the --lua-filter option:

Since this command is not that rememberable I went old school and put it into a Makefile . Writing such a Makefile is not that hard, and make is installed on almost every linux machine anyway.

So in conclusion it took me maybe 4 hours to find solution, which is probably less time I already tried to work around some issues of mdx-deck. Summarized this solution also has other advantages:

Performance is a lot better (build time of 300ms compared to 27s) making a watch task obsolete
Fully customizable by CSS, with the only conflicts being the ones you generate on your own
About 20 lines of JavaScript allow to navigate through the presentation using the arrow keys
About 30 lines of Lua allow to inline graphviz documents and include them as inlined SVG into the presentation

I have to admit that I had to include a few lines of code in the presentation-template, but it is not much. And, more importantly, it is outside of my markdown file, and that’s where it belongs.

Feel free to have a look at my presentation-template and adjust it to your needs.

SUGGESTED TOPICS
The Magazine
Newsletters
Managing Yourself
Managing Teams
Work-life Balance
The Big Idea
Data & Visuals
Reading Lists
Case Selections
HBR Learning
Topic Feeds
Account Settings
Email Preferences

How to Make a “Good” Presentation “Great”

Guy Kawasaki

Remember: Less is more.

A strong presentation is so much more than information pasted onto a series of slides with fancy backgrounds. Whether you’re pitching an idea, reporting market research, or sharing something else, a great presentation can give you a competitive advantage, and be a powerful tool when aiming to persuade, educate, or inspire others. Here are some unique elements that make a presentation stand out.

Fonts: Sans Serif fonts such as Helvetica or Arial are preferred for their clean lines, which make them easy to digest at various sizes and distances. Limit the number of font styles to two: one for headings and another for body text, to avoid visual confusion or distractions.
Colors: Colors can evoke emotions and highlight critical points, but their overuse can lead to a cluttered and confusing presentation. A limited palette of two to three main colors, complemented by a simple background, can help you draw attention to key elements without overwhelming the audience.
Pictures: Pictures can communicate complex ideas quickly and memorably but choosing the right images is key. Images or pictures should be big (perhaps 20-25% of the page), bold, and have a clear purpose that complements the slide’s text.
Layout: Don’t overcrowd your slides with too much information. When in doubt, adhere to the principle of simplicity, and aim for a clean and uncluttered layout with plenty of white space around text and images. Think phrases and bullets, not sentences.

As an intern or early career professional, chances are that you’ll be tasked with making or giving a presentation in the near future. Whether you’re pitching an idea, reporting market research, or sharing something else, a great presentation can give you a competitive advantage, and be a powerful tool when aiming to persuade, educate, or inspire others.

Guy Kawasaki is the chief evangelist at Canva and was the former chief evangelist at Apple. Guy is the author of 16 books including Think Remarkable : 9 Paths to Transform Your Life and Make a Difference.

Partner Center

How-To Geek

6 ways to create more interactive powerpoint presentations.

Engage your audience with cool, actionable features.

Quick Links

Add a QR code
Embed Microsoft Forms (Education or Business Only)
Embed a Live Web Page
Add Links and Menus
Add Clickable Images to Give More Info
Add a Countdown Timer

We've all been to a presentation where the speaker bores you to death with a mundane PowerPoint presentation. Actually, the speaker could have kept you much more engaged by adding some interactive features to their slideshow. Let's look into some of these options.

1. Add a QR code

Adding a QR code can be particularly useful if you want to direct your audience to an online form, website, or video.

Some websites have in-built ways to create a QR code. For example, on Microsoft Forms , when you click "Collect Responses," you'll see the QR code option via the icon highlighted in the screenshot below. You can either right-click the QR code to copy and paste it into your presentation, or click "Download" to add it to your device gallery to insert the QR code as a picture.

In fact, you can easily add a QR code to take your viewer to any website. On Microsoft Edge, right-click anywhere on a web page where there isn't already a link, and left-click "Create QR Code For This Page."

You can also create QR codes in other browsers, such as Chrome.

You can then copy or download the QR code to use wherever you like in your presentation.

2. Embed Microsoft Forms (Education or Business Only)

If you plan to send your PPT presentation to others—for example, if you're a trainer sending step-by-step instruction presentation, a teacher sending an independent learning task to your students, or a campaigner for your local councilor sending a persuasive PPT to constituents—you might want to embed a quiz, questionnaire, pole, or feedback survey in your presentation.

In PowerPoint, open the "Insert" tab on the ribbon, and in the Forms group, click "Forms". If you cannot see this option, you can add new buttons to the ribbon .

As at April 2024, this feature is only available for those using their work or school account. We're using a Microsoft 365 Personal account in the screenshot below, which is why the Forms icon is grayed out.

Then, a sidebar will appear on the right-hand side of your screen, where you can either choose a form you have already created or opt to craft a new form.

Now, you can share your PPT presentation with others , who can click the fields and submit their responses when they view the presentation.

3. Embed a Live Web Page

You could always screenshot a web page and paste that into your PPT, but that's not a very interactive addition to your presentation. Instead, you can embed a live web page into your PPT so that people with access to your presentation can interact actively with its contents.

To do this, we will need to add an add-in to our PPT account .

Add-ins are not always reliable or secure. Before installing an add-in to your Microsoft account, check that the author is a reputable company, and type the add-in's name into a search engine to read reviews and other users' experiences.

To embed a web page, add the Web Viewer add-in ( this is an add-in created by Microsoft ).

Go to the relevant slide and open the Web Viewer add-in. Then, copy and paste the secure URL into the field box, and remove https:// from the start of the address. In our example, we will add a selector wheel to our slide. Click "Preview" to see a sample of the web page's appearance in your presentation.

This is how ours will look.

When you or someone with access to your presentation views the slideshow, this web page will be live and interactive.

4. Add Links and Menus

As well as moving from one slide to the next through a keyboard action or mouse click, you can create links within your presentation to direct the audience to specific locations.

To create a link, right-click the outline of the clickable object, and click "Link."

In the Insert Hyperlink dialog box, click "Place In This Document," choose the landing destination, and click "OK."

What's more, to make it clear that an object is clickable, you can use action buttons. Open the "Insert" tab on the ribbon, click "Shape," and then choose an appropriate action button. Usefully, PPT will automatically prompt you to add a link to these shapes.

You might also want a menu that displays on every slide. Once you have created the menu, add the links using the method outlined above. Then, select all the items, press Ctrl+C (copy), and then use Ctrl+V to paste them in your other slides.

5. Add Clickable Images to Give More Info

Through PowerPoint's animations, you can give your viewer the power to choose what they see and when they see it. This works nicely whether you're planning to send your presentation to others to run through independently or whether you're presenting in front of a group and want your audience to decide which action they want to take.

Start by creating the objects that will be clickable (trigger) and the items that will appear (pop-up).

Then, select all the pop-ups together. When you click "Animations" on the ribbon and choose an appropriate animation for the effect you want to achieve, this will be applied to all objects you have selected.

The next step is to rename the triggers in your presentation. To do this, open the "Home" tab, and in the Editing group, click "Select", and then "Selection Pane."

With the Selection Pane open, select each trigger on your slide individually, and rename them in the Selection Pane, so that they can be easily linked to in the next step.

Finally, go back to the first pop-up. Open the "Animations" tab, and in the Advanced Animation group, click the "Trigger" drop-down arrow. Then, you can set the item to appear when a trigger is clicked in your presentation.

If you want your item to disappear when the trigger is clicked again, select the pop-up, click "Add Animation" in the Advanced Animation group, choose an Exit animation, and follow the same step to link that animation to the trigger button.

6. Add a Countdown Timer

A great way to get your audience to engage with your PPT presentation is to keep them on edge by adding a countdown timer. Whether you're leading a presentation and want to let your audience stop to discuss a topic, or running an online quiz with time-limit questions, having a countdown timer means your audience will keep their eye on your slide throughout.

To do this, you need to animate text boxes or shapes containing your countdown numbers. Choose and format a shape and type the highest number that your countdown clock will need. In our case, we're creating a 10-second timer.

Now, with your shape selected, open the "Animations" tab on the ribbon and click the animation drop-down arrow. Then, in the Exit menu, click "Disappear."

Open the Animation Pane, and click the drop-down arrow next to the animation you've just added. From there, choose "Timing."

Make sure "On Click" is selected in the Start menu, and change the Delay option to "1 second," before clicking "OK."

Then, with this shape still selected, press Ctrl+C (copy), and then Ctrl+V (paste). In the second box, type 9 . With the Animation Pane still open and this second shape selected, click the drop-down arrow and choose "Timing" again. Change the Start option to "After Previous," and make sure the Delay option is 1 second. Then, click "OK."

We can now use this second shape as our template, as when we copy and paste it again, the animations will also duplicate. With this second shape selected, press Ctrl+C and Ctrl+V, type 8 into the box, and continue to do the same until you get to 0 .

Next, remove the animations from the "0" box, as you don't want this to disappear. To do this, click the shape, and in the Animation Pane drop-down, click "Remove."

You now need to layer them in order. Right-click the box containing number 1, and click "Bring To Front." You will now see that box on the top. Do the same with the other numbers in ascending order.

Finally, you need to align the objects together. Click anywhere on your slide and press Ctrl+A. Then, in the Home tab on the ribbon, click "Arrange." First click "Align Center," and then bring the menu up again, so that you can click "Align Middle."

Press Ctrl+A again to select your timer, and you can then move your timer or copy and paste it elsewhere.

Press F5 to see the presentation in action, and when you get to the slide containing the timer, click anywhere on the slide to see your countdown timer in action!

Now that your PPT presentation is more interactive, make sure you've avoided these eight common presentational mistakes before you present your slides.

Skip to top navigation
Skip to side navigation
Skip to content
Skip to footer

Tables in Drupal

General rules with tables.

HTML tables allow web developers to arrange data into rows and columns. Tables should not be used for display purposes, which should instead use flexbox or grid.

Don't overly specify width for the table or individual columns, which can cause display to break unexpectedly. Instead let the table be the size determined by the content within it.
Always add a caption to the table
Always have table headers over columns and, if needed, rows
Use the tbstriped class to add styling to the table
Use scope to associate table headers with cells in complex tables.
Large tables behave very poorly on mobile devices, breaking that page display.

Parts of a table

Below are the elements used to create tables. It's useful to know the basics of these, since sometimes the only way to fix problems with tables is to work in the code view.

<table> - Opening table creates the table
<caption> - caption above the table, describes what is in the table
<thead> - header region that contains the header cells
<tbody> - main portion of the table
<th> - table header cells -- extremely important for accessibility
<td> - table cells within the body
scope - an attribute added to header cells to associate the header and tables cells in rows or columns
colspan and rowspan - an attribute used on th or td to span multiple columns or rows

Sample table code

In ckEditor4 you need to right-click within the table (or click on the table icon in toolbar after selecting the table) to access the table tools:

Creating a table with Drupal

The easiest way to create a table is to copy and paste the code from an Excel table into the content editing area. After doing so you'll need to:

Check that styling isn't being brought over from the Excel document. Use the Tx in the toolbar to remove styling.
Ensure that proper headers have been created. To make a row a header click in the row and then left-click and turn on the related header.

And, in ckEditor4:

Difference between copying into a Simple HTML vs. Advanced HTML.

The best results are obtained when the table is pasted into an editor field that is set to Basic HTML rather than Advanced (or Full) HTML. Basic HTML will automatically strip out unneeded styling, which advanced will keep it.

Applying a style to a table

The resulting table with no styling looks like this, which is less than ideal:

The default table styling used throughout Maine.gov is added by adding a class of tbstriped to the table. Some sites have been set up to be able to add this by selecting the table in the editor and then selecting "Styles" and "Table - basic striped". If this isn't available the class will need to be added manually. Here's how:

Click the "Source" button in the editing toolbar and find the opening table tag. It will look like this: <table> (note that very often it will also contain a specified width, cellpadding, and cellspacing, all of which can be removed.) You can add the default styling by changing the table tag to <table class="tbstriped">

And the resulting table looks like this:

Adding a caption to the table

It is best practice to always have a table caption. To do so click on the table in the editor interface.

Accessibility and tables

Simple tables can infer the scope of the header and table cells
https://www.w3.org/WAI/EO/Drafts/tutorials/tables/scope/
Adding scope for complex tables is discussed on https://www.w3.org/WAI/EO/Drafts/tutorials/tables/id-headers/

Adding tables within Drupal

Tables can also be entered manually within the Drupal editing interface. To do so put the cursor where you want the table to be placed and click on the table icon in the toolbar.

In ckEditor5:

In ckEditor4:

Specify the desired number of columns and rows, as well as header cells and caption. Then enter the data into the table manually.

Using tablefield

The new agency template uses the Paragraphs Module to add the ability to add more complex layout options. One of these options use the Tablefield Module to add a Paragraph type called "Tablefield".

Adding a Tablefield to a page adds an editing element like this:

The Admin title is to identify to table when there are multiple collapsed Paragraphs--it doesn't display on the site. The other fields are pretty self-explanatory, but the hidden super-power is to import a CSV file to create a table. Just choose the CSV file and then click the Upload CSV file button.

Tablefield usage notes:

The first row will be a table header row, but there is no way to add row headers or scope, since the table source can't be edited. This is not a great way to create complex and accessible tables.
the tbstriped class will automatically be added.
an Export Table Data button will be added above the table

Tables generated by a view

Views allow all, or selected, entries within a content type to be viewable in a table format. For example, you might have a provider contact list that displays a consistent set of data for each entry. In this case each vendor can be entered in a specific Content Type that contains the required fields.

The a view can be set up using either a plain table or, if the Datatable module is enabled, a Datatable with a search box and pagination.

This is a very powerful way to have multiple displays of the same information, but is relatively complex to set up and should be done by advanced users only.

Adding Datatables or Searchpanes to a static table

Datatables adds the ability to search and paginate a table. Searchpanes adds search and pagination, as well as the ability to add filters. To add this feature to a table add a comment within the source view of the table:

For Datatables:
For Searchpanes:

Both Datatables and Searchpanes need to be initialized using javascript. Details about how to do this are outlined in the documentation linked below.

Both of these features rely on javascript libraries that are well documented and are extremely full-featured, if difficult to implement. For advanced users more information can be found here:

Datatables manual
Searchpanes documentation

Note that there is a wealth of other extensions available for Datatables.

Searchpanes table:

Tables and mobile

Because tables are often wider than the display area available on mobile devices, they should be wrapped inside a div with overflow-x:auto; set, or in Agency Template v4 you can use a class of scroll-table on the containing div. This will allow for side scrolling of the table content without affecting the rest of the page layout.

Generative A.I. Arrives in the Gene Editing World of CRISPR

Much as ChatGPT generates poetry, a new A.I. system devises blueprints for microscopic mechanisms that can edit your DNA.

The physical structure of OpenCRISPR-1, a gene editor created by A.I. technology from Profluent. Credit... Video by Profluent Bio

Supported by

Share full article

By Cade Metz

Has reported on the intersection of A.I. and health care for a decade.

April 22, 2024

Generative A.I. technologies can write poetry and computer programs or create images of teddy bears and videos of cartoon characters that look like something from a Hollywood movie.

Now, new A.I. technology is generating blueprints for microscopic biological mechanisms that can edit your DNA, pointing to a future when scientists can battle illness and diseases with even greater precision and speed than they can today.

Described in a research paper published on Monday by a Berkeley, Calif., startup called Profluent, the technology is based on the same methods that drive ChatGPT, the online chatbot that launched the A.I. boom after its release in 2022 . The company is expected to present the paper next month at the annual meeting of the American Society of Gene and Cell Therapy.

Much as ChatGPT learns to generate language by analyzing Wikipedia articles, books and chat logs, Profluent’s technology creates new gene editors after analyzing enormous amounts of biological data, including microscopic mechanisms that scientists already use to edit human DNA.

These gene editors are based on Nobel Prize-winning methods involving biological mechanisms called CRISPR. Technology based on CRISPR is already changing how scientists study and fight illness and disease , providing a way of altering genes that cause hereditary conditions, such as sickle cell anemia and blindness.

A group of casually dressed people pose on a cement walkway.

Previously, CRISPR methods used mechanisms found in nature — biological material gleaned from bacteria that allows these microscopic organisms to fight off germs.

“They have never existed on Earth,” said James Fraser, a professor and chair of the department of bioengineering and therapeutic sciences at the University of California, San Francisco, who has read Profluent’s research paper. “The system has learned from nature to create them, but they are new.”

The hope is that the technology will eventually produce gene editors that are more nimble and more powerful than those that have been honed over billions of years of evolution.

On Monday, Profluent also said that it had used one of these A.I.-generated gene editors to edit human DNA and that it was “open sourcing” this editor, called OpenCRISPR-1. That means it is allowing individuals, academic labs and companies to experiment with the technology for free.

A.I. researchers often open source the underlying software that drives their A.I. systems , because it allows others to build on their work and accelerate the development of new technologies. But it is less common for biological labs and pharmaceutical companies to open source inventions like OpenCRISPR-1.

Though Profluent is open sourcing the gene editors generated by its A.I. technology, it is not open sourcing the A.I. technology itself.

The project is part of a wider effort to build A.I. technologies that can improve medical care. Scientists at the University of Washington, for instance, are using the methods behind chatbots like OpenAI’s ChatGPT and image generators like Midjourney to create entirely new proteins — the microscopic molecules that drive all human life — as they work to accelerate the development of new vaccines and medicines.

(The New York Times has sued OpenAI and its partner, Microsoft, on claims of copyright infringement involving artificial intelligence systems that generate text.)

Generative A.I. technologies are driven by what scientists call a neural network , a mathematical system that learns skills by analyzing vast amounts of data. The image creator Midjourney, for example, is underpinned by a neural network that has analyzed millions of digital images and the captions that describe each of those images. The system learned to recognize the links between the images and the words. So when you ask it for an image of a rhinoceros leaping off the Golden Gate Bridge, it knows what to do.

Profluent’s technology is driven by a similar A.I. model that learns from sequences of amino acids and nucleic acids — the chemical compounds that define the microscopic biological mechanisms that scientists use to edit genes. Essentially, it analyzes the behavior of CRISPR gene editors pulled from nature and learns how to generate entirely new gene editors.

“These A.I. models learn from sequences — whether those are sequences of characters or words or computer code or amino acids,” said Profluent’s chief executive, Ali Madani, a researcher who previously worked in the A.I. lab at the software giant Salesforce.

Profluent has not yet put these synthetic gene editors through clinical trials, so it is not clear if they can match or exceed the performance of CRISPR. But this proof of concept shows that A.I. models can produce something capable of editing the human genome.

Still, it is unlikely to affect health care in the short term. Fyodor Urnov, a gene editing pioneer and scientific director at the Innovative Genomics Institute at the University of California, Berkeley, said scientists had no shortage of naturally occurring gene editors that they could use to fight illness and disease. The bottleneck, he said, is the cost of pushing these editors through preclinical studies, such as safety, manufacturing and regulatory reviews, before they can be used on patients.

But generative A.I. systems often hold enormous potential because they tend to improve quickly as they learn from increasingly large amounts of data. If technology like Profluent’s continues to improve, it could eventually allow scientists to edit genes in far more precise ways. The hope, Dr. Urnov said, is that this could, in the long term, lead to a world where medicines and treatments are quickly tailored to individual people even faster than we can do today.

“I dream of a world where we have CRISPR on demand within weeks,” he said.

Scientists have long cautioned against using CRISPR for human enhancement because it is a relatively new technology that could potentially have undesired side effects, such as triggering cancer, and have warned against unethical uses, such as genetically modifying human embryos.

This is also a concern with synthetic gene editors. But scientists already have access to everything they need to edit embryos.

“A bad actor, someone who is unethical, is not worried about whether they use an A.I.-created editor or not,” Dr. Fraser said. “They are just going to go ahead and use what’s available.”

Cade Metz writes about artificial intelligence, driverless cars, robotics, virtual reality and other emerging areas of technology. More about Cade Metz

Explore Our Coverage of Artificial Intelligence

News and Analysis

Saudi Arabia is plowing money into glitzy events, computing power and artificial intelligence research, putting it in the middle of an escalating U.S.-China struggle for technological influence.

Microsoft gave more signs that its hefty investments in A.I. were beginning to bear fruit, as it reported a 17 percent jump in revenue and a 20 percent increase in profit for the first three months of the year.

Meta projected that revenue for the current quarter would be lower than what Wall Street anticipated and said it would spend billions of dollars more on its artificial intelligence efforts, even as it reported robust revenue and profits for the first three months of the year.

The Age of A.I.

A new category of apps promises to relieve parents of drudgery, with an assist from A.I . But a family’s grunt work is more human, and valuable, than it seems.

Despite Mark Zuckerberg’s hope for Meta’s A.I. assistant to be the smartest , it struggles with facts, numbers and web search.

Much as ChatGPT generates poetry, a new A.I. system devises blueprints for microscopic mechanisms that can edit your DNA.

Could A.I. change India’s elections? Avatars are addressing voters by name, in whichever of India’s many languages they speak. Experts see potential for misuse in a country already rife with disinformation.

Which A.I. system writes the best computer code or generates the most realistic image? Right now, there’s no easy way to answer those questions, our technology columnist writes .

an image, when javascript is unavailable

Annecy Unveils Anime-Heavy Competition Lineup and Special Presentations for ‘Inside Out,’ ‘Moana,’ ‘Despicable Me’ Sequels

By Jamie Lang

Annecy Unveils Anime-Heavy Competition Lineup and Special Presentations for ‘Inside Out,’ ‘Moana,’ ‘Despicable Me’ Sequels 2 days ago
John Musker Named Animayo 2024 Guest Star, Will Head the Fest’s Oscar-Qualifying Competition Jury (EXCLUSIVE) 3 days ago
Le Pacte Boards Cannes Animation Day Title ‘Conference of the Birds’ Featuring Voice Actors Golshifteh Farahani, Louis Garrel (EXCLUSIVE) 5 days ago

Organizers of the Annecy International Animation Film Festival, the world’s oldest and most important animation festival, revealed Thursday that all the big U.S. studio animation players will be in attendance this year to preview some of their most exciting upcoming titles.

Annecy has long been a launch point for global and indie animation, but over the past several years, it has become an increasingly important platform for big studios as well. This year, that trend continues and, indeed, ramps up.

Popular on Variety

For anyone who may have missed Annecy’s previous announcements, the festival has already revealed that “Fantastic Mr. Fox” and “Isle of Dogs” director Wes Anderson will be at this year’s event to host a masterclass, that iconic director Chris Sanders (“Lilo & Stitch,” “How to Train Your Dragon”) will be there to tease his upcoming DreamWorks film “The Wild Robot,” and that Annecy 2024 will feature an all-new non-competitive section, Annecy Presents, that will be ideal for big-budget commercial films that don’t have a place in its competition sidebars.

Netflix also previously announced it will be in Annecy to host early looks at Zack Snyder’s “Twilight of the Gods” and an untitled “Wallace & Gromit” project, as well as the world premiere of “Ultraman: Rising.”

Annecy Builds

During the Thursday press conference, Annecy organizers explained how the festival has grown over recent editions, and how they plan to accommodate more guests.

Last year, Annecy expanded its festivities from six to seven days. The growth was necessary, as the event hosted a record 15,820 accredited badge holders, a 19% increase from 2022. This year’s festival will also feature a full week of programming over June 9-15.

To further accommodate the incredible number of attendees, Annecy will occupy four more theaters at the Pathé Annecy multiplex this year and start screening films at 8:30 a.m. in the Bonlieu, the festival’s central hub.

Below, we summarize the key announcements from today’s press conference, including the festival’s full Feature Competition, Contrechamp competition, and non-competitive Special Screenings lineups.

Competition Lineups

Michael Hazanavicius’ “The Most Precious of Cargoes” will open this year’s Annecy Festival before screening in this year’s main competition section. The film takes place during World War II and tells the story of a French Jewish family that is deported to Auschwitz. On the train to the camp, the father desperately throws one of his twins out into the snow, where a childless Polish couple discovers him.

At first glance, this year’s Annecy feature and Contrechamp competition lineups look as strong as any in recent memory. The selected films all come in with a great deal of buzz, and picking out a potential favorite in either category feels like a fool’s errand. The jury will surely have its work cut out for it this year.

France, always a key contributor to Annecy’s main competition lineup, has five features in this year’s field. Home-country titles looking to make an impact include “Flow” from Gints Zilbalodis, which hosted a Work-in-Progress panel at last year’s festival; “A Boat in the Garden” from 2019 Annecy Honorary Cristal recipient Jean-François Laguionie; “Into the Wonderlands” from Alexis Ducord, whose “Zombillénium” opened Annecy in 2017; “Ghost Cat Anzu” from Yoko Kuno, which was a hit during a WIP session at last year’s festival; and the aforementioned “The Most Precious of Cargoes.”

Japan has four films of its own in the main competition – “Ghost Cat” is a France-Japan co-production – and matches the host country by scoring a fifth competition spot in this year’s Contrechamp section.

The country’s main competition contingent includes the Japanese Academy-nominated “Totto-Chan: The Little Girl at the Window” from Shinnosuke Yakuwe, a filmmaker who has found incredible commercial success directing films in the “Doraemon” series.

Naoko Yamada, an experienced film and TV anime director at Kyoto Animation, will compete with her film “The Colors Within,” about a girl who can see colors in people’s hearts and joins a band. Former Studio Ghibli artist Yoshiyuki Momose’s “The Imaginary,” acquired by Netflix in a larger overall deal with Studio Ponoc earlier this year, will world premiere in competition at Annecy before debuting on the platform on July 5.

Gō Koga’s “The Birth of Kitaro: The Mystery of Gegege,” which opened at number two in Japan when it was released last November, will compete in the Contrechamp section.

Australian filmmaker Adam Elliot returns to Annecy this year with his latest stop-motion feature, “Memoir of a Snail.” In 2003, his eventual Oscar-winning short film “Harvie Krumpet” won a trio of prizes at Annecy, and in 2009, the filmmaker won the best feature Cristal with his modern classic “Mary and Max.”

Claude Barras provides the lineup’s second stop-motion feature with the hugely-anticipated “Sauvages!” Barras’ previous film, “My Life as a Zucchini, won the Annecy Cristal for best feature in 2016 and received an Oscar, BAFTA, César, European Film Awards, and Annie nominations in the following months.

Spaniard María Trénor’s “Rock Bottom” may be one of the coolest films in this year’s main competition, loaded with sex, drugs, and rock and roll. Zhigang Yang, more commonly referred to as Busifan (“The Guardian”), will compete in this year’s main lineup with his second feature, “The Storm,” a breathtaking epic animated in a Chinese ink painting style that got a very limited theatrical run earlier this year.

Main Competition

“Ghost Cat Anzu,” Yoko Kuno (Japan, France)

“Into the Wonderwoods,” Alexis Ducord (France, Luxembourg)

“Flow,” Gints Zilbalodis (Latvia, Belgium, France)

“The Colors Within,” Naoko Yamada (Japan)

“Totto-Chan: The Little Girl at the Window,” Shinnosuke Yakuwe (Japan)

“Memoir of a Snail,” Adam Elliot (Australia)

“Rock Bottom,” María Trénor (Spain, Poland)

“Sauvages!” Claude Barras (Switzerland)

“A Boat in the Garden,” Jean-François Laguionie (France)

“The Imaginary,” Yoshiyuki Momose (Japan)

“The Storm,” Zhigang “Busifan” Yang (China)

“The Most Precious of Cargoes,” Michael Hazanavicius (Belgium, France)

Contrechamp standouts include “Pelikan Blue,” Hungary’s first-ever animated documentary feature; “The Glassworker,” Pakistan’s first traditionally animated 2D feature, and Carl Joseph Papa’s “The Missing,” which was the Philippines submission to last year’s International Feature Oscar category.

David Baute’s “Black Butterflies” chronicles the stories of three women fleeing terrain made uninhabitable by a change in climate, and “Gill” is the latest from Jae-huun Ahn, who won Annecy’s Contrechamp competition in 2020 with his film “The Shaman Sorceress.”

Contrechamp Competition

“Sultana’s Dream,” Isabel Huergera (Spain)

“Gill,” Jae-huun Ahn (South Korea)

“The Missing,” Carl Joseph Papa (Philippines)

“Living Large,” Kristina Dufkova (Czech Republic)

“Black Butterflies,” David Baute (Spain, Panama)

“Our Crazy Love,” Nelson Botter Jr. (Brazil)

“Pelikan Blue,” László Csáki (Hungary)

“Journey of Shadows,” Yves Netzhammer (Switzerland)

“Sunburnt Unicorn,” Nick Johnson (Canada)

“The Birth of Kitaro: The Mystery of Gegege,” Gō Koga (Japan)

“The Glassworker,” Usman Riaz (Pakistan)

New Screening Program

This year, Annecy is launching a completely new non-competitive screening program for films that don’t quite fit into either of its competition sections but that it would like to showcase. This section is where big U.S. studio films and commercially successful features from around the world will be made available to Annecy attendees.

Many of the films in the Annecy Presents section will be making their French debuts, including Sony Pictures Animation’s “The Garfield Movie” and TMS’s Japanese mega-hit “Detective Conan: The Million-Dollar Pentagram” — the 27th film in the prolific anime franchise — which just had Japan’s second-best theatrical opening of all time earlier this month.

Other exciting titles from the new section include Mascha Halberstad’s “Fox and Hare Save the Forest,” a standout at Cartoon Movie 2023; Denver Jackson’s “The Worlds Divide,” an independent feature the filmmaker animated entirely by himself; and “Sand Land,” adapted from “Dragon Ball” creator Akira Toriyama’s manga of the same name.

Annecy Presents

“Buffalo Kids,” Juan “Galo” Galocha, Pedro Solís (Spain)

“Detective Conan: The Million-Dollar Pentagram,” Nagaoka Chika (Japan)

“Diplodocus,” Wojtek Wawszczyk (Poland)

“Extinction,” Behnoud Nekooei (Malaysia)

“Fox and Hare Save the Forest,” Mascha Halberstad (Netherlands, Luxembourg, Belgium)

“Give it All,” Yuhei Sakuragi (Japan)

“The Garfield Movie,” Mark Dindal (U.S.A.)

“Christmas Tales of Christmas Magic,” Camille Alméras, Caroline Attia Larivière, Ceylan Beyoglu, Haruna Kishi, Natalia Chernysheva, Olesya Shchukina (France, Germany)1

“Out of the Nest,” Arturo Hernandez (Thailand, China)

“Sand Land,” Toshihisa Yokoshima (Japan)

“The Sloth Lane,” Tania Vincent, Ricard Cussó (Australia)

“The Worlds Divide,” Denver Jackson (Canada)

More From Our Brands

Here’s where to watch the bruins vs. maple leafs nhl playoff series online, inside a $3.3 million one-bedroom condo in l.a.’s famed sierra towers, vince mcmahon lists final tko shares for sale, be tough on dirt but gentle on your body with the best soaps for sensitive skin, fire country: did luke’s bombshell blow up [spoiler]’s future michael trucco teases what’s ahead, verify it's you, please log in.

IMAGES

How to create HTML presentation with Go's present tool
How to create html presentations with markdown files
Presentation slides using HTML and CSS
Working with HTML Presentation Tags
Create a Presentation Slide Website
Reveal JS

VIDEO

How to create web page using html and css tags
HTML LAYOUT
02: PRACTICE
Lecture
HTML Tutorial : Presentation Elements
Create a “PowerPoint” Like Presentation Using Pure CSS3

COMMENTS

The HTML presentation framework
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 ...
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 Create Beautiful HTML & CSS Presentations with WebSlides
Then, in the root folder, create a new folder and call it presentation. Inside the newly created presentation folder, create a new file and call it index.html. Now, enter the following code, which ...
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 ...
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 ...
WebSlides: Create Beautiful HTML Presentations
WebSlides is the easiest way to make HTML presentations. Just choose a demo and customize it in minutes. 120+ slides ready to use. Good karma. ... Create your own stories instantly. 120+ premium slides ready to use. Free Download Pay what you want. Thanks. People share content that makes them feel inspired. ...
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.
reveal.js
They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard). Vertical Slides Slides can be nested inside of other slides, try pressing down .
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 ...
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!
Demo
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
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...
WebSlides Demos
WebSlides is a cute solution for making HTML presentations, landings, and portfolios. Put content wherever you want, add background images, videos... How easy is WebSlides? You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.
Top 9 JavaScript frameworks to create beautiful presentation slides
It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides. Slidev (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.
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! ... 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. How To's. Large ...
Mastering reveal.js
Mastering reveal.js. Mastering reveal.js Introduction. Watch on. This video course that will teach you how to everything you need to know to create great looking presentations with reveal.js. We'll start from the basics of installing reveal.js, creating slides and configuring your presentation. Then we'll work our way up to more interesting ...
10 Best HTML Presentation Frameworks In JavaScript (2024 Update)
Best Vanilla JS HTML Presentation Frameworks. 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.
WebSlides: Making HTML presentations easy
WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features. WebSlides is about good karma. Just essential features. 120+ free slides ready to use. WebSlides. WebSlides @WebSlides; Create beautiful stories. WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS. ...
html-presentation · GitHub Topics · GitHub
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).
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.
Creating highly customizable HTML presentations with markdown and
This is as easy as executing the following command — assuming you have pandoc already installed: pandoc\. slides.md\ -o slides.html\ -s\ --self-contained\ --section-divs\ -c slides.css\ -A slides_before_body.html. The pandoc command takes the name of the markdown file as first parameter, and will automatically recognize to which format it ...
How to Make a "Good" Presentation "Great"
A strong presentation is so much more than information pasted onto a series of slides with fancy backgrounds. Whether you're pitching an idea, reporting market research, or sharing something ...
6 Ways to Create More Interactive PowerPoint Presentations
2. Embed Microsoft Forms (Education or Business Only) If you plan to send your PPT presentation to others—for example, if you're a trainer sending step-by-step instruction presentation, a teacher sending an independent learning task to your students, or a campaigner for your local councilor sending a persuasive PPT to constituents—you might want to embed a quiz, questionnaire, pole, or ...
Tables in Drupal
Creating a table with Drupal. The easiest way to create a table is to copy and paste the code from an Excel table into the content editing area. After doing so you'll need to: Check that styling isn't being brought over from the Excel document. Use the Tx in the toolbar to remove styling. Ensure that proper headers have been created.
Generative A.I. Arrives in the Gene Editing World of CRISPR
Much as ChatGPT generates poetry, a new A.I. system devises blueprints for microscopic mechanisms that can edit your DNA. The physical structure of OpenCRISPR-1, a gene editor created by A.I ...
Lions create offensive line depth and versatility with Giovanni Manu
The Detroit Lions traded up into the fourth round in order to draft Giovanni Manu, a massive offensive tackle from the University of British Columbia.. Standing at a massive 6-foot-7 and 352 pounds, the Tonga native was a relative unknown for most heading into this draft. Despite not going to the NFL Scouting Combine or getting much attention from draft experts, he impressed Detroit's front ...
Takeaways from the Supreme Court's oral arguments over ...
In a Supreme Court hearing on the Biden administration's challenge to aspects of Idaho's strict abortion ban, US Solicitor General Elizabeth Prelogar sought to appeal to conservative justices ...
Annecy Unveils Competition Lineups and Studio Presentations
Annecy Unveils Anime-Heavy Competition Lineup and Special Presentations for 'Inside Out,' 'Moana,' 'Despicable Me' Sequels