DEV Community: Harshita Sharma D

The Hidden Guests in Your Windows PC — A Disk Cleanup Diary - part1

Harshita Sharma D — Tue, 07 Apr 2026 11:04:40 +0000

The Hidden Guests in Your Windows PC — A Disk Cleanup Diary

It started the way most digital rabbit holes do — innocently. I had been meaning to clean up my PC for months. Drives getting a little sluggish, the "Low Disk Space" notification becoming a recurring visitor, and that nagging guilt every time I opened File Explorer and saw the C: drive bar inching toward red.

So one afternoon, I rolled up my sleeves, opened C:\Program Files, and decided to go folder by folder, hunting for digital clutter I could finally evict.
That's when I met RUXIM.

Wait — What Is RUXIM, and Why Is It On My PC?

There it sat: a folder called RUXIM, right in C:\Program Files, with no explanation, no mention in "Add or Remove Programs," and an icon that looks vaguely like the Windows Update logo. Inside, two mysterious executables RUXIMICS.exe and RUXIMIH.exe.

My first instinct? "This is probably a virus."
It wasn't.

RUXIMICS.exe is a legitimate executable belonging to the Microsoft Windows operating system. Its full name is "Reusable UX Interaction Manager," and it is also referred to as the RUXIM Interaction Campaign Scheduler. The file is digitally signed by Microsoft and is typically located in C:\Program Files\ruxim\. File.net

In plain terms: RUXIM is a component used by Windows Update. It helps keep Windows updated and performing well by scheduling and delivering necessary updates — think of it like the logistics department of a company that makes sure all updates are scheduled and delivered properly. WindowsDigitals

The two executables have distinct roles. RUXIMICS.exe usually stays in the background with minimal impact on system performance, while RUXIMIH.exe — the RUXIM Interaction Handler — takes care of the "interaction campaigns," ensuring your OS receives updates properly. WindowsDigitals

So should you delete it? It's not recommended. Once deleted, you may encounter issues like Windows updates failing or poor system performance. Deleting it may also expose your system to potential security risks. MiniTool Partition Wizard

One real red flag to watch for: if the RUXIM folder appears outside the Program Files directory, you should perform a virus scan using Windows Security or your antivirus software, since legitimate system files can be impersonated by malware. File.net

Verdict: Leave it alone. It's Windows doing its job quietly in the background.

And Then There Was "Nagware"

A few folders down, another mystery: a reference to something called Nagware.

If you've ever used WinRAR and seen that pop-up after the 40-day trial begging you to buy the full version —congratulations, you've been nagware'd.

Nagware (also known as begware, annoyware, or a nagscreen) refers to a type of software that is initially free to use but frequently interrupts you with prompts or reminders. These interruptions typically ask you to purchase a full version of the software or subscribe to a service. Lenovo

Some nagware keeps the message up for a certain period of time, forcing the user to wait before continuing to use the program. The reminder window that appears on screen is referred to as the nag screen. Computerhelp4all

The term is almost poetic in its accuracy — it nags you. Some familiar examples: WinRAR continues to function even after its trial period, but with a nagging screen that appears every time it opens, reminding users to purchase the full version. AVG AntiVirus Free is another example, frequently displaying pop-up notifications encouraging users to upgrade to premium. DevX

Even Microsoft itself has been guilty. Microsoft has employed its tactic of full-screen nag screens, displaying prompts urging users to "Get even more out of Windows" and highlighting services like OneDrive, Windows Hello, and Office 365 — resembling the first-boot experience, and appearing again after every reboot or update. TechRadar

Nagware isn't a virus and it isn't technically harmful — but it can contribute to software bloat if the reminders are part of an increasing number of unnecessary features, or if the reminders themselves are resource-intensive, requiring more storage space and processing power that can slow down your system. Lenovo

Verdict: Not dangerous, but worth knowing what's nagging you and why.

The Other Dusty Folders You've Probably Ignored

Once I started looking, I couldn't stop. Here's a quick field guide to the folders you've walked past a hundred times:

$WINDOWS.~BT and $Windows.~WS — These mysterious dollar-sign folders that appear out of nowhere on your C: drive? They are Windows installation folders, usually associated with version upgrades. AskWoody They can be safely deleted via Disk Cleanup if the upgrade is complete.

PerfLogs — A folder sitting at the root of C: that most people assume is junk. It's actually where Windows stores performance logs, used by Event Viewer and Reliability Monitor. If you remove it, Windows will simply recreate it whenever performance logging is enabled again. Eleven Forum

Intel folder — If you have an Intel processor or graphics, you've probably noticed folders scattered across C:\, C:\Program Files\Intel, and C:\Program Files (x86)\Intel. As one forum user memorably put it, Intel "acts like the annoying dog on your street, marking territory" by dropping installer files in random folders. Eleven Forum These are generally log or driver residue and can usually be cleaned up.

ESD folder — This is the installation staging files left behind by the Windows Media Creation Tool, and can be safely deleted. Microsoft Learn

Windows.old — If you recently upgraded Windows, this folder is your safety net. It contains your previous Windows installation so you can roll back within 10 days. After that window passes, you can delete it through Disk Cleanup to reclaim significant space (sometimes 10–20 GB).

My C: and D: Drive Cleanup — The Journey

Here's what my cleanup process actually looked like, step by step.

Step 1: The Audit. Before deleting anything, I ran Windows' built-in Disk Cleanup tool (search "Disk Cleanup" in the Start menu). More importantly, I clicked "Clean up system files" — this is the version that runs with admin privileges and catches a lot more, including Windows Update Cleanup files and old driver packages.

Step 2: Sorting out Program Files. After identifying RUXIM, nagware remnants, and other mystery folders, I made a simple rule — if it's Microsoft-signed and in the right directory, don't touch it. If it's a third-party trial program I no longer use, uninstall it properly through Settings > Apps, not by deleting folders.

Step 3: Tackling the Downloads folder. This was the real culprit. Years of downloaded installers, PDFs, zip files — some going back to 2019. A ruthless sweep here recovered nearly 15 GB.

Step 4: Moving files to D:. My D: drive was sitting at 40% usage while C: was gasping. Documents, photos, videos, project archives — all moved over. The key insight: your C: drive is for the operating system and programs, not your personal files.

Step 5: Clearing temp files. Hit Win + R, type %temp%, and delete everything in that folder. Then run it again with just temp. These are temporary files that programs forget to clean up themselves. Expect to recover anywhere from a few hundred MB to several GB.

Step 6: The final check. I ran WinDirStat (a free tool that visualizes your disk usage as a colourful treemap) to see at a glance where the remaining space was going. That's how I found a rogue game install folder from 2021 that had been sitting there eating 22 GB.

What I Learned

Your PC is like a house you've lived in for years. Most of what's there has a reason — but some of it is just stuff that piled up while you weren't paying attention. RUXIM isn't a threat; it's a diligent worker you never introduced yourself to. Nagware is that pushy salesperson who won't stop leaving flyers in your letterbox. And the Downloads folder? That's just the junk drawer we all have.

The cleanup didn't just free up space — it made me feel more in control of a machine I use every single day.

Next time you're digging through your files and hit something unfamiliar, resist the urge to immediately delete it. Google it first. Most of the time, you'll find it's exactly like RUXIM — a quiet, harmless resident doing its job in the background, just waiting to be understood.

Have a mysterious folder story of your own? Drop it in the comments — I'd love to know what surprised you when you went digging through your drives.

How to make queues in next.js projects?

Harshita Sharma D — Sat, 17 May 2025 10:28:30 +0000

To implement queues in a Next.js project, you can use libraries like BullMQ or Redis Simple Message Queue (RSMQ).

These libraries provide a way to manage background tasks and jobs, which can be helpful for tasks that shouldn't block the main application flow. You can also use dedicated services like Queuebase for more complex queue management needs.

Here's a general approach using BullMQ and Redis:

Set up Redis: Ensure you have Redis installed and running. You can use a local Redis instance or a cloud-based service.
Install BullMQ and Redis: Run npm install bullmq ioredis to install the necessary packages.
Create a Queue: Create a queue using BullMQ, specifying connection details for Redis:

    import { Queue } from 'bullmq';
    import { Redis } from 'ioredis';

    const redisClient = new Redis({ host: 'localhost', port: 6379 }); // Or your Redis connection details

    const myQueue = new Queue('my-queue', {
      connection: { host: 'localhost', port: 6379 }, // Redis connection
      defaultJobOptions: {
        removeOnComplete: true, // Automatically remove completed jobs
        removeOnFail: true, // Automatically remove failed jobs
      },
    });

Enqueue Jobs: Add jobs to the queue using myQueue.add(jobName, jobData, options):

    export async function POST(request) {
      try {
        await myQueue.add('email-job', { to: 'example@email.com', subject: 'Hello', body: 'World' });
        return new Response('Job added to queue', { status: 200 });
      } catch (error) {
        console.error('Error adding job:', error);
        return new Response('Error adding job', { status: 500 });
      }
    }

Process Jobs (Worker Process): Create a separate worker process to handle jobs from the queue. This can be a dedicated Node.js script running in the background:

    import { Worker } from 'bullmq';
    import { Redis } from 'ioredis';

    const redisClient = new Redis({ host: 'localhost', port: 6379 });

    const myQueue = new Queue('my-queue', {
      connection: { host: 'localhost', port: 6379 },
    });

    const worker = new Worker('my-queue', async (job) => {
      // Process the job
      console.log(`Processing job ${job.id} with data:`, job.data);
      // Perform your task here (e.g., send email)
      return; // Must return a promise
    });

Configure Worker: Add a script in your package.json to run the worker:

"scripts": {
      "worker": "node path/to/worker.js"
    }

Start the Worker: Run the worker script: npm run worker.

Key Considerations:

Error Handling:
Implement robust error handling for both enqueuing and processing jobs.

Scaling:
Consider scaling your worker processes for increased performance and reliability.

Job Data:
Design your job data efficiently to avoid unnecessary data transfer and processing.

Choose the Right Library:
Select a queueing library that best fits your project's needs and complexity.

References:-

What is Apache Server? Why do we use it?

Harshita Sharma D — Fri, 04 Apr 2025 14:15:52 +0000

Image Source

Apache HTTP Server, or simply Apache, is a widely used, free, and open-source web server used to deliver web content (like websites and applications) over the internet, processing requests and serving web assets via HTTP or HTTPS. It is known for its ease of configuration, scalability, and stability.

OK! So what it is?

Image source

Apache is a software application that acts as a server, meaning it listens for requests from clients (like web browsers) and responds by sending back the requested web pages or other content.

How it works:

Image source

When you type a website address into your browser, your browser sends an HTTP request to the server where the website is hosted.

Image Source

If that server is running Apache, Apache receives the request, locates the requested web page or content, and sends it back to your browser.

Here are the key features of Apache in a nutshell:

Open Source and Free:
Apache is developed and maintained by the Apache Software Foundation, and it's freely available and open-source, meaning anyone can use, modify, and distribute it without cost.

Widely Adopted:
It's one of the most popular web servers, used by many web hosting companies and organizations worldwide.

Scalability and Stability:
Apache is designed to handle large volumes of traffic and maintain stability, making it suitable for various website types and applications.

Ease of Configuration:
Apache is known for its relatively straightforward configuration, allowing users to set up and manage web servers with ease.

Platform for Static and Dynamic Content:
Apache can serve both static content (like images and HTML) and dynamic content generated by various programming languages and frameworks.

Cross-Platform Support:
It runs on various operating systems, including Windows, Linux, macOS, and Unix

Supports Multiple Protocols:
Apache supports various protocols, including HTTP, HTTPS, and more, enabling secure and flexible web communication.

Security:
Apache supports secure communication using HTTPS, ensuring that data transmitted between the client and server is encrypted.

Extensive Community and Support:
Being an open-source project, Apache benefits from a large community that provides support, documentation, and extensions.

Module-Based Architecture:
Apache's modular architecture allows for customization and extension through various modules, enabling users to tailor the server to specific needs. It can be extended with modules to add features like password authentication, caching, and security enhancements.

Use cases:

Image Source

Apache is used for a wide variety of websites, from small personal blogs to large e-commerce platforms.

Alternatives:

While Apache is very popular, other web servers like Nginx also exist, and they may be preferred in certain situations, such as handling high traffic volumes.

References

TERRA FlipFlop - Sustainable Footwear Solution - Wix Studio Challenge - My Submission

Harshita Sharma D — Mon, 15 Jul 2024 06:59:00 +0000

This is a submission for the Wix Studio Challenge .

What I Built

In this submission, I'm excited to introduce TERRA fLIPfLPS, a sustainable flip flop brand built entirely on Wix Studio! We're passionate about creating comfortable and stylish footwear while minimizing our environmental impact.

Here's what sets TERRA FlipFlops apart:

Eco-Friendly Materials: Our flip flops are crafted from sustainable materials, e.g., recycled tires, natural rubber, cork, etc.
Durable Design: We prioritize long-lasting construction to reduce waste and encourage responsible consumption.
Commitment to Sustainability: Eco-friendly practices in your production process, e.g., using recycled water, minimizing waste, or responsible sourcing.

Demo

Development Journey

The user-friendly nature of Wix Studio allowed me to focus on the creative aspects of building the Terra Flip Flops website. While I didn't require extensive coding experience, here are some key features that were instrumental:

Customization Options: Wix Studio's extensive design library and customization options enabled me to create a website that reflects Terra Flip Flops' unique brand voice.
Content Management System: The intuitive content management system allowed for easy updates to product information, blog posts, and other website content.
Mobile-Responsive Design: Ensuring the website is optimized for mobile devices is crucial for today's audience. Wix Studio's built-in mobile responsiveness ensured the website looks great on any screen size. UTILIZED WIX Velo API

Introducing FoodMood-Bot: Your WhatsApp Chef Tailoring Recipes to Your Mood - Twilio Challenge Submission 2024

Harshita Sharma D — Mon, 24 Jun 2024 06:14:07 +0000

This is a submission for Twilio Challenge v24.06.12

What I Built

.
FoodMood-Bot is designed to enhance the cooking experience by providing mood-based recipe recommendations and personalized food-related assistance. It leverages the capabilities of Twilio and OpenAI to create an interactive and engaging user experience on WhatsApp.

Twilio and AI

I used Twilio's WhatsApp API to interact with users in real-time, collecting mood inputs and delivering tailored recipe suggestions and Openai's Chat completion and Create Image APIs. OpenAI powers the bot's ability to understand and respond to user queries intelligently, ensuring that the food recommendations are both appropriate and enjoyable.

Demo

Check out the live demo: FoodMood-Bot Demo

Check the GitHub Repository

Backend

Chat with the bot on this number:- +14155238886

demo-1
demo-2

🍽️ FoodMood-Bot

FoodMood-Bot is a WhatsApp bot powered by Flask, Twilio, and OpenAI, developed by HarshitaDS in June 2024. It suggests recipes based on the user's mood, providing brief, easy-to-follow instructions with ingredients and preparation time.

Features

🌟 Mood-Based Food Suggestions: Get recipe recommendations based on your current mood.
📋 Brief Recipes: Each recipe is concise (not more than 1400 characters) and includes ingredients and preparation time.
👫 Portion Size: Ingredients list is prepared for 2 people.
🍽️ Personalized Assistance: Responds to thank you messages with amazing food-related quotes and offers further assistance.
🖼️ Image Generation: Generate images related to your query by starting your message with /img.

How It Works

Mood Detection: The bot asks for your current mood and suggests a suitable recipe.
Recipe Delivery: Provides a brief recipe with a list of ingredients and the preparation time.
Portion Control: All recipes are tailored for 2 people.
Image Generation: Start your message with /img to receive a generated image related to your query.

Example Interaction

User: I'm feeling happy today!
FoodMood-Bot: That's wonderful! How about celebrating with a refreshing fruit salad? 🍓🍊 Here's a quick recipe:

Ingredients:

1 cup strawberries, sliced
1 orange, peeled and segmented
1 apple, diced
1 tablespoon honey
1 tablespoon lemon juice

Preparation Time: 10 minutes

In a large bowl, combine the strawberries, orange segments, and apple.
Drizzle with honey and lemon juice.
Toss gently to mix. Enjoy your refreshing fruit salad!

User: Thank you!
FoodMood-Bot: "One cannot think well, love well, sleep well, if one has not dined well." - Virginia Woolf. I'm here for any further assistance you may need!

Technologies Used

Flask: For creating the web application.
Twilio: For WhatsApp messaging API.
OpenAI: For intelligent responses and mood analysis.

Installation

Clone this repository:

git clone https://github.com/HarshitaDS/FoodMood-Bot.git
cd FoodMood-Bot

Create a virtual environment and activate it:

python -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`

Install dependencies:
```
pip install -r requirements.txt
```
Set up your environment variables:
- TWILIO_ACCOUNT_SID
- TWILIO_AUTH_TOKEN
- OPENAI_API_KEY
Run the Flask application:
```
flask run
```

Usage

Initiate a conversation with the bot on WhatsApp.
Provide your current mood when prompted.
Receive a personalized recipe suggestion.
Start your message with /img to generate an image related to your query.
Enjoy your meal!

Contributing

Contributions are welcome! Please fork this repository and submit a pull request.

License

This project is licensed under the MIT License.

Contact

Developed by HarshitaDS. For any inquiries, please reach out via GitHub.

Additional Prize Categories

Impactful Innovators: This will help in getting customized food options as per the mood, so nothing will get wasted. 😎
Entertaining Endeavors: Gives interesting food-related quotes and images when asked that will increase the appetite. 😋

Computer Science Challenge - Structure Padding

Harshita Sharma D — Mon, 24 Jun 2024 03:35:29 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Structure padding: Like neatly lining books on a shelf, compilers add empty bytes (padding) between struct members for faster processor access. This can make structs larger than expected!

Additional Context

Consider this code:-

#include <iostream>

struct Data {
  char c; // 1 byte
  int i;  // 4 bytes (assuming 32-bit system)
};

int main() {
  std::cout << sizeof(Data) << std::endl; // Might be > 5!
}

Explanation:

This code defines a Data struct with a char and an int.
Similar to the previous example, we use sizeof(Data) to print the struct size. Here, padding might occur to ensure the int aligns with its preferred boundary (often 4 bytes on 32-bit systems).
The expected size would be 1 (char) + 4 (int) = 5 bytes. However, the actual size might be greater due to padding.
If you ask me, then it will be 8 bytes, since we are assuming a 32-bit system that will read the memory in the chunks of 4 bytes. This does not allow other variables to take the left 3 bytes (8-5) space. Hence 8 bytes will get occupied by the object of struct Data for faster processor access.

Note:

The exact amount of padding can vary depending on the compiler and target architecture.

This image is generated using the prompt:- "Alan Turing, the computer scientist, explaining the concept of structure padding in C++ pride month color palette rainbow color"

Glam Up My Markup: Beaches - My Submission

Harshita Sharma D — Mon, 10 Jun 2024 05:29:26 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration 🌊🏄‍♀️🏄‍♂️

I was inspired by the idea of creating a serene beach scene using just HTML and CSS. I wanted to challenge myself to create a visually appealing design without manipulating the HTML structure, relying solely on CSS for styling. I drew inspiration from the brutalist design movement, known for its raw, unrefined aesthetic and bold use of typography and color.

Demo 🩴🌴

Here is the Demo of the site.

Journey 🌊🏄‍♀️🏄‍♂️⛱️🏖️🩴🌴

During this project, I learned how to use CSS to create complex and realistic visual effects, such as the sky, sea, sand, and palm tree. I also honed my skills in CSS positioning and animation to bring the scene to life. One of the challenges I faced was achieving the right balance of elements to create a cohesive and realistic beach environment.

I'm particularly proud of how I was able to use CSS to create the illusion of depth and movement in the scene, such as the gentle sway of the palm tree leaves and the foamy waves lapping at the shore.

Next, I hope to further refine my CSS skills and explore more advanced techniques to create even more intricate and lifelike scenes using only HTML and CSS.

In this project, I learned how to create complex layouts and animations using just HTML and CSS. I experimented with different techniques to achieve the brutalist look, such as asymmetrical layouts, vibrant colors, and unconventional typography.

I'm particularly proud of the final result, as it showcases my ability to think creatively and push the boundaries of traditional web design. Moving forward, I hope to further refine my skills in CSS and explore more advanced animation techniques with GSAP.

Do tell me how you liked the Beach Animation. Open for feedbacks and constructive criticism.
.

Moving Beyond Marquee: Cool Alternatives to the marquee tag

Harshita Sharma D — Sun, 19 May 2024 18:28:56 +0000

Remember last time, here in this blog "https://dev.to/harshitads44217/mothers-day-special-blog-2ack", we discussed how the <marquee> tag used to be a top choice for developers in the web development industry? We also discovered that it’s been deprecated for quite a while now.

But guess what? Marquee-like animations are making a comeback in modern design trends! These are creating seamless scrolling effects.
.

- Collection of text-marquee-effect by awwwards.com

I'm back with some cool, alternative ways to create those eye-catching marquee effects without using the deprecated tag. Let's dive in and explore these exciting techniques to implement seamless scrolling effects!

1. Using GSAP 😎

If you like using JavaScript for the frontend development tasks then GSAP can be a great tool for you. If you know what it is, then well and good, otherwise let me introduce you to the ultimate modern tool for animation.

GSAP Official Website
Infinite Marquee GSAP Forum

GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. It offers robust tools and an easy-to-use API to animate elements with precision and efficiency.

Consider this HTML code:-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Example</title>
    <style>
        #gsap-marquee {
            margin: 48vh 0;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            background-color: teal;
            border-radius: 6px;
            line-height: 2.5em;
            color: white;
            font-size: 48px;
            font-weight: 600;
            font-smooth: always;
        }

        #gsap-marquee span {
            display: inline-block;
            padding-left: 100%;
        }
    </style>
</head>
<body>
    <div id="gsap-marquee">
        <span>This is a scrolling text created with GSAP.</span>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
    <script>
        gsap.to("#gsap-marquee span", {
            xPercent: -100,
            ease: "none",
            duration: 10,
            repeat: -1
        });
    </script>
</body>
</html>

In this example, GSAP animates the inside the #gsap-marquee container. The text scrolls from right to left, creating a marquee effect. The gsap.to method moves the text by 100% of its width (xPercent: -100) over 10 seconds, and this animation repeats indefinitely (repeat: -1). The ease: "none" ensures a constant speed throughout the animation.

.
Output :-

.
This setup ensures the text scrolls smoothly and continuously across the screen, mimicking the classic marquee effect with modern animation capabilities.

2. Using CSS Animation 🤩

Don't underestimate the power of Cascading Style Sheets. CSS alone can make powerful and interactive animations. People who have some hands on over CSS animation know it very well. If you are somewhat skeptical then consider this HTML code:-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Example</title>
    <style>
        .scrolling-text {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            background-color: deeppink;
            border-radius: 10px;
            color: white;
            margin:48vh 0;
        }

        .scrolling-text span {
            display: inline-block;
                      line-height: 2.5em;
     font-size:48px;
          font-weight:400;
          font-smooth: always;
            padding-left: 100%;
            animation: scroll-left 20s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="scrolling-text">
        <span>This is a scrolling text created with CSS animations.</span>
    </div>
</body>
</html>

This code creates a scrolling text animation using CSS animations.

.
Output :-
.

This code creates a scrolling text animation using CSS animations. Here's how it works. The div with class name scrolling-text contains a span where the intended text is. The desired styling is applied to the div. A deeppink background, white text, rounded corners, and hidden overflow to ensure the text scrolls within the container. The text is styled with a large font size, specific line height, and smooth font rendering. Now here comes a few points to remember:-
.
CSS Animation:

The span element is given an inline-block display, ensuring it takes up space and aligns correctly.
The padding-left: 100% ensures that the text starts off-screen to the right.
The animation: scroll-left 20s linear infinite applies a keyframes animation called scroll-left to the span element. This animation lasts for 20 seconds, runs in a linear fashion, and loops infinitely.

Keyframes Animation:

The @keyframes scroll-left defines the animation named scroll-left.
0% { transform: translateX(100%); } sets the initial position of the text to be completely off-screen to the right.
100% { transform: translateX(-100%); } moves the text to be completely off-screen to the left by the end of the animation.

How's it happening

The animation starts with the text positioned off-screen to the right (transform: translateX(100%)).
Over 20 seconds, the text moves horizontally to the left (transform: translateX(-100%)), making it appear as if the text is scrolling across the screen.
Once the text reaches the left side and moves off-screen, the animation restarts, creating an infinite scrolling effect.

3. Using JavaScript 🙂

If you are a fan of using JavaScript in your project then you can consider this implementation might sound interesting to you. Here in this implementation we will be using animation like the last example but by using JavaScript.

Consider this HTML code:-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Scroller Example</title>
    <style>
        #scroll-container {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            background-color: royalblue;
            border-radius: 10px;
            color: white;
            margin:48vh 0;

        }

        #scroll-text {
            display: inline-block;
            line-height: 2.5em;
            padding-left: 100%;
            font-size:48px;
            font-weight:400;
            font-smooth: always;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">This is a scrolling text created with JavaScript.</div>
    </div>

    <script>
        function scrollText() {
            const text = document.getElementById('scroll-text');
            let position = text.offsetLeft;
            function animate() {
                position -= 1;
                if (position < -text.offsetWidth) {
                    position = text.parentElement.offsetWidth;
                }
                text.style.transform = `translateX(${position}px)`;
                requestAnimationFrame(animate);
            }
            animate();
        }

        document.addEventListener('DOMContentLoaded', scrollText);
    </script>
</body>
</html>

.
Here JavaScript is used to create a scrolling text effect similar to the <marquee> tag.

Output :-

The #scroll-container holds the text and ensures it stays within a defined area. The #scroll-text element is positioned within this container and moved continuously from right to left using the animate function. This function updates the position of the text and resets it once it has fully scrolled out of view, creating an infinite scrolling effect. The styling applied ensures the text and container have a visually appealing design with a blue background, white text, and rounded corners as we did in the last example.

4. Using jQuery 🤔

.
It is also a JS implementation but by using a library called jQuery. If you have been working with JS from a while long then must have heard about it somewhere, right? or may be did not. Let me tell you something about it.
.
A small intro to jQuery:-
.
This also a JavaScript implementation but using a JS library this time
jQuery is a popular JavaScript library that simplifies working with web pages. It makes common tasks like grabbing elements, adding animations, and handling events much easier with shorter code. This lets developers focus on functionality instead of the nitty-gritty of JavaScript. It's free, open-source, and used on millions of websites! Launched in 2006, jQuery offered a much simpler way to interact with web pages compared to raw JavaScript. This led to its rapid adoption by developers. A steady rise in jQuery's usage throughout the late 2000s specifically 2006 onwards. By the late 2000s, jQuery had a well-established community, numerous plugins, and a mature codebase. This solidified its position as a dominant web development tool. That was a period of significant influence of jQuery.

This implementation gives an output similar to the previous one but using the jQuery library. Now consider this code :-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Scroller Example</title>
    <style>
        #scroll-container {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            background-color: blue;
            border-radius: 10px;
            color: white;
            margin: 48vh 0;
            line-height: 2.5em;
            font-size: 48px;
            font-weight: 400;
            font-smooth: always;
        }

        #scroll-text {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">This is a scrolling text created with jQuery.</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var position = $('#scroll-text').offset().left;
            var containerWidth = $('#scroll-container').width();

            function animate() {
                position -= 1;
                if (position < -$('#scroll-text').width()) {
                    position = containerWidth;
                }
                $('#scroll-text').css('transform', 'translateX(' + position + 'px)');
                requestAnimationFrame(animate);
            }

            animate();
        });
    </script>
</body>
</html>

.
See what's happening:-
.
Using basic jQuery functions and CSS. Here's a brief overview of the key steps:

Initialization: When the document is ready ($(document).ready()), the script initializes. This ensures the DOM is fully loaded before running the script.
Element Selection: It selects the scrolling text element (#scroll-text) and calculates its initial position and the width of its container.
Animation Logic: The animate() function updates the position of the text to create a scrolling effect. When the text scrolls out of view, it resets its position to create a continuous loop.
CSS Transformation: The code applies a CSS transform: translateX() to the text element to move it horizontally. 5.** Frame Rate:** The animation loop continuously runs in sync with the browser's rendering cycle, ensuring smooth animation.

.
Output :-
.

.
Overall, the script continuously moves the text element horizontally within its container, creating a scrolling effect similar to the traditional marquee tag.

5. Using jQuery.Marquee Plugin 😏

Hope you are aware of the concept of plugin. So in jQuery, plugins are essentially pre-written Javascript code that extend jQuery's functionalities. They provide additional methods that you can use to achieve specific tasks on your web page, often simplifying complex interactions.

This jQuery plugin under animation category by AamirAfridi.com let's you scroll the text like the old traditional marquee. You can find this plugin here. So let's plug in to jQuery.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Marquee Plugin Example</title>
    <style>
        #scroll-container {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            background-color: SlateBlue ;
            border-radius: 10px;
            color: white;
            margin: 48vh 0;
            padding: 10px; /* Add some padding for better visual presentation */
        }

        #scroll-text {
            font-size: 48px;
            font-weight: 400;
            font-smooth: always;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">This is a scrolling text created with jQuery Marquee Plugin.</div>
    </div>

    <!-- Include jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Include jQuery Marquee Plugin -->
    <script src="https://cdn.jsdelivr.net/npm/jquery.marquee/jquery.marquee.min.js"></script>

    <script>
        $(document).ready(function(){
            $('#scroll-text').marquee({
                // Configuration options
                duration: 10000,
                gap: 50,
                delayBeforeStart: 0,
                direction: 'left',
                duplicated: true
            });
        });
    </script>
</body>
</html>

After adding the latest version of jQuery and the jQuery Marquee plugin from a CDN the document is ready to add the marquee() function and is called on the #scroll-text element. The configuration options are set for the marquee, such as duration, gap, delayBeforeStart, direction, and duplicated.

.
Output :-
.

By using this plugin, you can easily create a scrolling marquee effect with customizable options, making it a simple yet effective solution for adding animations to your web projects.

There are some similar jQuery plugins out there, that you can try your hands on. One such is jquery.simplemarquee

A Use Case : A CSS Scroll Snap 👌

.
Now, let's play around a use case where we need to show some elements moving from the right to the left. When we want to showcase company names in the partner section or display moving testimonials, we can use CSS Scroll Snap with Automatic Scrolling. Here's a simple implementation using CSS for this use case.

Now consider this code :-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Scroll Snap with Automatic Scrolling</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .scroll-snap-container {
            display: flex;
            overflow: hidden;
            width: 80%;
            height: 10vh;
            border-radius: 10px;
            background-color: #f5a4d7;
            position: relative;

        }
        .scroll-snap-wrapper {
            display: flex;
            width: calc(10 * 100% / 5); /* Two sets of items (5 original + 5 duplicates) */
            animation: scroll 30s linear infinite;
        }
        .scroll-snap-item {
            flex: 1 0 20%; /* Flex-grow: 1, Flex-shrink: 0, Flex-basis: 20% (5 items fit in 100%) */
            text-align: center;
            color: white;
            background: #f5a4d7;
            box-sizing: border-box;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
          font-weight:400;
          font-smooth: always;

        }
        .scroll-snap-item img {
            max-width: 25%;
        }
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div class="scroll-snap-container">
        <div class="scroll-snap-wrapper">
            <div class="scroll-snap-item"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo"></div>
            <div class="scroll-snap-item">Item 2</div>
            <div class="scroll-snap-item">Item 3</div>
            <div class="scroll-snap-item">Item 4</div>
            <div class="scroll-snap-item">Item 5</div>
            <div class="scroll-snap-item"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo"></div>
            <div class="scroll-snap-item">Item 2</div>
            <div class="scroll-snap-item">Item 3</div>
            <div class="scroll-snap-item">Item 4</div>
            <div class="scroll-snap-item">Item 5</div>
        </div>
    </div>
</body>
</html>

Here we create an automatic scrolling effect using CSS animations combined with the flexbox layout.

HTML Structure:
- The HTML contains a div with the class scroll-snap-container, which acts as the container for the scrolling items.
- Inside the container, there is another div with the class scroll-snap-wrapper, which holds multiple scroll-snap-item elements.
CSS Styling:
- The scroll-snap-container is styled to have a fixed size, with hidden overflow, rounded corners, and a background color.
- The scroll-snap-wrapper is given a width that is double the container’s width to create a seamless loop (two sets of items), and it uses the scroll keyframes animation to move its content.
- Each scroll-snap-item is styled to be equally distributed within the container, with centered text and images.
CSS Animation:
- The @keyframes scroll defines the animation named scroll.
- 0% { transform: translateX(0); } sets the initial position of the wrapper to the start.
- 100% { transform: translateX(-100%); } moves the wrapper to the left by 100% of its width over the duration of the animation.
Animation Mechanism:
- The scroll-snap-wrapper uses the scroll animation to move all items horizontally from right to left continuously.
- This movement is achieved by setting the wrapper's initial transform to 0% and then moving it to -100% over 10 seconds, creating a looped effect. .

Output :-
.

.
How It Works:

The scroll-snap-wrapper contains two sets of items to ensure a seamless loop, moving from right to left over a set duration (10 seconds).
The transform: translateX(-100%) moves the content of the wrapper from its initial position to the left by 100% of its width, creating a continuous scrolling effect.
The animation: scroll 10s linear infinite ensures this movement is smooth, consistent, and repeats indefinitely, simulating a marquee-like animation using modern CSS techniques.

Adding another effect: Pause When Hover

And if we add want to pause the animation when we hover over the element we can add this in the style:-

.scroll-snap-wrapper:hover { animation-play-state: paused; }

Final Call: The Conclusion 😶‍🌫️🫥😮🤔🤯🫡😜

.
We have explored several alternatives to the traditional <marquee> tag, each offering unique advantages and enhanced control for creating scrolling effects. From CSS animations and JavaScript scrollers to advanced solutions like GSAP and CSS Scroll Snap, these methods cater to modern web development standards and practices.

via GIPHY

Let me know which method is your favorite! I'll keep sharing examples where marquee-like effects are used efficiently in contemporary designs. Your feedback and experiences are invaluable, so please share your preferred method and any insights or stories about working with the <marquee> tag. Let's continue this conversation in the comments and inspire each other with creative scrolling effects.

Happy coding, and I look forward to reading your thoughts and experiences!

Suggested explorations on the same topic:-

Mark it! Where's Marquee?

Harshita Sharma D — Sun, 12 May 2024 18:30:32 +0000

Yes, this is a Mothers' Day Special Blog. If you are like me you must have encountered with the <marquee> tag. Wait! let me clear you one thing, if you're not interested in the exposition of my first encounter with the <marquee> tag, feel free to skip ahead to the main content SKIP.

.
Remember those <marquee> texts? It was back in 2013, when I was in 8th grade, that I first encountered those scrolling, floating, or whatever-you-call-them texts. I was so amazed that I could make something literally "run" on my webpage, like those "SALE! SALE! SALE!" texts on e-commerce sites or notification banners on some government websites.

Until then, all the tags I had learned were static; nothing moved. Well, the marquee tag was also technically static, but at the time, I was so fascinated by it that I started using it everywhere. It made me feel like I was really doing something on the webpage. I used to play with the tag by adjusting its speed. As a kid, watching movement on my webpage was a next level feeling for me. Fun fact: I used to visit cyber cafes occasionally to do this weird stuff since I didn't have a computer at home. I don't know why I'm sharing this; it's unrelated to the marquee tag. But it's nostalgic to remember how I used to create beautiful cards for our parents on occasions like Mother's Day, Father's Day, or anniversaries.

Where is my Marquee?

via GIPHY

.
A few days ago, I explored how modern websites, particularly those following modern design trends like brutalism, parallax and scrollytelling efficiently use similar effects, especially on portfolio websites. When I visited the MDN page for the tag, the first thing I saw was that it was deprecated. The tag can still be used in modern browsers, but since it's deprecated, it could be removed at any time.

Let's find the `<marquee>`?

via GIPHY

.
The HTML tag allows text or images to scroll within a defined area. It can scroll in any direction: left, right, up, or down, with the default behavior moving from right to left, creating a sense of infinite linear animation.
Let's explore some of its attributes.

direction :- It defines the direction for scrolling content, which can be left, right, up, or down.
behavior :- specify the behavior among these three types - Scroll, Slide and Alternate.
- Scroll:- It’s the default value, and the text will move and overflow the border of the element.
- Slide:- the content will move normally until it hits the border of the element, unless specified otherwise.
- Alternate:- the content will move backwards at the hitting the border of the element.
loop :- defines the number of times the animation should happen. By default it’s -1 which means infinite times
scrolldelay :- sets the interval between each animation.
scrollamount :- specifies speed of the animation.
truespeed:- By default, scrolldelay values lower than 60 are ignored. If truespeed is present, those values are not ignored.
contenteditable:- This makes the marquee an editable field and lets the users edit the content as it makes use of the user entered dynamic content.

Other than these we have some following attributes too:-

bgcolor:- Sets the background color
height :- Sets the height
width :- Sets the width
hspace :- Sets the horizontal margin
vspace :- Sets the vertical margin

Here is the implementation if the <marquee> tag. Consider the following code:-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marquee Tag Attributes</title>
  <style>
    marquee{
  height: 42px;
  border: 2px solid green;
  font-size: 20px;
}
  </style>
</head>
<body>

<!-- Example demonstrating direction attribute -->
<marquee direction="left">Scrolling Left: Dynamic Content</marquee>

<!-- Example demonstrating behavior attribute -->
<marquee direction="left" behavior="scroll">Scroll Behavior</marquee>
<marquee direction="left" behavior="slide">Slide Behavior</marquee>
<marquee direction="left" behavior="alternate">Alternate Behavior</marquee>

<!-- Example demonstrating loop attribute -->
<marquee direction="left" loop="2">Loop Twice</marquee>

<!-- Example demonstrating scrolldelay attribute -->
<marquee direction="left" scrolldelay="500">500ms Scroll Delay</marquee>

<!-- Example demonstrating scrollamount attribute -->
<marquee direction="left" scrollamount="5">Custom Speed: Dynamic and Controlled</marquee>

<!-- Example demonstrating truespeed attribute -->
<marquee direction="left" scrolldelay="30" truespeed>True Speed</marquee>

<!-- Example demonstrating contenteditable attribute -->
<marquee contenteditable="true">Click to edit: Customizable Content</marquee>

<!-- Other attributes -->
<marquee bgcolor="yellow">Yellow Background</marquee>
<marquee height="50px">Height: 50px</marquee>
<marquee width="200px">Width: 200px</marquee>
<marquee hspace="20">Horizontal Margin: 20px</marquee>
<marquee vspace="20">Vertical Margin: 20px</marquee>

</body>
</html>

.
Output:-
.

Marquee is deprecated.

via GIPHY

The tag was once a classic choice of web designers and developers, and added a playful touch to HTML with its animation effects. However, it had its own set of issues and never made it to the list of standard elements. When HTML5 came into existence, W3C marked it obsolete and because of its non-semantic nature. Originally introduced by Microsoft in Internet Explorer and then the tag quickly gained traction among various browsers and consequently it resulted in inconsistent implementations and rendering across platforms.

The marquee tag was primarily about presentation rather than structure. This made it challenging to maintain consistent user experiences. Moreover, it is an obstacle for the users of assistive technologies and hence making accessibility and usability a concern. With HTML5 and CSS3 bringing in more semantic ways to create dynamic content, the tag became outdated and lost its appeal.

In response to these concerns and in line with web standards and accessibility principles, HTML5 deprecated the tag. While it still exists for backward compatibility, its usage is generally discouraged. Now-a-days developers are advised to embrace modern techniques like CSS animations and JavaScript libraries such as GSAP for crafting dynamic web content. The deprecation of the tag reflects a shift in the web designing which emphasizes accessibility, usability, and semantic markup for creating inclusive and user-friendly experiences.

So what next?

via GIPHY

.
Even though the tag isn't as popular in today's web development, it still represents the early days of the internet. Whether you're drawn to its old-school charm or looking for newer options, exploring the tag gives you a glimpse into how web design has evolved and brings back nostalgic memories of the web.
One more thing this blog doesn't end here. We still need to explore possible use cases and possible alternative of <marquee>. So stay tuned and "Mark it!".

Now, you might be wondering why and how this blog is special for Mother's Day. I'd love to hear your thoughts. Feel free to share them in the comments below.

Leveling Up: From HTML Lists to CSS Counters

Harshita Sharma D — Sun, 05 May 2024 10:12:25 +0000

If you're like me and have ever used HTML in your life, there is a high chance that you must have encountered the <ol> tag that stands for "ordered list" and is used to create a list of intentionally ordered items. There's another similar "unordered" one and that is <ul>. The <ol> tag is often used with the <li> tag that stands for “list-items”. Each <li> tag added inside the <ol> element makes a new list item in the ordered list.

Explore `<ol>` 😎

An ordered list can be ordered either in integer or in roman. You just need to select its type, like this:-

<ol type="A">

or like this

ol{
   list-style: upper-alpha;
  }

in CSS add upper-roman, lower-alpha, upper-alpha, lower-roman, none or we can dig deeper with many more values to the list-style or list-style-type more specifically but that’s all for now.

Just a simple ordered list:-

Ordered lists are a great way to make lists where the browser automatically renders the numbers for you and you do not need to write one by one manually for all the items.

via GIPHY

But don’t you think this snatches your freedom to style the list your way? Yes, you can still stylize it like this:-

But then you need to write and put all the numbers inside an element and then write your CSS for that element.

Unlocking CSS Counters ⚡

via GIPHY

Have you ever wondered if there's a sleeker way to create ordered lists without the traditional <ol> tag? Do you know that you can achieve a similar result without using <ol> It’s a CSS trick, so keep it with you. Just make use of the CSS counter. It’s a versatile tool that allows you to add numbering or lettering to your lists with style. Counters adjust the appearance of content based on its placement in the document. Its value can be incremented by using CSS rules.

Consider the following code:-

here is the output:-

Inside the style tag, you must have noticed the counter-reset, counter-increment, and content properties. Let's have a closer look at each of them.

CSS counter-reset property

The counter-reset property creates and initializes a specific value to the counter. The property is used inside the parent element whose child elements need to be counted. In our example, we reset the counter inside the <body> tag. We can also specify the initial value of the list. This value is 0 by default, which gets incremented with the first occurrence of the targeted element, hence we get the value 1. We can also use some negative values. And if we use counter-reset: none; then this will disable the counter.

body{
  counter-reset: myCount; 
}

You can also define more than one counter at once with a space-separated list. Like this:-

body{
  counter-reset: myCount 4 myCount-second; 
}

Where 4 is the initial value for the counter myCount, and 0 for myCount-second. Hence, the list will begin from 5 and 1 for both the counters respectively.

CSS counter-increment property

The counter-increment property increments the value of the counter with every occurrence of the child element where it is defined. Note that it is defined under the ::before pseudo-element of the child tag where it was used. Here, in this case, it is <h1>. And the value is the counter name.

h1::before {
  counter-increment: myCount;
  content:"Subject " counter(myCount, upper-roman) ". ";
}

CSS content property and the counter() function

Finally, the content property lets you insert the content the way you want to see it on the page. Use the CSS counter() function to specify where you want to show the count in the element. In its first argument, pass the counter name and in the second argument, you can pass the style-type like you did in the <ol> when you used list-style-type.

  content:"Subject " counter(myCount, upper-roman) ". ";

Relevance of the `<ol>`

via GIPHY

You know, <ol> should still be used for numbered ordered lists because it's important to structure HTML using the proper semantics. Semantic markup is important for accessibility and SEO. When you need more control and customization over the styling and numbering of your list items, when you want to create nested or hierarchical lists, or when you need to style list items dynamically based on their position or hierarchy within the document you can go for the CSS counters.

In summary, use HTML lists for basic, well-defined lists, and turn to CSS counters when you need more flexibility and control over the appearance and behavior of your lists.

Now when you've unlocked the potential of CSS Counters, you have a versatile tool to add structure and style to your pages. As I mentioned earlier, you can also use it in a nested way. So, go ahead, and take your time to explore. It's your turn to experiment.

Suggested explorations on the same topic:-

DEV Community: Harshita Sharma D

The Hidden Guests in Your Windows PC — A Disk Cleanup Diary - part1

Wait — What Is RUXIM, and Why Is It On My PC?

And Then There Was "Nagware"

The Other Dusty Folders You've Probably Ignored

My C: and D: Drive Cleanup — The Journey

What I Learned

How to make queues in next.js projects?

What is Apache Server? Why do we use it?

OK! So what it is?

How it works:

Here are the key features of Apache in a nutshell:

Use cases:

Alternatives:

TERRA FlipFlop - Sustainable Footwear Solution - Wix Studio Challenge - My Submission

What I Built

Demo

Development Journey

Introducing FoodMood-Bot: Your WhatsApp Chef Tailoring Recipes to Your Mood - Twilio Challenge Submission 2024

What I Built

Twilio and AI

Demo

🍽️ FoodMood-Bot

Features

How It Works

Example Interaction

Technologies Used

Installation

Usage

Contributing

License

Contact

Additional Prize Categories

Computer Science Challenge - Structure Padding

Explainer

Additional Context

Glam Up My Markup: Beaches - My Submission

Inspiration 🌊🏄‍♀️🏄‍♂️

Demo 🩴🌴

Journey 🌊🏄‍♀️🏄‍♂️⛱️🏖️🩴🌴

Moving Beyond Marquee: Cool Alternatives to the marquee tag

1. Using GSAP 😎

2. Using CSS Animation 🤩

3. Using JavaScript 🙂

4. Using jQuery 🤔

5. Using jQuery.Marquee Plugin 😏

A Use Case : A CSS Scroll Snap 👌

Adding another effect: Pause When Hover

Final Call: The Conclusion 😶‍🌫️🫥😮🤔🤯🫡😜

Mark it! Where's Marquee?

Where is my Marquee?

Let's find the <marquee>?

Marquee is deprecated.

So what next?

Leveling Up: From HTML Lists to CSS Counters

Explore <ol> 😎

Unlocking CSS Counters ⚡

CSS counter-reset property

CSS counter-increment property

CSS content property and the counter() function

Relevance of the <ol>

Let's find the `<marquee>`?

Explore `<ol>` 😎

Relevance of the `<ol>`