# How to Create Presentation Slides With HTML and 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?

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.

 1   2   3   4   5   6   7  Document  8   9   10   11   12   13   14 
 16   17 
 18   19   20   21  

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:

 1 
 2 3   4 
 5 
 6  Presentation on C#  7 
 8 
 9 

 10  What is C# ?
All You Need To Know  11 

 12 
 13 
 14 15   16 
 17 
 18  Overview  19 
 20 
 21 

 22  Introduction to C+  23 

 24 

 25  Basic and Advanced Concepts  26 

 27 

Lecture No. 1

 28 

 29 

ubahthebuilder@gmail.com

 30 
 31 
 32   33   34 


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:

 1 
 2   3 
 4  1 of 6  5 
 6 


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:

 1 
 2   3   4   21 


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:

 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 } 

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:

 1 leftBtn.addEventListener('click', moveToLeftSlide);  2 rightBtn.addEventListener('click', moveToRightSlide);  3 4 fullScreenBtn.addEventListener('click', fullScreenMode);  5 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:

 1 function moveToLeftSlide() {  2  var tempSlide = currentSlide;  3  currentSlide = currentSlide.previousElementSibling;  4  tempSlide.classList.remove('show');  5  currentSlide.classList.add('show');  6 }  7 8 function moveToRightSlide() {  9  var tempSlide = currentSlide;  10  currentSlide = currentSlide.nextElementSibling;  11  tempSlide.classList.remove('show');  12  currentSlide.classList.add('show');  13 } 

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:

 1 function fullScreenMode() {  2  presentationArea.classList.add('full-screen');  3  fullScreenBtn.classList.remove('show');  4  smallScreenBtn.classList.add('show');  5 6  screenStatus = 1;  7 }  8 9 function smallScreenMode() {  10  presentationController.classList.remove('full-screen');  11  fullScreenBtn.classList.add('show');  12  smallScreenBtn.classList.remove('show');  13 14  screenStatus = 0;  15 } 

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:

 1 function hideLeftButton() {  2  if(currentSlideNo == 1) {  3  toLeftBtn.classList.remove('show');  4  } else {  5  toLeftBtn.classList.add('show');  6  }  7 }  8 9 function hideRightButton() {  10  if(currentSlideNo === totalSides) {  11  toRightBtn.classList.remove('show');  12  } else {  13  toRightBtn.classList.add('show');  14  }  15 } 

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:

 1 function getCurrentSlideNo() {  2  let counter = 0;  3 4  slides.forEach((slide, i) => {  5  counter++  6 7  if(slide.classList.contains('show')){  8  currentSlideNo = counter;  9  }  10  });  11 12 } 

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:

 1 init();  2 3 function init() {  4 5  getCurrentSlideNo();  6  totalSides = slides.length  7  setSlideNo();  8  hideLeftButton();  9  hideRightButton();  10 } 

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

 1 function moveToLeftSlide() {  2  // other code  3 4  init();  5 }  6 7 function moveToRightSlide() {  8  // other code  9 10  init();  11 } 

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.