The Presentation

Show your code

Your Name


Content

Press the "F" key to enter Full screen mode.

And "Esc" to exit.

Press "?" for help.


Get latest template:
reveal.js-local

Main documentation:
reveal.js

cc01.0 cc01.0

Header 2

Header 3

Header 4

This paragraph is for authentic pug Thundercats, lomo distillery PBR literally kitsch you probably haven't seen.

HTML for this Slide

         <!-- Slide -->
         <section>
            <h2>Header 2</h2>
            <h3>Header 3</h3>
            <h4>Header 4</h4>
            <p>
               This paragraph is for authentic pug Thundercats, lomo
               distillery PBR literally kitsch you probably haven't seen.
            </p>
         </section>

Building a Bullet List

class=fragment

  • HTML5
  • CSS3
  • JavaScript



         <!-- Slide -->
         <section>
            <h2>Building a Bullet List</h2>
            <p class=fragment><code><b>class=fragment</b></code></p>
            <ul>
               <li class=fragment>HTML5</li>
               <li class=fragment>CSS3</li>
               <li class=fragment>JavaScript</li>
            </ul>
         </section>

Data Table

TypeExample
Boolean true
String 'Hover over me!'
π 3.14159265 

         <!-- Slide -->
         <section>
            <h2>Data Table</h2>
            <table>
               <thead><tr><th>Type</th><th>Example</th></tr></thead>
               <tbody>
                  <tr><td>Boolean</td><td><code>true</code></td></tr>
                  <tr><td>String</td> <td><code>'Hover over me!'</code></td></tr>
                  <tr><td>&pi;</td>   <td><code>3.14159265</code></td></tr>
               </tbody>
            </table>
         </section>

HTML

To display HTML code, encode the HTML and place into:
<pre><code class=language-html> 


            <p>My website:</p>
            <pre><code class=language-html>
               &lt;!doctype html&gt;
               &lt;html lang=en&gt;
                  &lt;head&gt;
                     &lt;meta charset=utf-8&gt;
                     &lt;title&gt;Example Website&lt;/title&gt;
                  &lt;/html&gt;
                  &lt;body&gt;
                     &lt;h1&gt;Example Website&lt;/h1&gt;
                  &lt;/body&gt;
               &lt;/html&gt;
            </code></pre>

My website:


            <!doctype html>
            <html lang=en>
               <head>
                  <meta charset=utf-8>
                  <title>Example Website</title>
               </html>
               <body>
                  <h1>Example Website</h1>
               </body>
            </html>

JavaScript

To display JS with syntax highlighting, place the code within:
<pre><code class=language-javascript> 


         const fibLookup = [1, 1];  //memoization cache
         const fibonacci = (n) => {
            while (fibLookup.length < n)
               fibLookup.push(fibLookup.at(-1) + fibLookup.at(-2));
            return fibLookup[n - 1];
            };

         console.log('Fibonacci of 100 is:', fibonacci(100));

Down Arrow & Unicode Emojis

🚀 🔥 🍖 🍄 🦋 🚁 🌊 🦄


         <!-- Slide -->
         <section>
            <h2>Down Arrow &amp; Unicode Emojis</h2>
            <div class=down-arrow></div>
            <p>
               <em>🚀 🔥 🍖 🍄 🦋 🚁 🌊 🦄</em>
            </p>
         </section>

Images

logo

Create an assets folder for your local image files,
and use the data-width attribute to adjust the image size. 


         <!-- Slide -->
         <section>
            <h2>Images</h2>
            <img data-width=20% src=assets/js-logo.png alt=logo>
            <p>Create an <b><code>assets</code></b> folder for your local...</p>
         </section>

Google Drawings

diagram

Choose File ⇒ Share ⇒ Publish to the web ⇒ Link... 


         <!-- Slide -->
         <section>
            <h2>Google Drawings</h2>
            <img class=full alt=diagram
               src="https://docs.google.com/drawings/d/e/.../pub?w=1971&h=641">
            Choose <b>File &rArr; Share &rArr;
            Publish to the web &rArr; Link...</b>
         </section>

Chart.js Slides

Chart.js

Highest Mountain Peaks by U.S. State

Chart.js Code


         <!-- Slide -->
         <section>
            <h2>Chart.js</h2>
            <figure>
               <figcaption>Highest Mountain Peaks by U.S. State</figcaption>
               <canvas id=peaks-chart></canvas>
            </figure>
            <script>
               const peaks = [
                  { name: 'Denali',        state: 'Alaska',     elevation: 6190 },
                  { name: 'Mount Whitney', state: 'California', elevation: 4421 },
                  ...  
                  ];
               const states =     peaks.map(peak => peak.state);
               const elevations = peaks.map(peak => peak.elevation);
               const peakLabel = (value, context) =>
                  `${peaks[context.dataIndex].name}\n${value.toLocaleString()} m`;
               const peaksDataset = {
                  label:           'Elevation (meters)',
                  data:            elevations,
                  backgroundColor: 'teal',
                  datalabels:      { display: true, formatter: peakLabel, color: 'goldenrod', ... }, 
                  };
               const peaksChart = {
                  type: 'bar',
                  data: { labels: states, datasets: [peaksDataset] },
                  options: {
                     scales: {
                        x: { ticks: { font: { size: 20 } } },
                        y: { ticks: { font: { size: 25 } }, beginAtZero: true },
                        },
                     },
                  };
               new Chart(document.getElementById('peaks-chart'), peaksChart);
            </script>
         </section>

Panels

🐢

🦬

🦉

🦙

🐘

Group of Vertical Slides

Vertical Slides

Wrap slides in another <section> tag.


            <!-- Vertical Slides -->
            <section>
               <!-- Slide -->
               <section>
                  <h2>Top Slide</h2>
                  <p>This slide displays like normal.</p>
               </section>
               <!-- Slide -->
               <section>
                  <h2>Bottom Slide</h2>
                  <p>Hit the down arrow key to show this slide.</p>
               </section>
            </section>

Australia

Is Australia the world's smallest continent

or

the world's largest island?

map

Yes

Speaker Notes

Press the Enter key to reveal the slide's speaker notes. 


         <!-- Slide -->
         <section>
            <h2>Speaker Notes</h2>
            <p>Press the Enter key to reveal the slide's speaker notes.</p>
            <aside class=notes>
               <p>Important extra information in paragraph #1.</p>
               <p>Important extra information in paragraph #2.</p>
               <p>Important extra information in paragraph #3.</p>
            </aside>
         </section>

Hidden Slides

Press the backtick (`) key to reveal additional sample slides that are hidden using:

<section data-visibility=hidden>

Framed

cat 

         <!-- Slide -->
         <section data-visibility=hidden>
            <h2>Framed</h2>
            <img src=https://i.chzbgr.com/full/5248955648/hA52D8A65
               class=framed data-width=45% alt=cat>
         </section>