Shubham Ankit

Shubham Ankit

1564627831

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you’re stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we’re going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you’re a beginner to web development, don’t fret! This tutorial will be easy enough to keep up with. So let’s slide right into it!

We’re going to be using an awesome framework called Reveal.js. It provides robust functionality for creating interesting and customizable presentations.

  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

The theme files are:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

Custom Themes

It’s quite easy to create a custom theme. Today, I’ll be using my custom theme from a presentation I gave called [“How To Build Kick-Ass Website: An Introduction To Front-end Development.”](https://emmawedekind.github.io/how-to-become-a-web-developer/ ““How To Build Kick-Ass Website: An Introduction To Front-end Development.””)

Here is what my custom slides look like:

Creating A Custom Theme

  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

Here are the variables I chose to use:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css
  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

Unfortunately, due to time constraints, I’ll admit that I used quite a bit of !important overrides in my CSS. This is horrible practice and I don’t recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the !importants.

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

@import "../template/mixins";
@import "../template/settings";

Mixins

You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you’ve got a gradient!

Settings

In the settings file, you’ll find useful variables like heading sizes, default fonts and colors, and more!

Elements

The structure for adding new content is:

.reveal > .slides > section

The 

 element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

To use them, add a data-transition=“{name}” to the 

 which contains your slide data.

Fragments

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class=“fragment {type-of-fragment}” to your element.

The types of fragments can be:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial.

All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

*Originally published by  **Emma Wedekind  at  *dev.to

========================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Advanced CSS and Sass: Flexbox, Grid, Animations and More!

☞ Build Responsive Real World Websites with HTML5 and CSS3

☞ CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

☞ Beginner Full Stack Web Development: HTML, CSS, React & Node

☞ Modern HTML & CSS From The Beginning (Including Sass)

#html #html5 #css #css3 #javascript

What is GEEK

Buddha Community

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript
anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

Nandini roy

Nandini roy

1618667097

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Tutorial: https://youtu.be/9DDiorNZiyw

#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website

Shubham Ankit

Shubham Ankit

1564627831

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you’re stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we’re going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you’re a beginner to web development, don’t fret! This tutorial will be easy enough to keep up with. So let’s slide right into it!

We’re going to be using an awesome framework called Reveal.js. It provides robust functionality for creating interesting and customizable presentations.

  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

The theme files are:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

Custom Themes

It’s quite easy to create a custom theme. Today, I’ll be using my custom theme from a presentation I gave called [“How To Build Kick-Ass Website: An Introduction To Front-end Development.”](https://emmawedekind.github.io/how-to-become-a-web-developer/ ““How To Build Kick-Ass Website: An Introduction To Front-end Development.””)

Here is what my custom slides look like:

Creating A Custom Theme

  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

Here are the variables I chose to use:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css
  1. Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

Unfortunately, due to time constraints, I’ll admit that I used quite a bit of !important overrides in my CSS. This is horrible practice and I don’t recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the !importants.

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

@import "../template/mixins";
@import "../template/settings";

Mixins

You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you’ve got a gradient!

Settings

In the settings file, you’ll find useful variables like heading sizes, default fonts and colors, and more!

Elements

The structure for adding new content is:

.reveal > .slides > section

The 

 element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

To use them, add a data-transition=“{name}” to the 

 which contains your slide data.

Fragments

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class=“fragment {type-of-fragment}” to your element.

The types of fragments can be:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial.

All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

*Originally published by  **Emma Wedekind  at  *dev.to

========================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Advanced CSS and Sass: Flexbox, Grid, Animations and More!

☞ Build Responsive Real World Websites with HTML5 and CSS3

☞ CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

☞ Beginner Full Stack Web Development: HTML, CSS, React & Node

☞ Modern HTML & CSS From The Beginning (Including Sass)

#html #html5 #css #css3 #javascript