How to Create Presentation Slides With HTML and CSS
As I was looking through the different software programs that allow me to create presentation slides I realized that I don’t need yet another program. I could use the tools that I already have.
You can easily create interactive and beautiful presentations using HTML, CSS, JavaScript, the three main web technologies. This tutorial will teach you how to create interactive presentations using HTML5, CSS, and JavaScript.
This tutorial is ideal for anyone who is new to HTML5, CSS and JavaScript and wants to learn more about building.
Here’s the last preview of the presentation slide that we’re going build:
1.Create the Directory structure
Let’s get started by creating our folder structure. It should be quite simple. We’ll need:
-
- index.html
-
- css/style.css
-
- js/scripts.js
This is a basic template. For the moment, your files will remain unaltered. We will fix it soon.
2.Starter Markup
Let’s start by creating the base markup of our presentation page. Copy the following code into your presentation page. 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="https://code.tutsplus.com/tutorials/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>
You can see in the base markup that we are importing Font Awesome Icons. This stylesheet is also visible.style.css), and our JavaScript (index.js).
Now, we’ll add HTML markup to the slides. <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 />Everything 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 all. Each slide is composed entirely of the heading and the content sections.
One slide will only be displayed at a given time. This functionality is handled automatically by the .show
class, which we will implement in our stylesheet. We’ll be able to dynamically add the JavaScript code later using JavaScript. .show
class to the active slide of the page.
Below the slides, we’ll add markup for the slide’s counter or tracker.
<div id="presentation-area"> <!-- <section class="slides"><-></section> --> <section class="counter"> 1 of 6 </section> </div>
Later, we will use JavaScript for updating the text content as users navigate through the slides.
Finally, we’ll add a slide navigator just below our 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 contains four buttons that allow you to navigate left and right, switch between full-screen and small-screen modes, and toggle between full-screen and small-screen modes. We’ll again use the class. .show
You can control which button appears at a given time.
That’s all for the HTML portion. Now let’s get to the styling.
3.Make It Pretty
Next, we will create our stylesheet. This stylesheet will be both functional and aesthetic. We’ll need to target the class to make each slide flow from left to right. .show
With a stylesheet to show it.
Here’s the complete stylesheet of our project:
* body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } ul { margin-left: 2rem; } ul liA.navigation button 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.Slide Navigation enabled
We want to see the next slide or the previous slide when we click on the right or left icon. We also want to toggle between fullscreen and smallscreen mode.
Additionally, we want the slide counter to show the exact slide number for each slide. JavaScript will enable all these features.
Inside js/index.jsWe’ll start by storing references the the presentation wrapper, slides and active slide:
let slidesParentDiv = document.querySelector('.slides'); let slides = document.querySelectorAll('.slide'); let currentSlide = document.querySelector('.slide.show');
Next, we will store references to both the slide counter (left and right icons), and both slide navigators (both left and right icons).
var slideCounter = document.querySelector('.counter'); var leftBtn = document.querySelector('#left-btn'); var rightBtn = document.querySelector('#right-btn');
You can then store references to the entire presentation container and both buttons icons for switching between full-screen and small-screen modes.
let presentationArea = document.querySelector('#presentation-area'); var fullScreenBtn = document.querySelector('#full-screen'); var smallScreenBtn = document.querySelector('#small-screen');
After we’re done with the reference, we’ll initialize some variables using default values.
var screenStatus = 0. var currentSlideNo = var totalSides = 0;
ScreenStatus
The screen orientation. 0 is a full screen mode, while 1 is a small-screen mode.
CurrentSlideNo
This is the current slide number, which is expected to be the first slide. TotalSlides
is initialized with 0 but this will be replaced with the actual number of slides.
Moving the Presentation to the Next Slides and Previous Slides
Next, we will add click event listeners for the left button and right buttons, full screen buttons, small screen buttons, and full screen buttons:
leftBtn.addEventListener('click', moveToLeftSlide); rightBtn.addEventListener('click', moveToRightSlide); fullScreenBtn.addEventListener('click', fullScreenMode); smallScreenBtn.addEventListener('click', smallScreenMode);
We bind the functions that will run when click event is triggered on the element.
These are the two functions that change the slide’s appearance:
function moveToLeftSlide() function moveToRightSlide()
In the function moveToLeftSlide
We can now access the previous sibling (i.e. Remove the slide from the previous slide .show
Add the slide to the sibling you are currently classifying. This will move your presentation to the previous slide.
In the function, we do the exact opposite. moveToRightSlide
. Because NextElementSibling
It is the opposite of previousElementSibling
We’ll be getting the next sibling instead.
Code to display the presentation on both a full-screen and small screen
We also added click event receivers to the full screen and small-screen icons. This is the function that toggles full-screen mode.
FullScreenMode function() function smallScreenMode() presentationController.classList.remove('full-screen'); fullScreenBtn.classList.add('show'); smallScreenBtn.classList.remove('show'); screenStatus = 0.
Remember that presentationArea
The element that wraps the entire presentation. The class can be added to the presentation. full-screen
This element triggers the CSS to expand it to fill the entire screen.
We’re now in full screen mode. The icon to revert to the smaller screen must be shown. .show
It. Finally, we update this variable. ScreenStatus
To 1.
For the smallScreenMode
function, we do the opposite—we remove the class full-screen
Show the expand button icon and then click on update ScreenStatus
.
Hidden the Left and right icons on the first and last slides
Now we need to figure out a way to hide left and right buttons on the first and last slides, respectively.
To achieve this, we’ll use two functions:
function hideLeftButtonor other() { if(currentSlideNo == 1) { toLeftBtn.classList.remove('show'); } else { toLeftBtn.classList.add('show'); } } function hideRightButtonor other() { if(currentSlideNo === totalSides) { toRightBtn.classList.remove('show'); } else { toRightBtn.classList.add('show'); } }
These functions do a simple job: they check for the slide number and hide left and right buttons if the presentation is pointing at the first and last slides respectively.Slide number updating and display
Because we’re using the variable CurrentSlideNo
We need a way to update the left and right buttons icons as the user navigates through slides. We need to show the user which slide they are currently viewing.
We’ll design a function GetCurrentSlideNo
To update the 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. For each slide on the page we increment the counter. The active counter (i.e. With the class .show
) to the CurrentSlideNo
variable.
Now we can add text to the slide counter using another function.
function setSlideNo() { slideNumber.innerText = `${currentSlideNo} of ${totalSides}` }
As an example, if we were on slide 2, the slide’s counter would read, “2 of 6”.
All things together
To ensure that they all work together, we will run them in a brand new environment. Init
Function that we’ll execute at start of script, just below references:
Init(); It functions() getCurrentSlideNo(); TotalSides = slides.length setSlideNo(); hideLeftButton(); hideRightButton();
We must also run Init()
Both the moveToLeftSlide
And moveToRightSlide
functions:
function moveToLeftSlide() // Other code Init(); function moveToRightSlide() // Other code Init();
This will ensure that you are able to enjoy the Init
Each time the user navigates to the left or right of the presentation, the function runs.
Wrapping up
I hope this tutorial helped to make you more familiar with basic web development. We created a slideshow using HTML, CSS and JavaScript.
You should have learned HTML, CSS, JavaScript syntax for web development.