• Awards Season
  • Big Stories
  • Pop Culture
  • Video Games
  • Celebrities

How to Get Started with Website Design HTML CSS Code

Designing a website from scratch can be a daunting task, especially if you’re unfamiliar with the coding languages used to create it. HTML and CSS are two of the most important coding languages for website design, and understanding how to use them is essential for any aspiring web designer. This article will provide an overview of HTML and CSS and explain how to get started with these coding languages.

What is HTML?

HTML stands for HyperText Markup Language, and it is the language used to structure a web page. It is made up of elements that define the content and layout of a page, such as headings, paragraphs, images, lists, links, and more. HTML is the foundation of any website, and it is essential for any web designer to understand how to use it correctly.

What is CSS?

CSS stands for Cascading Style Sheets, and it is the language used to style a web page. It allows you to control the look and feel of your website by defining colors, fonts, layouts, sizes, and more. CSS works in conjunction with HTML to create a visually appealing website that looks great on any device.

Getting Started with HTML & CSS

The best way to get started with HTML & CSS is by taking an online course or tutorial. There are many free resources available online that can help you learn the basics of coding quickly and easily. Once you have a basic understanding of HTML & CSS, you can start building your own websites from scratch or using existing templates.

Learning how to use HTML & CSS can seem intimidating at first but with some practice and dedication it can become second nature. With a little bit of effort you can become an expert web designer in no time.

This text was generated using a large language model, and select text has been reviewed and moderated for purposes such as readability.


presentation html css

presentation html css

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

presentation html css

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.

Down arrow

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.

Up arrow

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.)


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



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

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

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 page background.

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

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 presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

presentation html css

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

  • Notifications

Shower HTML presentation engine


Name already in use.

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more about the CLI .

  • Open with GitHub Desktop
  • Download ZIP

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit


  • 772 commits

Shower Presentation Template

Shower logo

Shower ['ʃəuə] noun. A person or thing that shows.
  • Built on HTML, CSS and vanilla JavaScript.
  • Works in all modern browsers.
  • Themes are separated from engine.
  • Fully keyboard accessible.
  • Printable to PDF.

See it in action . Includes Ribbon and Material themes, and core with plugins.

Follow @shower_me for support and updates, file an issue if you have any.

Quick Start

  • Download and unzip shower.zip template archive.
  • Open index.html in any text editor and start creating your presentation.

Quick Start via CLI

You’ll need Node.js installed on your computer.

  • Install Shower CLI utility: npm install -g @shower/cli .
  • Create your presentation: shower create .

Read more on shower/cli page.

Quick Start with Hosting

  • Open import page .
  • Use https://github.com/shower/shower for the repository URL
  • Use your presentation name.
  • Clone the resulted repository to your computer.
  • Install dependencies npm install and start a local server npm start .
  • Start editing your slides with live-reload.

Once you’re done you can build a clean copy of your slides:

You’ll find your presentation in bundled folder. You can also run npm run archive to get the same files in presentation.zip .

Publish your presentation online by running:

You’ll have your slides published to https://USER.github.io/REPO/ .

Deploy to Netlify

By clicking the button below you can fork this repo and deploy it to Netlify.

Deploy to Netlify

By doing this you would get a GitHub repo linked with Netlify in a way any change to the repo would trigger a Shower rebuild and deploy to Netlify servers, which allows for an easy way to create and share Shower presentation without the need to install anything locally.

Browser Support

Latest stable versions of Chrome, Edge, Firefox, and Safari are supported.


You’re always welcome to contribute. Fork project, make changes and send it as pull request. But it’s better to file an issue with your idea first. Read contributing rules for more details.

Main contributors in historical order: pepelsbey , jahson , miripiruni , kizu , artpolikarpov , tonyganch , zloylos , zloylos , shvaikalesh .

Licensed under MIT License .

Releases 10

Used by 167.


Contributors 30

  • HTML 100.0%

How to Create Beautiful HTML & CSS Presentations with WebSlides

presentation html css

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

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

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

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

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

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

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

Getting Started with WebSlides

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

Now, you’re ready to go.

Create a Web Presentation with WebSlides

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

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

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

WebSlides Presentation Demo: Slide 1

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

WebSlides Presentation Demo: Slide 2

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

WebSlides Presentation Demo: Slide 3

In the fourth slide, use the grid component again to split the content into two columns:

WebSlides Presentation Demo: Slide 4

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

WebSlides Presentation Demo: Slide 5

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

WebSlides Presentation Demo: Slide 6

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

WebSlides Presentation Demo: Slide 7

Do a similar thing here:

WebSlides Presentation Demo: Slide 8

This slide also uses a similar structure:

WebSlides Presentation Demo: Slide 9

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

WebSlides Presentation Demo: Slide 10

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

WebSlides Presentation Demo: Slide 11

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

WebSlides Presentation Demo: Slide 12

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

WebSlides Presentation Demo: Slide 13

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

WebSlides Presentation Demo: Slide 14

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.


Edit the code to make changes and see it instantly in the preview

The live preview of presentation-html-css

Forked from static template

Template type: static

Dev Dependencies

  • serve: ^11.2.0


  1. HTML Vs CSS PowerPoint Presentation Slides

    presentation html css

  2. PPT

    presentation html css

  3. PPT

    presentation html css

  4. PPT

    presentation html css

  5. #31 CSS Transition Tutorial

    presentation html css

  6. PPT

    presentation html css


  1. 10 Créer Un Site Web avec HTML 5 & CSS 3 Notion De Responsive Design Les media queries (Coding City)

  2. UI Design en HTML, CSS ?! TOUT EXPLIQUE

  3. [aCANMentor] HTML5 et CSS3

  4. Développement web 4 : Template et thème, Bootstrap & web responsive, JavaScript et hébergement web

  5. Tutoriel HTML CSS partie 1 (introduction

  6. Simple Website Presentation Using HTML and CSS


  1. The Basics of Website Design: HTML & CSS Explained

    Creating a website can be a daunting task for those who are unfamiliar with the basics of website design. But with a little knowledge and some practice, anyone can learn how to create a website. Two of the most important elements of website...

  2. How to Get Started with Website Design HTML CSS Code

    Designing a website from scratch can be a daunting task, especially if you’re unfamiliar with the coding languages used to create it. HTML and CSS are two of the most important coding languages for website design, and understanding how to u...

  3. HTML & CSS: The Building Blocks of a Great Website Design

    When it comes to website design, HTML and CSS are the two most important building blocks. HTML (HyperText Markup Language) is the language used to create the structure of a website, while CSS (Cascading Style Sheets) is used to add styling ...

  4. HTML и CSS. Введение

    HTML и CSS. 2. Урок 1. Введение. 3. Содержание урока. Что такое сайт. Что представляет собой веб-страница. Виды сайтов. Процесс разработки сайта

  5. Introduction to HTML+CSS+Javascript

    ... Edit with the Slides app. Make tweaks and share with others to edit at the same time. NO THANKSUSE THE APP. Go to Drive. Introduction to HTML+CSS+Javascript.

  6. How to Create Presentation Slides With HTML and CSS

    We can easily create beautiful and interactive presentations with HTML, CSS and JavaScript, the three basic web technologies.

  7. HTML/CSS Presentation

    <a> ... Href is an attribute which shows where the link's destination is. You can put a url to link to any page

  8. The HTML presentation framework

    Documentation and demos for the open source reveal.js HTML presentation framework.

  9. Reveal JS

    This series of short videos explores Reveal.js, an HTML Presentation Framework for making beautiful web presentations. In this fourth video

  10. Presentation Slides with HTML, CSS and JS

    Add Class(es) to <html>. Adding Classes. In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you

  11. Shower HTML presentation engine

    Shower Presentation Template. Test status. Shower logo. Shower ['ʃəuə] noun. A person or thing that shows. Built on HTML, CSS and vanilla JavaScript. Works in

  12. Html / CSS Presentation

    70. Multiple classes CSS .ingredients.time {declaration} HTML <div class=”ingredients time”> <h1></h1> </div> Elements can have multiple classes

  13. How to Create Beautiful HTML & CSS Presentations with WebSlides

    Slide 1 ... Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you've used two classes from WebSlides'

  14. presentation-html-css

    Edit the code to make changes and see it instantly in the preview. Explore this online presentation-html-css sandbox and experiment with it yourself using