Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

March 15, 2022 01:15 am

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.

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.

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:

<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="">[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:

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

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

Original Link: https://code.tutsplus.com/tutorials/how-to-create-presentation-slides-with-html-and-css--net-19870

Share this article:

View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code