W3.CSS Demos

Welcome to The Coding College! In this post, we’ll showcase W3.CSS Demos that you can use to build stunning and responsive websites. Each demo is designed to give you hands-on experience with the W3.CSS framework, from layouts and navigation bars to modals, slideshows, and more.

Let’s jump in and explore how you can use W3.CSS to simplify web development!

Why Use W3.CSS Demos?

  • Real-World Examples: See how components work in action.
  • Beginner-Friendly: Minimal code and easy to understand.
  • Fast and Responsive: Automatically adjusts to all screen sizes.
  • Customizable: Adapt these demos to suit your needs.

1. Demo: Responsive Web Layout

Use W3.CSS to create a clean and responsive webpage layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Responsive Layout Demo</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
  <!-- Header -->
  <header class="w3-container w3-blue w3-center w3-padding">
    <h1>Welcome to W3.CSS Demo</h1>
    <p>Responsive and Lightweight CSS Framework</p>
  </header>

  <!-- Main Layout -->
  <div class="w3-row">
    <div class="w3-col m3 w3-light-grey w3-padding">
      <h3>Sidebar</h3>
      <p>Links and content go here.</p>
    </div>
    <div class="w3-col m9 w3-white w3-padding">
      <h3>Main Content</h3>
      <p>This is an example of a responsive layout.</p>
    </div>
  </div>

  <!-- Footer -->
  <footer class="w3-container w3-blue w3-center w3-padding">
    <p>© 2024 The Coding College</p>
  </footer>
</body>
</html>

2. Demo: Navigation Bar

Create a sleek navigation bar with W3.CSS classes.

<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button w3-hover-blue">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-green">About</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-red">Services</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-yellow">Contact</a>
</div>

3. Demo: Cards with Hover Effects

Enhance your content display with cards and hover effects.

<div class="w3-card w3-hover-shadow w3-padding w3-round w3-margin">
  <h3>Card Title</h3>
  <p>This card has a hover shadow effect.</p>
</div>

4. Demo: Image Slideshow

Build an interactive image slideshow.

<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://via.placeholder.com/800x400" style="width:100%">
  <img class="mySlides" src="https://via.placeholder.com/800x400/888" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) { slideIndex = 1 }
  if (n < 1) { slideIndex = x.length }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>

5. Demo: Interactive Modals

Easily open and close modals with W3.CSS.

<button onclick="document.getElementById('demoModal').style.display='block'" class="w3-button w3-black">Open Modal</button>

<div id="demoModal" class="w3-modal">
  <div class="w3-modal-content w3-round w3-padding">
    <header class="w3-container w3-blue">
      <span onclick="document.getElementById('demoModal').style.display='none'" class="w3-button w3-display-topright">×</span>
      <h3>Modal Header</h3>
    </header>
    <div class="w3-container">
      <p>This is a demo modal example.</p>
    </div>
  </div>
</div>

6. Demo: Alerts and Notifications

Show alerts and notifications to grab user attention.

<div class="w3-panel w3-red w3-round">
  <p><strong>Alert:</strong> This is an error notification.</p>
</div>

7. Demo: Forms with Validation

Style and validate forms with W3.CSS.

<form class="w3-container w3-card w3-padding">
  <label>Name:</label>
  <input class="w3-input w3-border" type="text" placeholder="Enter your name" required>
  
  <label>Email:</label>
  <input class="w3-input w3-border" type="email" placeholder="Enter your email" required>
  
  <button class="w3-button w3-green w3-margin-top">Submit</button>
</form>

8. Demo: Accordions

Organize your content with accordions.

<button class="w3-button w3-block w3-black w3-left-align" onclick="toggleAccordion('demoAccordion')">Section 1</button>
<div id="demoAccordion" class="w3-hide w3-container w3-light-grey">
  <p>This is an accordion section.</p>
</div>

<script>
function toggleAccordion(id) {
  var x = document.getElementById(id);
  if (x.classList.contains("w3-show")) {
    x.classList.remove("w3-show");
  } else {
    x.classList.add("w3-show");
  }
}
</script>

9. Demo: Progress Bars

Show progress with smooth progress bars.

<div class="w3-light-grey w3-round">
  <div class="w3-container w3-blue w3-round" style="width:70%">70%</div>
</div>

10. Demo: Sticky Sidebar

Keep your sidebar fixed as you scroll.

<div class="w3-sidebar w3-light-grey w3-card" style="width:20%">
  <h3>Sticky Sidebar</h3>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
</div>

<div class="w3-main" style="margin-left:20%">
  <div class="w3-container">
    <h1>Main Content</h1>
    <p>Scroll the page to see the sidebar remain fixed.</p>
  </div>
</div>

Conclusion

These W3.CSS Demos are designed to provide you with practical and ready-to-use examples for building beautiful and responsive websites. Whether you’re a beginner or an experienced developer, W3.CSS simplifies web development.

Leave a Comment