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?

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. After this you could even learn to build an HTML5 slide deck or a dynamic HTML with JavaScript PPT. The sky is the limit.

Wondering how to create an HTML slideshow? Here's the final preview of the presentation HTML tutorial slides we're going to build:

Have you checked out HTML tutorial slides? It's a good example of HTML PPT slides for download.

Let's begin.

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 fix 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:

<section class="presentation">

    <!-- 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="">ubahthebuilder@gmail.com</a></p>
      </div>
    </div>
    
    <!-- Add 5 more slides here -->
</section>

We have seven slides in total, and each slide is composed 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:

<div id="presentation-area">
   <!-- <section class="slides"><-></section> -->
   <section class="counter">
    1 of 6
  </section>
</div>

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:

<div id="presentation-area">
   <!-- <section class="slides"><-></section> -->
   <!-- <section class="counter"><-></section> -->
   <section class="navigation">
        <button id="full-screen" class="btn-screen show">
          <i class="fas fa-expand"></i>
        </button>
    
        <button id="small-screen" class="btn-screen">
          <i class="fas fa-compress"></i>
        </button>
    
        <button id="left-btn" class="btn">
          <i class="fas fa-solid fa-caret-left"></i>
        </button>
    
        <button id="right-btn" class="btn">
          <i class="fa-solid fa-caret-right"></i>
        </button>
  </section>
</div>

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. Now, 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 and 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:

1	let slidesParentDiv = document.querySelector('.slides');
2	let slides = document.querySelectorAll('.slide');
3	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):

1	var slideCounter = document.querySelector('.counter');
2	var leftBtn = document.querySelector('#left-btn');
3	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:

1	let presentationArea = document.querySelector('#presentation-area');
2	var fullScreenBtn = document.querySelector('#full-screen');
3	var smallScreenBtn = document.querySelector('#small-screen');

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

1	var screenStatus = 0;
2	var currentSlideNo = 1
3	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 (i.e. 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, we do the opposite—we remove the class full-screen, show the expand button icon, and update screenStatus.

Hiding the Left and Right Icons on the First and Last Slides

Now, we need to invent a way to hide 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 the 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 they are 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 (i.e. with the class .show) to the currentSlideNo variable.

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

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

So if we were on the second slide, for example, the slide's counter would read: "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 the start of the script, just below the references:

init();

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

  init();
}

function moveToRightSlide() {
  // other code

  init();
}

This will ensure that the init function 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. It's a great way to get into creating dynamic HTML with JavaScript PPT

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

1	* {
2	margin: 0;
3	padding: 0;
4	box-sizing: border-box;
5	font-family: sans-serif;
6	transition: all 0.5s ease;
7	}
8
9	body {
10	width: 100vw;
11	height: 100vh;
12	display: flex;
13	align-items: center;
14	justify-content: center;
15	}
16
17	ul {
18	margin-left: 2rem;
19	}
20
21	ul li,
22	a {
23	font-size: 1.2em;
24	}
25
26	.container {
27	background: #212121;
28	width: 100%;
29	height: 100%;
30	position: relative;
31	display: flex;
32	align-items: center;
33	justify-content: center;
34	}
35
36	#presentation-area {
37	width: 1000px;
38	height: 500px;
39	position: relative;
40	background: purple;
41	}
42
43	/* Styling all three sections */
44	#presentation-area .presentation {
45	width: 100%;
46	height: 100%;
47	overflow: hidden;
48	background: #ffffff;
49	position: relative;
50	}
51
52	#presentation-area .counter {
53	position: absolute;
54	bottom: -30px;
55	left: 0;
56	color: #b6b6b6;
57	}
58
59	#presentation-area .navigation {
60	position: absolute;
61	bottom: -45px;
62	right: 0;
63	}
64
65	/* On full screen mode */
66	#presentation-area.full-screen {
67	width: 100%;
68	height: 100%;
69	overflow: hidden;
70	}
71
72	#presentation-area.full-screen .counter {
73	bottom: 15px;
74	left: 15px;
75	}
76
77	#presentation-area.full-screen .navigation {
78	bottom: 15px;
79	right: 15px;
80	}
81
82	#presentation-area.full-screen .navigation .btn:hover {
83	background: #201e1e;
84	color: #ffffff;
85	}
86
87	#presentation-area.full-screen .navigation .btn-screen:hover {
88	background: #201e1e;
89	}
90	/* End full screen mode */
91
92	/* Buttons */
93	.navigation button {
94	width: 30px;
95	height: 30px;
96	border: none;
97	outline: none;
98	margin-left: 0.5rem;
99	font-size: 1.5rem;
100	line-height: 30px;
101	text-align: center;
102	cursor: pointer;
103	}
104
105	.navigation .btn {
106	background: #464646;
107	color: #ffffff;
108	border-radius: 0.25rem;
109	opacity: 0;
110	transform: scale(0);
111	}
112
113	.navigation .btn.show {
114	opacity: 1;
115	transform: scale(1);
116	visibility: visible;
117	}
118
119	.navigation .btn-screen {
120	background: transparent;
121	color: #b6b6b6;
122	visibility: hidden;
123	}
124
125	.btn-screen.show {
126	opacity: 1;
127	transform: scale(1);
128	visibility: visible;
129	}
130
131	.btn-screen.hover {
132	color: #ffffff;
133	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
134	}
135	/* End Buttons */
136
137	/* content */
138	.presentation .content {
139	padding: 2em;
140	width: 100%;
141	height: calc(100% - 100px);
142	z-index: 11;
143	}
144
145	.presentation .content.grid {
146	display: grid;
147	}
148
149	.presentation .content.grid.center {
150	justify-content: center;
151	align-items: center;
152	text-align: center;
153	}
154
155	.content .title {
156	font-size: 3em;
157	color: purple;
158	}
159
160	.content .sub-title {
161	font-size: 2.5em;
162	color: purple;
163	}
164
165	.content p {
166	font-size: 1.25em;
167	margin-bottom: 1rem;
168	}
169	/* End Content Stylesheet */
170
171	/* Slide */
172	.presentation .slide {
173	position: absolute;
174	top: 0;
175	left: 0;
176	width: 100%;
177	height: 100%;
178	background: #ffffff;
179	opacity: 0;
180	transform: scale(0);
181	visibility: none;
182	}
183
184	.slide.show {
185	opacity: 1;
186	transform: scale(1);
187	visibility: visible;
188	}
189
190	.slide .heading {
191	padding: 2rem;
192	background: purple;
193	font-size: 2em;
194	font-weight: bold;
195	color: #ffffff;
196	}

How to Create Presentation Slides With HTML and CSS