html for presentation

DEV Community

Posted on Jan 11, 2019

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.

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

Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

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

Open index.html
Change the CSS import to reflect the theme you want to use

The theme files are:

solarized.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."

Here is what my custom slides look like:

Creating A Custom Theme

Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
Create a new .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be .css , not .scss .
Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

Title Font: Viga
Content Font: Open Sans
Code Font: Courier New
Cursive Font: Great Vibes
Yellow Color: #F9DC24
Add a .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

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:

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!

The structure for adding new content is:

.reveal > .slides > section

The <section> 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:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

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:

fade-in-then-out
fade-in-then-semi-out
highlight-current-blue
highlight-red
highlight-green
highlight-blue

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!

Top comments (18)

Templates let you quickly answer FAQs or store snippets for re-use.

Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

Location Stockholm
Education Siena College
Work Software Engineer at Spotify
Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

Location Antibes, France
Work Senior Software Engineer at Spotify
Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

Location Lake Villa, IL
Education Bachelor in Electronics Engineering
Work Computer & Technology Enthusiast
Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

Location Singapore
Work Web Developer at FirstCom Solutions
Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

Email [email protected]
Location Indianapolis, IN
Education Purdue University
Pronouns he/him
Work Senior Frontend Engineer at Whatnot
Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

Location New Delhi, India 🇮🇳
Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

Location Saratoga Springs,NY
Education BA, University of Michigan
Work Documentarian
Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

Location Toronto, ON
Education MFA in Art Video Syracuse University 2013 😂
Work Cannot confirm or deny atm
Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

Location Palm Bay, FL
Education FullSail University
Work Developer Relations Manager at MetaMask
Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

Email [email protected]
Location Abuja Nigeria
Work Project Manager Techibytes Media
Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

Email [email protected]
Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

Copy an existing presentation folder
Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section>  </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

Location Los Angeles
Education Engineering, Physics, and Math
Joined Sep 6, 2018

Fantastic post. I just loved it.

Location France
Work Co-Founder of Depot
Joined Sep 2, 2017

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Functional Testing: Ensuring Software Functionality

keploy - Jun 24

Free weekend of Vue Certification Developer Training is coming soon!

Jakub Andrzejewski - Jun 24

What it’s like to put code in production

shrey vijayvargiya - Jun 27

allyn - Jun 23

We're a place where coders share, stay up-to-date and grow their careers.

How to Create a Slideshow with HTML, CSS, and JavaScript

A web slideshow is a sequence of images or text that consists of showing one element of the sequence in a certain time interval.

For this tutorial you can create a slideshow by following these simple steps:

Write some markup

Write styles to hide slides and show only one slide..

To hide the slides you have to give them a default style. It'll dictate that you only show one slide if it is active or if you want to show it.

Change the slides in a time interval.

The first step to changing which slides show is to select the slide wrapper(s) and then its slides.

When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval.

Keep it in mind that when you remove an active class from a slide, you are hiding it because of the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style display:none to display:block , so the slide will show to the users.

Codepen example following this tutorial

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

HTML Presentations Made Easy

Created by Hakim El Hattab / @hakimel

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

Vertical Slides

Slides can be nested inside of other slides, try pressing down .

Basement Level 1

Press down or up to navigate.

Basement Level 2

Basement level 3.

That's it, time to go back up.

Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es .

Point of View

Press ESC to enter the slide overview.

Hold down alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Reveal.js comes with a few themes built in: Default - Sky - Beige - Simple - Serif - Night Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link> .

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Slide Backgrounds

Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.

Image Backgrounds

Repeated image backgrounds, background transitions.

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide" .

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Pretty Code

Courtesy of highlight.js .

Intergalactic Interconnections

You can link between slides internally, like this .

Fragmented Views

Hit the next arrow...

... to step through ...

Fragment Styles

There's a few styles of fragments, like:

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue

Spectacular image!

Export to pdf.

Presentations can be exported to PDF , below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

Try the online editor
Source code on GitHub
Follow me on Twitter

BY Hakim El Hattab / hakim.se

[email protected]

Bootstraphunter

Free and Premium Bootstrap Templates and Themes

How to Create Presentation Slides with HTML and CSS

March 15, 2022

We can easily create beautiful and interactive presentations with HTML, CSS and JavaScript, the three basic web technologies. In this tutorial, we’ll use modern HTML5 markup to structure our slides, we’ll use CSS to style the slides and add some effects, and we’ll use JavaScript to trigger these effects and reorganize the slides based on click events.

This tutorial is perfect for those of you new to HTML5, CSS and JavaScript, who are looking to learn something new by building.

Here’s the final preview of the presentation slide we’re going to build:

You can also find the complete source code in the GitHub repo .

Let’s begin.

Table of Contents

1. Create the Directory Structure

Before we get started, let’s go ahead and create our folder structure; it should be fairly simple. We’ll need:

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

This is a simple base template. Your files remain blank for the time being. We’ll fill that shortly.

2. Create the Starter Markup

Let’s begin by creating the base markup for our presentation page. Paste the following snippet into your index.html file.

<!DOCTYPE html> <html lang=”en”> <head> <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>Document</title> <link rel=”stylesheet” href=”css/style.css”>

<!– Font Awesome Icon CDN –> <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” /> </head> <body> <div class=”container” <div id=”presentation-area”> <!– slides go here –> </div> </div> <script src=”js/index.js” type=”text/javascript”></script> </body> </html>

From the base markup, you can tell that we are importing Font Awesome Icons, our stylesheet ( style.css ) and our JavaScript ( index.js ).

Now we’ll add the HTML markup for the actual slides inside the <div> wrapper:

<!– Slide 1 –> <div class=”slide show”> <div class=”heading”> Presentation on C# </div> <div class=”content grid center”> <h3 class=”title”> What is C# ? <br /> All You Need To Know </h3> </div> </div>

<!– Slide 1 –> <div class=”slide”> <div class=”heading”> Overview </div> <div class=”content grid center”> <h3 class=”title”> Introduction to C+ </h3> <p class=”sub-title”> Basic and Advanced Concepts </p> <p>Lecture No. 1</p> <p>My Email Address</p> <p><a href=””> [email protected] </a></p> </div> </div>

<!– Add 5 more slides here –> </section>

We have seven slides in total, and each slide is comprised of the heading section and the content section.

Only one slide will be shown at a time. This functionality is handled by the .show class which will be implemented later on in our stylesheet.

Using JavaScript, later on, we’ll dynamically add the .show class to the active slide on the page.

Below the slides, we’ll add the markup for our slide’s counter and tracker:

Later on, we’ll use JavaScript to update the text content as the user navigates through the slides.

Finally, we’ll add the slide navigator just below the counter:

This section consists of four buttons responsible for navigating left and right and switching between full-screen mode and small-screen mode. Again, we’ll use the class .show to regulate which button appears at a time.

That’ll be all for the HTML part, let’s move over to styling.

3. Make It Pretty

Our next step takes place within our stylesheet. We’ll be focusing on both aesthetics as well as functionality here. To make each slide translate from left to right, we’ll need to target the class .show with a stylesheet to show the element.

Here’s the complete stylesheet for our project:

* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; transition: all 0.5s ease; }

body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }

ul { margin-left: 2rem; }

ul li, a { font-size: 1.2em; }

.container { background: #212121; width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }

#presentation-area { width: 1000px; height: 500px; position: relative; background: purple; }

/* Styling all three sections */ #presentation-area .presentation { width: 100%; height: 100%; overflow: hidden; background: #ffffff; position: relative; }

#presentation-area .counter { position: absolute; bottom: -30px; left: 0; color: #b6b6b6; }

#presentation-area .navigation { position: absolute; bottom: -45px; right: 0; }

/* On full screen mode */ #presentation-area.full-screen { width: 100%; height: 100%; overflow: hidden; }

#presentation-area.full-screen .counter { bottom: 15px; left: 15px; }

#presentation-area.full-screen .navigation { bottom: 15px; right: 15px; }

#presentation-area.full-screen .navigation .btn:hover { background: #201e1e; color: #ffffff; }

#presentation-area.full-screen .navigation .btn-screen:hover { background: #201e1e; } /* End full screen mode */

/* Buttons */ .navigation button { width: 30px; height: 30px; border: none; outline: none; margin-left: 0.5rem; font-size: 1.5rem; line-height: 30px; text-align: center; cursor: pointer; }

.navigation .btn { background: #464646; color: #ffffff; border-radius: 0.25rem; opacity: 0; transform: scale(0); }

.navigation .btn.show { opacity: 1; transform: scale(1); visibility: visible; }

.navigation .btn-screen { background: transparent; color: #b6b6b6; visibility: hidden; }

.btn-screen.show { opacity: 1; transform: scale(1); visibility: visible; }

.btn-screen.hover { color: #ffffff; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); } /* End Buttons */

/* content */ .presentation .content { padding: 2em; width: 100%; height: calc(100% – 100px); z-index: 11; }

.presentation .content.grid { display: grid; }

.presentation .content.grid.center { justify-content: center; align-items: center; text-align: center; }

.content .title { font-size: 3em; color: purple; }

.content .sub-title { font-size: 2.5em; color: purple; }

.content p { font-size: 1.25em; margin-bottom: 1rem; } /* End Content Stylesheet */

/* Slide */ .presentation .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; opacity: 0; transform: scale(0); visibility: none; }

.slide.show { opacity: 1; transform: scale(1); visibility: visible; }

.slide .heading { padding: 2rem; background: purple; font-size: 2em; font-weight: bold; color: #ffffff; }

4. Enable Slide Navigation

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

Furthermore, we want the slide’s counter to display the accurate slide number on every slide. All these features will be enabled with JavaScript.

Inside js/index.js , we’ll begin by storing references to the presentation wrapper, the slides, and the active slide:

let slidesParentDiv = document.querySelector(‘.slides’); let slides = document.querySelectorAll(‘.slide’); let currentSlide = document.querySelector(‘.slide.show’);

Next, we’ll store references to the slide counter and both of the slide navigators (left and right icons):

var slideCounter = document.querySelector(‘.counter’); var leftBtn = document.querySelector(‘#left-btn’); var rightBtn = document.querySelector(‘#right-btn’);

Then store references to the whole presentation container and both button icons for going into full screen and small screen mode:

let presentationArea = document.querySelector(‘#presentation-area’); var fullScreenBtn = document.querySelector(‘#full-screen’); var smallScreenBtn = document.querySelector(‘#small-screen’);

Now that we’re done with the references, we’ll initialize some variables with default values:

var screenStatus = 0; var currentSlideNo = 1 var totalSides = 0;

screenStatus represents the screen orientation. 0 represents a full screen mode and 1 represents a small screen mode.

currentSlideNo represents the current slide number, which as expected is the first slide. totalSlides is initialized with 0, but this will be replaced by the actual number of our slides.

Moving the Presentation to the Next and Previous Slides

Next, we’ll add click event listeners to the left button, right button, full screen button and small screen button:

leftBtn.addEventListener(‘click’, moveToLeftSlide); rightBtn.addEventListener(‘click’, moveToRightSlide);

fullScreenBtn.addEventListener(‘click’, fullScreenMode); smallScreenBtn.addEventListener(‘click’, smallScreenMode);

We bind corresponding functions that will run when the click event is triggered on the corresponding element.

Here are the two functions responsible for changing the slide:

function moveToLeftSlide() { var tempSlide = currentSlide; currentSlide = currentSlide.previousElementSibling; tempSlide.classList.remove(‘show’); currentSlide.classList.add(‘show’); }

function moveToRightSlide() { var tempSlide = currentSlide; currentSlide = currentSlide.nextElementSibling; tempSlide.classList.remove(‘show’); currentSlide.classList.add(‘show’); }

In the function moveToLeftSlide, we basically access the previous sibling element (ie. the previous slide), remove the .show class on the current slide and add it to that sibling. This will move the presentation to the previous slide.

We do the exact opposite of this in the function moveToRightSlide. Because nextElementSibling is the opposite of previousElementSibling, we’ll be getting the next sibling instead.

Code for Showing the Presentation in Full Screen and Small Screen

Recall that we also added click event listeners to the full screen and small screen icons.

Here’s the function responsible for toggling full-screen mode:

function fullScreenMode() { presentationArea.classList.add(‘full-screen’); fullScreenBtn.classList.remove(‘show’); smallScreenBtn.classList.add(‘show’);

screenStatus = 1; }

function smallScreenMode() { presentationController.classList.remove(‘full-screen’); fullScreenBtn.classList.add(‘show’); smallScreenBtn.classList.remove(‘show’);

screenStatus = 0; }

Recall that presentationArea refers to the element that wraps the whole presentation. By adding the class full-screen to this element, we trigger the CSS that will expand it to take up the whole screen.

Since we’re now in full-screen mode, we need to show the icon for reverting back to the small screen by adding the class .show to it. Finally, we update the variable screenStatus to 1.

For the smallScreenMode function, the opposite is done – we remove the class full-screen, show the expand button icon, and reupdate screenStatus.

Hidding Left and Right Icons in First and Last Slides

Now, we need to invent a way to hide both the left and right buttons when we’re on the first slide and last slide respectively.

We’ll use the following two functions to achieve this:

function hideLeftButton() { if(currentSlideNo == 1) { toLeftBtn.classList.remove(‘show’); } else { toLeftBtn.classList.add(‘show’); } }

function hideRightButton() { if(currentSlideNo === totalSides) { toRightBtn.classList.remove(‘show’); } else { toRightBtn.classList.add(‘show’); } }

Both these functions perform a very simple task: they check for the current slide number and hide the left and right buttons when the presentation is pointing to the first and last slide respectively.

Updating and Displaying Slide Number

Because we’re making use of the variable currentSlideNo to hide or show the left and right button icons, we need a way to update it as the user navigates through the slides.

We also need to display to the user what slide he or she is currently viewing.

We’ll create a function getCurrentSlideNo to update the current slide number:

function getCurrentSlideNo() { let counter = 0;

slides.forEach((slide, i) => { counter++

if(slide.classList.contains(‘show’)){ currentSlideNo = counter; } });

We start the counter at 0, and for each slide on the page, we increment the counter. We assign the active counter (ie. with the class .show) to the currentSlideNo variable.

With that in place, we create another function that inserts some text into the slide counter:

function setSlideNo() { slideNumber.innerText = `${currentSlideNo} of ${totalSides}` }

So if we were on the second slide for example, the slide’s counter will read as: 2 of 6

Putting Everything Together

To ensure that all of these functions run in harmony, we’ll run them in a newly created init function that we’ll execute at start of the script, just below the references:

function init() {

getCurrentSlideNo(); totalSides = slides.length setSlideNo(); hideLeftButton(); hideRightButton(); }

We must also run init() at the bottom of both the moveToLeftSlide and moveToRightSlide functions:

function moveToLeftSlide() { // other code

function moveToRightSlide() { // other code

This will ensure that the function init runs every time the user navigates left or right in the presentation.

Wrapping Up

I hope this tutorial helped you understand basic web development better. Here we built a presentation slideshow from scratch using HTML, CSS and JavaScript.

With this project, you should have learned some basic HTML, CSS and JavaScript syntax to help you with web development.

Unsupported browser

This site was designed for modern browsers and tested with Internet Explorer version 10 and later.

It may not look or work correctly on your browser.

Create Presentation Slides with HTML and CSS

Bahasa Indonesia

As I sifted through the various pieces of software that are designed for creating presentation slides, it occurred to me: why learn yet another program, when I can instead use the tools that I'm already familiar with? With a bit of fiddling, we can easily create beautiful presentations with HTML and CSS. I'll show you how today!

Screencasts:

Creating The Markup (preview video)
Building Sample Slides
Load The Slides
Styling and JavaScript
Event Listeners
Completing the JavaScript
Custom Slide-Styling

Screencast 1: Create the Markup

Screencast 2: Building Sample Slides

Screencast 3: Load the Slides

Screencast 4: Styling and Continued JavaScript

Screencast 5: Event Listeners

Screencast 6: Completing the JavaScript

Screencast 7: Custom Slide Styling

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Tabular Tables

Item	Value	Quantity
Apples	$1	7
Lemonade	$2	18
Bread	$3	2

Clever Quotes

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

Right-to-left support
Extensive JavaScript API
Auto-progression
Parallax backgrounds
Custom keyboard bindings

- Try the online editor - Source code & documentation

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

WebSlides Demos

All of these presentations are free and responsive. 40+ components with a solid CSS architecture .

Share your slides using #WebSlides .

Why WebSlides?

General Questions

WebSlides Documentation: Components · Classes · Media .

Why WebSlides? Good karma

There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.

Is WebSlides a framework?

We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic structural components and a scalable CSS architecture .

What can you do with WebSlides?

WebSlides is a cute solution for making HTML presentations, landings, and portfolios. Put content wherever you want , add background images, videos ...

How easy is WebSlides?

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

Loved by designers and developers.

Some of the most famous brands are using WebSlides.

"WebSlides has pushed the keynotes to a new limit. Fantastic work!" Javi Pérez .

"I was immediately thrilled by the simplicity of WebSlides. This is absolutely great." Henrik Ståhl .

"Please make this a trend. The coolest thing I've seen so far in 2017." Austin Guevara .

Start in seconds

Create your own presentation instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications You must be signed in to change notification settings

Create HTML presentations in seconds —

webslides/WebSlides

Folders and files.

Name		Name
560 Commits

Repository files navigation

Webslides = create stories with karma.

Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — https://webslides.tv/demos .

Simply choose a demo and customize it in seconds. Latest version: webslides.tv/webslides-latest.zip .

What's in the download?

The download includes demos and images (devices and logos). All content is for demo purposes only. Images are property of their respective owners.

Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
Slide counter.
Permalinks: go to a specific slide.
Click to nav.
Simple CSS alignments. Put content wherever you want (vertical centering...)
40+ components: background images/videos, quotes, cards, covers...
Flexible blocks with auto-fill and equal height.
Fonts: Roboto, Maitree (Serif), and San Francisco.
Vertical rhythm (use multiples of 8).
Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
Each parent <section> in the #webslides element is an individual slide.

Vertical Sliding

Css syntax (classes).

Typography: .text-landing , .text-data , .text-intro ...
Background Colors: .bg-primary , .bg-apple , .bg-blue ...
Background Images: .background , .background-center-bottom ...
Cards: .card-50 , .card-40 ...
Flexible Blocks: .flexblock.clients , .flexblock.metrics ...

You can add:

Unsplash photos
animate.css
particles.js
Animate on scroll (Useful for longform articles)
Do not miss our demos .
Plugin Docs
Plugin Development
WebSlides was created by @jlantunez using Cactus .
Javascript: @Belelros and @LuisSacristan .
Based on SimpleSlides , by @JennSchiffer .

Releases 12

Contributors 14.

JavaScript 49.3%

How TO - Slideshow

Learn how to create a responsive slideshow with CSS and JavaScript.

Slideshow / Carousel

A slideshow is used to cycle through elements:

Try it Yourself »

Create A Slideshow

Step 1) add html:, step 2) add css:.

Style the next and previous buttons, the caption text and the dots:

Step 3) Add JavaScript:

Automatic slideshow.

To display an automatic slideshow, use the following code:

Multiple Slideshows

Tip: Also check out How To - Slideshow Gallery and How To - Lightbox .

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

5 of the Best Free HTML5 Presentation Systems

Share this article

Google Slides Template

Frequently asked questions (faqs) about html5 presentation systems.

I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away. Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include:

it’s quicker to add a few HTML tags than use a WYSIWYG interface
you can update a presentation using a basic text editor on any device
files can be hosted on the web; you need never lose a PPT again
you can easily distribute a presentation without viewing software
it’s not PowerPoint and your audience will be amazed by your technical prowess.
you require web coding skills
positioning, effects and transitions are more limited
few systems offer slide notes (it’s a little awkward to show them separately)
it’s more difficult to print handouts
S5 — A Simple Standards-Based Slide Show System ( download )
CSSS — CSS-based SlideShow System ( download )
Slides ( download )
HTML5Rocks (no direct downloads, but you can copy the source)

What are the key features to look for in an HTML5 presentation system?

When choosing an HTML5 presentation system, consider features such as ease of use, customization options, and compatibility with various devices. The system should have an intuitive interface that allows you to create presentations without any coding knowledge. Customization options are important for personalizing your presentation to match your brand or style. Additionally, the system should be compatible with different devices, including desktops, laptops, tablets, and smartphones, to ensure your audience can view your presentation without any issues.

How does HTML5 improve the presentation experience compared to traditional methods?

HTML5 enhances the presentation experience by offering interactive and dynamic content. Unlike traditional methods, HTML5 allows for the integration of multimedia elements like videos, audio, and animations directly into the presentation. This makes the presentation more engaging and interactive for the audience. Additionally, HTML5 presentations are web-based, meaning they can be accessed from any device with an internet connection, providing convenience and flexibility for both the presenter and the audience.

Are HTML5 presentations compatible with all browsers?

HTML5 presentations are generally compatible with all modern web browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, there may be slight variations in how different browsers render HTML5 content. Therefore, it’s always a good idea to test your presentation on multiple browsers to ensure it displays correctly.

Can I use HTML5 presentation systems for professional purposes?

Yes, HTML5 presentation systems are suitable for a variety of professional purposes. They can be used for business presentations, educational lectures, product demonstrations, and more. The ability to incorporate multimedia elements and interactive features makes HTML5 presentations a powerful tool for conveying complex information in an engaging and understandable way.

How can I make my HTML5 presentation accessible to all users?

To make your HTML5 presentation accessible, ensure that all content is readable and navigable for users with different abilities. This includes providing alternative text for images, captions for videos, and using clear and simple language. Additionally, make sure your presentation is responsive, meaning it adjusts to fit different screen sizes and orientations.

Can I convert my existing PowerPoint presentations to HTML5?

Yes, many HTML5 presentation systems offer the ability to import and convert PowerPoint presentations. This allows you to leverage your existing content while benefiting from the enhanced features and capabilities of HTML5.

Do I need to know how to code to use HTML5 presentation systems?

While having some knowledge of HTML5 can be beneficial, many HTML5 presentation systems are designed to be user-friendly and do not require any coding skills. These systems often feature drag-and-drop interfaces and pre-designed templates to help you create professional-looking presentations with ease.

Can I share my HTML5 presentations online?

Yes, one of the major advantages of HTML5 presentations is that they can be easily shared online. You can publish your presentation on your website, share it via email, or even embed it in a blog post or social media update.

Are HTML5 presentations secure?

HTML5 presentations are as secure as any other web content. However, it’s important to follow best practices for web security, such as using secure hosting platforms and regularly updating your software to protect against potential vulnerabilities.

Can I track the performance of my HTML5 presentations?

Yes, many HTML5 presentation systems include analytics features that allow you to track viewer engagement and behavior. This can provide valuable insights into how your audience interacts with your presentation, helping you to improve and refine your content over time.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

jQuery Script - Free jQuery Plugins and Tutorials

10 best html presentation frameworks in javascript (2024 update), what is html presentation framework.

An HTML Presentation Framework helps you create a fullscreen web presentation to showcase your web content just like Apple Keynote and Microsoft PowerPoint.

It separates your HTML content into several fullscreen pages (slides) so that the visitors are able to navigate between these slides with certain operations (mouse wheel, arrow keys, touch events, etc).

The Best HTML Presentation Framework

You have been tasked with building an HTML5 presentation application, but where should you start? As there are many frameworks to choose from, it can be challenging to know where to begin.

In this post, we're going to introduce you the 10 best JavaScript HTML presentation frameworks to help developers generate professional, nice-looking presentations using JavaScript, HTML, and CSS. Have fun.

Originally Published Feb 2020, up date d Feb 27 2024

Best jQuery HTML Presentation Frameworks

Full page presentations with jquery and css animations.

A vertical full-page presentation app (also called fullscreen page slider) implemented in JavaScript (jQuery) and CSS animations.

[ Demo ] [ Download ]

jQuery Amazing Scrolling Presentation Plugin - scrolldeck

scrolldeck is a cool jQuery plugin that make it easier to create amazing scrolling presentation like Slide Animation s, Image Slides and parallax effects for your project.

Easy Dynamic Presentation Plugin In jQuery - Presentation.js

A jQuery-powered presentation plugin that allows users to create better professional-looking presentations, with awesome jQuery and/or CSS 3 animations.

jQuery Plugin To Create Amazing Presentations - mb.disclose

An awesome jQuery plugin that provides an amazing way to present Html contents in carousel like presentations. You can customize the CSS3 powered animations for each Html element using Html5 data-* attributes.

Responsive Web Presentation Plugin For jQuery - sectionizr

A really simple jQuery web presentation plugin which presents any html contents in a responsive, fullscreen, carousel-style page UI. Supports both horizontal and vertical scrolling.

Best Vanilla JS HTML Presentation Frameworks

Beautiful html presentation library - reveal.js.

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an iframe or add your own custom behavior using our JavaScript API.

Beautiful HTML Presentation Plugin with jQuery - reveal.js

Fullscreen Scrolling Presentation In JavaScript – Pageable

A lightweight JavaScript library to generate a fullscreen scrolling presentation where the users are allowed to scroll through sectioned pages with drag, swipe, and mouse wheel events.

Amazing Presentation Framework With CSS3 - impress.js

An amazing Presentation framework for modern bowsers. Based on CSS3 transforms and transitions. It doesn't depend on any external stylesheets. It adds all of the styles it needs for the presentation to work.

Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.

When working with WYSIWYG editors, it is easy to get distracted by the styling options. Slidev remedies that by separating the content and visuals. This allows you to focus on one thing at a time, while also being able to reuse the themes from the community. Slidev does not seek to replace other slide deck builders entirely. Rather, it focuses on catering to the developer community.

Shower HTML presentation engine

Shower HTML presentation engine built on HTML, CSS and vanilla JavaScript. Works in all modern browsers. Themes are separated from engine. Fully keyboard accessible. Printable to PDF.

Conclusion:

There is no one right answer. The right presentation framework for you depends on your own project requirements, as well as your personal preferences. However, with the ten HTML presentation frameworks listed above to choose from, you are bound to find one that suits your specific needs.

Looking for more jQuery plugins or JavaScript libraries to create awesome HTML Presentations on the web & mobile? Check out the jQuery Presentation and JavaScript Presentation sections.

10 Best Mobile-friendly One Page Scroll Plugins
Prev: Weekly Web Design & Development News: Collective #330
Next: Weekly Web Design & Development News: Collective #331

7 Best JavaScript Timeago Plugins For Human-readable Datetime Format

Top 100 Best Free jQuery Plugins From 2013

7 Best Youtube Lazy Loaders To Improve Page Speed (2024 Update)

10 Best JavaScript Dark Mode Solutions (2024 Update)

Top 100 Best Free jQuery Plugins From 2014

10 Best Free GDPR Cookie Consent Banner Plugins In JavaScript

Add Your Review

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
OverflowAI GenAI features for Teams
OverflowAPI Train & fine-tune LLMs
Labs The future of collective knowledge sharing
About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Embed a PowerPoint presentation into HTML

Is it possible to embed a PowerPoint presentation (.ppt) into a webpage (.xhtml)?

This will be used on a local intranet where there is a mix of Internet Explorer 6 and Internet Explorer 7 only, so no need to consider other browsers.

I've given up... I guess Flash is the way forward.

Is there any way to embed a pptx file in HTML? – Himanshu Commented Jul 18, 2013 at 6:41

23 Answers 23

Google Docs can serve up PowerPoint (and PDF) documents in it's document viewer. You don't have to sign up for Google Docs, just upload it to your website, and call it from your page:

2 Wouldn't have worked for my purpose, but given that the question states it is for a local intranet, this has to be the way to do it! +1 – Steg Commented Nov 7, 2009 at 23:18
4 I tried this and all I get is a "Sorry, we are unable to generate a view of the document at this time. Please try again later. " – David Yell Commented Aug 8, 2011 at 13:10
There's some way to customize this viewer? I want to avoid the fullscreen option... – adripanico Commented Oct 16, 2012 at 7:30
Not pretty but very useful... Thanks – Santiago Baigorria Commented Jun 6, 2014 at 18:05
3 This solution isn't working anymore, because Google restricted the access with the X-Frame-Options to sameorigin – Hello It's me Commented Jul 27, 2017 at 12:48

I got so sick of trying all of the different options to web host a power point that were flaky or required flash so I rolled my own.

My solution uses a very simple javascript function to simply scroll / replace a image tag with GIFs that I saved from the Power Point presentation itself.

In the power point presentation click Save As and select GIF. Pick the quality you want to display the presentation at. Power Point will save one GIF image for each slide and name them Slide1.GIF, Slide2.GIF, etc.....

Create a HTML page and add a image tag to display the Power point GIF images.

Add some first, previous, next and last clickable objects with the onClick action as below:

Finally, add the below javascript function that when called grabs the next Slide.GIF image and displays it to the img tag.

Make sure the GIFs are reachable from the HTMl page. They are by default expected to be in the same directory but you should be able to see the logic and how to set to a image directory if required

I have training material up for my company that uses this technique at http://www.vanguarddata.com.au so before you spend any time trying it out you are welcome to look at in action.

I hope this helps someone else out there who is having as much headaches with this as I did.....

Very creative way. Good job. – JoshYates1980 Commented Jul 24, 2014 at 19:41
can you please put a license on it? it would be nice to be able to reuse it. maybe a CC0 license: wiki.creativecommons.org/wiki/CC0 – markgalassi Commented Dec 9, 2015 at 19:43
Would you have any idea how to deal with slides with animations? – Zane Commented Jun 6, 2017 at 20:46
Thanks for showing me this way of implementing a powerpoint on a web page. From the code you pasted above I think the first button should be swapImage(1) instead of swapImage(0) right? Also how would I implement a simple text that would let the user know which slide they are on for example like "Slide 3 of 16" or "Slide 1 of 16". – Makuza Commented Sep 30, 2020 at 1:10

Id recommend the official View Office documents online

for embeding you can simply use

This works really nicely for one file at a time ... do you know if they have an API that you could hit returning the URLs for multiple files? – K7Buoy Commented Feb 17, 2017 at 16:57
Hi @K7Buoy, did you ever find an API solution? I am also interested in an official API for displaying powerpoint slides. Thanks! – Jack Collins Commented Mar 21, 2018 at 2:11
Hi @JackCollins ... unfortunately not ... I hunted for quite sometime. – K7Buoy Commented Mar 21, 2018 at 16:27
Hi @K7Buoy Have tried to look for licencing for commercial use for this, can't find any clarity. Do you know if there are restrictions using this in a commercial aspect? – etchypap Commented May 26, 2020 at 20:24

DocStoc.com and Scribd.com both work well with Internet Explorer 6 and Internet Explorer 7. They'll show a variety of document types, including PowerPoint files (.ppt). I use these services for my intranet here at work. Of course, just remember to mark your documents as 'private' after you upload them.

besides, if you save ppt as .pps format using microsoft powerpoint, you can use the following code:

Another common way to do it is to convert ppt/doc to pdf,

then use swftool( http://www.swftools.org ) to convert it to swf

finally, take FlexPaper( http://flexpaper.devaldi.com ) as document viewer.

I don't know of a way to embed PowerPoint slides directly into HTML. However, there are a number of solutions online for converting a PPT file into a SWF , which can be embedded into HTML just like any other Flash movie.

Googling for 'ppt to swf' seems to give a lot of hits. Some are free, others aren't. Some handle things like animations, others just do still images. There's got to be one out there that does what you need. :)

You can use Microsoft Office Web Apps to embed PowerPoint and Excel Files. See Say more in your blog with embedded PowerPoint and Excel files .

1 The embedded PPT app isn't very high quality. It translates your slides to medium-quality jpegs and adds a toggle button. (You'd do better exporting the slides from Powerpoint yourself and then using a jQuery slider.) The full-screen pop-out works a bit better (it has animations, though they're not great), but it also relies on the Silverlight plugin--which doesn't work on mobile devices. – Brandon Lebedev Commented Dec 24, 2011 at 16:52
@BrandonLebedev, the embedded PPT's are actually better quality than the Google Docs rendering of PowerPoints from what I've seen. But as you rightly point out, it's not much use to mobile users, nor anyone who doesn't have the Silverlight plugin installed. – Ciaran Gallagher Commented May 28, 2013 at 23:55
The blog link is broke. – JoshYates1980 Commented Jul 24, 2014 at 19:36

I ended up going for screenshooting each slide, and using two different tabs to navigate, this was put into an . this gives high-res, but you sacrifice animations and interactivity, the only thing the user can do is read and change slide. heres an example off my website: http://deepschool.jaberwokkee.kodingen.com/~/Miss%20Necchi%27s%20powerpoints/Volume%20of%20prisms%20powerpoint/slide1.htm

Google Docs allows you to upload a PowerPoint document, you can then 'Share' it with everyone then you can 'Publish' it and this will provide code to embed it in your site or you can use a direct link which runs at the full size of the browser window. The conversion is pretty good and scales well because the text is retained rather than converted to an image. The conversion is pretty good and the whole thing is free. Definitely worth a go.

Tried all of the options in this stack and couldn't reach something that loaded swiftly, used PPT. file directly, and scaled easily. Saved out my ppt. as .gif and opted for "Infinite Carousel" (javascript) that I can drop images into easily. Has left right controls, play option, all the same stuff you find in ppt. presenter mode...

http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-2-released/

The 'actual answer' is that you cannot do it directly. You have to convert your PowerPoint presentation to something that the browser can process. You can save each page of the PowerPoint presentation as a JPEG image and then display as a series of images. You can save the PowerPoint presentation as HTML. Both of these solutions will render only static pages, without any of the animations of PowerPoint. You can use a tool to convert your PowerPoint presentation to Flash (.swf) and embed it that way. This will preserve any animations and presumably allow you to do an automatic slideshow without the need for writing special code to change the images.

Power point supports converting to mp4 which can be posted using a html5 video tag.

Save As > MPEG-4 Video (*.mp4)

As an alternate solution, you can convert PPT/PPTX to JPG/SVG images and display them with revealjs . See example code here .

PS. I am working as SW developer at Aspose.

The first few results on Google all sound like good options:

http://www.pptfaq.com/FAQ00708.htm

http://www.webdeveloper.com/forum/showthread.php?t=86212

Some Flash tool that can convert the PowerPoint file to Flash could be helpful. Slide share is also helpful. For me, I will take something like PPT2Flash Pro or things like that.

Well, I think you get to convert the powerpoint to flash first. PowerPoint is not a sharable format on Internet. Some tool like PowerPoint to Flash could be helpful for you.

Try PowerPoint ActiveX 2.4 . This is an ActiveX component that embeds PowerPoint into an OCX.

Since you are using just Internet Explorer 6 and Internet Explorer 7 you can embed this component into the HTML.

As a side note: If your intranet users also have access to the Internet, you can use the SlideShare widget to embed your PowerPoint presentations in your website.

(Remember to mark your presentation as private!)

I spent a while looking into this and pretty much all of the freeware and shareware on the web sucked. This included software to directly convert the .ppt file to Flash or some sort of video format and also software to record your desktop screen. Software was clunky, and the quality was poor.

The solution we eventually came up with is a little bit manual, but it gave by far the best quality results:

Export the .ppt file into some sort of image format (.bmp, .jpeg, .png, .tif) - it writes out one file per slide
Import all the slide image files into Google Picasa and use them to create a video. You can add in some nice simple transitions (it hasn't got some of the horrific .ppt one's, but who cares) and it dumps out a WMV file of your specified resolution.

Saving out as .wmv isn't perfect, but I'm sure it's probably quite straightforward to convert that to some other format or Flash. We were looking to get them up on YouTube and this did the trick.

An easy (and free) way is to download OpenOffice and use Impress to open the PowerPoint presentation. Then export into a separate folder as HTML. Your presentation will consist of separate HTML files and images for each PowerPoint slide. Link to the title page, and you're done.

I was looking for a solution for similar problem.

I looked into http://phppowerpoint.codeplex.com/

But they have no better documentation, and even no demo page I could see over there and it was seemingly difficult.

What I came up with is: SkyDrive by Microsoft. https://skydrive.live.com

All you need is an account with them and upload your PPT and embed them straightaway. PPT player is quite clean to use and I like it.

I've noticed people recommending some PPT-to-Flash solutions, but Flash doesn't work on mobile devices. There's a hosting service called iSpring Cloud that automatically converts your PPT to combined Flash+HTML5 format and lets you generate an embed code for your website or blog. Full instructions can be found on their website .

Another option is to use Apple Keynote on a Mac (Libre Office couldn't event open a pptx I had) to save the presentation to HTML5. It does a pretty good job to produce exactly what it displays in keynote, e.g. it includes animations and video. Compatibility of keynote to powerpoint has it's limits though (independent of the export).

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged xhtml embed powerpoint or ask your own question .

The Overflow Blog
Community Products Roadmap Update, July 2024
Featured on Meta
We spent a sprint addressing your requests — here’s how it went
Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
Policy: Generative AI (e.g., ChatGPT) is banned
The [lib] tag is being burninated
What makes a homepage useful for logged-in users

Hot Network Questions

Are research and education separated in the US?
Can you Constrain the Noise Modifier?
Would this telescope be capable to detect Middle Ages Civilization?
Can player build dungeons in D&D? I thought that was just a job for the DM
Do you always experience the gravitational influence of other mass as you see them in your frame?
firefox returns odd results for file:/// or file:///tmp
What is the reason for using decibels to measure sound?
Were there any stone vessels (including mortars) made in Paleolithic?
Does Justice Sotomayor's "Seal Team 6" example, in and of itself, explicitly give the President the authority to execute opponents? If not, why not?
What are the `estimates` returned by `avg_slopes()` in modelsummary?
We are getting someplace/somewhere
Sort Number Array
Capture multiple errors before raising an exception
Family reunion crossword: The case of the missing letters
How do I drill a 60cm hole in a tree stump, 4.4 cm wide?
How to manage talkover in meetings?
When selling a machine with proprietary software that links against an LGPLv3 library, do I need to give the customer root access?
pdfgrep How to locate the pages that contain multiple strings and print the page numbers?
What is the mean of random effects?
Control Blending Mode of the Color Mix node through the custom driver
11 trees in 6 rows with 4 trees in each row
How close would a quasar have to be to be seen with the naked eye?
Segments of a string, doubling in length
What is meant by "I was blue ribbon" and "I broke my blue ribbon"?

HTML BASICS Slides Presentation

Click to access all Slides..

This slide presentation shows basics of HTML.

HTML and XHTML are the foundation of all web development. HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine. HTML was once a very loosely-defined language with very little standardization, but as it has become more important, the need for standards has become more apparent. Regardless of whether you choose to write HTML or XHTML, understanding the current standards will help you provide a solid foundation that will simplify all your other web coding. Fortunately HTML and XHTML are actually simpler than they used to be, because much of the functionality has moved to CSS.

Common Elements

Every page (HTML or XHTML shares certain elements in common.) All are essentially plain text files, with the .html extension. HTML files should not be created with a word processor, but in some type of editor that creates plain text. Every page has a large container (HTML or XHTML) and two major subcontainers, the head and the body. The head area contains information useful behind the scenes, such as CSS formatting instructions and JavaScript code. The body contains the part of the page that is visible to the user.

Tags and Attributes

An HTML document is based on the notion of tags. A tag is a piece of text inside angle brackets (<>). Tags typically have a beginning and an end, and usually contain some sort of text inside them. For example, a paragraph is normally denoted like this:

The <p> indicates the beginning of a paragraph. Text is then placed inside the tag, and the end of the paragraph is denoted by an end tag, which is similar to the start tag but with a slash (</p>.) It is common to indent content in a multi-line tag, but it is also legal to place tags on the same line:

Tags are sometimes enhanced by attributes, which are name value pairs that modify the tag. For example, the tag (used to embed an image into a page) usually includes the following attributes:

The src attribute describes where the image file can be found, and the alt attribute describes alternate text that is displayed if the image is unavailable.

Nested tags

Tags can be (and frequently are) nested inside each other. Tags cannot overlap, so <a><b></a></b> is not legal, but <a><b></b></a> is fine.

HTML VS XHTML

HTML has been around for some time. While it has done its job admirably, that job has expanded far more than anybody expected. Early HTML had very limited layout support. Browser manufacturers added many competing standards and web developers came up with clever workarounds, but the result is a lack of standards and frustration for web developers. The latest web standards (XHTML and the emerging HTML 5.0 standard) go back to the original purpose of HTML: to describe the structure of the data only, and leave all formatting to CSS (Please see the DZone CSS Refcard Series). XHTML is nothing more than HTML code conforming to the stricter standards of XML. The same style guidelines are appropriate whether you write in HTML or XHTML (but they tend to be enforced in XHTML):

Most of the requirements of XHTML turn out to be good practice whether you write HTML or XHTML. I recommend using XHTML strict so you can validate your code and know it follows the strictest standards.

XHTML has a number of flavors. The strict type is recommended, as it is the most up-to-date standard which will produce the most predictable results. You can also use a transitional type (which allows deprecated HTML tags) and a frameset type, which allows you to add frames. For most applications, the strict type is preferred.

HTML Template

The following code can be copied and pasted to form the foundation of a basic web page:

The structure of your web pages is critical to the success of programs based on those pages, so use a validating tool to ensure you haven't missed anything

Validating Tool	Description
WC3	The most commonly used validator is online at http://validator.w3.org this free tool checks your page against the doctype you specify and ensures you are following the standards. This acts as a 'spell-checker' for your code and warns you if you made an error like forgetting to close a tag.
HTML Tidy	There's an outstanding free tool called HTML tidy which not only checks your pages for validity, but also fixes most errors automatically. Download this tool at http://tidy.sourceforge.net/ or (better) use the HTML validator extension to build tidy into your browser.
HTML Validator extension	The extension mechanism of Firefox makes it a critical tool for web developers. The HTML Validator extension is an invaluable tool. It automatically checks any page you view in your browser against both the w3 validation engine and tidy. It can instantly find errors, and repair them on the spot with tidy. With this free extension available at http://users.skynet. be/mgueury/mozilla/ , there's no good reason not to validate your code.

USEFUL OPEN SOURCE TOOLS

Some of the best tools for web development are available through the open source community at no cost at all. Consider these application as part of your HTML toolkit:

Open Source Tool	Description
Aptana	http://www.aptana.com/ This free programmer's editor (based on Eclipse) is a full-blown IDE customized for HTML / XHTML, CSS, JavaScript, and Ajax. It offers code completion, syntax highlighting, and FTP support within the editor.
Web Developer Toolbar	https://www.addons.mozilla.org/en-US/firefox/addon/60 This Firefox extension adds numerous debugging and web development tools to your browser.
Firebug	https://addons.mozilla.org/en-US/firefox/addon/1843 is an add-on that adds full debugging capabilities to the browser. The firebug lite version even works with IE.

PAGE STRUCTURE ELEMENTS

The following elements are part of every web page.

Element	Description
<html></html>	Surrounds the entire page
<head></head>	Contains header information (metadata, CSS styles, JavaScript code)
<title></title>	Holds the page title normally displayed in the title bar and used in search results
<body></body>	Contains the main body text. All parts of the page normally visible are in the body

KEY STRUCTURAL ELEMENTS

Most pages contain the following key structural elements:

Element	Name	Description
<h1> </h1>	Heading 1	Reserved fo strongest emphasis
<h2> </h2>	Heading 2	Secondary level heading. Headings go down to level 6, but <h1> through <h3> are most common
<p> </p>	Paragraph	Most of the body of a page should be enclosed in paragraphs
<div> </div>	Division	Similar to a paragraph, but normally marks a section of a page. Divs usually contain paragraphs

LISTS AND DATA

Web pages frequently incorporate structured data so HTML includes several useful list and table tag

Element	Name	Description
<ul></ul>	Unordered list	Normally these lists feature bullets (but that can be changed with CSS)
<ol></ol>	Ordered list	These usually are numbered, but this can be changed with CSS
<li></li>	List item	Used to describe a list item in an unordered list or an ordered list
<dl></dl>	Definition list	Used for lists with name-value pairs
<dt></dt>	Definition term	The name in a name-value pair. Used in definition lists
<dd></dd>	Definition description	The value (or definition) of a name, value pair
<table></table>	Table	Defines beginning and end of a table
<tr></tr>	Table row	Defines a table row. A table normally consists of several <tr> pairs (one per row)
<td></td>	Table data	Indicates data in a table cell. <td> tags occur within <tr> (which occur within <table>)
<th></th>	Table heading	Indicates a table cell to be treated as a heading with special formatting

Standard List Types

HTML supports three primary list types. Ordered lists and unordered lists are the primary list types. By default, ordered lists use numeric identifiers, and unordered lists use bullets.

However, you can use the list-style-type CSS attribute to change the list marker to one of several types.

Lists can be nested inside each other

Definition lists

The special definition list is used for name / value pairs. The definition term (dt) is a word or phrase that is used as the list marker, and the definition data is normally a paragraph:

Use of tables

Tables were used in the past to overcome the page-layout shortcomings of HTML. That use is now deprecated in favor of CSS-based layout. Use tables only as they were intended, to display tabular data.

A table mainly consists of a series of table rows (tr.) Each table row consists of a number of table data (td) elements. The table heading (th) element can be used to indicate a table cell should be marked as a heading.

The rowspan and colspan attributes can be used to make a cell span more than one row or column.

Each row of a table should have the same number of columns, and each column should have the same number of rows. Use of the span attribute may require adjustment to other rows or columns.

LINKS AND IMAGES

Links and images are both used to incorporate external resources into a page. Both are reliant on URIs (Universal Resource Indicators), commonly referred to as URLs or addresses.

<a> (anchor) The anchor tag is used to provide the basic web link:

In this example, http://www.example.com is the site to be visited. The text "link to example.com" will be highlighted as a link.

absolute and relative references

<link>

The link tag is used primarily to pull in external CSS files:

<img>

The img tag is used in to attach an image. Valid formats are .jpg, .png, and .gif. An image should always be accompanied by an alt attribute describing the contents of the image.

Image formatting attributes (height, width, and align) are deprecated in favour of CSS.

SPECIALTY MARKUP

HTML / XHTML includes several specialty tags. These are used to describe special purpose text. They have default styling, but of course the styles can be modified with CSS.

<quote>

The quote tag is intended to display a single line quote:

Quote is an inline tag. If you need a block level quote, use <blockquote>.

<pre>

The <pre> tag is used for pre-formatted text. It is sometimes used for code listings or ASCII art because it preserves carriage returns. Pre-formatted text is usually displayed in a fixed-width font.

<code>

The code format is used to manage pre-formatted text, especially code listings. It is very similar to pre.

This tag is used to mark multi-line quotes. Frequently it is set off with special fonts and indentation through CSS. It is a block-level tag.

<span>

The span tag is a vanilla inline tag. It has no particular formatting of its own. It is intended to be used with a class or ID when you want to apply style to an inline chunk of code.

The em tag is used for standard emphasis. By default, <em> italicizes text, but you can use CSS to make any other type of emphasis you wish.

This tag represents strong emphasis. By default, it is bold, but you can modify the formatting with CSS.

Forms are the standard user input mechanism in HTML / XHTML. You will need another language like JavaScript or PHP to read the contents of the form elements and act upon them.

Form Structure

A number of tags are used to describe the structure of the form. Begin by looking over a basic form:

The <form></form> pair describes the form. In XHTML strict, you must indicate the form's action property. This is typically the server-side program that will read the form. If there is no such program, you can set the action to null ("") The method attribute is used to determine whether the data is sent through the get or post mechanism.

Most form elements are inline tags, and must be encased in a block element. The fieldset is designed exactly for this purpose. Its default appearance draws a box around the form. You can have multiple fieldsets inside a single form.

You can add a legend inside a fieldset. This describes the purpose of the fieldset.

A label is a special inline element that describes a particular field. A label can be paired with an input element by putting that element's ID in the label's for attribute.

The input element is a general purpose inline element. It is meant to be used inside a form, and it is the basis for several types of more specific input. The subtype is indicated by the type attribute. Input elements usually include an id attribute (used for CSS and JavaScript identification) and / or a name attribute (used in server-side programming.) The same element can have both a name and an id.

This element allows a single line of text input:

Passwords display just like textboxes, except rather than showing the text as it is typed, an asterisk appears for each letter. Note that the data is not encoded in any meaningful way. Typing text into a password field is still entirely unsecure.

Radio Button

Radio buttons are used in a group. Only one element of a radio group can be selected at a time. Give all members of a radio group the same name value to indicate they are part of a group.

Attaching a label to a radio button means the user can activate the button by clicking on the corresponding label. For best results, use the selected attribute to force one radio button to be the default.

Checkboxes are much like radio buttons, but they are independent. Like radio buttons, they can be associated with a label.

Hidden fields hold data that is not visible to the user (although it is still visible in the code) It is primarily used to preserve state in server-side programs.

Note that the data is still not protected in any meaningful way.

Buttons are used to signal user input. Buttons can be created through the input tag:

This will create a button with the caption "launch the missiles." When the button is clicked, the page will attempt to run a JavaScript function called "launchMissiles()" Standard buttons are usually used with JavaScript code on the client. The same button can also be created with this alternate format:

This second form is preferred because buttons often require different CSS styles than other input elements. This second form also allows an <img> tag to be placed inside the button, making the image act as the button.

The reset button automatically resets all elements in its form to their default values. It doesn't require any other attributes.

Select / option

Drop-down lists can be created through the select / option mechanism. The select tag creates the overall structure, which is populated by option elements.

The select has an id (for client-side code) or name (for serverside code) identifier. It contains a number of options. Each option has a value which will be returned to the program. The text between <option> and </option> is the value displayed to the user. In some cases (as in this example) the value displayed to the user is not the same as the value used by programs.

Multiple Selections

You can also create a multi-line selection with the select and option tags:

DEPRECATED FORMATTING TAGS

Certain tags common in older forms of HTML are no longer recommended as CSS provides much better alternatives.

The font tag was used to set font color, family (typeface) and size. Numerous CSS attributes replace this capability with much more flexible alternatives. See the CSS refcard for details.

I (italics)

HTML code should indicate the level of emphasis rather than the particular stylistic implications. Italicizing should be done through CSS. The <em> tag represents emphasized text. It produces italic output unless the style is changed to something else. The <i> tag is no longer necessary and is not recommended. Add font-style: italic to the style of any element that should be italicized.

Like italics, boldfacing is considered a style consideration. Use the <strong> tag to denote any text that should be strongly emphasized. By default, this will result in boldfacing the enclosed text. You can add bold emphasis to any style with the font-weight: bold attribute in CSS.

DEPRECATED TECHNIQUES

In addition to the deprecated tags, there are also techniques which were once common in HTML that are no longer recommended.

Frames have been used as a layout mechanism and as a technique for keeping one part of the page static while dynamically loading other parts of the page in separate frames. Use of frames has proven to cause major usability problems. Layout is better handled through CSS techniques, and dynamic page generation is frequently performed through server-side manipulation or AJAX.

Table-based design

Before CSS became widespread, HTML did not have adequate page formatting support. Clever designers used tables to provide an adequate form of page layout. CSS provides a much more flexible and powerful form of layout than tables, and keeps the HTML code largely separated from the styling markup.

HTML ENTITIES

Sometimes you need to display a special character in a web page. HTML has a set of special characters for exactly this purpose. Each of these entities begins with the ampersand(&) followed by a code and a semicolon.

Character	Name	Code	Note
	Non-breaking space		Adds white space
	<	Used to display HTML code or mathematics
>	Greater than	>	Used to display HTML code or mathematics
&	Ampersand	&	If you're not displaying an entity but really want the & symbol
©	Copyright	©	Copyright symbol
®	Registered trademark	®	Registered trademark

HTML 5 / CSS3 PREVIEW

New technologies are on the horizon. Firefox 3.5 now has support for significant new HTML 5 features, and CSS 3 is not far behind. While the following should still be considered experimental, they are likely to become very important tools in the next few years. Firefox 3.5, Safari 4 (and a few other recent browsers) support the following new features:

Audio and video tags

Finally the browsers have direct support for audio and video without plugin technology. These tags work much like the img tag.

The HTML 5 standard currently supports Ogg Theora video, Ogg Vorbis audio, and wav audio. The Ogg formats are opensource alternatives to proprietary formats, and plenty of free tools convert from more standard video formats to Ogg. The autoplay option causes the element to play automatically. The controls element places controls directly into the page.

The code between the beginning and ending tag will execute if the browser cannot process the audio or video tag. You can place alternate code here for embedding alternate versions (Flash, for example)

The canvas tag offers a region of the page that can be drawn upon (usually with Javascript.) This creates the possibility of real interactive graphics without requiring plugins like Flash.

This is actually a CSS improvement, but it's much needed. It allows you to define a font-face in CSS and include a ttf font file from the server. You can then use this font face in your ordinary CSS and use the downloaded font. If this becomes a standard, we will finally have access to reliable downloadable fonts on the web, which will usher in web typography at long last.

Weekly Trends and Language Statistics

HTML Projects for Beginners: 10 Easy Starter Ideas

Published: December 11, 2023

Are you eager to level up your HTML skills? Embarking on HTML projects for beginners is an excellent way to start. As someone who once stood where you are now, I can confidently say that the journey from HTML novice to proficiency is both thrilling and immensely rewarding. It's not just about learning a language; it’s about creating and bringing your ideas to life.

woman learning html projects for beginners

In my early days of exploring web development, HTML was the cornerstone that laid the foundation for my career. Now, with several years of experience in web development and a passion for being a resource for beginners, I understand the importance of starting with practical, easy-to-follow projects.

In this blog, I'm excited to share with you a curated list of HTML projects that are perfect for beginners. These projects are designed not only to increase your understanding of HTML but also to spark your creativity and enthusiasm for web development.

Understanding the Basics
Project 1: Personal Portfolio Page
Project 2: Simple Blog Layout
Project 3: Landing Page
Project 4: eCommerce Page
Project 5: Recipe Page
Project 6: Technical Documentation
Project 7: Small Business Homepage
Project 8: Simple Survey Form
Project 9: Event Invitation Page
Project 10: Parallax Website

The Road Ahead in Web Development

Understanding the basics: what is html.

Before I dive into the exciting world of HTML projects, I want to share why grasping the basics of HTML is crucial. HTML , which stands for HyperText Markup Language, is the foundational building block of the web. It’s not a programming language, but a markup language that I use to define the structure and layout of a web page through various elements and tags.

To me, HTML is like creating a framework for web content, similar to how an architect designs a building's blueprint. You would use tags to mark up text, insert images, create links, and lay out web pages in a format that browsers can understand and display. These tags , the basic units of HTML, help differentiate between headings, paragraphs, lists, and other content types, giving the web its versatile and user-friendly nature.

html projects for beginners: wireframe example

Every web developer starts somewhere, and for many, including myself, that starting point is HTML. It's a language that empowers me to create, experiment, and develop various digital experiences . So, as we embark on these beginner projects, remember that you're not just learning a new skill. You are stepping into a world full of endless possibilities and opportunities.

10 HTML Projects for Beginners: Your Journey Starts Here

As a web developer passionate about teaching, I‘m thrilled to guide you through this series. This section is crafted to progressively enhance your skills, offering a blend of creativity and learning. I’ve seen firsthand how these projects can transform beginners into confident creators, and I‘m excited to see the unique and innovative web experiences you’ll bring to life. Let's embark on this adventure together, turning code into compelling digital stories!

Project 1: Creating a Personal Portfolio Page

One of the best ways to start your HTML journey is by creating a personal portfolio page. This project allows you to introduce yourself to the world of web development while learning the basics of HTML. It’s not just about coding; it’s about telling your story through the web.

The objective here is to craft a web page that effectively portrays your personal and professional persona. This includes detailing your biography, showcasing your skills, and possibly even including a portfolio of work or projects you've completed. This page will be a cornerstone in establishing your online presence and can evolve as you progress in your career.

See the Pen HTML Project 1 by HubSpot ( @hubspot ) on CodePen .

Showcase and Evolve : I'm selecting projects that best represent my abilities, and I plan to continually update my portfolio as I develop new skills.
Simplicity and Clarity : My focus is on creating a clear, user-friendly layout that makes navigating my story and achievements effortless for visitors.

Project 2: Building a Simple Blog Layout

After creating a personal portfolio, the next step in your HTML journey is to build a simple blog layout. This project will introduce you to more complex structures and how to organize content effectively on a webpage.

The goal of this project is to create a basic blog layout that includes a header, a main content area for blog posts, and a footer. This layout serves as the foundation for any blog, providing a clear structure for presenting articles or posts.

See the Pen HTML Project 2 by HubSpot ( @hubspot ) on CodePen .

Consistency is Key : In designing the blog, I'm focusing on maintaining a consistent style throughout the page to ensure a cohesive look.
Content First : My layout will prioritize readability and easy navigation, making the content the star of the show.

Project 3: Designing a Landing Page

For the third project, let's shift gears and focus on creating a landing page. A landing page is a pivotal element in web design, often serving as the first point of contact between a business or individual and their audience. This project will help you learn how to design an effective and visually appealing landing page.

The objective is to create a single-page layout that introduces a product, service, or individual, with a focus on encouraging visitor engagement, such as signing up for a newsletter, downloading a guide, or learning more about a service.

See the Pen HTML Project 3 by HubSpot ( @hubspot ) on CodePen .

Clear Call to Action : I'm ensuring that my landing page has a clear and compelling call to action (CTA) that stands out and guides visitors towards the desired engagement.
Visual Appeal and Simplicity : My focus is on combining visual appeal with simplicity, making sure the design is not only attractive but also easy to navigate and understand.

Project 4: Crafting an eCommerce Page

Creating an eCommerce page is an excellent project for web developers looking to dive into the world of online retail. This project focuses on designing a web page that showcases products, includes product descriptions, prices, and a shopping cart.

The aim is to build a user-friendly and visually appealing eCommerce page that displays products effectively, providing customers with essential information and a seamless shopping experience. The page should include product images, descriptions, prices, and add-to-cart buttons.

See the Pen HTML Project 4 by HubSpot ( @hubspot ) on CodePen .

Clarity and Accessibility : In designing the eCommerce page, my priority is to ensure that information is clear and accessible, making the shopping process straightforward for customers.
Engaging Product Presentation : I'll focus on presenting each product attractively, with high-quality images and concise, informative descriptions that entice and inform.

Project 5: Developing a Recipe Page

One of the best ways to enhance your HTML and CSS skills is by creating a recipe page. This project is not only about structuring content but also about making it visually appealing. A recipe page is a delightful way to combine your love for cooking with web development, allowing you to share your favorite recipes in a creative and engaging format.

The aim of this project is to design a web page that effectively displays a recipe, making it easy and enjoyable to read. This includes organizing the recipe into clear sections such as ingredients and instructions, and styling the page to make it visually appealing. The recipe page you create can serve as a template for future culinary postings or a personal collection of your favorite recipes.

See the Pen HTML Project 5 by HubSpot ( @hubspot ) on CodePen .

Clarity and Simplicity : My focus is on presenting the recipe in an organized manner, ensuring that the ingredients and instructions are easy to distinguish and follow.
Engaging Visuals : I plan to use appealing images and a thoughtful layout, making the page not just informative but also a delight to the eyes.

Project 6: Creating a Technical Documentation

Implementing a responsive navigation menu is a crucial skill in web development, enhancing user experience on various devices. This project focuses on creating a navigation menu that adjusts to different screen sizes, ensuring your website is accessible and user-friendly across all devices.

The goal is to create a navigation menu that adapts to different screen sizes. This includes a traditional horizontal menu for larger screens and a collapsible " hamburger " menu for smaller screens. Understanding responsive design principles and how to apply them using HTML and CSS is key in this project.

See the Pen HTML Project 6 by HubSpot ( @hubspot ) on CodePen .

Flexibility is Key : I'm focusing on building a navigation menu that's flexible and adapts smoothly across various devices.
Simplicity in Design : Keeping the design simple and intuitive is crucial, especially for the mobile version, to ensure ease of navigation.

Project 7: Building a Small Business Homepage

Creating a homepage for a small business is a fantastic project for applying web development skills in a real-world context. This project involves designing a welcoming and informative landing page for a small business, focusing on user engagement and business promotion.

The aim is to create a homepage that effectively represents a small business, providing key information such as services offered, business hours, location, and contact details. The design should be professional, inviting, and aligned with the business's branding.

See the Pen HTML Project 7 by HubSpot ( @hubspot ) on CodePen .

Clarity and Accessibility : My priority is ensuring that key information is presented clearly and is easily accessible to visitors.
Brand Consistency : I plan to incorporate design elements that are in line with the business's branding, creating a cohesive and professional online presence.

Project 8: Setting Up a Simple Survey Form

Creating a simple survey form is a valuable project for practicing form handling in HTML and CSS. It's a fundamental skill in web development, essential for gathering user feedback, conducting research, or learning more about your audience.

The objective of this project is to create a user-friendly survey form that collects various types of information from users. The form will include different types of input fields, such as text boxes, radio buttons, checkboxes, and a submit button. The focus is on creating a clear, accessible, and easy-to-use form layout.

See the Pen HTML Project 8 by HubSpot ( @hubspot ) on CodePen .

Simplicity in Design : I'm aiming for a design that's straightforward and intuitive, ensuring that filling out the form is hassle-free for users.
Responsive Layout : Ensuring the form is responsive and accessible on different devices is a key consideration in its design.

Project 9: Creating an Event Invitation Page

Designing an event invitation page is a fantastic way to combine creativity with technical skills. This project involves creating a web page that serves as an online invitation for an event, such as a conference, workshop, or party.

The aim is to create a visually appealing and informative event invitation page. This page should include details about the event like the date, time, venue, and a brief description. The focus is on using HTML and CSS to present this information in an engaging and organized manner.

See the Pen HTML Project 9 by HubSpot ( @hubspot ) on CodePen .

Visual Impact : I'm aiming for a design that captures the essence of the event, making the page immediately engaging.
Clear Information Hierarchy : Organizing the event details in a clear and logical manner is crucial for effective communication.

Project 10: Building a Parallax Website

Creating a parallax website involves implementing a visual effect where background images move slower than foreground images, creating an illusion of depth and immersion. It's a popular technique for modern, interactive web design.

The objective of this project is to create a website with a parallax scrolling effect. This will be achieved using HTML and CSS, specifically focusing on background image positioning and scroll behavior. The key is to create a visually engaging and dynamic user experience.

See the Pen HTML Project 10 by HubSpot ( @hubspot ) on CodePen .

Balance in Motion : While implementing parallax effects, I'll ensure the motion is smooth and not overwhelming, to maintain a pleasant user experience.
Optimized Performance : I'll be mindful of optimizing images and code to ensure the parallax effect doesn't hinder the site's performance.

As we reach the end of our journey through various web development projects, it's clear that the field of web development is constantly evolving, presenting both challenges and opportunities. From creating basic HTML pages to designing dynamic, interactive websites, the skills acquired are just the beginning of a much broader and exciting landscape.

Embracing New Technologies: The future of web development is tied to the ongoing advancements in technologies. Frameworks like React, Angular, and Vue.js are changing how we build interactive user interfaces. Meanwhile, advancements in CSS, like Flexbox and Grid, have revolutionized layout design, making it more efficient and responsive.

Focus on User Experience: As technology progresses, the emphasis on user experience (UX) will become even more crucial. The success of a website increasingly depends on how well it engages users, provides value, and creates meaningful interactions. Web developers must continuously learn about the latest UX trends and apply them to their work.

The Rise of Mobile-First Development: With the increasing use of smartphones for internet access, mobile-first design is no longer an option but a necessity. This approach involves designing websites for smaller screens first and then scaling up to larger screens, ensuring a seamless experience across all devices.

Web Accessibility and Inclusivity: Making the web accessible to everyone, including people with disabilities, is a growing focus. This includes following best practices and guidelines for web accessibility, ensuring that websites are usable by everyone, regardless of their abilities or disabilities.

Performance and Optimization: As users become more demanding about performance, optimizing websites for speed and efficiency will continue to be a priority. This includes minimizing load times, optimizing images and assets, and writing efficient code.

Emerging Trends: The integration of artificial intelligence and machine learning in web development is on the rise, offering new ways to personalize user experiences and automate tasks. Additionally, the development of Progressive Web Apps (PWAs) is blurring the lines between web and mobile apps, offering offline capabilities and improved performance.

Continuous Learning: The only constant in web development is change. Continuous learning and adaptation are key to staying relevant in this field. Whether it's learning new programming languages, frameworks, or design principles, the ability to evolve with the industry is critical for any web developer.

As you continue on your path in web development, remember that each project is a step towards mastering this ever-changing discipline. Embrace the challenges, stay curious, and keep building, for the road ahead in web development is as exciting as it is limitless.

Don't forget to share this post!

The Ultimate Guide to HTML for Beginners: How to Write, Learn & Use It

How to Add & Change Background Color in HTML

4 Steps to Add a Clickable Telephone Link in HTML

How to Create an HTML Dropdown Menu [+ Examples]

Onchange Event in HTML: How to Use It [+Examples]

HTML Dialog: How to Create a Dialog Box in HTML

How to Create a Landing Page in HTML & CSS [+ 15 Templates]

HTML Audio Tag: How to Add Audio to Your Website

How to Add an Image & Background Image in HTML

How to Call a JavaScript Function in HTML

Tangible tips and coding templates from experts to help you code better and faster.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

See us on facebook
See us on twitter
See us on youtube
See us on linkedin
See us on instagram

New compound could supercharge naloxone in fight against opioid overdoses

In a Stanford Medicine-led study, researchers combed through billions of compounds to find one that could enhance naloxone’s ability to fend off more potent opioids, with promising results in mice.

July 3, 2024 - By Nina Bai

Naloxone (orange) treats opioid overdose by kicking out opioids (pink) from the opioid receptor (teal). The newly discovered compound 368 (purple) strengthens the binding of naloxone to the opioid receptor, making it a more effective life-saving medicine. Emily Moskal

Every great superhero needs a sidekick. Now, scientists may have found a drug-busting partner for naloxone.

Naloxone is an opioid antidote that has saved tens of thousands of lives by rapidly reversing opioid overdoses in more than 90% of cases in which it is used. But its powers are temporary, lasting only 30 to 90 minutes. The rise of potent, long-acting opioids such as fentanyl means that someone brought back from the brink can still overdose after the naloxone wears off.

In a new study, Stanford Medicine scientists and collaborators have discovered a novel compound that can work alongside naloxone, supercharging its life-saving effects.

When tested in mice, adding the compound to a miniscule dose of naloxone made it as powerful as the conventional dosage, with the added benefit of milder withdrawal symptoms.

Naloxone, which is given as a nasal spray or injection, works by seizing opioid receptors, kicking out opioids and taking their place. (Naloxone has no addictive properties of its own.) The researchers found that the new compound — known for now as compound 368 — binds next to naloxone on opioid receptors and helpfully holds naloxone in place.

The findings were published July 3 in Nature .

“Naloxone binding to an opioid receptor turns it mostly off, but not all the way,” said Evan O’Brien , PhD, a postdoctoral scholar in molecular and cellular physiology and the lead author of the new study. “Our data shows that compound 368 is able to increase the binding of naloxone and turn the receptor off more completely.”

A new type of drug

The new compound belongs to an unusual class of drugs that don’t directly target the active site on receptors. Instead, they bind elsewhere on the receptor but trigger a structural change that alters the active site. Known as allosteric modulators (allos meaning “other” in Greek), they create new possibilities in drug development, but are trickier to identify, O’Brien said.

Evan O'Brien

“Allosteric modulators are not common yet, and they’re a lot more difficult to discover and to work with,” he said.

Compound 368 is the first known allosteric modulator that can help turn off opioid receptors.

The researchers picked out compound 368 from a library of 4.5 billion compounds. Using advanced high-throughput techniques, they were able to screen the entire molecular library in just two days. To identify potential allosteric modulators that could cooperate with naloxone, they selected for compounds that bind only to receptors already saturated with naloxone.

Compound 368 — an otherwise rather unremarkable compound, O’Brien said — stood out for its ability to tightly bind to opioid receptors only in the presence of naloxone. Like a loyal sidekick, it doesn’t work with other drugs, and it doesn’t work alone.

Powers combined

When researchers exposed cells with opioid receptors to compound 368, they found that the compound alone made little difference. But when cells were given the compound with naloxone, the combination was a powerful deterrent against opioid binding.

The more compound 368 they added, the better naloxone was able to block opioids, including morphine and fentanyl.

“The compound itself doesn’t bind well without naloxone,” O’Brien said. “We think naloxone has to bind first, and then compound 368 is able to come in and cap it in place.”

Indeed, using cryoEM imaging to visualize frozen molecular structures, the researchers found that compound 368 docks right next to naloxone on the opioid receptor, forming bonds that secure the drug in place and slow its natural degradation by the body.

Boosting naloxone

Next, collaborators in McLaughlin’s lab tested the new compound in mice that had been given morphine. Because opioids reduce pain sensation, the researchers observed how quickly a mouse removed its tail from hot water. The stronger the opioid antidote, the faster a mouse would take its tail out of the water.

When mice on morphine were treated with compound 368 alone, nothing changed.

“The compound in mice, at least from the assays we’ve run, does nothing on its own,” O’Brien said. “We don’t observe any off-target effects. We don’t see anything happen to the mice even when we inject a massive amount of compound 368.”

This was exactly what the researchers had predicted from their molecular work and a good sign of the compound’s safety, he added.

The more tools at our disposal, the better we’ll be able to fight this epidemic of fentanyl overdoses.

When they also gave the mice a small dose of naloxone — an amount that typically would have no effect — the pairing with compound 368 dramatically improved naloxone’s effects.

“When we start to give them more and more of compound 368 with that low dose of naloxone, they take their tail out of the water pretty quickly,” O’Brien said.

Other effects of opioids, such as respiratory depression (the usual cause of death in opioid overdoses), were also reversed by a small dose of naloxone enhanced with the new compound.

Remarkably, the combination of compound 368 with a half dose of naloxone was strong enough to counter fentanyl, which is about 100 times more potent than morphine and the main culprit of overdoses in the United States.

By requiring less naloxone, the new compound could also ease the withdrawal symptoms that opioid users experience after overdose treatment. These symptoms — including body aches, shivering, nausea and diarrhea — are immediate and can be extremely uncomfortable, O’Brien said.

The researchers found that a low dose of naloxone plus compound 368 could reverse the effects of opioids with much milder withdrawal symptoms — in mice, this meant less teeth chattering, jumping and diarrhea.

Saving lives

The team, with the Majumdar lab’s expertise in medicinal chemistry, is now tweaking compound 368 so it can help naloxone counter strong opioids for longer durations.

“We’re still working on optimizing the compound’s properties for those longer-lasting effects,” O’Brien said. “But first showing that it works cooperatively with these low doses of naloxone suggests that we’re on the right track.”

O’Brien is optimistic that this track will lead to trials in humans. Overdoses from synthetic opioids, primarily fentanyl, continue to surge, killing nearly 74,000 Americans in 2022. “The more tools at our disposal, the better we’ll be able to fight this epidemic of fentanyl overdoses,” he said.

Researchers from Kurume University, SLAC National Acceleration Laboratory, Princeton University and University of Copenhagen also contributed to the work.

The study received funding from an American Diabetes Association Postdoctoral Fellowship, an American Heart Association Postdoctoral Fellowship, the National Institute of Health (grant RO1DA057790) and the Chan Zuckerberg Biohub.

About Stanford Medicine

Stanford Medicine is an integrated academic health system comprising the Stanford School of Medicine and adult and pediatric health care delivery systems. Together, they harness the full potential of biomedicine through collaborative research, education and clinical care for patients. For more information, please visit med.stanford.edu .

Hope amid crisis

Psychiatry’s new frontiers

Stanford Medicine magazine: Mental health

Investigations
National Politics

Confused by Wisconsin's new electoral maps? League of Women Voters will offer a free presentation

The presentation takes place in the shattuck room from 6:30 to 8 p.m..

OSHKOSH – Fox Valley voters are about to have a better understanding of the new state Senate and Assembly districts .

Appleton-Fox Cities and Winnebago County’s League of Women Voters will co-host a free and open nonpartisan informational presentation about the new boundaries July 11 at Neenah Public Library, 240 E. Wisconsin Ave.

The move comes after Democratic Gov. Tony Evers signed new electoral maps into law that that reshaped down-ballot races across the state of Wisconsin.

The presentation will take place in the Shattuck Room from 6:30 to 8 p.m. as members of the Fair Maps coalition explain the changes in local legislative districts and provide new and former district maps.

Related: Wisconsin has new legislative maps, but won't have new congressional ones. Here's why.

See the new state Senate districts

This map shows Wisconsin state Senate districts under the previous 2022 map on the left, and the new 2024 map on the right. Each district is colored according to whether it leans Democrat , leans Republican , or is a competitive district (within 5%).

Note: The partisan lean of districts is calculated based on voting data from national and local elections from 2016 to 2022. Districts with less than 5% difference in Republican and Democratic votes are considered competitive districts.

Map by Andrew Hahn and Eva Wen / Milwaukee Journal Sentinel

State legislative candidates in the Fox Valley area are also expected to make short presentations during the program ahead of the Aug. 13 primary and Nov. 5 general elections.

“We think this will be beneficial for voters to see the maps, and then we can help them locate themselves on the maps if they so need,” League of Women Voters of Winnebago County President Margy Davey said.

“It’s a marvelous thing to have fair maps to work with, but it did cause some confusion, so we wanted to educate as many voters as possible and we want to do that in every way possible.”

In December, the Wisconsin Supreme Court ordered the Republican-controlled state Legislature to draw new legislative boundaries ahead of the 2024 election, arguing their GOP advantage is unconstitutional.

Republicans currently control two-thirds of the Senate districts, or 22 of 33 seats, under those previous maps.

Related: You have questions about Wisconsin's new election maps and how they affect you? We have answers.

See the new state Assembly districts

This map shows Wisconsin state Assembly districts under the previous 2022 map on the left, and the new 2024 map on the right. Each district is colored according to whether it leans Democrat , leans Republican , or is a competitive district (within 5%).

But a Milwaukee Journal Sentinel analysis of the new maps shows they will divide Wisconsin’s 33 legislative districts more evenly.

Several maps have been drastically redrawn to the point where many senators have been displaced from their previous districts and forced to seek re-election in another district.

For instance, Republican Sen. Dan Feyen is now vying for Senate District 20 after his hometown of Fond du Lac was drawn out of the new District 18.

The newly redrawn District 18 has now thrown Oshkosh in with Neenah, Menasha and most of the city of Appleton after the old map previously placed Oshkosh with more rural areas like Omro, Waupun and Fond du Lac.

Have a story tip or public interest concern? Contact Justin Marville at [email protected] .

Sport | Tennis

Wimbledon 2024 LIVE! Andy Murray presentation on Centre Court after doubles match

Andy Murray - LIVE!

Andy Murray may yet have at least one more match to play but Wimbledon bid farewell to the two-time champion in an emotional tribute on Centre Court on Thursday night. Past champions from Novak Djokovic to John McEnroe graced the court, so too the British men tasked with taking over Murray’s mantle at SW19 in Jack Draper, Cameron Norrie and Dan Evans.

Sue Barker was brought out of retirement to interview him on court while video messages played out from the likes of Roger Federer and Serena Williams. It almost seemed immaterial that Murray had just played a match – his first at Wimbledon with brother Jamie – so too that he lost it 7-6, 6-4 to John Peers and Rinky Hijikata.

Murray is scheduled to play the mixed doubles with Emma Raducanu later in the week, although Raducanu’s priority is clearly the singles against Maria Sakkari on Friday. This was Murray’s moment and yet it was apt to be shared on screen and in person by some of his greatest rivals.

Latest updates as Andy Murray features in doubles

Live updates

What a night!

Andy Murray may yet have at least one more match to play but Wimbledon bid farewell to the two-time champion in an emotional tribute on Centre Court on Thursday night.

Past champions from Novak Djokovic to John McEnroe graced the court, so too the British men tasked with taking over Murray’s mantle at SW19 in Jack Draper, Cameron Norrie and Dan Evans.

Sue Barker was brought out of retirement to interview him on court while video messages played out from the likes of Roger Federer and Serena Williams.

It almost seemed immaterial that Murray had just played a match – his first at Wimbledon with brother Jamie – so too that he lost it 7-6, 6-4 to John Peers and Rinky Hijikata.

The Australian duo must almost feel like villains for defeating the British pair in echoes of Federer bowing out on the losing side of his doubles match with Rafael Nadal at the Laver Cup - also in London - at the end of last year.

Read our full report here!

That glorious, glorious moment

So many incredible achievements in the career of Andy Murray - this probably tops the lot.

All the pressure, all the expectation... all the glory.

It's not done yet...

Andy Murray’s Wimbledon career has at least one more chapter to write.

He will play alongside Emma Raducanu in the mixed doubles - and then that really will be it.

First round match for that is expected on Saturday, going to be another very special occasion.

Raducanu still going strong in the singles, she faces Maria Sakkari tomorrow.

Murray pays tribute to parents

"Mum and dad have been amazing support, still today, but when we were little and allowing us to go and pursue our dreams,” he said.

"Jamie left home to go to train when he was 12, then he moved to Paris. I left to go over to Spain.

"I know now having children how, I don't even like them being away for a day so allowing us to go and train abroad and pursue our dreams, we couldn't have done that without their support so thank you mum and dad."

Classy from Draper

Jack Draper and Cam Norrie were two of those that came out onto Centre Court to pay tribute.

They were locked in battle on Court One just a couple of hours ago, with Norrie coming through in straight sets to knock the British No1 out.

Nice to see Draper still play his part in Murray’s farewell.

Andy and Jamie have just made their way to the media centre for their press conference, meaning those outside have had a glimpse of the brothers again.

One fans cannot contain himself. He has been screaming, and I mean SCREAMING, Andy’s name for about three minutes straight.

Andy has been in the media theatre and out of view for at least two and a half of those.

Watch: Murray's Centre Court presentation

Got the tears under control?

Good. Time to go again. Here’s Andy Murray’s interview in full on Centre Court, with plenty of humour from the main man in between choking up.

Alcaraz: What a legacy

Correct, Carlos.

Everyone gets a wave!

Those on Centre Court got their change to pay tribute to Andy Murray, and so too those outside at SW19.

He better go in otherwise they will stay there all night.

As was the case in 2012, talking about his team has never been easy for Andy.

Especially not now when he’s reflecting on the toughest part of his career. All those injuries, comebacks, setbacks, injuries, comebacks, setbacks, inj... you get the idea.

Skip to content
Skip to search
Student portal
Staff portal (Inside the department)
Edit this site
Edit this page

Kirrawee High School

Make a payment

School planning and reporting
Principals Message – a special place to learn
Our signature strengths
Welfare and discipline
Rules and policies
Nihongo Tanken centre
Location and transport
Subject costs
Sponsorship
Our Pillars for Success
Parent-teacher interviews
Subject requirements
Parents and citizens' association
Bring Your Own Device
Aboriginal Education
Sentral Parent Portal
Payment - School Bytes
School counselling service
Studying at high school
Years 7 and 8
Years 9 and 10
Years 11 and 12
Volunteering at school
Parent portal information
Inclusive learning support
KHS welfare hub
Student Forum Website
Learning remotely
Creative arts
Human society and its environment
Mathematics
Personal development, health and physical education
Technological and applied studies
Religion and ethics
Learning across the curriculum
Assessment and reporting
Scholarships and awards
High Potential and Gifted Education
Learning support
Student Leadership
Student Welfare
Year 10 RoSA
Mandatory Sport
Debating and public speaking
Career Programs
Stage 5 Subject Selection
Illness/Misadventure
Senior Assessment
Minimum Standard Tests
Careers programs
Post HSC Destinations
Driving to school
Stage 6 Subject Selection
Uniform Shop
Requirements
Out of uniform procedure
Make a payment |
Enrolment |
Newsletter |

T: Telephone 02 9521 2099

E: Email [email protected]

Semester 1 Year 7 and 8 Presentation

05 Jul 2024

As another successful semester is completed, it is with great pleasure and admiration that we extend our congratulations to the outstanding students of Year 7 and 8 who were recognised for their exceptional achievements during Terms 1 and 2.

Their dedication, perseverance, and passion for learning have been exceptional and we take this moment to honour their accomplishments. We celebrate the hard work and the well-deserved awards that were awarded at our presentation day on Thursday of Week 10.

Acknowledging and celebrating academic achievements is vital for fostering a positive educational environment. It not only motivates students to strive for excellence but also instills a sense of pride, self-confidence, and determination to continue their educational journey with zeal.

By recognising and honoring the accomplishments of Year 7 and 8 students, we reinforce the importance of hard work, discipline, and dedication in achieving success. We hope that these awards will serve as a catalyst for continuous growth and inspire others to embrace the pursuit of knowledge and excellence.

Congratulations to all our award winners recognised for Semester 1 including :

Distinction Awards for Excellence in 3 or more subjects

1st in subject/class

Postive Growth in 3 subjects/classes

Student Leadership (SRC)

Deputy Principal Award

100% Attendance

Big Science Competition High Distinction

Contribution to Performing Arts - Jazz Orchestra, Kaleidscope, Senior Dance Company

Sport - Sydney East Representation, Age Champions

Many other awards for Semester 1 were also handed out at Year Assemblies this week. The volume of awards presented at both the Semester Presentation and the Year Assemblies is a credit to the outstanding effort and achievement of our Year 7 and 8 cohorts

Special mention to our Distinction Award Winners in each class. These students were recognised for Excellence in 3 or more subjects.

7O - Levi Pele - Excellence in 4 Courses, Abigail Wood - Excellence in 4 Courses, Leonore Addison - Excellence in 4 Courses

7L: - Mason Love - Excellence in 5 Courses, Eliette Steele - Excellence in 4 Courses, Charlotte Barlow - Excellence in 4 Courses, Victoria Lypovskyi - Excellence in 3 Courses, Matthew Parker - Excellence in 3 Courses, Tom Cook - Excellence in 3 Courses

7Y - Annabelle Grace - Excellence in 5 Courses, Caitlin Murphy - Excellence in 5 Courses, Charlotte Smith - Excellence in 4 Courses, Brian Ngo - Excellence in 3 Courses

7M - Tyson Brown - Excellence in 4 Courses, Joni Chew - Excellence in 4 Courses, Sophie Eaton - Excellence in 4 Courses, Mila Stoukalo - Excellence in 4 Courses, Riley Rivet - Excellence in 3 Courses

7P - Amelia Connor - Excellence in 5 Courses, Zak Macdonald - Excellence in 5 Courses, Emma Barry - Excellence in 4 Courses, Tara McManus - Excellence in 3 Courses

7I-Georgia Malone - Excellence in 5 Courses, Kobi Mead - Excellence in 5 Courses, Oliver Robertson - Excellence in 4 Courses, Bulan Hamilton-Foster - Excellence in 4 Courses, Harvey Delforce - Excellence in 3 Courses

7C - Sorenn Bentley - Excellence in 5 Courses, Kavya Saxena - Excellence in 4 Courses, Erin Mirigliani - Excellence in 3 Courses

7S - Thomas Marto - Excellence in 4 Courses, Kate Park - Excellence in 3 Courses, Peyton Wallis - Excellence in 3 Courses

8O - Lachlan Beasley - Excellence in 4 Courses, Jack Randall - Excellence in 4 Courses, Emma Scard - Excellence in 3 Courses, Hunter Craig - Excellence in 3 Courses

8L - Edward Kirby - Excellence in 6 Courses, Winston Yu - Excellence in 5 Courses, Ella Hawley - Excellence in 4 Courses

8Y - Harper Gann - Excellence in 7 Courses, Holly Rivet - Excellence in 4 Courses, Joshua Pearce - Excellence in 3 Courses, Talaith Humphreys - Excellence in 3 Courses, Jade Miller - Excellence in 3, Courses, Eitan Faass - Excellence in 3 Courses, Chelsea Tabone - Excellence in 3 Courses

8M - Chloe Scott - Excellence in 5 Courses, Elise Mead - Excellence in 3 Courses, Emile Whitcher - Excellence in 3 Courses

8P - May Delaimey Moezzi - Excellence in 5 Courses, Lindsay Harris - Excellence in 4 Courses,, Elizabeth Amromina - Excellence in 3 Courses, Jessica Yewdall - Excellence in 3 Courses, A mity Simpson - Excellence in 3 Courses

8I - Clare Pike - Excellence in 4 Courses, Abigail Nicholson - Excellence in 3 Courses, Ethan Reilly - Excellence in 3 Courses, Miranda Robbins - Excellence in 3 Courses

8C - Felicity Watson - Excellence in 7 Courses, Ava Levitski - Excellence in 3 Courses, Juliet Irwin - Excellence in 3 Courses, James Johnston - Excellence in 3 Courses

8S - Eirian Humphreys - Excellence in 8 Courses, Madeline Henderson - Excellence in 6 Courses, Mia Healey - Excellence in 4 Courses,

Click here to the see the full gallery of photos.

We would also like to acknowledge Ms Lacey and the Music Faculty for the amazing performances including

The Concert Band

Erin Mirigliani - National Athlem

Percussion Ensemble

Luke Liu - Pianist

and thank you to our student hosts for their excellent leadership and our photographers Mrs Williamson, Lucy Byrnes and Zuzia Sech. Finally thank you to our Presentation Day Helpers Erika Beaupark and Sophia Guppy for all their work behind the scenes assisting Mrs Blanch and Mrs Anderson.

General enquiries

address 21 Hunter Street Kirrawee NSW 2232

telephone 02 9521 2099

email [email protected]

Get directions

We would like to pay our respects and acknowledge the traditional custodians of the land and also pay respect to Elders both past and present.

Copyright for this website is owned by the State of New South Wales through the Department of Education. For more information go to http://www.dec.nsw.gov.au/footer/copyright.

How to Watch the Macy's 2024 Fourth of July Fireworks for Free

The New York City-based spectacle can be enjoyed online from the comfort of your own home.

preview for 13 Things You Never Knew About Independence Day

We've been independently researching and testing products for over 120 years. If you buy through our links, we may earn a commission. Learn more about our review process.

After viewers witnessed a star-studded bash last year, NBC is bringing the glitz and glamour back for the ultimate summer party. Singers Amber Mark, Brandy Clark, Lainey Wilson , Luis Fonsi, Mickey Guyton, Tanner Adell and The War and Treaty are all set to sing some of their biggest hits for the crowd, with Mickey and Zuri Hall hosting the two-hour long show. The special will culminate in the famous fireworks display over the Hudson River in New York City, marking the end of a memorable celebration.

Now, you may be wondering where you can watch the fireworks without needing to leave your home. We have all the answers on how to watch and stream the Macy's Fourth of July Fireworks on TV and online .

How to watch the Macy's Fourth of July fireworks with cable:

The Macy's Fourth of July fireworks show will air on Thursday, July 4, 2024 at 8 p.m. ET on NBC . There will also be an encore presentation at 10 p.m. ET on NBC.

When 9:25 p.m. rolls around, that's when the fireworks display will start going off, until around 10 p.m. You can watch the program live from the NBC website or the NBC app if you're on the go — just make sure you have your TV login info at hand so you can sign in from anywhere.

How to watch and stream the Macy's Fourth of July fireworks for free online:

If you're someone who doesn't have access to live television, no worries. The Macy's Fourth of July fireworks event will also stream on NBC's official streaming site Peacock . The site offers a number of plans you can choose from, with the lowest beginning at $5.99 per month or $59.99 per year. Once you're all set, you can watch the show on Peacock's website or on the Peacock app .

There are also other options for watching the Macy's Fourth of July fireworks online. If you have streaming sites like YouTube TV , Hulu + Live TV , FuboTV or Sling , you can livestream the program on those sites as well. Just make sure you have accounts made ahead of time so you don't miss a moment of the annual event.

As the entertainment and news editorial assistant for Good Housekeeping , Adrianna (she/her) writes about everything TV, movies, music and pop culture. She graduated from Yeshiva University with a B.A. in journalism and a minor in business management. She covers shows like The Rookie , 9-1-1 and Grey's Anatomy , though when she’s not watching the latest show on Netflix, she’s taking martial arts or drinking way too much coffee.

@media(max-width: 64rem){.css-o9j0dn:before{margin-bottom:0.5rem;margin-right:0.625rem;color:#ffffff;width:1.25rem;bottom:-0.2rem;height:1.25rem;content:'_';display:inline-block;position:relative;line-height:1;background-repeat:no-repeat;}.loaded .css-o9j0dn:before{background-image:url(/_assets/design-tokens/goodhousekeeping/static/images/Clover.5c7a1a0.svg);}}@media(min-width: 48rem){.loaded .css-o9j0dn:before{background-image:url(/_assets/design-tokens/goodhousekeeping/static/images/Clover.5c7a1a0.svg);}} Must-See TV Shows

the bear season 2 season two of fx the bear the critically acclaimed original series, follows carmen carmy berzatto jeremy allen white, sydney adamu ayo edebiri and richard jerimovich ebon moss bachrach as they work to transform their grimy sandwich joint into a next level spot as they strip the restaurant down to its bones, the crew undertakes transformational journeys of their own, each forced to confront the past and reckon with who they want to be in the future carmen carmy berzatto jeremy allen white, shown photo courtesy of fx

'WoF' Star Ryan Seacrest Is Unrecognizable on IG

claim to fame season 3 cast hosts release date news

What to Know About 'Claim to Fame' Season 3

pbs a capitol fourth concert 2024 how to watch stream

When Is the 'A Capitol Fourth' Concert in 2024?

the rookie season 7 release date cast news

What to Know About 'The Rookie' Season 7

Where to Watch Season 9 of 'Suits'

ncis cast wilmer valderrama season 22 nick torres comment

'NCIS' Star Wilmer Valderrama on Torres' Future

when calls the heart season 12 release date cast news

The 411 on 'When Calls the Heart' Season 12

jeremy allen white as carmen 'carmy' berzatto in hulu's 'the bear' season 3

'The Bear' Fans Need to Know This Season 4 News

What Is the 'AGT' Golden Buzzer?

'WCTH' Fans Praise Chris McNally Before Finale

criminal minds evolution cast paget brewster season 3 renewed twitter

Paget Brewster on 'Criminal Minds' Future

IMAGES

PPT
10 Best HTML Presentation Frameworks In JavaScript (2021 Update
Free HTML Google Slides Themes and PowerPoint Templates for Presentations
PPT
HTML PowerPoint Presentation
Html Text With Crane In Background Stock Photo

VIDEO

Live Edit: Reveal-JS The HTML Presentation Framework
HTML PRESENTATION
The HTML presentation framework Reveal.js
JavaScript Animated Presentation Slides
Focusky Presentation Maker: 2 Ways to Publish Your Ideas Online
How to Create an Amazing Slider with HTML, CSS, and Swiper

COMMENTS

The HTML presentation framework
Create Stunning Presentations on the Web. reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your ...
How to Create Presentation Slides With HTML and CSS
Recall that presentationArea refers to the element that wraps the whole presentation. By adding the class full-screen to this element, we trigger the CSS that will expand it to take up the whole screen.. Since we're now in full-screen mode, we need to show the icon for reverting back to the small screen by adding the class .show to it. Finally, we update the variable screenStatus to 1.
How to Create Beautiful HTML & CSS Presentations with WebSlides
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 ...
How To Build A Captivating Presentation Using HTML, CSS, & JavaScript
Making a Presentation. Copy an existing presentation folder; Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2) Making a Slide. Making a slide is pretty simple. Just add a HTML section. <section>  </section> inside the span with the class of "prez-root". Also keep in mind ...
WebSlides: Create Beautiful HTML Presentations
WebSlides is the easiest way to make HTML presentations. Just choose a demo and customize it in minutes. 120+ slides ready to use. Good karma. WebSlides is a beautiful solution for telling stories. ... HTML and CSS as narrative elements. Work better, faster. Designers, marketers, and journalists can now focus on the content. Simply choose a ...
How to Create a Slideshow with HTML, CSS, and JavaScript
The first step to changing which slides show is to select the slide wrapper (s) and then its slides. When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval. Keep it in mind that when you remove an active ...
reveal.js
A framework for easily creating beautiful presentations using HTML. Reveal.js HTML Presentations Made Easy. Created by Hakim El Hattab / @hakimel. Heads Up. ... Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare. Take a Moment.
How to Create Presentation Slides with HTML and CSS
Create the Starter Markup. 3. Make It Pretty. 4. Enable Slide Navigation. Moving the Presentation to the Next and Previous Slides. Code for Showing the Presentation in Full Screen and Small Screen. Hidding Left and Right Icons in First and Last Slides. Updating and Displaying Slide Number.
Create Presentation Slides with HTML and CSS
HTML/CSS. As I sifted through the various pieces of software that are designed for creating presentation slides, it occurred to me: why learn yet another program, when I can instead use the tools that I'm already familiar with? With a bit of fiddling, we can easily create beautiful presentations with HTML and CSS. I'll show you how today!
Demo
Speaker View. There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes. Press the S key to try it out. Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
Top 10 JavaScript frameworks to create presentation slides
Impress.js (37.5k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides.
WebSlides Demos
WebSlides is a cute solution for making HTML presentations, landings, and portfolios. Put content wherever you want, add background images, videos... How easy is WebSlides? You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.
GitHub
WebSlides = Create stories with Karma. Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — https://webslides.tv/demos.
How To Create a Slideshow
Learn the basics of HTML in a fun and engaging video tutorial. Templates. We have created a bunch of responsive website templates you can use - for free! Web Hosting. Host your own website, and share it to the world with W3Schools Spaces. Create a Server. Create your own server using Python, PHP, React.js, Node.js, Java, C#, etc. ...
5 of the Best Free HTML5 Presentation Systems
Google Slides Template. As you'd expect, Google has their own HTML5 presentation template (as well as the one offered in Google Docs ). It's fairly basic when compared to Reveal.js or Impress ...
10 Best HTML Presentation Frameworks In JavaScript (2024 Update)
Best Vanilla JS HTML Presentation Frameworks Beautiful HTML Presentation Library - reveal.js. reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. Presentations made with reveal.js are built on open web technologies.
Presentation Slides with HTML, CSS and JS
About HTML Preprocessors. HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. ... // get elements let presentation = document.querySelector(".presentation"); let slides = document.querySelectorAll(".slide ...
Why I do my presentation slides in HTML, and so should you
Doing a presentation in HTML doesn't necessarily mean going into a text editor and writing markup and CSS and JavaScript from scratch. The simplest on-ramp to HTML slides is designing them ...
Embed a PowerPoint presentation into HTML
In the power point presentation click Save As and select GIF. Pick the quality you want to display the presentation at. Power Point will save one GIF image for each slide and name them Slide1.GIF, Slide2.GIF, etc..... Create a HTML page and add a image tag to display the Power point GIF images.
HTML BASICS Slides Presentation
HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine.
HTML Projects for Beginners: 10 Easy Starter Ideas
Engaging Product Presentation: I'll focus on presenting each product attractively, with high-quality images and concise, informative descriptions that entice and inform. Project 5: Developing a Recipe Page. One of the best ways to enhance your HTML and CSS skills is by creating a recipe page. This project is not only about structuring content ...
Free PPT Slides for HTML Training
HTML 5 Course. HTML Training (12 Slides) 4976 Views. Unlock a Vast Repository of HTML Training PPT Slides, Meticulously Curated by Our Expert Tutors and Institutes. Download Free and Enhance Your Learning!
HTML and CSS Presentation Demo with WebSlides
This demo by Ivaylo Gerchev accompanies an article for SitePoint and illustrates how to create an HTML and CSS presentation about SVG using WebSlides. ... Pen Settings. HTML CSS JS Behavior Editor HTML. HTML Preprocessor About HTML Preprocessors. HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is ...
New compound could supercharge naloxone in fight against opioid
Naloxone (orange) treats opioid overdose by kicking out opioids (pink) from the opioid receptor (teal). The newly discovered compound 368 (purple) strengthens the binding of naloxone to the opioid receptor, making it a more effective life-saving medicine.
New Wisconsin electoral maps: LWV holds free session at Neenah library
The presentation will take place in the Shattuck Room from 6:30 to 8 p.m. as members of the Fair Maps coalition explain the changes in local legislative districts and provide new and former ...
Wimbledon 2024 LIVE! Andy Murray presentation on Centre Court after
Andy Murray presentation on Centre Court after doubles match. Murray's career was celebrated on Centre Court after a first-round doubles defeat with brother Jamie. Close. Matt Verri 1 hour ago.
Semester 1 Year 7 and 8 Presentation
The volume of awards presented at both the Semester Presentation and the Year Assemblies is a credit to the outstanding effort and achievement of our Year 7 and 8 cohorts. Special mention to our Distinction Award Winners in each class. These students were recognised for Excellence in 3 or more subjects.
How to Watch the Macy's 2024 Fourth of July Fireworks for Free
There will also be an encore presentation at 10 p.m. ET on NBC. When 9:25 p.m. rolls around, that's when the fireworks display will start going off, until around 10 p.m.
Medal of Honor: Two Union soldiers posthumously receive awards for
Two Union soldiers from the American Civil War were posthumously awarded with the Medal of Honor by President Joe Biden on Wednesday, more than 160 years after being executed for their part in a ...
ACS Nano Summit 2024: Emerging Materials for Future Nanotechnology
ACS Nano Summit 2024: Emerging Materials for Future Nanotechnology will provide an unparalleled opportunity for global colleagues to reconnect and engage in discussions on the latest scientific breakthroughs, technological advancements, and emerging trends in the field. The distinguished conference will include keynote presentations by ACS Nano editors, who will lead themed sessions and ...

DEV Community

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

Built-In Themes

Changing The Theme

Custom Themes

Creating A Custom Theme

Mixins & Settings

Vertical Slides

Transitions

Top comments (18)

SBCompSciClub / prez-software

Run on Dev Server

Making a Presentation

Making a Slide

Adding Text

Functional Testing: Ensuring Software Functionality

Free weekend of Vue Certification Developer Training is coming soon!

What it’s like to put code in production

How to Create a Slideshow with HTML, CSS, and JavaScript

Write some markup

Change the slides in a time interval.

Codepen example following this tutorial

HTML Presentations Made Easy

Vertical Slides

Basement Level 1

Basement Level 2

Point of View

Works in Mobile Safari

Marvelous Unordered List

Fantastic Ordered List

Transition Styles

Global State

Custom Events

Slide Backgrounds

Image Backgrounds

Background Transition Override

Clever Quotes

Pretty Code

Intergalactic Interconnections

Fragmented Views

Fragment Styles

Spectacular image!

Take a Moment

Stellar Links

BY Hakim El Hattab / hakim.se

Bootstraphunter

How to Create Presentation Slides with HTML and CSS

1. Create the Directory Structure

2. Create the Starter Markup

3. Make It Pretty

4. Enable Slide Navigation

Moving the Presentation to the Next and Previous Slides

Code for Showing the Presentation in Full Screen and Small Screen

Hidding Left and Right Icons in First and Last Slides

Updating and Displaying Slide Number

Putting Everything Together

Wrapping Up

Recent Posts

Unsupported browser

Create Presentation Slides with HTML and CSS

Screencasts:

Screencast 1: Create the Markup

Screencast 2: Building Sample Slides

Screencast 3: Load the Slides

Screencast 4: Styling and Continued JavaScript

Screencast 5: Event Listeners

Screencast 6: Completing the JavaScript

Screencast 7: Custom Slide Styling

The HTML Presentation Framework

Hello There

Vertical Slides

Basement Level 1

Basement Level 2

Pretty Code

Even Prettier Animations

Auto-Animate

Touch Optimized

Fragment Styles

Transition Styles

Slide Backgrounds