How to Create Beautiful HTML & CSS Presentations with WebSlides

HTML Presentations with WebSlides

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash, Animate.css, Animate On Scroll, and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

Getting Started with WebSlides

To get started, first download WebSlides. Then, in the root folder, create a new folder and call it presentation. Inside the newly created presentation folder, create a new file and call it index.html. Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

[code language=”html”]
<!doctype html>
<html>
<head>

<!– Google Fonts –>
<link href=”https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext” rel=”stylesheet”/>
<!– CSS Base –>
<link rel=”stylesheet” type=’text/css’ media=’all’ href=”../static/css/base.css”/>
<!– CSS Colors –>
<link rel=”stylesheet” type=’text/css’ media=’all’ href=”../static/css/colors.css”/>
<!– Optional – CSS SVG Icons (Font Awesome) –>
<link rel=”stylesheet” type=’text/css’ media=’all’ href=”../static/css/svg-icons.css”/>

<body>
<!– PUT WEBSLIDES PRESENTATION CONTENT HERE –>

<script src=”../static/js/webslides.js”></script>
<script>
window.ws = new WebSlides();
</script>

<!– OPTIONAL – svg-icons.js (fontastic.me – Font Awesome as svg icons) –>
<script defer src=”../static/js/svg-icons.js”></script>
</body>
[/code]

Now, you’re ready to go.

Create a Web Presentation with WebSlides

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics.
Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator.

You’ll be working step by step on each slide. Let’s get started with the first one.

Continue reading %How to Create Beautiful HTML & CSS Presentations with WebSlides%


Source: Sitepoint