DEV Community: Ashish prajapati

🚀 From Excel to Web App: How I Built a Smart Assignment Management System for 125 Students

Ashish prajapati — Sun, 12 Oct 2025 06:46:38 +0000

👋 Introduction

Hey everyone! I’m Ashish, an MCA student — and, like most developers, I can’t resist turning simple problems into full-on coding projects. 😅

This semester, my Python professor gave me a new role:

“You’ll be the Python subject representative. Help manage assignments and track student progress.”

Sounds easy, right? Well, not quite.

My actual task was to monitor assignment progress for all 125 students, help the professor communicate updates to the class, and ensure that everyone’s assignments were properly submitted and tracked.

The professor suggested the old-school route —

“Just keep it all in an Excel sheet.”

But come on... I’m a developer. Why settle for spreadsheets when I can build something better?

So, I decided to turn this Excel nightmare into a full-fledged web application that could handle everything — tracking, monitoring, communication, and analytics — all in one place.

That’s how Assignment Checklist was born. 🎯

💡 The Idea: Turning Manual Management into a Smart Web App

What started as a “track assignments” task quickly turned into something much bigger:
A complete Assignment Management and Progress Monitoring System for the entire class.

The goal?

Make it easy for teachers and reps to manage assignments, monitor student performance, and communicate updates efficiently.

No Excel sheets. No manual status updates. Just clean, digital automation.

🧭 What Is “Assignment Checklist”?

Assignment Checklist is a web application designed for teachers, subject representatives, and students to simplify assignment tracking, class communication, and progress monitoring.

Here’s what it can do:

✨ Key Features

🗂️ Assignment Management
Create, edit, and organize assignments with due dates and descriptions.
👨‍🎓 Student Progress Tracking (125+ Students)
Track every student’s assignment status — from Uncompleted to Pending to Completed.
📢 Professor–Class Communication
The app helps professors and class reps share important updates or reminders directly — no separate WhatsApp chaos.
📊 Live Analytics Dashboard
Visualize class-wide progress with interactive Chart.js graphs and summaries.
🔒 Secure Editing
Only authorized users (professors or reps) can modify student records or mark completion.
📈 Reports & Insights
Get instant overviews of overall performance — who’s on track and who’s falling behind.
💬 Simplified Collaboration
Makes it easy for the professor and subject rep to coordinate and track class-wide assignment flow.

🧰 Tech Stack

Technology	Purpose
PHP (Vanilla)	Backend logic and data handling
MySQL	Database for assignments & student records
Bootstrap 5	Clean, responsive user interface
Chart.js	Interactive charts for progress tracking
FontAwesome	Icons to improve UI clarity
HTML/CSS/JavaScript	Frontend structure and interactivity
XAMPP	Local development and testing environment

I kept it simple, lightweight, and deployable on any basic server — perfect for quick academic tools.

⚙️ Architecture & Documentation (Coming Soon!)

To make it scalable and maintainable, I’m documenting everything, including:

🧾 DFD (Data Flow Diagram) – Data movement between modules
🧱 ER Diagram – Entity relationships for assignments, students, and subjects
🎭 Use Case Diagram – Role-based system interactions
⚡ API Documentation – For potential integration with student/teacher login systems

All documentation will soon be available on the GitHub repo.

🖥️ Preview & Source Code

📂 GitHub Repository:
👉 Assignment Checklist Web App

🌐Preview(Static):

🌐 Live Preview:
Coming soon! (Will update once deployed publicly.)

🔍 Behind the Scenes: What I Learned

This project taught me way more than I expected:

Excel doesn’t scale — especially for 125 students 😅
UI/UX matters — teachers don’t want to “figure things out”; it has to just work
Database design is the backbone — normalization and relationships made progress tracking smooth
Automation saves time — what took hours in Excel now happens instantly
Collaboration needs structure — the app became the single source of truth for all assignment updates

💬 Future Plans

I’m currently expanding Assignment Checklist into something even more powerful:

🔐 User Authentication: Separate dashboards for teachers, reps, and students
📱 Mobile-First UI: Redesign using Tailwind CSS for smoother mobile access
📬 Automated Notifications: Email/SMS alerts for pending or upcoming assignments
📤 PDF Reports: One-click export of student progress for professors
☁️ Cloud Deployment: Online hosting for real-time access

🤝 Contributing

I’d love your thoughts, feedback, or pull requests!

Fork the repo
Create your feature branch
Submit a PR with your improvement

You can also connect directly via GitHub.
If you like the project, leave a ⭐ on the repo — it really helps!

👨‍💻 About the Author

Hey, I’m Ashish (aka Anticoder03) — a coding enthusiast, anime lover, and someone who believes in building solutions that make everyday life easier.

I enjoy taking small, repetitive academic tasks and turning them into creative coding projects. This one’s a perfect example — what started as “track Excel assignments” became a real working system that helps 125 students and my professor every day.

💡 “If a task feels repetitive, automate it. If it feels boring, make it creative.”

🏁 Final Words

This project started as a small helper tool for my class, but it became something way bigger — a digital system that connects professors, reps, and students, making academic coordination smoother and more efficient.

If you’re a student, rep, or teacher tired of manually updating spreadsheets, take it from me — building your own web app might just be the best learning experience you’ll have this semester.

Thanks for reading! ❤️
Let’s connect and collaborate —
🔗 GitHub: Anticoder03

🧩 TL;DR

Built a full web app to replace Excel-based assignment tracking and class communication for 125 students using PHP, MySQL, and Bootstrap — complete with analytics, reports, and secure access.

Because… developers don’t just manage data — they build systems. 💪

🚀 Build Your Own Anime Explorer with HTML, Tailwind & the Jikan API!

Ashish prajapati — Thu, 26 Jun 2025 05:25:19 +0000

Are you an anime fan and a web dev? Why not combine both and build something epic? 💥

Introducing AnimeForge – a fully responsive web app that shows top-rated anime, movies, and even lets you search and view detailed info using the Jikan API (MyAnimeList Unofficial API). This project is built with HTML, Tailwind CSS, and JavaScript – no frameworks, just clean code and otaku energy! ⚔️👨‍💻

🌟 Features

✅ Explore top-rated anime series

✅ Browse anime movies

✅ View full anime details (genre, episodes, rating, synopsis, etc.)

✅ Dark / Light Theme Toggle 🌗

✅ Live Search functionality 🔍

✅ Responsive layout with Tailwind CSS

✅ Built with 🧠 and ❤️ by a fellow otaku

🧪 Tech Stack

📄 HTML5
🎨 Tailwind CSS
🔥 Vanilla JavaScript
📡 Jikan API – for anime data

🖼️ Screenshots

All UI is responsive and works great on mobile & desktop.

📂 Project Structure

AnimeForge/
├── index.html             # Top Anime Page
├── movies.html            # Movie Page
├── anime.html             # Anime Details Page
├── about.html             # About Me Page
├── theme_change.js        # Dark mode logic
├── screenshorst/          # Screenshots
└── README.md / LICENSE

🔧 How It Works

We use the Jikan REST API to fetch:

📺 Top anime series → https://api.jikan.moe/v4/top/anime?type=tv
🎬 Top anime movies → https://api.jikan.moe/v4/anime?type=movie
🔍 Search anime by name → https://api.jikan.moe/v4/anime?q={search}

All cards are dynamically generated using plain JS DOM magic. Clicking on a card opens anime.html?id=XXXX, fetches full info, and renders a beautiful detail view.

💡 Live Demo

🚀 https://animeforge.netlify.app/

📁 Or just clone it and run locally:

git clone https://github.com/Anticoder03/animeforge.git
cd animeforge
open index.html

🙋‍♂️ About the Developer

Hey! I'm Ashish Prajapati – a full-stack learner, anime lover, and terminal ninja from 🇮🇳
Built this as a fun side project to combine code + anime 👨‍💻⚔️

🐙 GitHub: Anticoder03
📸 Instagram: @ashiah03_prajapati

📜 License

Licensed under the MIT License. Use it, remix it, share it freely 🪄

“Anime taught me never to give up. Code made me unstoppable.” – Ashish (Anticoder03)

✨ Let’s Connect!

💬 Drop a comment if you liked it or want more anime-themed dev content.
💡 Thinking of building a React/GSAP version next — who’s in?

🚀 Chrome 135 Brings `::scroll-button()` and `::scroll-marker()` — Say Goodbye to JavaScript Carousels

Ashish prajapati — Fri, 13 Jun 2025 05:00:18 +0000

With the release of Chrome 135, web developers finally get access to two powerful new pseudo-elements:

::scroll-button()
::scroll-marker()

These pseudo-elements unlock fully functional carousels, sliders, and scrollable components without a single line of JavaScript.

TL;DR: These new features make interactive scroll experiences accessible, stylable, and keyboard-friendly — all from your CSS file.

🆕 What Are `::scroll-button()` and `::scroll-marker()`?

`::scroll-button()`

This pseudo-element renders scroll control buttons — left/right or up/down depending on the scroll direction. You can style them like any element, and users can interact with them out of the box.

`::scroll-marker()`

Think of this like scrollable radio dots — showing the position of each scroll snap point. They’re interactive, accessible, and visual indicators of your scroll progress.

Why They're a Big Deal

✅ Automatically accessible (screen reader + keyboard support)
✅ Pairs with scroll-snap-type
✅ No JavaScript needed
✅ Fully stylable using CSS

🔥 Real-World Carousel Example (JavaScript Fallback)

Here’s a simple JavaScript-based carousel (for legacy support), which will soon be entirely CSS-driven using ::scroll-button() and ::scroll-marker() in Chrome 135+:

👉 Live Demo Here

<!-- Full working demo with scroll + JS -->
<div class="carousel">
  <!-- Slides -->
</div>

[Full code example here... already shown above]

💡 What This Will Look Like in Pure CSS

.scroll-container::scroll-button(start) {
  content: '◀';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.scroll-container::scroll-button(end) {
  content: '▶';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

No JavaScript. No event listeners. Just drop in a scroll-snap container, and the browser handles it.

🎯 Why This Matters

Using ::scroll-button() and ::scroll-marker() means:

✅ Native accessibility (no ARIA hoops to jump through)
✅ Built-in keyboard support
✅ Zero JS needed for sliders
✅ Smaller bundle sizes, better perf

🧪 Browser Support (as of Chrome 135)

Browser	Support
✅ Chrome 135+	Full
⚠️ Edge (Chromium)	Behind flag
❌ Firefox	Not yet
❌ Safari	Not yet

To enable the feature in Chrome manually:

chrome://flags/#enable-experimental-web-platform-features

🧠 Final Thoughts

This is a huge leap for native web components. Once Firefox and Safari catch up, we’ll finally have fully accessible carousels and sliders without needing bloated libraries or JS hacks.

Until then — progressive enhancement is your best friend.

🙋‍♂️ Let’s Talk!

What would you build with ::scroll-button()?

A portfolio carousel?
A product slider?
An onboarding walkthrough?

Should developers ditch JS sliders forever? Or is it too early?

👉 Try the full responsive carousel demo:
🔗 https://clever-cocada-9cd821.netlify.app/

Follow me for more frontend deep dives!
#CSS #HTML #Chrome135 #Frontend #WebDev #Accessibility #scrollbutton #nativecarousel #DevTo

🧾 Build Your Own Modern Resume Builder with HTML, Tailwind CSS & JavaScript

Ashish prajapati — Sun, 04 May 2025 04:33:12 +0000

Creating a professional resume shouldn't feel like a daunting task. That’s why I built a sleek, responsive Resume Builder that allows anyone to craft beautiful resumes in minutes. Whether you’re a student, developer, or job-seeker — this tool is designed for you!

✨ Key Features

✅ 4 Unique Templates
✅ Form-based Input Interface
✅ PDF Export Functionality
✅ Fully Responsive Design
✅ Tailwind-Powered UI
✅ Customizable & Open Source

💻 Tech Stack

Frontend: HTML5, Tailwind CSS, JavaScript
PDF Library: html2pdf.js
Fonts: Google Fonts
Hosting: GitHub Pages

🧠 Why I Built This

I noticed many resume builders out there are either too complex or behind a paywall. So I asked myself:

"Why not build something simple, stylish, and open-source?"

And that's exactly what I did — a free, modern resume builder anyone can use and customize.

🖼️ Available Templates

Sidebar Design — Neatly organized layout with personal info on the side.
Header Design — Eye-catching header with a clean two-column format.
Timeline Design — Great for showcasing experience with a vertical timeline.
Card Design — Minimal card layout with hover animations and clean typography.

📥 How It Works (Under the Hood)

🧾 1. User Input

<form id="resumeForm">
  <input type="text" id="name" placeholder="Full Name" required />
  <!-- More fields here -->
</form>

🎨 2. Template Selection Logic

const template = document.getElementById('template').value;
window.location.href = `templates/${template}.html?${params}`;

📄 3. PDF Generation

const opt = {
  margin: 0.2,
  filename: 'resume.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().set(opt).from(document.getElementById('resume-content')).save();

📱 Responsive Design Sample

.resume-container {
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  padding: 1in;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

🚀 Getting Started

git clone https://github.com/Anticoder03/resume-builder.git
cd resume-builder
open index.html  # or just double click the file

Then, just fill the form and generate your PDF!

🏗️ Development Process

🔹 Planning Phase

Defined user needs & ideal features
Created mockups & UI flows
Designed responsive breakpoints

🔹 Development Phase

Built input form with Tailwind CSS
Added 4 switchable templates
Implemented html2pdf.js for download

🔹 Testing & Optimization

Cross-browser & mobile tested
Print styles refined
PDF quality tuned

⚙️ Challenges & Solutions

🐞 PDF Rendering Glitches

Fixed by optimizing html2canvas settings and using useCORS.

📱 Mobile Responsiveness

Used Tailwind's responsive classes and adjusted layout with breakpoints.

🧪 Form Data Validation

Implemented custom JS validation and feedback messages.

🎭 Smooth Template Switching

Used fade transitions and lightweight rendering logic.

🔮 Future Plans

Dark Mode
More Templates
Multi-language Support
AI-Powered Resume Suggestions
Backend for Save/Edit functionality

📚 Key Learnings

✅ Mastered responsive design & media queries
✅ Gained practical experience with html2pdf.js
✅ Understood how to collect, validate, and pass form data via query params
✅ Refined UI/UX practices for web apps

🔗 Useful Links

🔗 GitHub Repo
🌐 Live Demo

🙌 Final Words

This project has been a labor of love — merging functionality with elegant design. I hope it helps you or inspires your next side project!

If you found this helpful, consider giving it a ⭐ on GitHub or sharing it with friends.

Feel free to drop feedback or connect on LinkedIn!

✨ Visualizing a Feeling Through Particles, Anime.js, and Dreamy Backgrounds ✨

Ashish prajapati — Sat, 26 Apr 2025 18:28:44 +0000

Hey everyone! 👋

Today I’m not just sharing a project — I’m sharing a feeling.

A feeling I tried to translate into visuals: ✨motion, freedom, softness, a dream.✨

Through moving particles, floating animations, and soft color shifts, I tried to capture what I often feel — a quiet, slow dance between energy and peace. 🕊️

This feeling was inspired by a story that really touched my heart — an emotion I carried from the anime Darling in the Franxx.

It’s not a direct recreation — it’s more like the echo of what I felt while watching it: the hope, the loneliness, the gentle freedom of dreams in the sky.

🎯 What This Represents for Me

Particles are my scattered thoughts, moving gently, sometimes colliding, always alive.
Flying birds are my dreams — drifting slowly across endless skies.
Anime.js animations of hearts, wings, feathers — are pieces of emotion that keep moving, floating, never fully still.
Smooth scrolling through soft background changes feels like the way emotions flow — not in sudden bursts, but gradual, natural, effortless.

This isn’t just a page with effects.

It's the visual version of something inside me.

⚙️ How I Built My Feeling (Technologies Used)

HTML5
CSS3
JavaScript (ES6)
Particles.js
Anime.js
Intersection Observer API
Smooth Scroll Behavior

📜 Small Glimpses of the Code

Particles Moving Like Gentle Chaos

particlesJS('particles-js', {
  particles: {
    number: { value: 80 },
    color: { value: '#ff6b6b' },
    shape: { type: 'circle' },
    move: { speed: 2, random: true }
  }
});

The particles aren't random. They're lively, yet peaceful — like a mind daydreaming.

A Heart That Breathes

anime({
  targets: '.heart',
  scale: [1, 1.2, 1],
  duration: 3000,
  loop: true,
  easing: 'easeInOutQuad'
});

This little animation is the way my heart sometimes feels — expanding with hope, shrinking with fear, expanding again.

Soft Transitions Between Feelings (Sections)

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const colors = {
        first: '#1a0f2e',
        second: '#2d1b4e',
        third: '#4a1942',
        fourth: '#6b2c70',
        fifth: '#8e3a8e'
      };
      document.body.style.backgroundColor = colors[entry.target.id];
    }
  });
}, { threshold: 0.3 });

Each background color is a different emotion for me. A small shift, but meaningful.

A Dream Floating Across the Sky (Flying Bird)

let birdPosition = 0;
function animateBird() {
  birdPosition += 0.5;
  const yOffset = Math.sin(birdPosition * 0.05) * 50;
  bird.style.transform = `translateX(${birdPosition}px) translateY(${yOffset}px)`;
  if (birdPosition > window.innerWidth) {
    birdPosition = -100;
  }
  requestAnimationFrame(animateBird);
}
animateBird();

Just like how some dreams move — a little lost, a little aimless, but always moving.

📸 A Glimpse Into My Dream

[Link to the Feeling] : (https://my-dream-story.netlify.app/)

💬 What I Felt While Building This

Honestly?

Calmness.
Nostalgia.
A little sadness.
A lot of peace.

I wasn’t building a "project" this time. I was painting an emotion with code. 🎨

Code became my canvas, and these tiny interactions became my little world for a while.

And somewhere in this creation,

I kept thinking about the story of Zero Two and Hiro, the loneliness they faced, the skies they dreamed about —

and how even when everything felt heavy, their dreams always found a way to float. 🕊️

🚀 If You Ever Feel Like Coding a Feeling...

Here’s my advice:

Don’t worry about "making it perfect."
Focus on how it feels, not just how it looks.
Let animations breathe.
Let your emotions guide the color palette, the speed, the flow.

Because sometimes, code isn’t logic — it’s art. ✨

🎉 Thank You for Reading

This was deeply personal for me.

If you’ve ever felt something you couldn’t put into words — maybe try putting it into code. It’s surprisingly healing. 💖

Would love to hear if you've ever built something emotional too!

Stay dreamy, stay coding. 🌌

Inspired in spirit by the anime "Darling in the Franxx" — to the dreamers who keep flying, no matter what. 🌸

Day 7: Animated Landing Page — Interactive Product Showcase 🚀

Ashish prajapati — Sat, 26 Apr 2025 10:44:14 +0000

Hey everyone! 👋

Today is Day 7 of my creative animation journey.

I'm super excited to share what I worked on: an Animated Landing Page concept that utilizes ScrollTriggers, Anime.js timelines, staggered animations, and interactive effects!

🌟 Project Concept

Theme: Furniture Product Launch / Furniture Agency Showcase

Goal: To create an immersive landing page experience using scroll-based animations, interactive hover effects, and a fluid timeline of motion that draws users deeper into the collection.

🎨 Design Layout & Animation Flow

🔹 Header Section

Hero Background: Dynamic image showcasing elegant furniture pieces.
Scroll Animation: Tagline and brand name animate in with smooth fades and staggered text reveals.
Interactivity: Hovering over the furniture slightly zooms the image for a lively feel.
CTA Button: "Explore Collection" appears with a subtle scaling animation.

🔹 Features Section

3-Column Layout: Highlighting key features like premium materials, craftsmanship, and customizable options.
Scroll Triggered Animation: Each feature slides up into view with staggered motion.
Icon Animations: Icons related to each feature animate from different directions.

🔹 Product Showcase

Image Gallery: Show different views or setups of the furniture in styled spaces.
Anime Timeline: A sequence where furniture items appear one after another as the user scrolls.
Hover Effects: Slight zoom and tilt on hover for interactivity.

🔹 Testimonials Section

Carousel of Testimonials: Each review fades and slides in.
Typewriter Animation: Customer quotes appear word-by-word for added anticipation.
Extra Info Popups: Clicking on a testimonial reveals more details.

🔹 Footer Section

Smooth Slide-in: Contact links and social icons animate in staggered fashion.
Scroll Progress Animation: A progress indicator animates based on how far down the page the user has scrolled.

⚡ Technical Highlights

Scroll Triggers: Different animations trigger when sections enter the viewport.
Anime.js Timeline: Used to sequence multiple animations smoothly.
Staggered Effects: Texts, images, and links appear one after another.
Interactivity: Hover and click animations to make the page feel alive.
Responsive Design: Works smoothly on mobile and desktop screens.

🛠️ Technologies Used

HTML, CSS, and JavaScript
Anime.js for powerful timeline-based animations
GSAP ScrollTrigger (optional for deeper scroll control)

📸 Sneak Peek

Check out my live demo here:

🚀 Final Thoughts

Creating this landing page was a ton of fun!

Animating the furniture collection while keeping performance and creativity in balance taught me a lot about crafting immersive user experiences.

Stay tuned for even more crazy ideas coming up in the next few days! 🎯

Thanks for checking it out! 🙌

If you liked it or have feedback/suggestions, feel free to drop a comment.

Let's keep animating and making the web more magical! 🌈

👨‍💻 Author

Ashish Prajapati

💼 LinkedIn

✍️ Dev.to Blog

💻 GitHub

🚀 Day 6 — Project Days Begin: Crafting Real-World UI with Anime.js

Ashish prajapati — Sat, 26 Apr 2025 02:30:39 +0000

Welcome to Day 6 of my Anime.js journey!

Today kicks off a new chapter: Project Days. Instead of learning new syntax or techniques, I'm diving into building real-world examples — things like loading animations, UI elements, and scroll interactions — all powered by the magic of Anime.js.

🎯 What I Built Today

✅ Today's Focus

Designed 3 unique loading animations
Practiced SVG stroke and path animation techniques
Used timelines and stagger effects for smooth sequencing
Experimented with motion curves and easing to craft visually pleasing loaders

💡 Loaders I Designed

🌀 Loader 1 — SVG Line Dash Animation

An SVG line draws itself as if it's sketched by an invisible pen. This loader uses strokeDashoffset and a custom bezier easing to give that satisfying "tracing" effect. It's minimal yet classy — great for splash screens or product intros.

👉 Live Demo on CodePen

🔵 Loader 2 — Text-Based

Inspired by modern chat UIs, this loader features Text loading and fading . Created using anime.timeline() with staggered delays, this one adds a touch of rhythm and life to waiting screens.

👉 Live Demo on CodePen

🟣 Loader 3 — Advanced Circular Loader

This is where things get exciting — a more dynamic loader that combines rotation and transformation of two SVG circles. It's a step up in complexity and could work well for dashboards or analytics-heavy apps.

👉 Live Demo on CodePen

🧠 What I Learned

How to transform ideas into UI components using Anime.js
The power of timelines for controlling animation flow
How different easing functions change the entire "feel" of an animation
Why subtle animations improve real UX, not just aesthetics

🔥 Mini Challenge For You

Try these out in your own projects:

Make one of these loaders into a reusable React or Vue component

🗣️ Quote of the Day

"Great animation doesn’t just catch the eye—it tells a story in motion."

— A designer, somewhere on the internet

👨‍💻 Author

Ashish Prajapati

💼 LinkedIn

✍️ Dev.to Blog

💻 GitHub

✨ Day 5: Advanced Animation Techniques

Ashish prajapati — Fri, 25 Apr 2025 02:47:14 +0000

Welcome to Day 5 of my Anime.js journey! Today, I dove into advanced animation techniques like SVG animations, dynamic values, motion paths, and integrating Anime.js with other libraries like GSAP and Three.js.

🎯 What I Learned Today

✅ Topics Covered:

SVG Animations with Anime.js
Motion Paths and Moving Along Curves
Dynamic Values and Random Animations
Integration with GSAP and Three.js
Animating Custom UI Components like Charts

💡 Concepts with Examples

SVG Path Drawing Effect

   anime({
     targets: 'path',
     strokeDashoffset: [anime.setDashoffset, 0],
     easing: 'easeInOutSine',
     duration: 2000,
     direction: 'alternate',
     loop: true
   });

✨ Creates a draw effect on the SVG path!

Motion Path Animation

   const motionPath = anime.path('#curve');

   anime({
     targets: 'circle',
     translateX: motionPath('x'),
     translateY: motionPath('y'),
     rotate: motionPath('angle'),
     duration: 3000,
     loop: true,
     easing: 'easeInOutQuad'
   });

🚗 Animates elements along a custom path.

Random Bounce with Dynamic Values

   anime({
     targets: '.dot',
     translateY: () => anime.random(-100, 100),
     duration: 1000,
     direction: 'alternate',
     loop: true
   });

🔀 Each element gets a random value for its movement.

Integration with Three.js

   anime({
     targets: cube.rotation,
     y: Math.PI * 2,
     duration: 3000,
     easing: 'easeInOutSine',
     loop: true
   });

🌀 Anime.js is used to animate 3D objects like cubes in Three.js.

Animating Custom UI Components

   anime({
     targets: '.bar',
     height: (el, i) => 50 + i * 30,
     delay: anime.stagger(200),
     duration: 800,
     easing: 'easeOutBounce'
   });

📊 Animating a bar chart for a dynamic UI experience.

🔥 Practice Questions

🟢 Basic

Animate an SVG path to create a "drawn" effect.
Animate a circle along a custom path using anime.path().
Use anime.setDashoffset to animate an SVG path’s stroke.

🟡 Intermediate

Animate an element’s position using dynamic random values.
Create a bouncing effect on multiple elements with random values.
Integrate Anime.js with a basic Three.js scene and animate a 3D object.

🔴 Advanced

Animate multiple paths in an SVG with staggered animations.
Create a timeline animation combining GSAP and Anime.js.
Build an animated graph using SVG, Anime.js, and dynamic values.
Animate a custom UI component like a progress bar or voting chart.

Got it! Here's the updated and properly formatted section with the changes:

🌅 Mini Project — 3D Cube Animation

A 3D rotating cube animation using Anime.js combined with basic 3D transforms. It showcases how Anime.js can handle rotation on multiple axes — simple yet mesmerizing!

Check out this Pen I made!

🌌 Major Project — Interactive Card Animation Dashboard

For today’s big build, I created an interactive data dashboard featuring card animations. Each card animates on entry using Anime.js with hover effects and delayed sequencing for a smooth UI experience.

✨ Features:

Smooth card entry animations
Hover effects using Anime.js
Delayed reveal sequencing
Clean UI for showcasing content

Check out this Pen I made!

🧠 What I Gained Today

Mastered advanced techniques like motion paths and dynamic values
Integrated Anime.js with Three.js for 3D scene animations
Built a custom animated UI component for an interactive dashboard
Learned how to animate complex SVG paths and sequences for smooth interactions

🗣️ Developer Quote of the Day

"Animation is the art of making something stand out by making it move." — Anonymous

👤 Author

Ashish Prajapati

💼 LinkedIn

✍️ Dev.to Blog

💻 GitHub

✨ Anime.js Learning — Day 4: Interactivity & Event Control

Ashish prajapati — Wed, 23 Apr 2025 03:16:05 +0000

Welcome to Day 4 of my Anime.js journey! Today was all about making animations interactive — controlling them via user events, adding callbacks, and even animating with scroll behavior.

🎯 What I Learned Today

✅ Topics Covered:

onBegin, onUpdate, onComplete callbacks
Animation control methods: play(), pause(), restart(), reverse()
Handling DOM Events: click, hover, etc.
Scroll-triggered animations using IntersectionObserver
Sequencing with anime.timeline() + interactivity

💡 Concepts with Examples

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  onBegin: () => console.log('Animation started!'),
  onUpdate: anim => console.log(`Progress: ${Math.round(anim.progress)}%`),
  onComplete: () => console.log('Animation complete!')
});

🔁 You can use hover, click, scroll, and even keyboard events to make animations come alive!

🔥 Practice Questions

🟢 Basic

Animate a button and log when animation starts and ends.
Pause an animation on hover and resume on mouseout.
Animate a square on click using translateX.

🟠 Intermediate

Use onUpdate to update progress bar width in real-time.
Reverse an animation with a button click.
Animate multiple elements with .stagger() on scroll into view.

🔴 Advanced

Build a gallery that animates in on scroll.
Animate a progress bar that fills based on scroll.
Create a typewriter effect that restarts on button click.
Make a timeline animation that pauses when scrolled out of view.

🌅 Minor Project – Sunrise Animation

A simple yet calming animation of the sun rising behind mountains using Anime.js.

Check out this Pen I made!

🌌 Major Project – Interactive Solar System 🌍

Today’s big build! A fully interactive Solar System powered by Anime.js + DOM events + scroll behavior.

✨ Features:

Planets orbit around a glowing sun
Hover to pause animation
Click a planet to show animated info box
Scroll to reveal fun facts using IntersectionObserver
Animation lifecycle logs using onBegin, onUpdate, onComplete
Full timeline-based sequencing for reveal elements

Check out this Pen I made!

🧠 What I Gained Today

Learned how to make animations respond to user input
Discovered scroll-based reveal tricks
Became more confident using Anime.js timelines and control methods
Built a complex multi-layered animation project!

🗣️ Developer Quote of the Day

"Every animation begins with a single frame — keep pushing pixels and you'll paint motion itself."

— Anonymous

🚀 Up Next: SVG Animations and Path Morphing (Stage 5)

Can’t wait to start animating SVG paths and building logo morph effects in Stage 5. Stay tuned!

👤 Author

Ashish Prajapati

💼 LinkedIn
✍️ Dev.to Blog
💻 GitHub

🌀 Anime.js Learning – Day 3: Timelines & Chaining Animations

Ashish prajapati — Sun, 20 Apr 2025 04:46:59 +0000

Hey everyone! 👋

Welcome to Day 3 of my journey learning Anime.js. Today was all about mastering timelines and chaining animations, which opens the door to building complex and beautifully sequenced effects.

🎯 Stage 3: Timelines & Chaining Animations

✅ Topics I Covered:

anime.timeline() – Creating a sequence of animations
Staggering animations using anime.stagger()
Chaining multiple steps with different targets
Nested animations – Animating grouped or layered elements one after another

💡 What I Learned

Today’s focus was on understanding how to build multi-step animation flows that are easier to manage and visually impactful. I learned:

How to use .add() with timelines to structure animation steps.
How to delay and stagger child elements for a smooth chain reaction effect.
Creating interactive replay effects and entry animations using nested sequences.
The beauty of timelines in creating story-like animations — like building a character from head to toe or an animated scene.

🧩 Practice Task

As a warm-up, I created a minor animation using timeline chaining:

Loading Effect

🎬 Main Project of the Day: Character Intro Scene

Animated Character Intro Scene

Features Included:

Timed entry animation of character body parts
Sequential movements: slide, rotate, scale, and fade-in
A clean and smooth chained effect using Anime.js timelines

🧠 Practice Questions from Day 3

🟢 Basic:

Create a timeline that scales and fades in a box.
Animate a group of elements using anime.stagger() with different delays.
Create a looped loading animation using timelines.

🟡 Intermediate:

Chain an animation that rotates a square, then moves it up and fades it.
Use nested timelines to animate a complex figure with head, body, arms.
Animate an image gallery reveal one image at a time using staggering.

🔴 Advanced:

Make a button animation that plays a 3-step sequence on click.
Create a timeline that animates a scene like a sunrise: sky, sun, mountains.
Build a typing effect where each letter appears with staggered opacity.
Combine multiple timelines into a master one to animate an entire page layout.

🧾 Summary

Today’s lesson truly felt like levelling up in animation skills. Timelines allow more control and cleaner code, and chaining animations brings creativity and storytelling into front-end design. It was super exciting to see how sequential animations can create delightful UI effects.

📌 Connect with Me

🔗 GitHub: Anticoder03
🧠 Dev.to: @anticoder03
💼 LinkedIn: Ashish Prajapati

🎨 "Every animation begins with a single frame — keep pushing pixels and you'll paint motion itself."

— Anonymous

Let me know what you think or share your favorite Anime.js timeline tricks! 🚀

See you in Day 4! 💥

# 🎯 Anime.js Learning — Day 2

Ashish prajapati — Sat, 19 Apr 2025 02:31:14 +0000

Author: Ashish Prajapati

GitHub: Anticoder03/animejs_learning

LinkedIn: Ashish Prajapati

📌 Topics Covered (Stage 2 - Core Properties & Parameters)

Today I dove deep into Anime.js's core animation properties and learned how to control the behavior of animations with various options. Here's a summary of what I explored:

✅ Core Animation Properties

translateX, translateY — Move elements along X and Y axis.
scale — Shrink or grow elements.
rotate — Rotate elements.
opacity, backgroundColor — Fade in/out and color change.

⚙️ Control Parameters

duration — How long the animation lasts.
delay — Delay before starting.
easing — Smoothness or style of the animation curve.
loop, direction — Loop the animation or play it alternate.
autoplay: false — Allow manual control and trigger via events.

💡 What I Practiced

I applied all of the above concepts in small, creative experiments:

Scroll-triggered Animations using IntersectionObserver
Combine Translate + Rotate + Scale + Opacity
Sequential Button Effects using Anime.js timeline()
Hover-based Button Effects
Fading and bouncing animations
Controlled animations on click using autoplay: false
Looping animations with glow effects
Easing combinations to create smooth transitions
Animated entrance for sections/cards
Animation triggered only once on scroll

🔨 Mini Project of the Day

I created a morphing loader animation using timeline and scale effects.

📌 Check out this Pen I made!

🌀 Scroll-Based Section Animation

This experiment brings in each .section with a smooth scroll effect — combining translateY, scale, rotate, and opacity:

📌 Check out this Pen I made!

🧠 What I Learned Today

How to use IntersectionObserver with Anime.js.
Creating timed sequences with anime.timeline().
Triggering animations only when needed (e.g., on scroll or click).
Building interactive UI elements like buttons and sections with polished animation feedback.
Mastery over core animation options and their real-world applications.

🚀 Up Next: Day 3 Goals

Dive into staggering animations for multiple elements.
Explore anime.set() and anime.remove().
Try animating SVG paths and stroke drawing.

Thanks for following along!

Let's keep the animation magic alive! ✨

#MyDaysOfAnimeJS #DevTo #WebDev #AnimeJS

✨"Day 1 with Anime.js — Breathing Life into a Static Webpage"

Ashish prajapati — Thu, 17 Apr 2025 06:40:09 +0000

📌 Introduction

Hey Devs! 👋

Today marks Day 1 of my journey into learning Anime.js, a lightweight JavaScript animation library that makes adding animations to your web projects ridiculously fun and powerful.

In this article, I’ll walk you through how I animated a simple landing page using Anime.js — from setup to final smooth transitions.

🚀 What I Built

I created a simple landing page with:

A navigation bar
A hero section with a title, description, and buttons
A footer for credit

Then I used Anime.js to animate these sections on page load — from logo slides to button scales — to give the site a vibrant entrance.

✅ 10 Micro Tasks I Completed

Setup HTML structure for the layout
Designed the page using Tailwind-inspired clean CSS
Integrated Anime.js via CDN
Created a logo entrance animation with translateX
Added staggered drop-in for navbar items
Applied scaling to the title
Animated text paragraphs with fade and upward motion
Scaled the buttons with subtle bounce
Animated the footer slide-in
Polished animation timing with easing and duration

💻 Tech Stack

HTML5 & CSS3
JavaScript
Anime.js
Google Fonts (Poppins)

🔥 Projects I Created

Landing Page with Anime.js Elements

Check out this Pen I made!
Smooth Intro Animation with Staggered Effects

Check out this Pen I made!

📁 GitHub Repository

🔗 GitHub Repo — animejs_learning

Browse through the full source code and contribute if you’d like!

🧠 What I Learned

How to integrate Anime.js with ease
Animate multiple DOM elements with stagger
Utilize properties like translate, opacity, scale
Fine-tune UX with custom easing and durations

🧪 What’s Next?

This was just the start. In upcoming sessions, I plan to dive into:

Anime.js timelines for complex sequences
SVG path animations for creative motion
Scroll-based triggers for interactive storytelling

🙌 Final Thoughts

This experiment showed me how easy and elegant Anime.js is. If you're into frontend or just want to spice up your UIs — Anime.js deserves a spot in your toolbox.

Let’s animate the web, one pixel at a time. ✨

🧑‍💻 Author

Ashish Prajapati

🔗 GitHub

📝 Dev.to

💼 LinkedIn

DEV Community: Ashish prajapati

🚀 From Excel to Web App: How I Built a Smart Assignment Management System for 125 Students

👋 Introduction

💡 The Idea: Turning Manual Management into a Smart Web App

🧭 What Is “Assignment Checklist”?

✨ Key Features

🧰 Tech Stack

⚙️ Architecture & Documentation (Coming Soon!)

🖥️ Preview & Source Code

🔍 Behind the Scenes: What I Learned

💬 Future Plans

🤝 Contributing

👨‍💻 About the Author

🏁 Final Words

🧩 TL;DR

🚀 Build Your Own Anime Explorer with HTML, Tailwind & the Jikan API!

🌟 Features

🧪 Tech Stack

🖼️ Screenshots

📂 Project Structure

🔧 How It Works

💡 Live Demo

🙋‍♂️ About the Developer

📜 License

✨ Let’s Connect!

🚀 Chrome 135 Brings `::scroll-button()` and `::scroll-marker()` — Say Goodbye to JavaScript Carousels

🆕 What Are ::scroll-button() and ::scroll-marker()?

::scroll-button()

::scroll-marker()

Why They're a Big Deal

🔥 Real-World Carousel Example (JavaScript Fallback)

💡 What This Will Look Like in Pure CSS

🎯 Why This Matters

🧪 Browser Support (as of Chrome 135)

🧠 Final Thoughts

🙋‍♂️ Let’s Talk!

🧾 Build Your Own Modern Resume Builder with HTML, Tailwind CSS & JavaScript

✨ Key Features

💻 Tech Stack

🧠 Why I Built This

🖼️ Available Templates

📥 How It Works (Under the Hood)

🧾 1. User Input

🎨 2. Template Selection Logic

📄 3. PDF Generation

📱 Responsive Design Sample

🚀 Getting Started

🏗️ Development Process

🔹 Planning Phase

🔹 Development Phase

🔹 Testing & Optimization

⚙️ Challenges & Solutions

🐞 PDF Rendering Glitches

📱 Mobile Responsiveness

🧪 Form Data Validation

🎭 Smooth Template Switching

🔮 Future Plans

📚 Key Learnings

🔗 Useful Links

🙌 Final Words

✨ Visualizing a Feeling Through Particles, Anime.js, and Dreamy Backgrounds ✨

🎯 What This Represents for Me

⚙️ How I Built My Feeling (Technologies Used)

📜 Small Glimpses of the Code

Particles Moving Like Gentle Chaos

A Heart That Breathes

Soft Transitions Between Feelings (Sections)

A Dream Floating Across the Sky (Flying Bird)

📸 A Glimpse Into My Dream

💬 What I Felt While Building This

🚀 If You Ever Feel Like Coding a Feeling...

🎉 Thank You for Reading

Day 7: Animated Landing Page — Interactive Product Showcase 🚀

🌟 Project Concept

🎨 Design Layout & Animation Flow

🔹 Header Section

🔹 Features Section

🔹 Product Showcase

🔹 Testimonials Section

🔹 Footer Section

🆕 What Are `::scroll-button()` and `::scroll-marker()`?

`::scroll-button()`

`::scroll-marker()`

🔵 Loader 2 — Text-Based