make html presentation

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!

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 Rivalry
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

React Prop Drilling: Should You Use It?

Apoorv - Aug 24

Day7 #100days Miva challenge

Damilola Oyeyipo - Aug 27

The Solar System in CSS

Mads Stoumann - Aug 25

fetch + interceptors

Joshua Amaju - Aug 28

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

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications You must be signed in to change notification settings

The HTML Presentation Framework

hakimel/reveal.js

Folders and files.

Name		Name
3,143 Commits

Repository files navigation

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 highlighted code and an extensive API .

Want to create reveal.js presentation in a graphical editor? Try https://slides.com . It's made by the same people behind reveal.js.

Hakim's open source work is supported by GitHub sponsors . Special thanks to:

Getting started

🚀 Install reveal.js
👀 View the demo presentation
📖 Read the documentation
🖌 Try the visual editor for reveal.js at Slides.com
🎬 Watch the reveal.js video course (paid)

Releases 47

Sponsor this project, used by 786k.

Contributors 323

JavaScript 59.4%

Session Replay
Product Analytics
Performance Monitoring
Co-Browsing
Customer Support
Research & Design
Try Cloud Free
Self-Host Try Cloud

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

SEO Basics for Web Developers

{post.frontmatter.excerpt}

Learn how to optimize your Next.js React-based pages for SEO

Sep 23, 2022, 8 min read

SEO Tips for Next.js sites

[email protected]

Bootstraphunter

Free and Premium Bootstrap Templates and Themes

How to Create Presentation Slides with HTML and CSS

March 15, 2022

We can easily create beautiful and interactive presentations with HTML, CSS and JavaScript, the three basic web technologies. In this tutorial, we’ll use modern HTML5 markup to structure our slides, we’ll use CSS to style the slides and add some effects, and we’ll use JavaScript to trigger these effects and reorganize the slides based on click events.

This tutorial is perfect for those of you new to HTML5, CSS and JavaScript, who are looking to learn something new by building.

Here’s the final preview of the presentation slide we’re going to build:

You can also find the complete source code in the GitHub repo .

Let’s begin.

Table of Contents

1. Create the Directory Structure

Before we get started, let’s go ahead and create our folder structure; it should be fairly simple. We’ll need:

index.html css/style.css js/scripts.js

This is a simple base template. Your files remain blank for the time being. We’ll fill that shortly.

2. Create the Starter Markup

Let’s begin by creating the base markup for our presentation page. Paste the following snippet into your index.html file.

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> <link rel=”stylesheet” href=”css/style.css”>

<!– Font Awesome Icon CDN –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css” integrity=”sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==” crossorigin=”anonymous” referrerpolicy=”no-referrer” /> </head> <body> <div class=”container” <div id=”presentation-area”> <!– slides go here –> </div> </div> <script src=”js/index.js” type=”text/javascript”></script> </body> </html>

From the base markup, you can tell that we are importing Font Awesome Icons, our stylesheet ( style.css ) and our JavaScript ( index.js ).

Now we’ll add the HTML markup for the actual slides inside the <div> wrapper:

<!– Slide 1 –> <div class=”slide show”> <div class=”heading”> Presentation on C# </div> <div class=”content grid center”> <h3 class=”title”> What is C# ? <br /> All You Need To Know </h3> </div> </div>

<!– Slide 1 –> <div class=”slide”> <div class=”heading”> Overview </div> <div class=”content grid center”> <h3 class=”title”> Introduction to C+ </h3> <p class=”sub-title”> Basic and Advanced Concepts </p> <p>Lecture No. 1</p> <p>My Email Address</p> <p><a href=””> [email protected] </a></p> </div> </div>

<!– Add 5 more slides here –> </section>

We have seven slides in total, and each slide is comprised of the heading section and the content section.

Only one slide will be shown at a time. This functionality is handled by the .show class which will be implemented later on in our stylesheet.

Using JavaScript, later on, we’ll dynamically add the .show class to the active slide on the page.

Below the slides, we’ll add the markup for our slide’s counter and tracker:

Later on, we’ll use JavaScript to update the text content as the user navigates through the slides.

Finally, we’ll add the slide navigator just below the counter:

This section consists of four buttons responsible for navigating left and right and switching between full-screen mode and small-screen mode. Again, we’ll use the class .show to regulate which button appears at a time.

That’ll be all for the HTML part, let’s move over to styling.

3. Make It Pretty

Our next step takes place within our stylesheet. We’ll be focusing on both aesthetics as well as functionality here. To make each slide translate from left to right, we’ll need to target the class .show with a stylesheet to show the element.

Here’s the complete stylesheet for our project:

* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; transition: all 0.5s ease; }

body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }

ul { margin-left: 2rem; }

ul li, a { font-size: 1.2em; }

.container { background: #212121; width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }

#presentation-area { width: 1000px; height: 500px; position: relative; background: purple; }

/* Styling all three sections */ #presentation-area .presentation { width: 100%; height: 100%; overflow: hidden; background: #ffffff; position: relative; }

#presentation-area .counter { position: absolute; bottom: -30px; left: 0; color: #b6b6b6; }

#presentation-area .navigation { position: absolute; bottom: -45px; right: 0; }

/* On full screen mode */ #presentation-area.full-screen { width: 100%; height: 100%; overflow: hidden; }

#presentation-area.full-screen .counter { bottom: 15px; left: 15px; }

#presentation-area.full-screen .navigation { bottom: 15px; right: 15px; }

#presentation-area.full-screen .navigation .btn:hover { background: #201e1e; color: #ffffff; }

#presentation-area.full-screen .navigation .btn-screen:hover { background: #201e1e; } /* End full screen mode */

/* Buttons */ .navigation button { width: 30px; height: 30px; border: none; outline: none; margin-left: 0.5rem; font-size: 1.5rem; line-height: 30px; text-align: center; cursor: pointer; }

.navigation .btn { background: #464646; color: #ffffff; border-radius: 0.25rem; opacity: 0; transform: scale(0); }

.navigation .btn.show { opacity: 1; transform: scale(1); visibility: visible; }

.navigation .btn-screen { background: transparent; color: #b6b6b6; visibility: hidden; }

.btn-screen.show { opacity: 1; transform: scale(1); visibility: visible; }

.btn-screen.hover { color: #ffffff; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); } /* End Buttons */

/* content */ .presentation .content { padding: 2em; width: 100%; height: calc(100% – 100px); z-index: 11; }

.presentation .content.grid { display: grid; }

.presentation .content.grid.center { justify-content: center; align-items: center; text-align: center; }

.content .title { font-size: 3em; color: purple; }

.content .sub-title { font-size: 2.5em; color: purple; }

.content p { font-size: 1.25em; margin-bottom: 1rem; } /* End Content Stylesheet */

/* Slide */ .presentation .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; opacity: 0; transform: scale(0); visibility: none; }

.slide.show { opacity: 1; transform: scale(1); visibility: visible; }

.slide .heading { padding: 2rem; background: purple; font-size: 2em; font-weight: bold; color: #ffffff; }

4. Enable Slide Navigation

Whenever we click on the left or right icon, we want the next slide or previous slide to appear. We also want to be able to toggle between full-screen mode and small-screen mode.

Furthermore, we want the slide’s counter to display the accurate slide number on every slide. 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:

let slidesParentDiv = document.querySelector(‘.slides’); let slides = document.querySelectorAll(‘.slide’); let currentSlide = document.querySelector(‘.slide.show’);

Next, we’ll store references to the slide counter and both of the slide navigators (left and right icons):

var slideCounter = document.querySelector(‘.counter’); var leftBtn = document.querySelector(‘#left-btn’); var rightBtn = document.querySelector(‘#right-btn’);

Then store references to the whole presentation container and both button icons for going into full screen and small screen mode:

let presentationArea = document.querySelector(‘#presentation-area’); var fullScreenBtn = document.querySelector(‘#full-screen’); var smallScreenBtn = document.querySelector(‘#small-screen’);

Now that we’re done with the references, we’ll initialize some variables with default values:

var screenStatus = 0; var currentSlideNo = 1 var totalSides = 0;

screenStatus represents the screen orientation. 0 represents a full screen mode and 1 represents a small screen mode.

currentSlideNo represents the current slide number, which as expected is the first slide. totalSlides is initialized with 0, but this will be replaced by the actual number of our slides.

Moving the Presentation to the Next and Previous Slides

Next, we’ll add click event listeners to the left button, right button, full screen button and small screen button:

leftBtn.addEventListener(‘click’, moveToLeftSlide); rightBtn.addEventListener(‘click’, moveToRightSlide);

fullScreenBtn.addEventListener(‘click’, fullScreenMode); smallScreenBtn.addEventListener(‘click’, smallScreenMode);

We bind corresponding functions that will run when the click event is triggered on the corresponding element.

Here are the two functions responsible for changing the slide:

function moveToLeftSlide() { var tempSlide = currentSlide; currentSlide = currentSlide.previousElementSibling; tempSlide.classList.remove(‘show’); currentSlide.classList.add(‘show’); }

function moveToRightSlide() { var tempSlide = currentSlide; currentSlide = currentSlide.nextElementSibling; tempSlide.classList.remove(‘show’); currentSlide.classList.add(‘show’); }

In the function moveToLeftSlide, we basically access the previous sibling element (ie. the previous slide), remove the .show class on the current slide and add it to that sibling. This will move the presentation to the previous slide.

We do the exact opposite of this in the function moveToRightSlide. Because nextElementSibling is the opposite of previousElementSibling, we’ll be getting the next sibling instead.

Code for Showing the Presentation in Full Screen and Small Screen

Recall that we also added click event listeners to the full screen and small screen icons.

Here’s the function responsible for toggling full-screen mode:

function fullScreenMode() { presentationArea.classList.add(‘full-screen’); fullScreenBtn.classList.remove(‘show’); smallScreenBtn.classList.add(‘show’);

screenStatus = 1; }

function smallScreenMode() { presentationController.classList.remove(‘full-screen’); fullScreenBtn.classList.add(‘show’); smallScreenBtn.classList.remove(‘show’);

screenStatus = 0; }

Recall that presentationArea refers to the element that wraps the whole presentation. By adding the class full-screen to this element, we trigger the CSS that will expand it to take up the whole screen.

Since we’re now in full-screen mode, we need to show the icon for reverting back to the small screen by adding the class .show to it. Finally, we update the variable screenStatus to 1.

For the smallScreenMode function, the opposite is done – we remove the class full-screen, show the expand button icon, and reupdate screenStatus.

Hidding Left and Right Icons in First and Last Slides

Now, we need to invent a way to hide both the left and right buttons when we’re on the first slide and last slide respectively.

We’ll use the following two functions to achieve this:

function hideLeftButton() { if(currentSlideNo == 1) { toLeftBtn.classList.remove(‘show’); } else { toLeftBtn.classList.add(‘show’); } }

function hideRightButton() { if(currentSlideNo === totalSides) { toRightBtn.classList.remove(‘show’); } else { toRightBtn.classList.add(‘show’); } }

Both these functions perform a very simple task: they check for the current slide number and hide the left and right buttons when the presentation is pointing to the first and last slide respectively.

Updating and Displaying Slide Number

Because we’re making use of the variable currentSlideNo to hide or show the left and right button icons, we need a way to update it as the user navigates through the slides.

We also need to display to the user what slide he or she is currently viewing.

We’ll create a function getCurrentSlideNo to update the current slide number:

function getCurrentSlideNo() { let counter = 0;

slides.forEach((slide, i) => { counter++

if(slide.classList.contains(‘show’)){ currentSlideNo = counter; } });

We start the counter at 0, and for each slide on the page, we increment the counter. We assign the active counter (ie. with the class .show) to the currentSlideNo variable.

With that in place, we create another function that inserts some text into the slide counter:

function setSlideNo() { slideNumber.innerText = `${currentSlideNo} of ${totalSides}` }

So if we were on the second slide for example, the slide’s counter will read as: 2 of 6

Putting Everything Together

To ensure that all of these functions run in harmony, we’ll run them in a newly created init function that we’ll execute at start of the script, just below the references:

function init() {

getCurrentSlideNo(); totalSides = slides.length setSlideNo(); hideLeftButton(); hideRightButton(); }

We must also run init() at the bottom of both the moveToLeftSlide and moveToRightSlide functions:

function moveToLeftSlide() { // other code

function moveToRightSlide() { // other code

This will ensure that the function init runs every time the user navigates left or right in the presentation.

Wrapping Up

I hope this tutorial helped you understand basic web development better. Here we built a presentation slideshow from scratch using HTML, CSS and JavaScript.

With this project, you should have learned some basic HTML, CSS and JavaScript syntax to help you with web development.

Unsupported browser

This site was designed for modern browsers and tested with Internet Explorer version 10 and later.

It may not look or work correctly on your browser.

Create Presentation Slides with HTML and CSS

Bahasa Indonesia

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!

Screencasts:

Creating The Markup (preview video)
Building Sample Slides
Load The Slides
Styling and JavaScript
Event Listeners
Completing the JavaScript
Custom Slide-Styling

Screencast 1: Create the Markup

Screencast 2: Building Sample Slides

Screencast 3: Load the Slides

Screencast 4: Styling and Continued JavaScript

Screencast 5: Event Listeners

Screencast 6: Completing the JavaScript

Screencast 7: Custom Slide Styling

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 .

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.

Getting Started
	Duration
Installing reveal.js and setting up the development server.	5:40
Creating slides, linking between them and saving drafts.	10:04
Configuring your presentation.	8:23
Working with vertical slides.	9:05
Creating slides using Markdown.	16:34

Adding text, images, videos and iframes to your slides.	10:47
Layout slide content using stacks and auto-sized text.	13:58
Fullscreen background images, videos, colors and iframes.	16:26
Presenting syntax highlighted code.	21:51
Using Fragments to build up slides in steps.	13:14
Animating slide content with Auto-Animate.	17:01

Presentation size and scale.	14:34
Slide transitions.	12:36
Theming your content and creating your own theme.	16:12
Speaker notes & using the speaker view.	11:27
Slide numbers & URLs.	19:55
Converting your presentation to PDF.	10:23

Initialization & running multiple presentations.	19:06
Plugins; where to find and how to create them.	14:52
Using the reveal.js API to control your presentation.	40:32
Customizing keyboard shortcuts.	15:04
Working with the source code.	21:09

Slides.com — the reveal.js presentation editor.

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]

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

7 Best JavaScript Timeago Plugins For Human-readable Datetime Format

Top 100 Best Free jQuery Plugins From 2013

7 Best Youtube Lazy Loaders To Improve Page Speed (2024 Update)

10 Best JavaScript Dark Mode Solutions (2024 Update)

Top 100 Best Free jQuery Plugins From 2014

10 Best Free GDPR Cookie Consent Banner 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 .

WebSlides Tutorial

Free Download

WebSlides Components

A quick reference guide for beginners.

Architecture
Background Colors

Contents (Flexible Blocks)

Multipurpose.

CVs and News
Galleries (portfolios, teams...)
Plans (Pricing)

Offers and Discounts

Buttons and Badges
Background Images
Background Videos
Embedding videos, charts...
500+ SVG Icons

Screenshots

Css animations, webslides is really easy.

Each parent <section> in the #webslides element is an individual slide.

Code looks superb. It uses intuitive markup with popular naming conventions . There's no need to overuse classes or nesting. Just focus on your ideas. Based on SimpleSlides , by Jenn Schiffer :)

Vertical sliding? <article id="webslides" class="vertical">

WebSlides is so easy to understand and love. Baseline: 8.

Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
BG Colors: .bg-primary, .bg-blue,.bg-apple...
BG Images: .background, .background-center-bottom...
Cards: .card-60, .card-50, .card-40...
Sizes: .wrap.size-50, .img.size-40...
Flex Blocks: .flexblock.clients, .flexblock.gallery, .flexblock.metrics...
Shipping & Returns
Terms of Service
Privacy Policy

.grid > .column

Basic Grid (auto-fill and equal height).

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more.

.grid. vertical-align > .column

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more. Create beautiful solutions. Our children's world will be better.

.grid. sm (sidebar + main)

.grid. ms (main + sidebar), .grid. sms (sidebar + main + sidebar), simple css alignments.

Put content wherever you want.

1/9 left top

Put content wherever you want. Have less. Do more. Create beautiful solutions.

.slide-top and .content-left

2/9 center top

Your story needs to be clear. A great lasting story is about everyone or it will not last.

.slide-top and .content-center

3/9 right top

Your story needs to be short. Select words carefully, each one must convey a meaning.

.slide-top and .content-right

4/9 left center

Your slides should be clear and well structured. What's the point of the story? Why is that relevant?

.content-left

Stories are all around us. They are what move us, make us feel alive, and inspire us.

.content-center

6/9 right center

Your presentation should have the same elements as a good book. Action, failure, and success.

.content-right

7/9 left bottom

How to tell strategic stories? What Promised Land is the company conveying through its words and images.

.slide-bottom and .content-left

8/9 center bottom

What's the Promised Land? What change do you want to bring to the world? The Promised Land is the North Star.

.slide-bottom and .content-center

9/9 right bottom

Your origin story helps people decide whether or not to trust you. How was your life before the life-changing event?

.slide-bottom and .content-right

img.size-50

img.alignright.size-50

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

Image size recommended : 800x600px / 600x450px.

img.alignleft.size-50

img.size-30

img.alignleft.size-30

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco.

Corporate Backgrounds

.bg-primary, .bg-secondary, general colors, .bg-black-blue, transparent backgrounds, .bg-trans-dark, .bg-trans-light.

Horizontal .bg-gradient-h
Radial .bg-gradient-r
Vertical .bg-gradient-v

Vertical Gradient

.bg-gradient-v

Radial Gradient

.bg-gradient-r

One more background :)

ul.flexblock = Flexible blocks with auto-fill and equal height.

.flexblock li 1

.flexblock li 2, .flexblock li 3, multipurpose (services, work...).

ul.flexblock.blink (block link)

ul.flexblock.border

Multipurpose (services, clients...)

ul.flexblock.blink.border

Development

Content Strategy

Customer experience, recruitment.

Facebook 2016.- F8 Conference
Airbnb 2015.- Creative Direction
Microsoft 2015.- Content Strategy
The New York Times 2015.- Recruitment
Netflix 2014.- Mobile Apps
Instagram 2014.- Identity
Spotify 2013.- TV Commercials

ul.flexblock.clients

Collaboration with the Acme team to design their mobile apps. img.blacklogo

We worked with the UX team on photography for the site img.blacklogo

We worked with Acme to develop recruiting processes. img.blacklogo

We partnered with various Netflix divisions to create a campaign for House of Cards.

ul.flexblock.clients.border

ul.flexblock.steps

01. passion.

When you're really passionate about your job, you can change the world.

02. Purpose

Why does this business exist? How are you different? Why matters?

03. Principles

Leadership through usefulness, openness, empathy, and good taste.

04. Process

Ul.flexblock.features, → simple navigation, slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, ul.flexblock.specs, navigation with arrow keys and slide counter, vertical rhythm, ultra-fast wifi, all day battery life, lifetime warranty, cvs and news.

ul.flexblock.activity

UX Designer at ACME

This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.

14 world famous buildings to inspire you

From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.

Co-Founder of GAMMA

The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.

Portfolio, team, work, showcase...

ul.flexblock.gallery

By Jane Doe

Ellen Daniels

3,456 rooms

ul.flexblock.gallery + .overlay

1,234 rooms

Why WebSlides?

Apple Keynote

Ul.flexblock.metrics.border.

Founded 2024
24M Subscribers
Revenue: $16M
Monthly Growth 64%
48 Employees
EBITDA: $2,4M

ul.flexblock.plans.blink

Good karma. Just essential features. 100% customizable. Make it yours.

Clean markup with popular naming conventions. Minimum effort.

Premium (save 20%)

Prototype faster. Create landings and portfolios. Unlimited projects.

Free forever
Eternal sunshine
Exclusive content
Unlimited projects
Unlimited users

Redesign of Netflix

Airbnb TV Commercials

Video, Storytelling

Tesla Software

Tesla Motors

Visual Design

Create a simple web presence easily. Clean markup and lovely CSS.

Call to action

Use your iPhone to pay securely and easily at over a million store locations and within apps — with a single touch.

iOS app Android app

HTML Presentations Made Easy

WebSlides Demos · Github

100 % customizable

Prototype faster, design for understanding, 100 % purpose, tell a story.

Hi, this is WebSlides . HTML presentations made simple. I'm a cute solution with clean markup and lovely CSS .

Plan your next trip

The best places at the best price.

Install iOS app Install Android app

Yosemite National Park.

Making HTML Presentations Easy

Living on mars.

Paula Chan, CEO of SpaceY.

PROBLEM & SOLUTION

The history of the music industry is also the story of the development of technology.

Downloads in first 24 hours, $56 billion, revenue in q3 2017, we're working to protect up to a million acres of sustainable forest., webslides help you build a culture of innovation..

All content is for demo purposes only, to show an example of a live site. The easiest way to make HTML presentations. Inspire and engage.

Founded 2040
120+ Prebuilt Slides
24M Downloads

WebSlides was made to inspire people.

There are great presentation tools out there. This is about good karma : hypertext, clean code, and beauty as narrative elements. Three essential features.

→ Keyboard navigation

Go to a specific slide, slide counter, webslides help you build a culture of excellence..

All content is for demo purposes only, to show an example of a live site. All images are the copyright of their respective owners.

Prologue: Learning to See 01
What is Design? 04
Simplicity vs. Clarity 14
Principles 24
Epilogue 40

A phone should be absolutely simple, beautiful, and magical to use. 3D Touch, 12MP photos, and 4K video.

The easiest way to make HTML presentations. Incredibly versatile. 120+ slides.

The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors.

3D Touch, 12MP photos, and 4K video. Centering vertically using grid.vertical-align

Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.

apple.com/iphone

The first phone with the Google Assistant built in. Centering vertically using grid.vertical-align.

It has the highest rated smartphone camera. Ever. A battery that lasts all day. Unlimited storage for all your photos and videos . And it’s the first phone with the Google Assistant built in.

Centering vertically using flexbox.

Florence, Italy — .card-50

Area: 102.41 km 2
Population: 383,083.
Website: comune.fi.it

Florence was a centre of medieval European trade and finance and one of the wealthiest cities of the time. It is considered the birthplace of the Renaissance, and has been called "the Athens of the Middle Ages".

Il Duomo, Florence — .card-60

Stendhal syndrome is a disorder that causes rapid heartbeat and dizziness when an individual is exposed to an experience of great personal significance, particularly viewing art.

The illness is named after the 19th-century French author Stendhal, who described his experience with the phenomenon during his 1817 visit to Florence.

Discover Jordan

.fullscreen > .card-50

Aqaba is the only coastal city in Jordan and the largest and most populous city on the Gulf of Aqaba.

Watch TV shows anytime, anywhere

.frame.bg-red

Get 8 weeks free

Choose one plan.

Simple pricing. No credit card required!

Plans	Good	Better	Awesome
Price	Free	$6	$10
HD Streaming	No	Yes	Yes
Screens you can watch on at the same time	1	2	Unlimited
Access to exclusive content	No	No	Yes

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides." @jlantunez

Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. Sheryl Sandberg , COO of Facebook.

Finally, everything you need to make HTML presentations in a simple way. @jlantunez

“WebSlides helped us build a culture of innovation and excellence.” Leonardo da Vinci

"Businesses and users are going to use technology only if they can trust it." Satya Nadella.

.button svg icon

.button.radius .button.ghost

a.badge-ios and a.badge-android

iOS App Android App

Planning a vacation?

Hidden attractions and unusual things to do.

Fast & Versatile

Private network.

Use your iPhone to pay securely and easily at over a million store locations and within apps — with a single touch. See where you can use Apple Pay:

Username or Email

Password Forgot?

Don't have an account? Sign up!

Background images, videos, charts, maps...

Unsplash = Fullscreen Backgrounds

How to embed Unsplash photos? →

Position .background outside of .wrap container.

[class*="bg-"] > .background.light

[class*="bg-"] > .background.dark

16 Different Backgrounds

.background (cover)
.background-top (cover)
.background-bottom (cover)
.background.light (opacity)
.background.dark (opacity)
.background-center
.background-center-top
.background-center-bottom
.background-left
.background-left-top
.background-left-bottom
.background-right
.background-right-top

.background-right-bottom

.background-anim (animated)
. background-video (fullscreen)

.background-(position)

.background.anim, background videos.

.fullscreen > .embed (responsive) > video

Overlay: section.fullscreen.bg-blue > embed.dark or .light

Embedding Media

Videos, charts, maps...

YouTube API

Embed videos with loop, autoplay, and muted attributes.

.embed (responsive)

Status of Net Neutrality around the world.

Discover Seville

.card-50.bg-white

Density: 140/km 2
Population: 703,021
Website: visitasevilla.es

There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcázar palace complex, the Cathedral and the General Archive of the Indies.

Optional · 500+ icons

Font Awesome as SVG icons

How to change icons?

Go to fontastic.me .
Create a free account.
Select new icons.
Publish as SVG sprite.
Edit svg-icons.css and svg.icons.js .

Transparent Logos

Change the color of a .svg/.png image using CSS. Images are property of their respective owners.

Height recommended : 48px

img.blacklogo

img.graylogo

img.whitelogo

"An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism." @username , .avatar-56

img[class*="avatar-"] (80, 72, 64, 56, 48, and 40).

HTML/CSS Browser.

Fadein transition to all slides.

Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

.slow (animation duration)

H2.fadein.slow, start in seconds.

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

Free Download Pay what you want.

HTML BASICS Slides Presentation

Click to access all Slides..

This slide presentation shows basics of HTML.

HTML and XHTML are the foundation of all web development. 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. HTML was once a very loosely-defined language with very little standardization, but as it has become more important, the need for standards has become more apparent. Regardless of whether you choose to write HTML or XHTML, understanding the current standards will help you provide a solid foundation that will simplify all your other web coding. Fortunately HTML and XHTML are actually simpler than they used to be, because much of the functionality has moved to CSS.

Common Elements

Every page (HTML or XHTML shares certain elements in common.) All are essentially plain text files, with the .html extension. HTML files should not be created with a word processor, but in some type of editor that creates plain text. Every page has a large container (HTML or XHTML) and two major subcontainers, the head and the body. The head area contains information useful behind the scenes, such as CSS formatting instructions and JavaScript code. The body contains the part of the page that is visible to the user.

Tags and Attributes

An HTML document is based on the notion of tags. A tag is a piece of text inside angle brackets (<>). Tags typically have a beginning and an end, and usually contain some sort of text inside them. For example, a paragraph is normally denoted like this:

The <p> indicates the beginning of a paragraph. Text is then placed inside the tag, and the end of the paragraph is denoted by an end tag, which is similar to the start tag but with a slash (</p>.) It is common to indent content in a multi-line tag, but it is also legal to place tags on the same line:

Tags are sometimes enhanced by attributes, which are name value pairs that modify the tag. For example, the tag (used to embed an image into a page) usually includes the following attributes:

The src attribute describes where the image file can be found, and the alt attribute describes alternate text that is displayed if the image is unavailable.

Nested tags

Tags can be (and frequently are) nested inside each other. Tags cannot overlap, so <a><b></a></b> is not legal, but <a><b></b></a> is fine.

HTML VS XHTML

HTML has been around for some time. While it has done its job admirably, that job has expanded far more than anybody expected. Early HTML had very limited layout support. Browser manufacturers added many competing standards and web developers came up with clever workarounds, but the result is a lack of standards and frustration for web developers. The latest web standards (XHTML and the emerging HTML 5.0 standard) go back to the original purpose of HTML: to describe the structure of the data only, and leave all formatting to CSS (Please see the DZone CSS Refcard Series). XHTML is nothing more than HTML code conforming to the stricter standards of XML. The same style guidelines are appropriate whether you write in HTML or XHTML (but they tend to be enforced in XHTML):

Most of the requirements of XHTML turn out to be good practice whether you write HTML or XHTML. I recommend using XHTML strict so you can validate your code and know it follows the strictest standards.

XHTML has a number of flavors. The strict type is recommended, as it is the most up-to-date standard which will produce the most predictable results. You can also use a transitional type (which allows deprecated HTML tags) and a frameset type, which allows you to add frames. For most applications, the strict type is preferred.

HTML Template

The following code can be copied and pasted to form the foundation of a basic web page:

The structure of your web pages is critical to the success of programs based on those pages, so use a validating tool to ensure you haven't missed anything

Validating Tool	Description
WC3	The most commonly used validator is online at http://validator.w3.org this free tool checks your page against the doctype you specify and ensures you are following the standards. This acts as a 'spell-checker' for your code and warns you if you made an error like forgetting to close a tag.
HTML Tidy	There's an outstanding free tool called HTML tidy which not only checks your pages for validity, but also fixes most errors automatically. Download this tool at http://tidy.sourceforge.net/ or (better) use the HTML validator extension to build tidy into your browser.
HTML Validator extension	The extension mechanism of Firefox makes it a critical tool for web developers. The HTML Validator extension is an invaluable tool. It automatically checks any page you view in your browser against both the w3 validation engine and tidy. It can instantly find errors, and repair them on the spot with tidy. With this free extension available at http://users.skynet. be/mgueury/mozilla/ , there's no good reason not to validate your code.

USEFUL OPEN SOURCE TOOLS

Some of the best tools for web development are available through the open source community at no cost at all. Consider these application as part of your HTML toolkit:

Open Source Tool	Description
Aptana	http://www.aptana.com/ This free programmer's editor (based on Eclipse) is a full-blown IDE customized for HTML / XHTML, CSS, JavaScript, and Ajax. It offers code completion, syntax highlighting, and FTP support within the editor.
Web Developer Toolbar	https://www.addons.mozilla.org/en-US/firefox/addon/60 This Firefox extension adds numerous debugging and web development tools to your browser.
Firebug	https://addons.mozilla.org/en-US/firefox/addon/1843 is an add-on that adds full debugging capabilities to the browser. The firebug lite version even works with IE.

PAGE STRUCTURE ELEMENTS

The following elements are part of every web page.

Element	Description
<html></html>	Surrounds the entire page
<head></head>	Contains header information (metadata, CSS styles, JavaScript code)
<title></title>	Holds the page title normally displayed in the title bar and used in search results
<body></body>	Contains the main body text. All parts of the page normally visible are in the body

KEY STRUCTURAL ELEMENTS

Most pages contain the following key structural elements:

Element	Name	Description
<h1> </h1>	Heading 1	Reserved fo strongest emphasis
<h2> </h2>	Heading 2	Secondary level heading. Headings go down to level 6, but <h1> through <h3> are most common
<p> </p>	Paragraph	Most of the body of a page should be enclosed in paragraphs
<div> </div>	Division	Similar to a paragraph, but normally marks a section of a page. Divs usually contain paragraphs

LISTS AND DATA

Web pages frequently incorporate structured data so HTML includes several useful list and table tag

Element	Name	Description
<ul></ul>	Unordered list	Normally these lists feature bullets (but that can be changed with CSS)
<ol></ol>	Ordered list	These usually are numbered, but this can be changed with CSS
<li></li>	List item	Used to describe a list item in an unordered list or an ordered list
<dl></dl>	Definition list	Used for lists with name-value pairs
<dt></dt>	Definition term	The name in a name-value pair. Used in definition lists
<dd></dd>	Definition description	The value (or definition) of a name, value pair
<table></table>	Table	Defines beginning and end of a table
<tr></tr>	Table row	Defines a table row. A table normally consists of several <tr> pairs (one per row)
<td></td>	Table data	Indicates data in a table cell. <td> tags occur within <tr> (which occur within <table>)
<th></th>	Table heading	Indicates a table cell to be treated as a heading with special formatting

Standard List Types

HTML supports three primary list types. Ordered lists and unordered lists are the primary list types. By default, ordered lists use numeric identifiers, and unordered lists use bullets.

However, you can use the list-style-type CSS attribute to change the list marker to one of several types.

Lists can be nested inside each other

Definition lists

The special definition list is used for name / value pairs. The definition term (dt) is a word or phrase that is used as the list marker, and the definition data is normally a paragraph:

Use of tables

Tables were used in the past to overcome the page-layout shortcomings of HTML. That use is now deprecated in favor of CSS-based layout. Use tables only as they were intended, to display tabular data.

A table mainly consists of a series of table rows (tr.) Each table row consists of a number of table data (td) elements. The table heading (th) element can be used to indicate a table cell should be marked as a heading.

The rowspan and colspan attributes can be used to make a cell span more than one row or column.

Each row of a table should have the same number of columns, and each column should have the same number of rows. Use of the span attribute may require adjustment to other rows or columns.

LINKS AND IMAGES

Links and images are both used to incorporate external resources into a page. Both are reliant on URIs (Universal Resource Indicators), commonly referred to as URLs or addresses.

<a> (anchor) The anchor tag is used to provide the basic web link:

In this example, http://www.example.com is the site to be visited. The text "link to example.com" will be highlighted as a link.

absolute and relative references

<link>

The link tag is used primarily to pull in external CSS files:

<img>

The img tag is used in to attach an image. Valid formats are .jpg, .png, and .gif. An image should always be accompanied by an alt attribute describing the contents of the image.

Image formatting attributes (height, width, and align) are deprecated in favour of CSS.

SPECIALTY MARKUP

HTML / XHTML includes several specialty tags. These are used to describe special purpose text. They have default styling, but of course the styles can be modified with CSS.

<quote>

The quote tag is intended to display a single line quote:

Quote is an inline tag. If you need a block level quote, use <blockquote>.

<pre>

The <pre> tag is used for pre-formatted text. It is sometimes used for code listings or ASCII art because it preserves carriage returns. Pre-formatted text is usually displayed in a fixed-width font.

<code>

The code format is used to manage pre-formatted text, especially code listings. It is very similar to pre.

This tag is used to mark multi-line quotes. Frequently it is set off with special fonts and indentation through CSS. It is a block-level tag.

<span>

The span tag is a vanilla inline tag. It has no particular formatting of its own. It is intended to be used with a class or ID when you want to apply style to an inline chunk of code.

The em tag is used for standard emphasis. By default, <em> italicizes text, but you can use CSS to make any other type of emphasis you wish.

This tag represents strong emphasis. By default, it is bold, but you can modify the formatting with CSS.

Forms are the standard user input mechanism in HTML / XHTML. You will need another language like JavaScript or PHP to read the contents of the form elements and act upon them.

Form Structure

A number of tags are used to describe the structure of the form. Begin by looking over a basic form:

The <form></form> pair describes the form. In XHTML strict, you must indicate the form's action property. This is typically the server-side program that will read the form. If there is no such program, you can set the action to null ("") The method attribute is used to determine whether the data is sent through the get or post mechanism.

Most form elements are inline tags, and must be encased in a block element. The fieldset is designed exactly for this purpose. Its default appearance draws a box around the form. You can have multiple fieldsets inside a single form.

You can add a legend inside a fieldset. This describes the purpose of the fieldset.

A label is a special inline element that describes a particular field. A label can be paired with an input element by putting that element's ID in the label's for attribute.

The input element is a general purpose inline element. It is meant to be used inside a form, and it is the basis for several types of more specific input. The subtype is indicated by the type attribute. Input elements usually include an id attribute (used for CSS and JavaScript identification) and / or a name attribute (used in server-side programming.) The same element can have both a name and an id.

This element allows a single line of text input:

Passwords display just like textboxes, except rather than showing the text as it is typed, an asterisk appears for each letter. Note that the data is not encoded in any meaningful way. Typing text into a password field is still entirely unsecure.

Radio Button

Radio buttons are used in a group. Only one element of a radio group can be selected at a time. Give all members of a radio group the same name value to indicate they are part of a group.

Attaching a label to a radio button means the user can activate the button by clicking on the corresponding label. For best results, use the selected attribute to force one radio button to be the default.

Checkboxes are much like radio buttons, but they are independent. Like radio buttons, they can be associated with a label.

Hidden fields hold data that is not visible to the user (although it is still visible in the code) It is primarily used to preserve state in server-side programs.

Note that the data is still not protected in any meaningful way.

Buttons are used to signal user input. Buttons can be created through the input tag:

This will create a button with the caption "launch the missiles." When the button is clicked, the page will attempt to run a JavaScript function called "launchMissiles()" Standard buttons are usually used with JavaScript code on the client. The same button can also be created with this alternate format:

This second form is preferred because buttons often require different CSS styles than other input elements. This second form also allows an <img> tag to be placed inside the button, making the image act as the button.

The reset button automatically resets all elements in its form to their default values. It doesn't require any other attributes.

Select / option

Drop-down lists can be created through the select / option mechanism. The select tag creates the overall structure, which is populated by option elements.

The select has an id (for client-side code) or name (for serverside code) identifier. It contains a number of options. Each option has a value which will be returned to the program. The text between <option> and </option> is the value displayed to the user. In some cases (as in this example) the value displayed to the user is not the same as the value used by programs.

Multiple Selections

You can also create a multi-line selection with the select and option tags:

DEPRECATED FORMATTING TAGS

Certain tags common in older forms of HTML are no longer recommended as CSS provides much better alternatives.

The font tag was used to set font color, family (typeface) and size. Numerous CSS attributes replace this capability with much more flexible alternatives. See the CSS refcard for details.

I (italics)

HTML code should indicate the level of emphasis rather than the particular stylistic implications. Italicizing should be done through CSS. The <em> tag represents emphasized text. It produces italic output unless the style is changed to something else. The <i> tag is no longer necessary and is not recommended. Add font-style: italic to the style of any element that should be italicized.

Like italics, boldfacing is considered a style consideration. Use the <strong> tag to denote any text that should be strongly emphasized. By default, this will result in boldfacing the enclosed text. You can add bold emphasis to any style with the font-weight: bold attribute in CSS.

DEPRECATED TECHNIQUES

In addition to the deprecated tags, there are also techniques which were once common in HTML that are no longer recommended.

Frames have been used as a layout mechanism and as a technique for keeping one part of the page static while dynamically loading other parts of the page in separate frames. Use of frames has proven to cause major usability problems. Layout is better handled through CSS techniques, and dynamic page generation is frequently performed through server-side manipulation or AJAX.

Table-based design

Before CSS became widespread, HTML did not have adequate page formatting support. Clever designers used tables to provide an adequate form of page layout. CSS provides a much more flexible and powerful form of layout than tables, and keeps the HTML code largely separated from the styling markup.

HTML ENTITIES

Sometimes you need to display a special character in a web page. HTML has a set of special characters for exactly this purpose. Each of these entities begins with the ampersand(&) followed by a code and a semicolon.

Character	Name	Code	Note
	Non-breaking space		Adds white space
	<	Used to display HTML code or mathematics
>	Greater than	>	Used to display HTML code or mathematics
&	Ampersand	&	If you're not displaying an entity but really want the & symbol
©	Copyright	©	Copyright symbol
®	Registered trademark	®	Registered trademark

HTML 5 / CSS3 PREVIEW

New technologies are on the horizon. Firefox 3.5 now has support for significant new HTML 5 features, and CSS 3 is not far behind. While the following should still be considered experimental, they are likely to become very important tools in the next few years. Firefox 3.5, Safari 4 (and a few other recent browsers) support the following new features:

Audio and video tags

Finally the browsers have direct support for audio and video without plugin technology. These tags work much like the img tag.

The HTML 5 standard currently supports Ogg Theora video, Ogg Vorbis audio, and wav audio. The Ogg formats are opensource alternatives to proprietary formats, and plenty of free tools convert from more standard video formats to Ogg. The autoplay option causes the element to play automatically. The controls element places controls directly into the page.

The code between the beginning and ending tag will execute if the browser cannot process the audio or video tag. You can place alternate code here for embedding alternate versions (Flash, for example)

The canvas tag offers a region of the page that can be drawn upon (usually with Javascript.) This creates the possibility of real interactive graphics without requiring plugins like Flash.

This is actually a CSS improvement, but it's much needed. It allows you to define a font-face in CSS and include a ttf font file from the server. You can then use this font face in your ordinary CSS and use the downloaded font. If this becomes a standard, we will finally have access to reliable downloadable fonts on the web, which will usher in web typography at long last.

Weekly Trends and Language Statistics

An Introduction to HTML for Beginners

HTML, which stands for HyperText Markup Language, serves as the foundation of web development. It enables you to create interactive web pages, structure content, and effectively communicate your message.

In this guide, we'll explore HTML comprehensively, addressing essential questions to provide a strong foundation for budding web developers.

The Crucial Role of HTML in Web Development

HTML plays an essential role in web development as it defines the structure and content of web pages. It serves as the backbone upon which websites are built.

HTML accomplishes this by utilizing a system of tags and elements, each serving a unique purpose.

How Do I Write HTML Code?

Writing HTML code is a matter of understanding HTML tags.

Tags are enclosed within angle brackets, each comprising an opening and closing part. They function as building blocks that define the structure of your web page.

Think of them as the bricks and mortar of web development. Understanding their roles is essential for web development.

How to Create a Website Using HTML?

Creating a website using HTML involves several key steps. Let's go over them in the following sections.

Website Planning

Before you start coding, take time to plan your website thoroughly.

Identify your target audience, outline the content and structure of your site and design a layout that aligns with your goals.

Keep in mind that the visual design can be enhanced with CSS (Cascading Style Sheets), a topic we'll explore later in your web development journey.

Writing HTML Code

Open a text editor, such as Visual Studio Code or Sublime Text, and begin writing HTML code.

Start with the basic structure, including <!DOCTYPE html> , <html> </html> , <head> </head> , and <body> </body> .

Then, populate the body with your content.

Saving as .html

Save your HTML files with a .html extension to indicate that they are web pages. Proper file naming is essential for organizing your project.

Local Testing

To see how your website looks and functions, open your HTML files in a web browser. This local testing phase allows you to fine-tune your design and layout.

Hosting and Publishing

For your website to be accessible on the internet, you'll need web hosting services. Various providers offer hosting, and you'll typically obtain a domain name (for example, www.yourwebsite.com) to point to your hosted site.

How to Start HTML Code?

Starting HTML code is straightforward. Let's go over each step in the following sections.

Text Editor Selection

Choose a text editor that suits your needs. Popular options include Visual Studio Code, Sublime Text, and Atom. These editors offer features like syntax highlighting and autocompletion tailored to web development.

HTML5 Declaration

Initiate your HTML document with <!DOCTYPE html> . This declaration signifies the use of HTML5, the latest HTML standard.

Building the Structure

Inside the <html> </html> tags, create your HTML structure.

The <head> </head> section contains metadata, including the page title, and the <body> </body> section houses the visible content of your web page.

Adding Metadata

Within the <head> </head> section, utilize the <meta> tag to specify the character encoding, ensuring proper rendering.

How Do I Run HTML Code Step by Step?

Executing HTML code is straightforward, thanks to modern web browsers. Here's a step-by-step guide:

Save Your HTML File

Ensure that your HTML file is saved with a .html extension. This signals to your computer that it's an HTML document.

Double-Click to Open

Double-click the HTML file, and your default web browser will automatically open it. Your browser renders the HTML, displaying your web page.

Alternative Browsers

If you prefer a specific web browser, you can right-click the HTML file and choose "Open with" to select your preferred browser.

Inspect and Debug

Modern web browsers come equipped with built-in developer tools that enable you to inspect and debug your HTML, CSS, and JavaScript.

Access these tools by right-clicking on your web page and selecting "Inspect" or by pressing F12 or Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac).

How Do You Write "Hello" in HTML?

Displaying "Hello" on a web page is straightforward. You can use the <h1> tag to create a top-level heading, as demonstrated earlier.

HTML offers multiple ways to present "Hello." For instance:

Or you can use a paragraph tag:

Both options result in "Hello!" being displayed on your web page. The choice depends on the context and your styling preferences.

It's worth noting that HTML has six levels of headings, ranging from <h1> (the highest) to <h6> (the lowest). Headings are used to structure content hierarchically, with <h1> representing the main heading and <h6> representing subheadings.

How to Create an HTML File with an Example?

Creating an HTML file is your gateway to web development. Here's an expanded step-by-step guide:

Choose a Text Editor

Select a text editor that suits your workflow and preferences. Modern editors offer features like syntax highlighting and autocompletion, enhancing your coding experience.

Structure Your HTML

Begin your HTML document with <!DOCTYPE html> , followed by <html> </html> tags to enclose your content. Inside the <head> </head> section, set metadata, such as the page title and character encoding, using the <meta> tag.

Add Content

Within the <body> </body> section, insert your content. Experiment with various HTML tags to format your content, including headings, paragraphs, lists, links, and images.

Save with .html Extension

Save your file with a .html extension. This naming convention ensures that your computer recognizes it as an HTML document.

Preview Locally

Double-click the HTML file to open it in your web browser. This provides an instant preview of your webpage, allowing you to see how it appears to your audience.

Introducing CSS for Styling

While HTML defines the structure of your web page, CSS (Cascading Style Sheets) is used for styling. You can link an external CSS file to your HTML to control the design and layout of your webpage. For example:

This separation of content (HTML) and presentation (CSS) is a fundamental practice in web development.

How Do You Write a Sentence in HTML?

To create a sentence in HTML, you can employ the <p> (paragraph) tag, as mentioned earlier. However, HTML offers flexibility, allowing you to use other inline tags for shorter text snippets. Here's an example:

Alternatively, for shorter text, you can use the <span> tag:

The <p> tag is typically used for paragraphs, while the <span> tag is more versatile and is often used for inline elements within a sentence or paragraph. Choose the tag that suits the context of your content.

Additional HTML Elements to Explore

While we've covered the basics, HTML offers a plethora of elements and attributes for creating rich and interactive web experiences. Here are some additional HTML elements you can explore:

HTML provides elements like <form> , <input> and <button> to create user-friendly forms for collecting data.

You can use <table> , <tr> , <td> and other related tags to structure tabular data.

Embed images, audio, and video using <img> , <audio> , and <video> tags.

Links and Anchors

Create hyperlinks using the <a> tag to connect web pages and external resources.

Use <ul> for unordered lists, <ol> for ordered lists and <li> for list items.

Semantic Tags

HTML5 introduced semantic elements like <header> , <nav> , <section> , <article> and <footer> to enhance the structure and accessibility of web pages.

Further refine your document with meta tags, including those for specifying character encoding, viewport settings, and author information.

In closing, HTML is your gateway to web development. It provides the foundation upon which you can build stunning web experiences and effectively communicate with your audience.

Whether you're embarking on creating a personal blog, launching an e-commerce site, or showcasing your portfolio, HTML forms the foundation of your online presence.

As you progress in web development, remember that HTML is just the beginning of your journey. Complement your HTML skills with CSS for styling and JavaScript for interactivity. This approach empowers you to create dynamic and engaging websites that captivate the attention of your audience.

In your pursuit of web development excellence, embrace the challenges and endless possibilities presented by HTML and the ever-evolving field of web technologies. Stay curious, never stop learning, and remain current with the latest standards and best practices. Connect with me on Twitter .

HI, I am Joan, a frontend developer and technical writer who's deeply passionate about open-source technologies. With several years of experience in the industry, I have been involved in various projects, contributing code, and writing technical documentation to empower developers worldwide. When not coding or writing, I enjoy crocheting, reading and listening to podcasts. If you enjoy reading my tech articles, consider <a href="https://www.buymeacoffee.com/joanayebola">buying me a coffee</a> to help me more contents and projects for developers.

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

Today's news
Reviews and deals
Climate change
2024 election
Fall allergies
Health news
Mental health
Sexual health
Family health
So mini ways
Unapologetically
Buying guides

Entertainment

How to Watch
My Portfolio
Latest News
Stock Market
Biden Economy
Stocks: Most Actives
Stocks: Gainers
Stocks: Losers
Trending Tickers
World Indices
US Treasury Bonds Rates
Top Mutual Funds
Options: Highest Open Interest
Options: Highest Implied Volatility
Basic Materials
Communication Services
Consumer Cyclical
Consumer Defensive
Financial Services
Industrials
Real Estate
Stock Comparison
Advanced Chart
Currency Converter
Credit Cards
Balance Transfer Cards
Cash-back Cards
Rewards Cards
Travel Cards
Credit Card Offers
Best Free Checking
Student Loans
Personal Loans
Car insurance
Mortgage Refinancing
Mortgage Calculator
Morning Brief
Market Domination
Market Domination Overtime
Asking for a Trend
Opening Bid
Stocks in Translation
Lead This Way
Good Buy or Goodbye?
Financial Freestyle
Capitol Gains
Living Not So Fabulously
Fantasy football
Pro Pick 'Em
College Pick 'Em
Fantasy baseball
Fantasy hockey
Fantasy basketball
Download the app
Daily fantasy
Scores and schedules
GameChannel
World Baseball Classic
Premier League
CONCACAF League
Champions League
Motorsports
Horse racing
Newsletters

New on Yahoo

Privacy Dashboard

Yahoo Finance

Youtopia to present at 150th national investment banking association conference, september 4-5.

Denver, Colorado--(Newsfile Corp. - August 29, 2024) - Youtopia announced today that it will be presenting at the 150th National Investment Banking Association (NIBA) Investment Conference, taking place on September 4-5, 2024, at The Westin Fort Lauderdale Beach Resort in Fort Lauderdale, Florida.

Kenneth Neumann, Founder & CEO of Youtopia, will lead the presentation, followed by one-on-one meetings with investors and industry professionals.

About Youtopia

On a mission to make it easy to live 100 healthy years!

Youtopia ® is a pioneering health technology marketplace and platform revolutionizing how individuals achieve vibrant health and optimal wellness. As the first company to simplify access to essential health products, Youtopia offers a range of services tailored to the unique needs of its users.

Members benefit from a Personalized Prescriptive Nutrient Plan ™ , starting with a comprehensive wellness evaluation, including a detailed blood test. AI, doctors, and nutritionists analyze this test to create a personalized nutrient plan tailored to each member's specific health needs, all at roughly the same cost as their current food expenses.

Youtopia also simplifies meal planning and nutrient fulfillment. Its optimization engine makes meal planning effortless, guiding users to meet their daily nutrient targets with delicious meals that fit their schedules, whether dining alone or with a group. The platform seamlessly accommodates group needs, ensuring everyone's dietary requirements are met.

In addition, Youtopia offers convenient nutrient delivery, providing users with various options to meet their daily needs. The AI-driven platform connects them with local meal makers for ready-made meal delivery or dining-out choices that align with their nutritional goals-all at a cost comparable to their current food expenses.

Youtopia leverages unparalleled health and nutritional data to offer tailored services for each user, known as Youtopians. With a vision to become the most comprehensive, trusted, and effective health and wellness resource on the planet, Youtopia is setting new standards in personalized health optimization.

About the National Investment Banking Association (NIBA)

For over 40 years, NIBA has specialized in hosting investment conferences for public and private companies, regardless of size or industry, seeking access to funding and liquidity sources. NIBA's Investment Conferences are renowned for their professional offerings and for fostering an environment optimized for productivity and collaboration.

For more details about the National Investment Banking Association's 150th Investment Conference on September 4-5, 2024, in Fort Lauderdale, Florida, please visit: NIBA Conference Details .

For More Information about Youtopia, Contact:

Youtopia Jason Lockridge (219) 670-7067 [email protected] https://youtopia.com

To view the source version of this press release, please visit https://www.newsfilecorp.com/release/221426

IMAGES

How to create html presentations with markdown files
Presentation slides using HTML and CSS
How to Create Presentation Slides with HTML and CSS
10 Best HTML Presentation Frameworks In JavaScript (2021 Update
Working with HTML Presentation Tags
PPT

VIDEO

Creative Button Design With CSS & HTML
HTML Tutorial : Presentation Elements
How To Make Animating Website Using HTML And CSS
How to make 3d interactive presentation
How to Save PowerPoint 2007 as HTML
Html Style Attributes

COMMENTS

The HTML presentation framework
Create Stunning Presentations on the Web. reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your ...
How to Create 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 Presentation Slides With HTML and CSS
Recall that presentationArea refers to the element that wraps the whole presentation. By adding the class full-screen to this element, we trigger the CSS that will expand it to take up the whole screen.. Since we're now in full-screen mode, we need to show the icon for reverting back to the small screen by adding the class .show to it. Finally, we update the variable screenStatus to 1.
WebSlides: Create Beautiful HTML Presentations
WebSlides is really easy. Each parent <section> in the #webslides element is an individual slide.. Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast.
How To Build A Captivating Presentation Using HTML, CSS, & JavaScript
Making a Presentation. Copy an existing presentation folder; Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2) Making a Slide. Making a slide is pretty simple. Just add a HTML section. <section>  </section> inside the span with the class of "prez-root". Also keep in mind ...
How to Create 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 ...
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
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
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 ...
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.
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 Presentation Slides with HTML and CSS
Create the Starter Markup. 3. Make It Pretty. 4. Enable Slide Navigation. Moving the Presentation to the Next and Previous Slides. Code for Showing the Presentation in Full Screen and Small Screen. Hidding Left and Right Icons in First and Last Slides. Updating and Displaying Slide Number.
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!
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 ...
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...
Mastering reveal.js
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! $99 $79. Buy course. 22 videos.
How To Create a Slideshow
Learn the basics of HTML in a fun and engaging video tutorial. Templates. We have created a bunch of responsive website templates you can use - for free! Web Hosting. Host your own website, and share it to the world with W3Schools Spaces. Create a Server. Create your own server using Python, PHP, React.js, Node.js, Java, C#, etc. ...
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 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.
WebSlides Documentation: Components
The easiest way to make HTML presentations. Incredibly versatile. 120+ slides. Benefit 2. The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors. iPhone 7 3D Touch, 12MP photos, and 4K video. Centering vertically using grid.vertical-align. Every iPhone they have made was built on the same belief. ...
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.
An Introduction to HTML for Beginners
This separation of content (HTML) and presentation (CSS) is a fundamental practice in web development. How Do You Write a Sentence in HTML? To create a sentence in HTML, you can employ the <p> (paragraph) tag, as mentioned earlier. However, HTML offers flexibility, allowing you to use other inline tags for shorter text snippets.
Youtopia to Present at 150th National Investment Banking Association
Denver, Colorado--(Newsfile Corp. - August 29, 2024) - Youtopia announced today that it will be presenting at the 150th National Investment Banking Association (NIBA) Investment Conference, taking ...
Ron DeSantis on golf courses plan in state parks, Jonathan Dickinson
DeSantis downplays anger over state park golf courses plan; it's part of "left wing" narrative The governor said the proposal was nowhere near fruition and nowhere near ready for primetime.

DEV Community

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

Built-In Themes

Changing The Theme

Custom Themes

Creating A Custom Theme

Mixins & Settings

Vertical Slides

Transitions

Top comments (18)

SBCompSciClub / prez-software

Run on Dev Server

Making a Presentation

Making a Slide

Adding Text

React Prop Drilling: Should You Use It?

Day7 #100days Miva challenge

The Solar System in CSS

fetch + interceptors

HTML Presentations Made Easy

Vertical Slides

Basement Level 1

Basement Level 2

Point of View

Works in Mobile Safari

Marvelous Unordered List

Fantastic Ordered List

Transition Styles

Global State

Custom Events

Slide Backgrounds

Image Backgrounds

Background Transition Override

Clever Quotes

Pretty Code

Intergalactic Interconnections

Fragmented Views

Fragment Styles

Spectacular image!

Take a Moment

Stellar Links

BY Hakim El Hattab / hakim.se

Navigation Menu

Saved searches

hakimel/reveal.js

Repository files navigation

Getting started

Releases 47

Contributors 323

Create Incredible Web Presentations with Reveal.js

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

Alternatives to Reveal.js

Getting Started

Installations

Folder Structure

Starter Template

Backgrounds

Session Replay for Developers

Customization

Transitions

Vertical Slides

Auto-Animate

Slide Numbers

Useful hints and guidelines for Reveal.js

Gain Debugging Superpowers

More articles from OpenReplay Blog

SEO Basics for Web Developers

SEO Tips for Next.js sites

Bootstraphunter

How to Create Presentation Slides with HTML and CSS

1. Create the Directory Structure

2. Create the Starter Markup

3. Make It Pretty

4. Enable Slide Navigation

Moving the Presentation to the Next and Previous Slides

Code for Showing the Presentation in Full Screen and Small Screen

Hidding Left and Right Icons in First and Last Slides

Updating and Displaying Slide Number

Putting Everything Together

Wrapping Up