Create presentation slides using HTML and CSS (2023)

While searching for various software packages designed specifically for creating presentation slides, it occurred to me: why learn another program when I can use a tool I'm already familiar with?

We can easily create beautiful interactive presentations using three basic web technologies: HTML, CSS and JavaScript. In this tutorial, we'll use the modern HTML5 format to build our slideshow, we'll use CSS to style the slideshow and add some effects, we'll use JavaScript to trigger those effects and reorganize the slideshow based on clicks.

This tutorial is perfect for those who are new to HTML5, CSS and JavaScript and want to learn something new by building. After this, you can even learn to use aHTML5 slideshow iliDynamic HTML and JavaScript PPT.Sky is the limit.

Wondering how to create HTML slideshows? This is the last preview of the presentationHTML tutorial slidesWe will build:

Have you checked the HTMLInstructional slides? This is a good example of HTML PPT slides available for download.

Let's begin.

1.Create a directory structure

Before we begin, let's go ahead and create our map structure; it should be pretty simple. we must:

  • index.html
  • CSS/stijl.css
  • js/script.js

This is a simple basic template. Your file will now remain empty. We will resolve this issue as soon as possible.

2.Create initial tags

Let's start by creating a basic demo site layout. Paste the following code snippet into yourindex.htmlperiod.

1



2
 Lang="exist">
3
4
  character set="UTF-8">
5
  to do="watch out" content ="width=device-width, initial-scale=1.0">
6
  http-ekviv="X-UA compatibility" content ="ie = line">
7
 document
8
  Relative ="list styles" href=“css/stijl.css”>
9
 
10
 
11
  Relative ="list styles" href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css” completeness=“sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==” cross parentage ="Anonymous" Recommended policy ="No references" />
12
13
14
 
class="bracket"
15
 <Septum ID ="Demo soba">
16
 
17
 
18
 
19
“js/index.js” type="text/javascript">
20
21

From the basic layout you can see that we import Font Awesome Icons, our stylesheet (styles.css), and our JavaScript (index.js).

Now we add the HTML tags for the actual slideshow

swing:

1
 class="Promotion">
2
3
 
4
 
class="slajdovi">
5
 
class="police">
6
C# presentation
7
 
8
 
class="Content Network Center">
9
 

class="title">

10
What is C#?
/>everything you need to know
11
 
12
 
13
 
14
15
 
16
 
class="slide">
17
 
18
review
19
 
20
 
class="Content Network Center">
21
 

class="title">

22
Introduction to C++
23
 
24
 

class="titl">

25
Basic and advanced concepts
26
 
27
 

first lecture
28
 

my email address
29
 

href=“”>ubahthebuilder@gmail.com

30
 
31
 
32
 
33
 
34

We have a total of seven slides, and each slide has a title part and a content part.

Show only one slide at a time. This feature is provided by. exhibitclass, which will later be implemented in our stylesheet. We will dynamically create later. exhibitclasses to the active slide show on the page.

Below the slideshow, we'll add formatting to the counter and slide tracker:

1
ID ="Demo soba">
2
 
3
  class="counter">
4
1 van 6
5
 
6

Later, we'll use JavaScript to update the text content as the user moves through the slideshow.

Finally, we add a slide navigator below the counter:

1
ID ="Demo soba">
2
 
3
 
4
  class="navigation">
5
  ID ="full screen" class=“btn-screenshow”>
6
  class="fas fa-expand">
7
 
8
 
9
  ID ="mali screen" class="Button Screen">
10
  class="fas fa compression">
11
 
12
 
13
  ID ="link-btn" class="button">
14
  class=“fas fa-solid fa-caret-links”>
15
 
16
 
17
  ID ="correct button" class="button">
18
  class="fa-solide fa-caret-rechts">
19
 
20
 
21

This section consists of four buttons responsible for left and right navigation and switching between full and small screen. We will use the class again. exhibitControls which button appears at a given time.

That's it for the HTML part. Now let's move on to styling.

3.make it beautiful

Our next step happens in our stylesheet. Here we will focus on aesthetics and functionality. In order for each slide to move from left to right, we need to focus on the class. exhibitUse style sheets to display elements.

Here is the entire stylesheet for our project:

1
* {
2
 rub: 0;
3
 charge: 0;
4
 box size: bounding box;
5
 to start a family: sans serif font;
6
 transition: exist 0.5 seconds comfortable;
7
}
8
9
Body {
10
 width: 100vw;
11
 tall: 100vh;
12
 exhibit: to bow down;
13
 settle sentences: center;
14
 content of evidence: center;
15
}
16
17
ur {
18
 border connection: 2rem;
19
}
20
21
ur plum,
22
A {
23
 make cave: 1.2em;
24
}
25
26
. tank {
27
 background: #212121;
28
 width: 100%;
29
 tall: 100%;
30
 Place: relatively;
31
 exhibit: to bow down;
32
 settle sentences: center;
33
 content of evidence: center;
34
}
35
36
#demo soba {
37
 width: 1000 px;
38
 tall: 500 px;
39
 Place: relatively;
40
 background: purple;
41
}
42
43
/* Style all three sections */
44
#demo soba . promotional meeting {
45
 width: 100%;
46
 tall: 100%;
47
 overflow: written;
48 years old
 background: #ffffff;
49
 Place: relatively;
50
}
51
52
#demo soba . counter {
53
 Place: absolute;
54
 bottom: -30px;
55
 Connection: 0;
56
 color: #b6b6b6;
57
}
58
59
#demo soba . navigation {
60
 Place: absolute;
61
 bottom: -45px;
62
 To the right: 0;
63
}
64
65
/* full screen */
66
#demo soba. full screen {
67
 width: 100%;
68
 tall: 100%;
69
 overflow: written;
70
}
71
72
#demo soba. full screen . counter {
73
 bottom: 15 px;
74
 Connection: 15 px;
75
}
76
77
#demo soba. full screen . navigation {
78
 bottom: 15 px;
79
 To the right: 15 px;
80
}
81
82
#demo soba. full screen . navigation .btn:float {
83
 background: #201e1e;
84
 color: #ffffff;
85
}
86
87
#demo soba. full screen . navigation .btn display:float {
88
 background: #201e1e;
89
}
Post-90-e
/* full screen output */
91
92
/* test */
93
. navigation button {
94
 width: 30 px;
95
 tall: 30 px;
96
 border: Yes;
97
 review: Yes;
98
 border connection: 0,5 rem;
99
 make cave: 1,5 rem;
100
 line height: 30 px;
101
 Align the text: center;
102
 cursor: pointer;
103
}
104
105
. navigation .btn {
106
 background: #464646;
107
 color: #ffffff;
108
 boundary radius: 0,25 rem;
109
 Opacity: 0;
110
 Convert: plate(0);
111
}
112
113
. navigation .btn.show {
114
 Opacity: 1;
115
 Convert: plate(1);
116
 visibility: visible;
117
}
118
119
. navigation .btn display {
120
 background: transparent;
121
 color: #b6b6b6;
122
 visibility: written;
123
}
124
125
.btn-scherm.show {
126
 Opacity: 1;
127
 Convert: plate(1);
128
 visibility: visible;
129
}
130
131
oriented .btn.screen {
132
 color: #ffffff;
133
 frame shadow: 0 pixels 10 px 30 px RGBA(0, 0, 0, 0,1);
134
}
135
/* end button */
136
137
/* content */
138
. promotional meeting . content {
139
 charge: 2em;
140
 width: 100%;
141
 tall: computationally(100% - 100 px);
142
 z-index: 11;
143
}
144
145
. promotional meeting .network.content {
146
 exhibit: Cock;
147
}
148
149
. promotional meeting .content.network.centrum {
150
 content of evidence: center;
151
 settle sentences: center;
152
 Align the text: center;
153
}
154
155
. content . title {
156
 make cave: 3em;
157
 color: purple;
158
}
159
160
. content . titl {
161
 make cave: 2,5 em;
162
 color: purple;
163
}
164
165
. content P {
166
 make cave: 1,25 em;
167
 margin bottom: 1 on the dice;
168
}
169
/* final content stylesheet */
170
171
/* slide */
172
. promotional meeting . And {
173
 Place: absolute;
174
 top: 0;
175
 Connection: 0;
176
 width: 100%;
177
 tall: 100%;
178
 background: #ffffff;
179
 Opacity: 0;
180
 Convert: plate(0);
181
 visibility: Yes;
182
}
183
184
.slideshow {
185
 Opacity: 1;
186
 Convert: plate(1);
187
 visibility: visible;
188
}
189
190
. And . Column {
191
 charge: 2rem;
192
 background: purple;
193
 make cave: 2em;
194
 font weight: bold;
195
 color: #ffffff;
196
}

4.Enable Diana navigation

Whenever we click on the left or right icon, we want the next or previous slide to appear. We also want to be able to switch between full screen and small screen.

Also, we want the slide counter to display the correct slide number on each slide. All these features are enabled through JavaScript.

ujs/index.js, we first save references to the presentation frame, slides, and active slides:

1
leave dia'sParentDiv = document.query selector('. he is');
2
leave he is = document.the selector asked everyone('. And');
3
leave huidige dia = document.query selector('.slideshow');

Next, we store references to the slide counter and the two slide navigators (left and right icons):

1
it was slide counter = document.query selector('. counter');
2
it was left button = document.query selector('#link-btn');
3
it was right button = document.query selector('#desno-btn');

Next, save a reference to the entire presentation container and the two full screen and small screen button icons:

1
leave display area = document.query selector('#demo soba');
2
it was full screen button = document.query selector('#full screen');
3
it was small shear band = document.query selector('#mali screen');

Now that we're done referencing, let's initialize some variables with default values:

1
it was screen status = 0;
2
it was current slide number = 1
3
it was total number of pages = 0;

screen statusIndicates screen orientation. 0 means full screen mode, 1 means small screen mode.

current slide numberIndicates the current slide number, which is expected to be the first slide.total number of slidesInitialized to 0, but this is replaced by the actual number of our slides.

Move the presentation to the next and previous slide

Next, we add click listeners for the left button, right button, full screen button, and small screen button:

1
left button.Add event listeners('click', pull left);
2
right button.Add event listeners('click', swipe right);
3
4
full screen button.Add event listeners('click', full screen mode);
5
small shear band.Add event listeners('click', small screen mode);

We bind the corresponding function and execute it when the click event is fired on the corresponding element.

Here are two functions responsible for changing slides:

1
Function pull left() {
2
 it was temporary slide show = huidige dia;
3
 huidige dia = huidige dia.previousElement brothers;
4
 temporary slide show.class list.delete('exhibit');
5
 huidige dia.class list.Add to('exhibit');
6
}
7
8
Function swipe right() {
9
 it was temporary slide show = huidige dia;
10
 huidige dia = huidige dia.next element bro;
11
 temporary slide show.class list.delete('exhibit');
12
 huidige dia.class list.Add to('exhibit');
13
}

in functionpull left, we can actually access the previous related element (ie the previous slide), removing the. exhibitclass on the current slide and add it to a slide at the same level. Move the presentation to the previous slide.

In function we do the exact opposite of thisswipe right.becausenext element brois the oppositepreviousElement brothers, we get the next sibling.

Code for full screen and small screen presentations

Recall that we also added click listeners for fullscreen and smallscreen icons. Here is the function responsible for switching between full screen modes:

1
Function full screen mode() {
2
 display area.class list.Add to('full screen');
3
 full screen button.class list.delete('exhibit');
4
 small shear band.class list.Add to('exhibit');
5
6
 screen status = 1;
7
}
8
9
Function small screen mode() {
10
 display controller.class list.delete('full screen');
11
 full screen button.class list.Add to('exhibit');
12
 small shear band.class list.delete('exhibit');
13
14
 screen status = 0;
15
}

repeat thatdisplay areaIt refers to the element that surrounds the entire presentation. by adding a classfull screenFor this element, we activate CSS that will expand it to the entire screen.

Since we are now in full screen mode, we need to return the icon to the small screen by adding a class. exhibitgive. Finally, we update the variablescreen statusdo 1.

forsmall screen modefunction, we do the opposite: we remove the classfull screen, display the expand and update button iconscreen status.

Hide the left and right icons on the first and last slide

Now we need to figure out a way to hide the left and right buttons on the first and last slide.

We will use the following two functions to achieve this:

1
Function hide left button() {
2
 I(current slide number == 1) {
3
 link button.class list.delete('exhibit');
4
 } Anders {
5
 link button.class list.Add to('exhibit');
6
 }
7
}
8
9
Function hide right click() {
10
 I(current slide number === total number of pages) {
11
 right button.class list.delete('exhibit');
12
 } Anders {
13
 right button.class list.Add to('exhibit');
14
 }
15
}

The operation of these two functions is very simple: they check the current slide number and hide the left and right buttons when the presentation points to the first and last slide respectively.

Update and display the slide number

because we use a variablecurrent slide numberTo hide or show the left and right button icons, we need a way to update them as the user moves through the slideshow. We also need to show the user which presentation they are currently viewing.

We will create a functionGet the current slide numberUpdate the current slide number:

1
Function Get the current slide number() {
2
 leave counter = 0;
3
4
 he is.each(((slide, and) => {
5
 counter++
6
7
 I(slide.class list.Include('exhibit')){
8
 current slide number = counter;
9
 }
10
 });
11
12
}

We start the counter from 0 and for each slide on the page we increase the counter. We assign activity counters (ie with class. exhibit) arrivecurrent slide numberChanging.

With it, we create another function that inserts text into the slide counter:

1
Function set the slide number() {
2
 slide number.text = `${current slide number}truck${total number of pages}`
3
}

So, for example, if we were on the second slide, the slide counter would be: "2 of 6".

put everything together

To make sure all these functions work in harmony, we run them in a newly created environmentfrom the insideThe function we'll run at the beginning of the script, just below the reference:

1
from the inside();
2
3
Function from the inside() {
4
5
 Get the current slide number();
6
 total number of pages = he is.lenght
7
 set the slide number();
8
 hide left button();
9
 hide right click();
10
}

we have to run toofrom the inside()at the bottom of bothpull leftexistswipe rightFunction:

1
Function pull left() {
2
 // other code
3
4
 from the inside();
5
}
6
7
Function swipe right() {
8
 // other code
9
10
 from the inside();
11
}

This ensuresfrom the insideThis function is executed every time the user scrolls left or right in the presentation.

Prevent

I hope this guide has helped you better understand the basics of web development. Here we have created a brand new slide presentation using HTML, CSS and JavaScript. This is a great way to start creatingDynamic HTML and JavaScript PPT

Through this project you should have learned some basic syntaxes of HTML, CSS and JavaScript that will help you in web development.

FAQs

How do I make a slideshow with HTML and CSS only? ›

I have given a complete step-by-step explanation of each code line in the following tutorial.
  1. Step 1: Design the web page. I designed the webpage using a small amount of CSS code below. ...
  2. Step 2: Create the basic structure of the slider. ...
  3. Step 3: Add images to the automatic image slider. ...
  4. Step 4: Enable autoplay with CSS.
Sep 13, 2021

Can you create a slideshow in HTML? ›

Slideshows in HTML are often used for creating web interfaces mainly for advertisement platforms. These are easy to implement and can be done with the help of HTML and CSS only, javascript can also be used if certain conditional features are to be added otherwise HTML and CSS are enough.

How to create a responsive slideshow with CSS and JavaScript? ›

How to create a responsive slideshow gallery with CSS and...
  1. html. Create an HTML file in which we will define the structure (view) of the page. ...
  2. css. Add CSS style to give the size and effect for a look. ...
  3. js. Using JavaScript we can perform validation and the handle event on the page.
Dec 19, 2022

How to create slider in HTML CSS and JavaScript? ›

Let's start making it.
  1. Create a folder named "images" in the project path and put all the images required for the slider. ...
  2. Add the below code in the body section of the HTML page. ...
  3. Write the JavaScript code. ...
  4. Now, it's time to apply CSS to showcase the images in a proper position with some styles. ...
  5. CSS.
Mar 20, 2023

How to add carousel slider in HTML? ›

Carousels require the use of an id (in this case id="myCarousel" ) for carousel controls to function properly. The class="carousel" specifies that this <div> contains a carousel. The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item.

How do you animate slides in CSS? ›

How to make slide animation in CSS
  1. Create the HTML with a container div and the slider div.
  2. In the CSS, set the slider to be offscreen by setting it with a negative left (eg -100px)
  3. We then trigger the slide by using transition CSS property and set the left to be 0px;
Nov 28, 2022

What is the best program to make a presentation? ›

Some of the best presentation software include Visme, Haiku Deck, Prezi, Microsoft Powerpoint, Canva and Google Slides. In this comparison guide, we'll analyze each of these tools and many more to understand what the difference is between them so you can choose the best presentation maker for your business.

How do you make a slider display the value in HTML? ›

We will generally want to show the minimum and maximum values of the the slider as text before and after the slider tag like this:
  1. 0 <input type="range" min="0" max="255" name="sld2" value="47"> 255. which would appear like this:
  2. 0 255. In the IE browser, the slider value is displayed when you move the slider. ...
  3. 0 1000.
Oct 2, 2014

What can I use instead of slider in web design? ›

The Top 5 Slider Revolution Alternatives for 2023
  • FooGallery. FooGallery is an easy-to-use WordPress gallery plugin with a variety of stunning gallery templates and a focus on speed and SEO. ...
  • Smart Slider 3. ...
  • Master Slider. ...
  • MetaSlider. ...
  • Soliloquy.
Feb 15, 2023

How to create product slider using HTML and JavaScript? ›

How To a Create Product Slider Using HTML And JavaScript
  1. 1) Open Your Text Editor Like Notepad++, Sublime, etc.
  2. 2) Create HTML, CSS, And Javascript Files And Put In Your Project Folder. ...
  3. 3) Link The CSS File With HTML File Using “Link” Tag. ...
  4. 5) Copy Product Slider HTML Code And Past In Your HTML File.
Oct 8, 2020

How to create carousel in HTML without JavaScript? ›

Then we simply need to:
  1. Set . carousel__track to display using overflow-x: auto;
  2. Define the size of the carousel elements, using help classes generated by another for loop. We use a reference of 90% of the parent element's width in order to have the next element visible on the right side of the screen.
Mar 9, 2018

How do I make an HTML slideshow autoplay? ›

First, we write the HTML code to add the images.
  1. <html> <body> <div class="image-slideshow"> <div class="image fade"> <img src="https://iili.io/HWdl3Al.md.jpg" alt="Mountain Top"> ...
  2. * { box-sizing: border-box. } .image-slideshow { max-width: 1000px; ...
  3. let index = 0; displayImages(); function displayImages() { let i;

How do I make a smooth slideshow in HTML? ›

You can use opacity instead, and use CSS transitions to make it smooth. Though that requires absolutely positioning the images instead, and then the parent will no longer match the height of the image, so you can set the container height to match the current image, and transition that, too.

How to make image slider in HTML with code? ›

Creating an Automatic Image Slider with Navigation Buttons
  1. .slider { width: 100%; height: 510px; position: relative; } .slider img { width: 100%; height: 500px position: absolute; top: 0; left: 0; } .slider img:first-child { z-index: 1; } .slider img:nth-child(2) { z-index: 0; }
  2. .

How to make a responsive video on HTML and CSS? ›

HTML Video Tags

All you need to do is set the width to 100% and the height to auto. This will create a video that fills the entire parent and its height will be calculated automatically based on the width so that it maintains its current aspect ratio no matter the screen size.

How to make animation in HTML CSS JavaScript? ›

JavaScript can be used to control CSS animations and make them even better, with little code.
  1. CSS transitions. The idea of CSS transitions is simple. ...
  2. transition-property. ...
  3. transition-duration. ...
  4. transition-delay. ...
  5. transition-timing-function. ...
  6. Event: “transitionend” ...
  7. Keyframes. ...
  8. Performance.
Nov 13, 2022

How to animate a slide in JavaScript? ›

js can automatically animate elements across slides. All you need to do is add data-auto-animate to two adjacent slide <section> elements and Auto-Animate will animate all matching elements between the two. Here's a simple example to give you a better idea of how it can be used.

What is the difference between carousel and slider in HTML? ›

What is the difference between carousels and sliders? Both terms identify the same meaning in context, as they display images, videos, or other content as an automatic or manual slideshow. However, sliders can display one slide at a time, whereas carousels allow users to see multiple slides at once.

What is a slider carousel? ›

Also known as sliders, galleries, and slideshows, web carousels let you display text, graphics, images, and even video in one interactive, “sliding” block. They're a great design option for grouping content and ideas together—allowing you to form visual relationships between specific pieces of content.

How to use Owl carousel in HTML and CSS? ›

Set up your HTML

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.

Can display be animated in CSS? ›

CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: @keyframes.

How do I create an animated button in HTML and CSS? ›

We must follow the three steps below to create an animated button:
  1. Step 1: Add HTML. First of all, we have to write the HTML for creating the button. HTML. ...
  2. Step 2: Add CSS. CSS (SCSS) . ...
  3. Step 3: Combine HTML and CSS. To create the button and set the styling for the button, we have to combine the HTML and CSS files.

Which is a powerful tool to create presentation and shows? ›

PowerPoint can be an effective tool for communicating key ideas and engaging your audience during a business presentation. But it's also easy to get caught in a stale routine when using the program, which dates back to 1990.

What are the four basic ways of creating a presentation? ›

If you want to create a presentation, there are four things you need to do: research your content, organize it, visualize it and present it.

How do you present a presentation in a unique way? ›

100+ Creative Presentation Ideas to Engage Your Audience
  1. Use neon colors and duotones.
  2. Unify transitions horizontally.
  3. Use a monochrome palette.
  4. Tell a personal story.
  5. Use isometric illustrations.
May 4, 2023

How do you make a slide master presentation? ›

To create a master slide: On the View tab, click Slide Master. In Slide Master View, the slide master appears at the top of the thumbnail pane with related layouts beneath it. Click to select the master slide, then click Master Layout on the Slide Master tab.

What size should a slider be in HTML? ›

An optimal size for a slider is 1200px width and 500-800px height.

What is the code for sliding text in HTML? ›

The <marquee> tag is used to create scrolling text in HTML. The text can scroll horizontally from left to right or right to left, or vertically from top to bottom or bottom to top.

What is an example of a slider? ›

A slider is a term that refers to a slideshow on a website. An example of a slider can be a revolving carousel that displays products or photos. Web designers can incorporate sliders into all kinds of sites, but they are most useful for businesses wanting to show relevant content or showcase professional portfolios.

What is carousel in HTML and CSS? ›

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

What is Owl carousel in CSS? ›

OWL Carousel is a touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders.

How to link JavaScript to HTML and CSS? ›

To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.

How to create an image gallery using HTML and CSS? ›

How to Create the UI for the Image Gallery
  1. Create a new file called "index. ...
  2. Inside this file, add the basic HTML code structure: <! ...
  3. Create a subfolder called "images". ...
  4. In your HTML file, add a div for the image gallery: <div id="image-gallery">
Feb 3, 2023

How do I run both HTML and CSS? ›

To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.

How do I make HTML and CSS work together? ›

In order to make use of the CSS capabilities it needs to be linked within the HTML content so that style can be added to the website. CSS will tell the browser how to display the existing HTML. CSS can be compared to adding personal style to the body. When you link CSS to HTML, it's like dressing up the body.

References

Top Articles
Latest Posts
Article information

Author: Lidia Grady

Last Updated: 24/01/2024

Views: 6375

Rating: 4.4 / 5 (45 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Lidia Grady

Birthday: 1992-01-22

Address: Suite 493 356 Dale Fall, New Wanda, RI 52485

Phone: +29914464387516

Job: Customer Engineer

Hobby: Cryptography, Writing, Dowsing, Stand-up comedy, Calligraphy, Web surfing, Ghost hunting

Introduction: My name is Lidia Grady, I am a thankful, fine, glamorous, lucky, lively, pleasant, shiny person who loves writing and wants to share my knowledge and understanding with you.