How to Create Presentation Slides With HTML and CSS

Tired of learning new presentation software? Leverage your existing web development skills! This tutorial shows you how to build stunning, interactive presentations using just HTML, CSS, and JavaScript – the core web technologies you already know. We'll structure slides with modern HTML5, style them with CSS, and add dynamic effects using JavaScript.

This beginner-friendly guide is perfect for building your HTML5, CSS, and JavaScript skills through a practical project. You'll even be able to create dynamic HTML5 slide decks or JavaScript-powered PPT alternatives!

Here's a preview of the final presentation:

Ready to get started? Let's dive in.

1. Project Setup

First, create a simple project directory with these files:

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

These files will initially be empty.

2. Basic HTML Structure (index.html)

Add the following code to your index.html file. This includes Font Awesome icons (for styling), your stylesheet, and JavaScript file. The <div> with the <code>container class will hold our presentation.

<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>HTML Presentation</title>
<link rel="stylesheet" href="css/style.css">
<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">
<div class="container">
    <div id="presentation-area"></div>
</div>

The actual slide content will be added within the presentation-area div using JavaScript later. The .show class (defined in CSS) will control which slide is visible.

3. Styling with CSS (style.css)

The CSS will handle the visual presentation and slide transitions. We'll use the screenStatus class to manage screen orientation (0 for fullscreen, 1 for smaller screens). totalSlides (initialized to 0) will track the number of slides. (Note: The full CSS and JavaScript code is too extensive to include here, but the snippets below illustrate key functionality. Refer to the original for the complete code.)

4. JavaScript Functionality (scripts.js)

The JavaScript will handle slide navigation and full-screen mode. Key functions include:

• moveToLeftSlide() and moveToRightSlide(): These functions manage slide transitions by removing and adding the .show class to the appropriate slides.
• fullScreenMode() and smallScreenMode(): These toggle full-screen mode.
• hideLeftButton() and hideRightButton(): These hide the navigation buttons when on the first or last slide.
• getCurrentSlideNo(): Updates the current slide number.
• setSlideNo(): Displays the current slide number.
• init(): Initializes variables and sets up event listeners. This function is called after each slide transition.

This approach uses JavaScript to dynamically manage slide visibility, providing a clean and efficient way to create interactive presentations. Remember to include the complete CSS and JavaScript code from the original for a fully functional presentation.

This tutorial provides a foundation for building more complex and visually appealing HTML presentations. Explore further by adding animations, transitions, and more advanced JavaScript features to enhance your slide deck.