This repository contains several examples demonstrating how to accomplish common UI tasks using just HTML and CSS, with minimal to no JavaScript. Each example is self-contained in its own folder, and includes an index.html and styles.css file for easy experimentation.

The project is organized into the following folders, each containing a specific example:

• accordions: Example of creating an accordion interface with only HTML and CSS
• auto-suggest: An auto-suggest input field implemented using the HTML <datalist> element
• custom-switches: A custom toggle switch (checkbox) built with HTML and CSS, no JavaScript required
• scroll-animations: Scroll-triggered animations with CSS, using scroll-behavior and other modern CSS features.
• smooth-scrolling: Implementing smooth scrolling between sections of the page using just CSS.

Each folder contains:

• index.html: The HTML file for the example.
• styles.css: The CSS file used to style the example.

To view and interact with the examples, follow these steps:

1. Install http-server: If you don't have http-server installed globally, you can install it using npm:

   npm install -g http-server

2. Run the server: Navigate to the root of the project in your terminal and run the following command to start the server:

   http-server

3. Access the examples: Open your browser and navigate to http://localhost:8080/. You will be able to use the home page to access each of the examples via the following links:

   • Accordions
   • Auto-Suggest
   • Custom Switches
   • Scroll Animations
   • Smooth Scrolling

Each example is designed to be fully functional in the browser, allowing you to explore and experiment with how HTML and CSS can be used to solve common UI tasks.

To modify or experiment with the examples:

1. Navigate into the folder for the specific example (e.g., cd accordions).
2. Open index.html and styles.css in your code editor.
3. Make changes to the HTML or CSS and refresh your browser to see the updates live.

Feel free to fork the repository and make your own modifications! Contributions are welcome in the form of new examples or improvements to the existing ones.