All solutions

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is solution for the Project Tracking Intro Component

🛠️ Built with

• 🕸️ Html 5, Vanilla CSS & JS
• 📱 Mobile First Approach

🎨 Features

• 🗜️ Fluid responsive using clamps 💯
• 💈 Custom Scrollbar
• 🖱️ Custom Cursor
• 🧏 Tested on windows OS with NVDA & preinstalled screen reader
• ⌨️ Accessible with keyboard
• 🍔 Accessible Hamburger

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is solution for the Interactive Comment Section Web App

🛠️ Built with

• 🕸️ Html 5, Tailwind CSS & React JS
• 📱 Mobile First Approach
• 🎥 Sprinkle of Framer Motion
• 🤹 Daisy UI

🎨 Features

• 🪁 Relative Source Font
• 💈 Custom Scrollbar
• ✨ Prettier Plugin
• 🔁 Theme Mode with localStorage
• 🧏 Tested on windows OS with NVDA & preinstalled screen reader
• ✔️ Tested with linter (eslint)
• ⌨️ Accessible with keyboard

📜 What I learnt?

• React Hooks
• Implementing ErrorBoundary
• Complex State Management
• Prop Validation
• Intermediate Accessibility

💡Bonus

• Switch Users
• Theme Toggle with system pref + (manual + localstorage)
• RealTime timestamp
• Detect Censor words and make it *
• Emoji Picker
• Hit Enter key to send the comment

Future Updates

• LocalStorage for comments
• Making more accessible

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my first React JS solution for the Job Listing Web App

🛠️ Built with

• 🕸️Html 5, Tailwind CSS & React JS
• 📱 Mobile First Approach

🎨 Features

• 📄 Live Job Search with Filters
• 🤹 Modified UI Design
• 🫧 CSS Animations
• 💯 Responsive
• 🪄 Vite Bundling
• 🔁 Dark Mode
• ✨ Prettier Plugin

📜 What I learnt?

• Components
• Props
• useState Hook
• Map & Filter

✅ Update : ➜ Dark Mode Added as System Preference 🆕

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Notification Page.

🛠️ Built with:

• 🕸️Html 5, Tailwind CSS & JS
• 📱Mobile First Approach.

🎨 Features

• 🫧 CSS Animations
• 🪁 Relative Source Font
• 🗜 Minified CSS & JS
• ✨ Prettier Plugin

📈 Scored 100% on Google Pagespeed Insights!

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the ToDo List Web App

🛠️ Built with

• Semantic HTML5 markup
• Tailwind CSS
• Vanilla JS

🎨 Features

• 🫧 CSS Animations
• 🤹 Custom UI Design
• 🌈 Dark Theme Mode
• 🪞 Glassmorphism

📜 What I learnt?

• Event handling
• Event bubbling
• Event Delegation
• Local Storage

💡 Challenges Faced

• Event Listener Problem
• Dynamically adding list items

✨ Bonus

• Multi select checkbox(top to bottom & vice-versa)
• Click on any checkbox and hold shift key then again click on another checkbox all the list in between will be selected.

✅Update ➜ Now localStorage also supported 🆕

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Result Summary.

🛠️ Built with:

• 🕸️Html 5, Tailwind CSS & Vanilla JS
• 📱Mobile First Approach.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 🎰 Live Percentile Calculation

📜 What I learnt?

• 🗂️ Parsing JSON data
• ⚙️ async, await in JS
• ⚡Level Up tailwind CSS & vanilla JS

📈 Scored 99% on Google Pagespeed Insights!

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Multistep form.

🛠️ Built with:

• 🕸️Html 5, Tailwind CSS & JS
• 📱Mobile First Approach.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations

📜 What I learnt?

• 📃 Making accessible form
• 📝 Validating form
• 🗜️ Using clamps
• 🪢 Using template literals
• 🔌Using plugins
• 🎚️ Toggling button
• 🪁 Using relative source font
• ⚡Level Up tailwind CSS & JS

✅ Update : 1 ➜ Phone Number Validation supported only for Indian Numbers.

✅ Update : 2 ➜ Now International Numbers also supported 🆕

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Product Preview component.

🛠️ Built with:

• 🕸️Html 5, Tailwind CSS & JS
• 📱Mobile First Approach.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 🖱️Custom Cursor
• 🤹 Custom UI Design
• 🪞Glassmorphism
• ⚡ Card Loading

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Room Website.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 💈 Custom Scrollbar

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my first Tailwind project solution.

• Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

• I am excited to explore more features in tailwind🤩.

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Intro Section with Dropdown menu.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 🪞 Glassmorphism
• 💈 Custom Scrollbar

📈 Scored 98% on Google Pagespeed Insights!.

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Loopstudio landing page.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 💈 Custom Scrollbar

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Advice generator app.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• ✨ Interval advice refresh

📈 Scored 99% on Google Pagespeed Insights!.

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Pricing Component With toggle button.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• ✨ Gradient Effect

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Intro Component with signup form.

🎨 I added some custom features:

• 🫧 CSS Animations

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Article Preview Component.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Coding Bootcamp Testimonials Slider..

🎨 I added some custom features:

• 🫧 CSS Animations

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Interactive rating component.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 🤹 Custom UI Design

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Base Apparel coming soon page.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 🌈 New Theme Mode

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the FAQ Accordion Card.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 🌘 Dark Mode

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Time tracking App.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 👆 Clickable 3 dots

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Age Calculator App.

🎨 I added some custom features:

• 🪄 Hover Effects
• 🫧 CSS Animations
• 👼 Birthday Card [ Enter present day and month ]

I'll be happy to hear any feedback and advice!🤗

👋Hello, Frontend Mentor coding community.

👨🏼‍💻This is my solution for the Ping Coming Soon.

• Completely responsive

I'll be happy to hear any feedback and advice!🤗

Open to feedback.