DEV Community: Aniket

Level Up Your AI Projects: 12 Frontend UI Kits That Actually Work ⚡

Aniket — Thu, 18 Dec 2025 13:01:33 +0000

Hey folks 👋

If you’ve been building AI products for a while, you’ve probably felt this:
the model works—but the UI makes it feel broken. You’re left wondering: Is the model thinking? Stuck? Silently failing ?

I’ve seen this pattern across multiple AI prototypes, dashboards, and internal tools. Not because the AI was bad, but because the interface couldn’t clearly communicate uncertainty, loading, or failure.

Most AI demos look impressive for about five minutes.

Then you try to actually use them.

Buttons feel vague. States are unclear. The AI might be powerful, but the interface makes it feel fragile in ways you don’t expect. Over time, one thing became clear: the UX problems usually aren’t about the model at all — they’re about the UI layer.

This isn’t a roundup of trendy UI kits or GitHub repos ranked by stars. These are frontend libraries I’ve either shipped with in real AI products, or seriously evaluated while building prototypes, dashboards, and internal tools.

In a few cases, they were the difference between a prototype that stalled and one that actually shipped.

Some saved days.

Some surfaced UX issues that would’ve otherwise been blamed on the model.

And a few popular options didn’t make the cut.

If you’re building AI products meant to be used, not just demoed — this list is for you.

TL;DR ⚡

If you’re building AI products that people actually use (not just demo):

shadcn/ui + Tailwind → best when the UI needs to evolve alongside prompts, streaming responses, retries, and edge cases
Radix UI → saves you from accessibility, focus, and keyboard bugs in complex AI flows
Tremor → fast, clean analytics and monitoring visuals out of the box
Aceternity UI → “shine moments” for landing pages and product surfaces
The rest → accelerate setup, accessibility, dashboards, or scaffolding without reinventing the wheel

Key takeaway: AI UX breaks when the UI can’t communicate uncertainty.

Loading, partial results, retries, errors, and iteration aren’t edge cases — they’re the product.

The right UI kits don’t just make things look good.

They make async behavior, change, and ambiguity legible.

Let’s get into the ones that actually held up in real AI products. 🚀

shadcn/ui — You Own the UI (That’s the Point) 👑

shadcn/ui works because it refuses to pretend to be magic.

You copy components into your project. They live in your repo. You read them. You change them. Nothing disappears behind a black-box dependency you’ll curse six months later.

For AI products, that matters more than it sounds. Prompts evolve. Controls get weird. You add states like thinking, streaming, and partial failure. shadcn doesn’t fight you when that happens.

On one internal analytics tool, I customized the same shadcn-based message list three times in a week to handle streaming responses, retries, and per-message metadata — and it never felt like I was fighting the library.

If your AI app has an admin panel or internal tooling, this is hard to beat.

Tailwind UI — Expensive, Yes. Wasteful, No. 💸

UI Kit by the makers of Tailwind CSS

UI Blocks by the makers of Tailwind CSS

Tailwind UI looks overpriced until you’ve built the same pricing page and settings layout for the third time.

The real value isn’t the components — it’s the decisions already made: spacing, hierarchy, empty states, responsive behavior. Things you’d otherwise bike-shed while the actual AI work waits.

On one AI SaaS project, Tailwind UI cut 2–3 days from building auth, pricing, and account pages. That time went straight into designing better error handling and usage views.

Radix UI — The Stuff You Forget Until It Breaks 🧩

Radix doesn’t care how your app looks. It cares that it behaves correctly.

Focus traps. Keyboard navigation. Screen readers. Portals and layering. The details you only notice when something breaks badly.

AI apps stack interactions fast — modals on top of chats, command palettes over dashboards, toasts firing while async jobs run. Radix handles the ugly edge cases so you don’t duct-tape them later.

HeroUI (Previously NextUI) — When You Need Something That Just Looks “Done” ✅

HeroUI is opinionated, but in a helpful way.

Install it and your app instantly looks presentable. Not flashy. Not ultra-custom. Just finished enough to show someone.

For AI demos, prototypes, or early validation, that matters. On one multi-model routing prototype, HeroUI made it possible to ship a credible UI in under a day — most of the time went into wiring the AI, not CSS.

Chakra UI — Not Trendy, Still Useful

Chakra UI isn’t exciting anymore, and that’s kind of the point.

It’s stable, accessible by default, and predictable. For internal AI tools or dashboards where clarity matters more than aesthetics, it works — and teams ramp up fast.

On a monitoring tool for LLM workflows, Chakra handled forms, layouts, and toasts with minimal friction. Nothing fancy. Nothing broke.

Mantine — One Library, Fewer Decisions 🧱

Mantine feels like someone got tired of wiring five libraries together and just solved it.

Forms, modals, notifications, hooks — all designed to work together. For AI products with lots of user input and async states, that cohesion matters.

In one workflow editor, Mantine replaced an entire layer of glue code. Instead of juggling multiple libraries, everything just worked together.

Aceternity UI — Use It Sparingly, Win Big ✨

Aceternity UI isn’t for dashboards.

It’s for moments — landing pages, hero sections, and storytelling where you need to show what your AI does before you explain it.

Used everywhere, it’s too much. Used once or twice, it makes a product feel premium. I’ve only ever used it in small doses — and that restraint mattered more than the animations themselves.

Magic UI — Motion That Serves a Purpose 🎬

Magic UI shines in the in-between moments.

Loading. Transitions. Feedback when something heavy is happening in the background. AI interactions are sensitive here — waiting without feedback feels broken.

In one content-generation tool with frequent 3–5 second waits, adding small motion to loading states dramatically reduced “Is this stuck?” reports. The system didn’t change. The communication did.

Flowbite — Structure First, Style Second

Flowbite is practical.

Sidebars, navbars, tables — the scaffolding every SaaS app needs. If your AI tool is more about function than flair, Flowbite gets you there fast.

On an internal admin app, it provided a solid layout and table structure quickly. Styling came later. Function shipped first.

Ant Design — When “Enterprise” Is Not a Dirty Word 🏢

Ant Design is unapologetically enterprise.

If your AI product deals with real data, real users, and real consequences, AntD’s tables and forms are battle-tested. It’s not trendy, but it’s trusted — and in some contexts, that matters more.

Tremor — Analytics Without Reinventing the Wheel 📊

Almost every AI product ends up explaining numbers.

Tremor makes dashboards a non-project. Clean charts, KPI cards, sensible defaults. On a model-usage dashboard, it went from idea to shippable view in under a day — most of the work spent querying data, not configuring charts.

HyperUI — For the Pages You Don’t Want to Think About

HyperUI is great for the stuff you don’t want to design twice.

Auth screens. Pricing pages. Onboarding layouts. Drop them in, tweak a little, move on. In one AI SaaS build, it turned days of layout work into a few hours.

A Stack That Scales With Your AI Product 🧠

If I were starting a serious AI product today, I’d go with:

shadcn/ui + Tailwind for core UI
Radix UI for accessibility and complex interactions
Tremor for analytics and metrics
Aceternity UI only for landing-page highlights

A comparison table between different UI kits libraries

I’ve tried more maximal setups. This one is the least annoying long-term — and it scales with the product instead of boxing you in early.

Conclusion: Tools Help, Judgment Still Matters More 🎯

After multiple AI-driven projects, one thing is clear: the hardest part isn’t integrating the model — it’s deciding how much confidence your UI should project when the system itself is probabilistic.

No UI kit solves that for you.

What these tools give you is leverage — fewer reinventions, fewer late-night UI battles, and more time to think about what the interface should communicate.

Tools matter.

Libraries matter.

But judgment still matters more.

Thank you so much for reading till the end 🙌

I hope this sparked some useful ideas around modern UI.

If I missed anything, sorry about that—UI is evolving fast, and there’s always more to explore. Feel free to share your thoughts or suggestions in the comments; I’d love to learn from you.

If you’re curious about what’s next in UI, here’s a follow-up that builds on these ideas and connects them to real-world design direction:

Aniket

Mar 5 '25

Top 10 UI Trends in 2025 You Must Follow 🚀

#html #css #webdev #design

Comments

3 min read

And if you want to see these concepts in action, I share UI experiments and side projects on 👉 GitHub

9 Modern JavaScript Tips for Beginners in 2025 🚀🔥

Aniket — Thu, 20 Mar 2025 14:02:20 +0000

Are you stepping into the world of JavaScript? With its ever-evolving features and improvements, JavaScript can sometimes feel overwhelming. But don’t worry!

This guide simplifies 9 essential JavaScript techniques that will help you write cleaner, more efficient, and error-free code in 2025.

Whether you're a beginner or refreshing your skills, these tips will make your coding journey smoother and more enjoyable. Let’s dive in!

1. Make Your Code Safer with Optional Chaining (?.) and Nullish Coalescing (??)

In JavaScript, accessing properties of undefined or null can cause runtime errors, to prevent these issues and write cleaner, error-free code, Optional Chaining (?.) and Nullish Coalescing (??) come to the rescue.

🔹 Optional Chaining (?.) – Prevents Errors from Missing Properties

Instead of throwing an error, optional chaining gracefully returns undefined if a property doesn’t exist.

const user = {}; 

// Without optional chaining (causes "Cannot read properties of undefined" error)
const userName = user.profile.name; 

// With optional chaining (returns undefined safely)
const safeUserName = user?.profile?.name; 
console.log(safeUserName); // Output: undefined

Use case: This is particularly useful when working with deeply nested objects where some properties may not always exist.

🔹 Nullish Coalescing (??) – Assigning a Safe Default Value

When a variable is null or undefined, the nullish coalescing operator provides a default value. Unlike the OR (||) operator, it does not mistakenly override valid falsy values like 0 or an empty string.

const userName = null;

// Provides default only if userName is null or undefined
const userDisplayName = userName ?? 'Guest User'; 

console.log(userDisplayName); // Output: 'Guest User'

Use case: Ideal for setting default values without unintentionally replacing valid values such as 0 or an empty string.

Key Takeaways

✅ ?. prevents runtime errors by safely accessing nested properties and returning undefined if they do not exist.
✅ ?? provides a default value only when a variable is null or undefined, making it more precise than ||.

2. Unpack Variables Easily with Destructuring

Destructuring allows you to efficiently extract values from arrays and objects in a single step, making your code cleaner and more readable.

Instead of accessing array elements using indexes, destructuring assigns values directly to variables.

const colors = ['red', 'blue', 'green'];
const [firstColor, secondColor] = colors; 

console.log(firstColor); // Output: 'red'
console.log(secondColor); // Output: 'blue'

Use case: This is useful when working with lists, function return values, or iterating through data structures.

Destructuring Objects

Object destructuring extracts properties into variables with matching names.

const person = { name: 'Alex', age: 25 };
const { name, age } = person;

console.log(name); // Output: 'Alex'
console.log(age); // Output: 25

Use case: Makes working with objects more convenient, especially when dealing with function parameters or API responses.

Providing Default Values
If a property is missing, you can assign a default value to prevent undefined.

const { name = 'Guest', age = 18 } = {};  
console.log(name, age); // Output: 'Guest' 18

Use case: Ensures variables always have meaningful values, even if the object is missing certain properties.

Key Takeaways

✅ Array destructuring allows easy extraction of elements without using indexes.
✅ Object destructuring simplifies working with object properties.
✅ Default values prevent undefined when a property is missing.

3. Use await Without Extra Functions in JavaScript

Traditionally, the await keyword could only be used inside async functions. However, with top-level await, you can now use await directly at the top level of an ES module

Using Top-Level await

But wait, before we explore Top-Level Await, it's essential to understand ES modules.

ES Modules (import and export) allow you to break your code into smaller, reusable files. They are the modern alternative to CommonJS (require) and are used in browsers and Node.js with "type": "module" in package.json.

Example of ES Modules :

utils.js (Exporting a function)

export function greet(name) {
  return `Hello, ${name}!`;
}

main.js (Importing the function)

import { greet } from "./utils.js";
console.log(greet("Alice")); // Hello, Alice!

Now that we understand how ES modules work, we can explore Top-Level Await, which allows await to be used directly in module-level code without an async function.

// Fetching data without an async function
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data); // Output: JSON data from the API

Why Use Top-Level await?

Simplifies asynchronous operations by removing unnecessary function wrappers.
Improves readability, especially for scripts that rely on fetching data or performing async operations immediately.

⚠️ Important Considerations

Top-level await only works in ES modules (type="module" in HTML or .mjs files). If used in a non-module script, it will cause a syntax error.

<script type="module">
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
</script>

Handle Errors Properly: Network requests can fail, so wrapping fetch in a try...catch block is recommended.

try {
    const response = await fetch('https://api.example.com/data');

    if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    console.log(data); // Output: JSON data from the API
} catch (error) {
    console.error('Error fetching data:', error);
}

Key Takeaways

✅ await can now be used without wrapping it inside an async function in ES modules.
✅ It simplifies async code by allowing direct asynchronous execution.
✅ Ensure your script is declared as a module to avoid errors.

4. Keep Properties Private in JavaScript Classes

JavaScript now supports private class fields using the # symbol. This ensures that properties cannot be accessed or modified directly from outside the class, improving data encapsulation.

Using Private Fields in a Class

The # before a property name makes it private—accessible only within the class.

class BankAccount {
  #balance; // Private property

  constructor(startingAmount) {
    this.#balance = startingAmount;
  }

  deposit(amount) {
    this.#balance += amount;
    return this.#balance;
  }

  getBalance() {
    return this.#balance; // Accessible inside the class
  }
}

const account = new BankAccount(1000);
console.log(account.getBalance()); // Output: 1000

// Attempting to access private property directly
console.log(account.#balance); // ❌ Error: Private field '#balance' must be declared in an enclosing class

Why Use Private Fields?

✅ Encapsulation: Prevents direct modification of sensitive data.
✅ Data Integrity: Ensures class behavior remains controlled.
✅ Security: Prevents accidental changes to important properties.

Key Takeaways

✅ Private properties are defined using #propertyName.
✅ They can only be accessed inside the class—not from outside.
✅ Provides better encapsulation and safer data handling.

5.Use Function Composition for Cleaner Code

Function composition allows you to combine multiple functions into a single operation, making your code more readable and maintainable.

Traditional Approach (Nested Calls)

Calling functions inside other functions can quickly become hard to read:

const double = x => x * 2;
const square = x => x * x;

const result = square(double(3)); 
console.log(result); // Output: 36

While this works, nesting functions can reduce code clarity

Using Function Composition

A compose function applies multiple functions in right-to-left order, improving readability.

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data);

const processData = compose(square, double);
console.log(processData(3)); // Output: 36

How It Works:

✅ compose(square, double) creates a new function (processData).
✅ When processData(3) is called:
double(3) → 6
square(6) → 36

Why Use Function Composition?

✅ Improves readability by avoiding deep nesting.
✅ Encourages reusability—functions remain independent and modular.
✅ Easier to test and maintain as each function handles a single responsibility.

Function composition is a powerful functional programming technique that keeps your JavaScript code clean and expressive. 🚀

6.Write Cleaner Code with Functional Programming

Functional programming encourages immutability—avoiding direct modifications to existing data. This leads to predictable, bug-free code.

Avoiding Direct Mutations

Instead of modifying an array directly, create a new array with the updated data.

// Add an item without changing the original array
const addItem = (array, item) => [...array, item];

const fruits = ['apple', 'banana'];
const moreFruits = addItem(fruits, 'orange');

console.log(fruits); // Output: ['apple', 'banana'] (unchanged)
console.log(moreFruits); // Output: ['apple', 'banana', 'orange']

Why Is This Better?

✅ Prevents unintended side effects—original data remains unchanged.
✅ Improves maintainability—functions behave consistently.
✅ Supports pure functions—functions always return the same output for the same input.

7. Simplify Date Handling with Modern APIs

Working with dates in JavaScript used to be cumbersome with the native Date() methods. Modern approaches, like date-fns or Intl.DateTimeFormat, make it much easier.

Using date-fns for Easy Date Formatting

date-fns provides simple, immutable, and lightweight utilities for handling dates.

📌 Installation: date-fns requires ES modules (type="module") when used in modern browsers.

Option 1: Using npm
npm install date-fns

Option 2: Using a CDN

<script type="module">
  import { format, addDays } from ‘https://cdn.jsdelivr.net/npm/date-fns@latest/+esm’;

  const today = new Date();
  const nextWeek = addDays(today, 7);

  console.log(format(nextWeek, 'yyyy-MM-dd')); // Output: 2025-03-27 (example)
</script>

Why Use date-fns?

✅ Readable and concise syntax
✅ Immutable functions (doesn’t modify the original date)
✅ Supports formatting, parsing, and manipulating dates

Alternative: Using Intl.DateTimeFormat (No Extra Library Required)

For localization and custom formatting, Intl.DateTimeFormat is built into JavaScript:

const today = new Date();
const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'full' });

console.log(formatter.format(today)); // Output: Wednesday, March 20, 2025

Key Takeaways

✅ Use date-fns for easy date manipulation and formatting (requires type="module").
✅ Use Intl.DateTimeFormat for built-in, locale-aware formatting.
✅ Avoid modifying Date objects directly—work with immutable functions instead.

8. Understand Errors Better with Error Cause

Debugging errors can be difficult when multiple operations depend on each other. The Error Cause feature in JavaScript allows you to attach the original error when throwing a new one, making debugging more insightful.

How It Works

When an error occurs, instead of losing the original error details, you can pass it as a cause inside a new error.

try {
  throw new Error('Database connection failed');
} catch (error) {
  throw new Error('User data fetch failed', { cause: error });
}

Why Use cause?

✅ Provides a clearer error chain when debugging.
✅ Retains the original error message and context.
✅ Improves error handling in large applications.

Accessing the Cause of an Error

You can retrieve the original error using .cause:

try {
  try {
    throw new Error('Database connection failed');
  } catch (error) {
    throw new Error('User data fetch failed', { cause: error });
  }
} catch (error) {
  console.error(error.message); // Output: User data fetch failed
  console.error(error.cause.message); // Output: Database connection failed
}

Key Takeaways

✅ Error cause ({ cause: error }) helps maintain error context.
✅ Debugging becomes easier by preserving the original error details.
✅ Use .cause to retrieve and log deeper error information.

9. Make Your App Faster with Web Workers

Heavy computations can slow down your JavaScript applications, making them unresponsive. Web Workers allow you to run tasks in the background, keeping the main thread free for a smooth user experience.

How Web Workers Improve Performance

Web Workers run scripts in the background, independent of the main JavaScript thread. This prevents UI freezes when performing expensive operations.

Using Web Workers

1️⃣ Create a Web Worker (main.js)

The main script creates a worker and communicates with it.

// main.js
const worker = new Worker('worker.js');

// Send data to the worker
worker.postMessage({ task: 'calculate', data: [1, 2, 3] });

// Listen for worker response
worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

Here, we send an array of numbers to worker.js for processing.

2️⃣ Write the Worker Script (worker.js)
This script runs separately and processes data in the background.

// worker.js
self.onmessage = (event) => {
  const result = event.data.data.map(num => num * 2); // Example task
  self.postMessage(result); // Send result back
};

self.onmessage listens for messages from main.js.
postMessage() sends the processed result back.

Key Benefits of Web Workers

✅ Keeps UI responsive by offloading tasks to a background thread.
✅ Ideal for heavy computations like data processing or image manipulation.
✅ Runs in parallel without blocking the main JavaScript thread.

Important Notes

✅ Web Workers cannot access the DOM directly.
✅ They work best for CPU-intensive tasks (e.g., large calculations,
file processing).
✅ Communication between workers and the main thread happens via messages.

Conclusion

JavaScript in 2025 is packed with powerful features that make coding safer, cleaner, and more efficient. You don’t need to master everything at once—just start using one or two of these techniques, and soon they'll feel natural.

Remember: Every expert was once a beginner. Keep practicing, stay curious, and enjoy your coding journey! 🚀💡

25+ Essential JavaScript One-Liners You Need to Know in 2025 🚀🔥

Aniket — Tue, 18 Mar 2025 05:29:46 +0000

Hello Devs! Welcome back to another article.

JavaScript continues to evolve, providing developers with more concise and efficient ways to write code. Whether you're an experienced programmer or just starting your journey, mastering these modern one-liners can significantly enhance your productivity.

These modern JavaScript one-liners will streamline your development workflow in 2025, helping you write cleaner, faster, and more efficient code.

Array Manipulations

1. Find the Maximum Value in an Array

Math.max(...array);

Uses the spread operator to pass elements as arguments to Math.max().

2. Remove Duplicates from an Array

[...new Set(array)];

Converts the array to a Set (which removes duplicates) and back to an array.

3. Flatten a Nested Array

const flatten = (arr) => arr.flat(Infinity);

Flattens an array to any depth using flat(Infinity).

4. Get a Random Element from an Array

const randomElement = (arr) => arr[Math.floor(Math.random() * arr.length)];

Selects a random element from an array.

5. Get the Last Item of an Array

const lastItem = (arr) => arr.at(-1);

Uses .at(-1) for cleaner syntax to get the last element.

6. Get the First N Elements of an Array

const firstN = (arr, n) => arr.slice(0, n);

Extracts the first n elements from an array.

Object Utilities

7. Check if an Object is Empty

const isEmptyObject = (obj) => Object.keys(obj).length === 0;

Returns true if the object has no properties.

8. Merge Multiple Objects

const mergeObjects = (...objs) => Object.assign({}, ...objs);

Combines multiple objects into one.

9. Deep Clone an Object

const clone = (obj) => structuredClone(obj);

Uses the built-in structuredClone() method for deep cloning.

(Enhanced for Compatibility 👇)

Instead of just structuredClone(obj), provide a fallback for older browsers:

const deepClone = (obj) => JSON.parse(JSON.stringify(obj));

Why? structuredClone(obj) is modern but not supported in all environments. This alternative works in most cases, except when cloning functions or undefined values.

10. Convert an Object to an Array

const objToArray = (obj) => Object.entries(obj);

Turns an object into an array of key-value pairs.

(With Sorting Option 👇)

Instead of just Object.entries(obj), allow sorting:

const objToArray = (obj, sort = false) => {
    const entries = Object.entries(obj);
    return sort ? entries.sort(([keyA], [keyB]) => keyA.localeCompare(keyB)) : entries;
};

Why? Adds a sorting option, making the function more flexible for use cases where ordered key-value pairs are needed.

11. Get Unique Elements from an Array of Objects (by Property)

const uniqueBy = (arr, key) => [...new Map(arr.map(item => [item[key], item])).values()];

Filters unique objects based on a specific property.

String Operations

12. Capitalize the First Letter of a String

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

Capitalizes only the first letter while keeping the rest unchanged.

13. Convert a String to a Slug

const slugify = (str) => str.toLowerCase().trim().replace(/\s+/g, '-');

Replaces spaces with hyphens and ensures lowercase formatting.

14. Reverse a String

const reverseString = (str) => [...str].reverse().join('');

Splits the string into an array, reverses it, and joins it back.

15. Count Occurrences of a Character in a String

const countChar = (str, char) => str.split(char).length - 1;

Counts how many times a specific character appears in a string.

16. Check if a String Contains a Substring (Case Insensitive)

const containsIgnoreCase = (str, substr) => str.toLowerCase().includes(substr.toLowerCase());

Performs a case-insensitive substring check.

17. Generate a Random Alphanumeric String

const randomAlphaNum = (length) => [...Array(length)].map(() => (Math.random().toString(36)[2])).join('');

Generates a random alphanumeric string of a given length.

Utility Functions

18. Get the Current Timestamp

Date.now();

Returns the current timestamp in milliseconds.

19. Check if a Variable is an Array

Array.isArray(variable);

Returns true if the variable is an array.

20. Convert Query Parameters to an Object

const parseQuery = (url) => Object.fromEntries(new URL(url).searchParams);

Parses query parameters from a URL into an object.

21. Format a Date in YYYY-MM-DD Format

const formatDate = (date) => date.toISOString().split('T')[0];

Extracts the date portion from an ISO date string.

22. Shorten an Array by Removing Falsy Values

const cleanArray = (arr) => arr.filter(Boolean);

Removes false, 0, null, undefined, NaN, and "" from an array.

Randomization & Color Utilities

23. Generate a Random Integer Between Two Values (Inclusive)

const randomBetween = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

Efficiently generates a random number within the specified range.

24. Generate a Random HEX Color

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;

Generates a random hexadecimal color code.

25. Convert RGB to HEX

const rgbToHex = (r, g, b) => `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;

Converts RGB values to a HEX color code.

26. Generate a UUID (Version 4)

const uuid = () => crypto.randomUUID();

Uses the built-in crypto module to generate a unique identifier.

(Alternative for Older Browsers) 👇

Instead of just crypto.randomUUID(), create a UUID manually:

const uuid = () =>
    'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char) => {
        const rand = (Math.random() * 16) | 0;
        return (char === 'x' ? rand : (rand & 0x3) | 0x8).toString(16);
    });

Why? crypto.randomUUID() is modern but not available in all browsers. This method provides a reliable fallback.

Update: Based on feedback, we’ve improved some one-liners (9, 10, 26) to add more functionality beyond built-in methods.

Final Thoughts

Mastering these JavaScript one-liners will make your code cleaner, more efficient, and easier to maintain. Whether you're optimizing performance or improving readability, these techniques will save you time and effort in 2025.

Do you have a favorite one-liner that’s not on this list? Share it in the comments below! 🚀

10 Git Commands You Probably Didn't Know (But Should!)

Aniket — Thu, 06 Mar 2025 13:10:42 +0000

Let’s be real—Git is awesome… until it turns into an unsolvable puzzle. You start with the basics: git add, git commit, git push, and life is good. But then—boom! A commit vanishes. A merge goes wrong. Your branch looks like a crime scene.

Instead of panicking (or rewriting everything), here are 10 powerful Git commands that can save the day. Master these, and you’ll go from "just another developer" to the Git guru everyone turns to! 🚀

1. git log -S – Find When a Specific Line Changed

Ever wondered who introduced that weird piece of code or why a particular change was made? Instead of manually scanning the commit history, let Git do the detective work for you!

What it does:

🔍 Tracks changes to a specific string across your repo’s history.
When to use it:

When to use it:

✅ You need to find who wrote a specific piece of code and understand its context.

Command:

git log -S 'specific_text'

Real-World Scenario:
You're debugging a critical issue and discover a hardcoded API key in the code. Using: git log -S 'API_KEY' you can trace back to the exact commit where it was introduced, helping you fix it faster.

2. git rev-parse – Decode Git References

Think of git rev-parse as Git’s Swiss Army knife—it helps you extract useful repository details effortlessly.

What it does:

🔹 Converts Git references into commit hashes and provides metadata about branches, remotes, and repo locations.

When to use it:

✅ You need to retrieve the latest commit hash or the absolute path of your repository.

Commands:

git rev-parse HEAD    # Get current commit hash
git rev-parse --show-toplevel    # Get root directory of the repository

Real-World Scenario:
Before running a destructive command like git reset --hard, use:
git rev-parse --show-toplevel to ensure you’re in the correct repository (so you don’t nuke the wrong project!).

3. git fsck – Check for Corrupt Objects

Repo acting weird? Before you panic, run git fsck.

What it does:

🛠 Scans your Git repository for corrupt or missing objects.

When to use it:

✅ You suspect data corruption after a failed fetch or incomplete clone.

Command:

git fsck

Real-World Scenario:
You cloned a massive repository, but Git is throwing errors about missing objects. Running git fsck can pinpoint and possibly fix the issue.

4. git shortlog – Get a Summary of Contributions

Want a quick summary of who’s been committing the most? git shortlog breaks it down for you.

What it does:

📊 Groups commit history by author and commit count.

When to use it:

✅ You need to generate contribution reports for your team.

Command:

git shortlog -sn

Real-World Scenario:
Before your performance review, use git shortlog -sn to see how many commits you’ve made and get a sense of your contributions.

5. git log --oneline --graph --decorate --all [ Compare Multiple Branches Visually ]

Instead of struggling with git show-branch, use this cleaner visual representation of branch history.

What it does:

📈 Displays a graphical view of commits and branches.

When to use it:

✅ You need to compare multiple branches at a glance.

Command:

git log --oneline --graph --decorate --all

Real-World Scenario:
Working with multiple feature branches? This command gives you an easy-to-read history, showing how branches diverge and merge.

6. git log --raw – Detailed Change Log

Since git whatchanged is deprecated, git log --raw is the new go-to for analyzing changes deeply.

What it does:
📜 Displays a detailed history of changes, grouped by commit.

When to use it:
✅ You need in-depth analysis of repository changes.

Command:

git log --raw

Real-World Scenario:
Imagine you're working on a security-sensitive project where commit integrity is crucial. Before merging a commit, git verify-commit <commit-hash> ensures it was genuinely signed by the expected contributor. This is especially valuable in open-source projects where trust and authenticity matter.

7. git checkout -p – Selectively Checkout Changes

Need to undo only a specific part of a file? git checkout -p lets you pick and choose.

What it does:
✂️ Allows interactive selection of which parts of a file to checkout.

When to use it:
✅ You want to undo some changes while keeping others.

Command:

git checkout -p

Real-World Scenario:
You’ve made multiple changes to a file but only want to discard one function’s edits while keeping the rest. git checkout -p makes it easy.

8. git verify-commit – Check Commit Integrity

Worried about tampered commits? git verify-commit ensures they’re legit.

What it does:

🔒 Verifies GPG-signed commits for authenticity.

When to use it:

✅ You need to validate a commit’s authenticity before trusting it.

Command:

git verify-commit <commit-hash>

Real-World Scenario:
In security-sensitive projects, commit integrity is crucial. Before merging a commit, use git verify-commit <commit-hash> to confirm it was genuinely signed by the expected contributor. This is especially valuable in open-source projects where trust and authenticity matter.

9. git grep – Search Across Your Entire Repository

Manually searching for code is slow —git grep makes it effortless.

What it does:

🔍 Searches for a specific string across all versions of a file.

When to use it:

✅ You need to quickly locate code in a large repository.

Command:

git grep 'function_name'

Real-World Scenario:
Instead of opening each file, run: git grep 'fetchData'
to instantly find every occurrence of a function in your project.

10. git replace – Temporarily Override Commits

Want to test changes without modifying history? git replace is your friend.

What it does:

🚧 Creates a temporary reference that overrides an existing commit.

When to use it:

✅ For testing changes or simulating different commit versions without permanently modifying the repo.

Command:

git replace <old-commit> <new-commit>

⚠️ Important: Use with caution! This is not recommended for shared repositories without clear communication.

Enhancing Your Git Workflow

Git offers a wealth of tools to streamline your development process. By exploring and mastering these commands, you'll be better equipped to handle common Git challenges and improve your overall efficiency.

Bonus Tip: Git Aliases

To make some of these longer commands easier to use, consider creating Git aliases. For example, to create an alias for the branch visualization.

command:

git config --global alias.lg "log --oneline --graph --decorate --all"

Then, you can simply use git lg to execute the command.

Final Thoughts

Git is full of hidden gems that can make you more efficient. The more you explore, the smoother your workflow becomes.

Thank you for reading this article till the end! 🙌 Which Git command surprised you the most? Let’s chat in the comments! 🚀

Top 10 UI Trends in 2025 You Must Follow 🚀

Aniket — Wed, 05 Mar 2025 04:18:50 +0000

Staying ahead in UI design means keeping up with the latest trends. 2025 is bringing exciting design styles that push boundaries, enhance user experiences, and create visually stunning interfaces.

Top UI trends in 2025 that will dominate the design world 🎨✨

1. AI-Powered Design 🤖

AI is revolutionizing UI design by generating dynamic, personalized user experiences. With AI-driven design tools, interfaces can adapt to user behavior in real time, improving accessibility and engagement.

👉 AI-assisted UI generation
👉 Smart adaptive layouts
👉 Personalized content recommendations

2. Glassmorphism Design 🪟

A sleek and futuristic trend, Glassmorphism gives UI elements a frosted-glass appearance with transparency and blur effects. It adds depth and elegance to interfaces.

👉 Transparent, blurred backgrounds
👉 Soft light effects
👉 Layered depth for modern aesthetics

3. Inflated 3D Design 🎈

This trend embraces soft, inflated, and bouncy 3D elements to create playful and engaging interfaces. These designs make UI elements feel more interactive and touch-friendly.

👉 Realistic and soft 3D shapes
👉 Smooth shading and lighting effects
👉 Friendly, approachable visuals

4. Maximalist Design 🎨

While minimalism dominated for years, maximalism is making a comeback with bold colors, intricate patterns, and exaggerated typography. It’s all about expressing creativity without limits.

👉 Bright, vibrant color schemes
👉 Overlapping elements and mixed textures
👉 Energetic, expressive compositions

5. Retro-Futurism Design 🕹️

A nostalgic yet futuristic approach, retro-futurism blends old-school aesthetics with modern UI elements, often inspired by sci-fi visuals and neon color palettes.

👉 Pixel art meets modern interfaces
👉 Sci-fi-inspired typography
👉 Cyberpunk color schemes

6. Textured Grains 🖌️

Adding grainy textures to digital designs softens the look, making interfaces feel more organic and warm. It brings a handcrafted, editorial feel to digital UIs.

👉 Subtle grain overlays
👉 Hand-drawn illustrations
👉 Vintage-inspired aesthetics

7. Bold Minimalism 🎭

Minimalism is evolving with a bolder approach—strong color contrasts, oversized typography, and impactful whitespace usage to create dramatic yet clean interfaces.

👉 Large, expressive typography
👉 Contrasting color blocks
👉 Emphasis on negative space

8. Pixelated Fonts & Branding 🔳

Pixel-based typography and elements are making a comeback, bringing an old-school video game aesthetic to modern UI designs.

👉 Low-resolution text effects
👉 Retro gaming-inspired visuals
👉 Nostalgic yet innovative branding

9. Neubrutalism 🏗️

A rebellious take on traditional UI design, Neubrutalism embraces raw aesthetics, high-contrast colors, and bold outlines, often resembling early web aesthetics.

👉 Sharp edges and bold outlines
👉 High-contrast, loud color schemes
👉 Grid-based, unconventional layouts

10. Neumorphism 2.0 🌇

Neumorphism is making a comeback with improved accessibility and usability, blending soft shadows, subtle highlights, and realistic UI components.

👉 Soft, embossed elements
👉 Better contrast for accessibility
👉 Realistic and touch-friendly design

Final Thoughts: The Future of UI Design in 2025

From AI-powered adaptive UI to bold maximalist compositions, UI design in 2025 is pushing creativity to new levels. Whether you prefer sleek glassmorphism or playful 3D elements, staying updated with these trends will help you craft visually stunning experiences.

The Ultimate Guide to Free Illustrations & Graphics Libraries for Web Projects (2025 Edition) 🚀

Aniket — Sat, 01 Mar 2025 17:29:42 +0000

Are you seeking the best free illustrations and graphics libraries for your web design projects? High-quality visuals enhance UI/UX, engagement, and storytelling.

Whether you're designing a landing page, blog, or SaaS platform, this guide covers the top free SVG, vector, and animated illustration resources to elevate your designs in 2025! 🎨✨

Note: If there is anything else that should be added, feel free to mention it in the comments below 👇

Undraw- Beautiful, Customizable SVG Illustrations

Undraw is a go-to resource for modern, clean, and customizable SVG illustrations. With its simple color customization tool, you can match illustrations to your brand's palette seamlessly. Ideal for startups, landing pages, and dashboards.

✅ Fully customizable colors
✅ No attribution required
✅ Continuously updated with new illustrations

Storyset- Animated & Static Illustrations

Storyset by Freepik offers unique illustrations in both static and animated formats. You can edit colors, styles, and animations directly on their platform, making it perfect for interactive web projects.

✅ Editable animations (Lottie format available)
✅ Various illustration styles: Flat, Outline, Hand-drawn, etc.
✅ Free for personal and commercial use (with attribution)

DrawKit - Hand-Drawn & Vector Illustrations

DrawKit provides beautiful hand-drawn and vector-based illustrations, perfect for creative projects. They offer a mix of free and premium resources.

✅ Free, high-quality hand-drawn illustrations
✅ Available in PNG, SVG, and AI formats
✅ Ideal for blogs, presentations, and marketing materials

Open Doodles - Free Sketchy Illustrations

Open Doodles offers quirky, freehand-drawn illustrations with a playful vibe. These are perfect for projects needing a relaxed, informal feel.

✅ Open-source illustrations
✅ Download in PNG, SVG, or as code snippets
✅ Fun and casual aesthetic for informal projects

Iconscout- Free Illustrations, 3D Graphics & Lottie Animations

Iconscout is an all-in-one resource for designers and developers, offering illustrations, 3D assets, and animated Lottie files.

✅ Free vector and 3D illustrations
✅ Lottie animations for interactive elements
✅ Easily customizable with online tools

ManyPixels - Ready-to-Use SVG Illustrations

ManyPixels provides a variety of illustration styles, including flat, isometric, and outline designs. The best part? They're all free for commercial use!

✅ Various illustration styles available
✅ Download in SVG or PNG
✅ No attribution required

IRA Design - Gradient & Abstract Illustrations

If you're looking for gradient-based illustrations that stand out, IRA Design is a perfect choice. It allows you to customize colors and elements easily.

✅ Unique gradient and vector designs
✅ Customizable components
✅ Perfect for modern web and mobile UIs

Blush - Create Customizable Illustrations

Blush lets you generate illustrations with different styles and characters. You can customize various elements to create unique visuals tailored to your project.
✅ Highly customizable illustrations
✅ Designed by top illustrators
✅ Free for personal use (attribution required)

Conclusion: Choose the Best Illustration Library for Your Needs
With so many fantastic free illustration and graphics libraries available, the possibilities for your web projects are endless! Whether you need customizable SVGs, animated illustrations, or hand-drawn sketches, the above resources have you covered. 🚀

🌟 Bonus Tip: Optimize Your Web Project for Speed & SEO
Use compressed SVGs and lazy loading to ensure your site remains fast and lightweight. Fast-loading visuals improve SEO and user experience!

👉 Which illustration library do you love the most? Let us know in the comments! 💬

Top UI Design Platforms to Inspire Your Creativity in 2025 🚀

Aniket — Sat, 18 Jan 2025 08:44:32 +0000

Welcome, Designers and Dreamers! 🎨✨

In the ever-evolving field of UI design, staying inspired is key to producing innovative and user-friendly interfaces. The right resources not only help fuel your creativity but also enhance your productivity and efficiency.

Whether you're looking for fresh ideas, design patterns, or ways to streamline your workflow, the platforms we're about to explore offer valuable tools for every designer.

These carefully selected design resources are perfect for sparking new ideas, boosting your creative process, and staying on top of the latest trends. Whether you're an experienced professional or just starting out, you'll find inspiration that can take your designs to the next level.

Let’s explore these platforms and see how they can help unlock your creative potential in 2025!

Land-book 🖥️💻

Tagline - Website Design Inspiration Gallery

📚 Offers a vast collection of beautifully designed websites curated for inspiration.
🎨 Features a variety of styles and categories for tailored design ideas.
👩‍💻 Ideal for web designers seeking fresh perspectives on layout and aesthetics.
🔍 Tip: Use the filter option to sort inspiration by categories like color schemes or typography for more precise results.

Mobbin 📱📲

Tagline: Discover Real-World Design Inspiration

🌍 Specializes in design inspiration from real-world applications and apps.
📚 Provides an extensive library of app screenshots and patterns from top companies.
💡 Helps designers adapt practical, trend-driven design solutions.
Tip: 🔗 Check out their community to network and share feedback on your designs.

Design Vault 🎨🔧

Tagline: Design Inspiration & UI Patterns From Real Products

🖥️ A go-to platform for UI/UX inspiration derived from real products.
📏 Features curated patterns, user flows, and detailed design elements.
🌟 Great for creating user-friendly and innovative interfaces.
Tip: 🧠 Dive into user flows and patterns for in-depth learning on UI/UX best practices.

Dribbble 🎨🌍

Tagline: Discover the World’s Top Designers

💼 A prominent platform where designers showcase creative projects and portfolios.
✨ Offers top-tier inspiration across various design disciplines.
🌐 Provides opportunities to connect with a global community of design professionals.
Tip: 🔔 Follow your favorite designers and interact with them for ongoing creative inspiration.

Awwwards 🏆🌟

Tagline: Website Awards for Recognizing the Best Designers and Developers

👏 Celebrates the exceptional talent of web designers, developers, and agencies.
🏅 Features award-winning websites that set benchmarks for innovation and creativity.
🚀 A must-visit for cutting-edge web design inspiration.
Tip: 🏆 Browse the "Winners" section to find the most exceptional designs and get inspired.

Behance 🌐🎨

Tagline: The World’s Largest Creative Network for Showcasing Work

🌍 A massive creative network for showcasing portfolios and projects.
🎭 Covers various creative fields, including UI/UX design and digital art.
🤝 Perfect for discovering inspiring projects and networking with industry talent.
Tip: 🔍 Use the "Discover" feature to explore new creative trends and projects from different industries.

SiteInspire 🌟🌍

Tagline: A Showcase of the Best Web Design Inspiration

🖥️ A well-curated gallery of exceptional website designs.
🔍 Allows filtering by style, type, and subject for targeted inspiration.
🎨 Showcases designs that combine functionality and aesthetic brilliance.
Tip: 🔎 Use the filter to search for designs that match your project requirements, like e-commerce or corporate sites.

PageFlows ⚡💫

Tagline: The Best UI Design Inspiration, Daily

✨ Focused on user interface animations and design.
📅 Offers daily updates featuring interactive and functional elements.
🌀 Ideal for discovering creative ideas for micro-interactions and animations.
Tip: 💥 Check the daily updates for fresh UI animation ideas to keep your designs interactive and engaging.

Cssnectar 🎨💻

Tagline: CSS Website Design Showcase for Web Designers and Developers

🏅 Highlights websites ranked based on design, coding, and creativity.
📝 Offers a meticulous review process to ensure high-quality examples.
🖥️ An excellent source for exploring modern CSS-based designs.
Tip: 🌟 Explore the top-rated websites for unique CSS techniques that you can incorporate into your own designs.

CollectUI 📅🎨

Tagline: Daily Inspiration Collected from Dribbble

- 📅 Aggregates daily design inspiration from Dribbble.

- 🎮 Covers diverse design elements such as forms, dashboards, and cards.

- 🔮 Perfect for designers looking for creative component inspiration.

- Tip: 🌱 Look for trending UI elements to stay up-to-date with the latest design trends.

One Page Love 📝💡

Tagline: One-Page Website Inspiration

🔥 Specializes in showcasing minimalist one-page website designs.
🎯 Features examples that are both visually appealing and functional.
💡 A great resource for crafting impactful and simple layouts.
Tip: 👁️ Explore one-page designs for inspiration on making an impactful first impression with minimal content.

Really Good UX 🧑💻🔍

Tagline: Examples of UX Done Right

📊 Features exceptional UX design practices from various industries.
🔎 Breaks down user flows and interfaces for practical learning.
🚀 Ideal for improving usability and user experience in designs.
Tip: 💡 Pay attention to user flows for insights into creating seamless navigation experiences.

UI Patterns 🔧🖌️

Tagline: User Interface Design Patterns Library

- 🗂️ A library of design patterns solving common interface challenges.

- 📚 Categorized solutions make it easy to find functional inspiration.

- 🎯 Perfect for enhancing usability and problem-solving in UI design.

- Tip: 🛠️ Use categorized design patterns to quickly solve specific UI challenges in your projects.

Pttrns 📱📱

Tagline: The Finest Mobile Design Patterns

📱 Dedicated to mobile app UI design patterns.
🗂️ Offers examples categorized by platform and feature.
🌍 Aimed at mobile designers looking for specific, actionable inspiration.
Tip: 📲 Sort by platform (iOS/Android) to find relevant design patterns for your next mobile project.

Httpster ⚡🎨

Tagline: Websites That Are Not Your Usual Stuff

🔥 Showcases unconventional and creative website designs.
💥 Highlights layouts that break away from traditional templates.
🎨 A great resource for exploring unique and experimental web ideas.
Tip: 🌟 Browse the unconventional designs to inspire bold, out-of-the-box concepts.

Webflow Showcase 🌐💡

Tagline: Explore Popular Webflow Projects

🌍 A collection of impressive projects built using the Webflow platform.
🛠️ Demonstrates the capabilities of modern web design tools.
🚀 Inspires cutting-edge and tool-based web designs.
Tip: 🔍 Check out interactive and responsive design examples for inspiration on your Webflow projects.

FWA (Favourite Website Awards) 🏆🔥

Tagline: Celebrating Cutting-Edge Creativity

🏅 Recognizes websites that push boundaries in creativity and innovation.
💡 Highlights avant-garde designs that redefine web standards.
🚀 A top source for discovering experimental and groundbreaking designs.
Tip: 🔥 Check out award-winning websites for ideas that push creative boundaries in web design.

Lapa Ninja 🚀🎯

Tagline: Best Landing Page Inspiration

📈 Provides a curated selection of high-converting landing page designs.
🖼️ Focuses on both functionality and aesthetic appeal.
🎯 Ideal for crafting visually engaging and effective landing pages.
Tip: 📊 Analyze the high-converting landing pages to learn strategies for user engagement and conversion.

As discussed above, the platforms mentioned provide a wide range of tools and inspiration that cater to designers at all levels. Whether you're looking for design patterns, app-specific inspiration, or innovative layouts, these resources will ignite your creativity and keep you updated with the latest trends in 2025. 🚀🌟

Why These Resources Stand Out 🌍💬

Ease of Use 🧑‍💻

Many of these platforms are designed to make inspiration and creative exploration easier and faster. Platforms like Dribbble and Awwwards have clean, user-friendly interfaces that make finding high-quality design examples a breeze.

Community Support 🤝

The sense of community is another reason these resources stand out. Websites like Behance and Dribbble provide opportunities for networking and connecting with like-minded designers. The global design community is a source of ongoing support, feedback, and collaboration.

Customization 🛠️

Platforms like Webflow and UI Patterns stand out because of their customization capabilities. Whether it’s a fully customizable web design tool or a design pattern library, these resources let you tailor your work to your specific needs.

So, what are you waiting for? 🚀 Take advantage of these incredible resources and supercharge your design process! Whether you're looking for daily inspiration, UI patterns, or real-world applications, there’s a tool for every need. 🎨💡

What’s your go-to design resource for inspiration? 🤔 Share your thoughts in the comments below – we'd love to hear from you! 💬 And while you're here, don't forget to check out my other articles for more helpful tips and insights to elevate your design game! 📚✨

Thank you for reading! 🙏

Revamp Your Icon Game: The Best Open-Source Icon Libraries of 2023 🚀

Aniket — Tue, 07 Mar 2023 13:58:41 +0000

Are you looking for the best open-source icon libraries to enhance your design projects in 2023? Look no further!

Icons play a vital role in modern web design, helping to guide users and enhance the overall look and feel of a website or application. In this post, we'll explore the top best open-source icon libraries for 2023.

These libraries offer a wide variety of high-quality icons that can be used in your projects for free, with or without any licensing restrictions. Whether you're a designer, developer, or just looking for some fresh icon inspiration, our list has got you covered.

Note: If there is anything else that should be added, feel free to mention it in the comments below 👇

Font Awesome

Font Awesome is one of the most popular icon libraries out there. It's easy to use, customizable, and works with a variety of frameworks and tools. Plus, it's updated regularly with new icons and features. According to Google, As of 2020, Font Awesome was used by 38% of sites that use third-party font scripts, placing Font Awesome in second place after Google Fonts

Features

Opensource ( Free to use ) 🥳
Available as NPM package 📦
Available as CDN 📶
License: Freemium 😋
2nd placed after google fonts 👓
71k+ ⭐ on Github

Material Symbols

Material Design Icons or material symbols is a comprehensive icon library with over 2,500 glyphs designed according to Google's Material Design guidelines. The icons are well-organized and easy to browse, and the library is regularly updated with new icons and features. Symbols are available in three styles and four adjustable variable font styles (fill, weight, grade, and optical size)

Features

Opensource ( Free to use ) 🥳
Available as NPM package 📦
Supported by Google 👓
Falls under Apache 2.0 license 💳
47k+ ⭐ on Github

Boxicons

High-Quality web friendly icons

'Boxicons' is a carefully designed open-source icon set with 1500+ icons. It's crafted to look enrich your website/app experience.

Features

Opensource ( Free to use ) 🥳
Available as NPM package 📦
Available as CDN 📶
Available as Web component 📝
Falls under MIT license 💳
2.2k+ ⭐ on Github

Feather Icons

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.

Features

Opensource ( Free to use ) 🥳
Available as NPM package 📦
Available as CDN 📶
Provides feather icons for other frameworks 📝
Falls under MIT license 💳
23.2k+ ⭐ on Github

Ionicons

Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions.

Features

Opensource ( Free to use ) 🥳
Available as CDN 📶
Provides feather icons for other frameworks 📝
Falls under MIT license 💳
16.7k+ ⭐ on Github

Bootstrap Icons

A free, high-quality, open-source icon library with over 1,800 icons. Include them any way you like—SVGs, SVG sprites, or web fonts. Use them with or without Bootstrap in any project.

Features

Opensource ( Free to use ) 🥳
Available as NPM package 📦
Available as CDN 📶
Supported by a huge bootstrap framework community 👓
6.6k+ ⭐ on Github

Remixicons

Remix Icon is a set of open-source neutral-style system symbols elaborately crafted for designers and developers. All of the icons are free for both personal and commercial use.

Features

Opensource ( Free to use ) 🥳
Available as NPM package 📦
Available as CDN 📶
Remix Icon is licensed under the Apache License Version 2.0 💳
5.2k+ ⭐ on Github

heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Available as basic SVG icons and via first-party React and Vue libraries.

Features

Opensource ( Free to use ) 🥳
Available as NPM package 📦
Available as CDN 📶
Remix Icon is licensed under the MIT 💳
18k+ ⭐ on Github

CSS Icons

700+ Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled-components, Figma, and Adobe XD. Easy integration: Embed, NPM & API.

Features

Opensource ( Free to use ) 🥳
Available as NPM, yarn package 📦
Available as CDN 📶
Remix Icon is licensed under the MIT 💳
Present in design tools such as Figma & Adobe XD ⚡
9k+ ⭐ on Github

Flaticon

"Free access to 9.5M+ icons in PNG"

The largest database of vector icons available for download in SVG, EPS, PSD, and BASE 64 formats.

Features

Opensource ( Free to use ) 🥳
Available in different formats 👓
Subscription-based 💰

Iconfinder

Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format

Features

Opensource ( Free to use ) 🥳
7,250,000+ free and premium vector icons, illustrations & 3D illustrations
Subscription-based 💰

Roundicons

45,000+ icons The world’s biggest icon bundle Commercial use icon packs library made for apps, websites, infographics & prints.

Features

Free vector icons 🥳
45,000+ icons 👓
Subscription for premium icon packs 💰

Icons8

They are the best ones out there, download design elements for free such as icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️

Features

1.28m+ free icons 👓
Subscription for premium icon packs 💰

Iconscout

"Access 5.8 Million+ free or premium vector icons, illustrations, 3D illustrations, and Lottie animations for any design. Available in PNG, SVG, GIF, EPS, JSON, and more.

Features

5.8m+ icons 👓
The cluster of Design assets 📦

Line icons

5700+ Handcrafted line icons for modern user interfaces of the web, mobile, and desktop app design and development projects. Line icons is a huge and comprehensive pack of professionally designed icons, available in all vector formats that are easy to use on the web, design, coding, and beyond.

Features

5700+ icons 👓
Opensource ( Free to use ) 🥳
Available as NPM package 📦
Available as CDN 📶
Subscription for premium icon packs 💰
Multiple Style variations ⚡
Icon Editor 👨‍🔧

Futicons

Futicons are Figma designer icons for Virtual Reality, Augmented Reality, Interplanetary Travel, Artificial Intelligence, Crypto, Blockchain, Cyborgs, Future Transportation, and Sustainability.

Features

Free lineicons ⚡
$5 for the full version includes 250 icons with fill & outline 💰

Devicon

Devicon is a set of icons representing programming languages, designing, and development tools. You can use it as a font or directly copy/paste the SVG code into your project.

Features

Opensource ( Free to use ) 🥳
Available as NPM package 📦
Available as CDN 📶
7.1k+ ⭐ on Github

Iconmonstr

Discover 4,784+ free icons in 316 collections for your next project.

Features

free for any commercial use ⭐
Unique and uniform icons from an exclusive source 🥳
Available in every release as fill and outline version 🥳
Smart compressed and best optimized for web use 🥳
Clean and precise icon design on a 24-pixel grid 🥳
Embed SVG as inline or Base64 within seconds 🥳
Best place to store your favorite icons 🥳

Icofont

2100+ free icons to spice up your creative designs

Features

Opensource ( Free to use ) 🥳
30 Categories 📦
For Web & Desktop 📶
Amazing Icons 💰
100% Free Download 👓

Streamline

Access the world's largest and most consistent icon and illustration sets Customise 140,000+ vector graphics, and add them to your projects in seconds ⚡️

Features

Opensource ( Free to use ) 🥳
Desktop app 📦
Figma Plugin ⭐
Images for notion 📶
Freemium 💰

Jam icons

Jam icons are a set of SVG icons designed for web projects, illustrations, and print projects.

Features

Opensource ( Free to use ) 🥳
491 ⭐ on Github

Smashicons

Smashicons is the world's largest and most complete icon set with over 492,219 icons for designers and developers.

Features

Free to use 🥳
Registration is required to download icons ⭐
Paid Plan starts at $2 💰

Freepik

All the assets you need, in one place, Find and download the best high-quality photos, designs, and mockups.

Features

Free to use 🥳
Free license ⭐
Attribution is required 👓
Paid Plan starts at $4.43 💰

Futuramo

Futuramo offers a suite of work management tools for teams working on digital projects. Foster collaboration between teams, clients, and businesses

Features

Advanced icon library 🥳
full-featured customization app ⭐
Ultimate styling tool 💰
Multiple file formats 📦
Free pack of 340 customizable icons 👓
Icons Pro pack to unlock more than 3100 icons in 16 styles 💰

GraphicBurger

Tasty design resources are made with care for each pixel. Free for both personal & commercial use. Have a bite!

Features

Tones of assets to roam around 🥳
Mockups 👓
UI kits 💰
Icons ❤️

Nucleo icons

The ultimate icon library Buy once, get unlimited updates. Cover 99% of your icon needs.

Features

Beautifully crafted over 32k+ icons🥳
6 Grid sizes👓
3 styles include fill, outline, and color 🔥
3231 unique symbols organized into 40 categories 📦

Pixeden

Pixeden is hard at work providing quality premium and free web resources and graphic design templates.

Features

Vectors, graphics, mockups 🥳
Icons, textures 👓
Website templates 🔥
$6/month to access all the premium files 💰

Pixellove

Download over 15,000 icons in 6 distinctive styles made for professionals.

Features

Versatile🥳
Uniform 👓
Scalable 🔥
ios & android support 💰

Vecteezy

Vecteezy is a leading global creative marketplace offering millions of paid and free stock photos, vectors, and stock videos for personal & commercial use.

Features

Unlimited photo, vector, and 4k video downloads 🥳
Full commercial rights 👓
Vecteezy online editor access 🔥
Exclusive access to bundles 🔥🔥
No attribution required 🔥🔥🔥
Priority support 🔥🔥🔥🔥
Faster downloads & no ads 🔥🔥🔥🔥🔥
Paid plan starts at $4.50 for a year & $7 monthly 💰

Conclusion

Icons are an essential part of modern web design, and with so many high-quality open-source icon libraries available, it's easier than ever to find the perfect icons for your projects. These open-source icon libraries we've explored in this post offer a wide range of styles, sizes, and formats, making them suitable for use in a variety of applications.

From the comprehensive Font Awesome and Material Design Icons to the minimalist Feather and heroicons, there's an open-source icon library out there to suit every need. Whether you're a designer, developer, or just looking for some fresh inspiration, these libraries are an excellent resource to add to your toolbox.

So why not try incorporating some of these open-source icon libraries into your next project and see how they can enhance the overall user experience? With so many great options out there, the possibilities are endless!

Thanks For Watching ❤️

Happy Coding !!!

Build a Responsive Modal using CSS 🚀

Aniket — Sun, 26 Feb 2023 13:27:52 +0000

👋 Hello, Dear developers 👩‍💻
Today we will be lookup on how to build a responsive modal using CSS, so stay tunned🔥

Introduction

Modal Popups are used very often in modern websites or Apps, to display notifications or alerts, handle user's sign up or login forms, newsletters & much more ✨

I created this tutorial, on how to create a responsive modal popup box with a clean design, with the help of HTML as markup, CSS for styling and vanilla javascript for adding functionality 🧠🚀

Here's how it will look once we are finished in the below GIF⬇️

But Before that, You can view the code tutorial of the finished product before continuing this blog ⬇️

Code Tutorial

You can also view a live demo 📺 of it as well.

Now Let's start on building this from scratch !

HTML Markup ⬇️

Let's start with html markup for the modal

<div class="container">
    <button class="share__modal_btn">share</button>

    <main class="share__modal">
        <div class="share__modal_content">
            <div class="share__modal__header">
                <span>share</span>
                <button class="close_modal_btn">
                    <i class="bx bx-x bx-sm"></i>
                </button>
            </div>
            <div class="share__modal__options">
                <ul class="list">
                    <li class="list__item">
                        <div class="icon_holder" data-icon="twitter">
                            <img
                                class="social__logo"
                                src="./img/twitter-logo.png"
                                alt="twitter-logo"
                            />
                        </div>
                        <span>twitter</span>
                    </li>

                    <li class="list__item">
                        <div class="icon_holder" data-icon="facebook">
                            <img
                                class="social__logo"
                                src="./img/facebook-logo.png"
                                alt="facebook-logo"
                            />
                        </div>
                        <span>facebook</span>
                    </li>

                    <li class="list__item">
                        <div class="icon_holder" data-icon="reddit">
                            <img
                                class="social__logo"
                                src="./img/reddit-logo.png"
                                alt="reddit-logo"
                            />
                        </div>
                        <span>reddit</span>
                    </li>

                    <li class="list__item">
                        <div class="icon_holder" data-icon="discord">
                            <img
                                class="social__logo"
                                src="./img/discord-logo.png"
                                alt="discord-logo"
                            />
                        </div>
                        <span>discord</span>
                    </li>

                    <li class="list__item">
                        <div class="icon_holder" data-icon="whatsapp">
                            <img
                                class="social__logo"
                                src="./img/whatsapp-logo.png"
                                alt="whatsapp-logo"
                            />
                        </div>
                        <span>whatsapp</span>
                    </li>

                    <li class="list__item">
                        <div class="icon_holder" data-icon="messenger">
                            <img
                                class="social__logo"
                                src="./img/messenger-logo.png"
                                alt="messenger-logo"
                            />
                        </div>
                        <span>messenger</span>
                    </li>

                    <li class="list__item">
                        <div class="icon_holder" data-icon="telegram">
                            <img
                                class="social__logo"
                                src="./img/telegram-logo.png"
                                alt="telegram-logo"
                            />
                        </div>
                        <span>telegram</span>
                    </li>

                    <li class="list__item">
                        <div class="icon_holder" data-icon="wechat">
                            <img
                                class="social__logo"
                                src="./img/wechat-logo.png"
                                alt="wechat-logo"
                            />
                        </div>
                        <span>wechat</span>
                    </li>
                </ul>
            </div>

            <div class="share__modal_link">
                <span>page link</span>
                <div class="share__modal_input">
                    <input
                        type="text"
                        placeholder="https://www.sharethispage.io"
                    />
                    <i class="bx bx-copy copy_icon"></i>
                </div>
            </div>
        </div>
    </main>
</div>

So here, we have a few components added to our markup.

First, we have a simple open modal button which is named a share button, when clicked on, it triggers the function of opening the modal, then we have the close modal button which performs the opposite operation/function to the open button to close modal, then we have few social sharing option's and at last, we have the input box with just fake placeholder value in it.

for images, please follow my GitHub repository inorder to use them.

CSS Styles 🎨

Let's add the styles stepwise to understand what we're doing,

First of all, we will look at making some basic changes in our CSS file which includes resets of the root, HTML & variables.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

:root {
  /*========== Colors ==========*/

  --first-color: #373d46;
  --modal-bg-color: #fff;
  --text-input-bg: #f8f9fa;
  --text-color: #95989d;
  --container-bg: #c7ad91;
  --btn-color: #ddc0a1;

  /* ===== SOCIAL ICONS BACKGROUND COLOR =====  */
  --twitter: #e8f6fe;
  --whatsapp: #e9fbf0;
  --facebook: #e8f1fe;
  --reddit: #ffece6;
  --discord: #f1f3fb;
  --messenger: #e6f3ff;
  --telegram: #e6f3fa;
  --wechat: #f2f7ea;

  /*========== Font and typography ==========*/

  --normal-font-size: 0.88rem;
  --large-font-size: 1.25rem;
  --share-link-span: 0.9869em;
  --share-input-font-size: 0.8em;

  /*========== z index ==========*/
  --z-modal: 1000;
}

@media screen and (min-width: 991px) {
  :root {
    --large-font-size: 1.5rem;
    --normal-font-size: 1rem;
    --share-link-span: 1.1em;
    --share-input-font-size: 1em;
  }
}

/*=============== BASE ===============*/
body{
  font-weight: 500;
  background-color: var(--btn-color);
}
button{
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

img{
  max-width: 100%;
  height: auto;
}
ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.container{
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: var(--container-bg);
}

Okay Nice ! we are moving further 🏃‍♀️🏃‍♂️

So after adding those base styles, we look up our markup and use the classes that we have given to each component (tag) in order to add them styles individually.

1. Share modal button


.share__modal_btn {
  background-color: #857361;
  padding: 0.9em 1.5em;
  font-size: var(--share-link-span);
  text-transform: capitalize;
  border-radius: 0.7em;
  box-shadow: 0 10px 10px -2px rgba(0, 0, 0, 0.1);
  color: #eee;
  letter-spacing: 0.25px;
}
.share__modal_btn:hover {
  background-color: #6f6051;
}

The styles for the share modal button are background color, font size along with visual goodies like padding, border-radius & pseudo hover class on background color.

Result ⬇️

2. Share modal

The share modal is the most important, where all of the content is situated

we added an absolute position on it at the bottom with a 0% percentage value along the visual goodies like box shadow, border radius, opacity, and extra white space by using padding and transition property as well.


.share__modal {
  background-color: var(--modal-bg-color);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  display: grid;
  align-items: flex-end;
  overflow: auto;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);

  border-radius: 1.3em 1em 0 0;
  z-index: var(--z-modal);
  opacity: 0;
  transition: 0.5s ease;
  visibility: hidden;
}

.share__modal_content {
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  row-gap: 2.6em;
}

.share__modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.share__modal__header span {
  font-size: var(--large-font-size);
  font-weight: 600;
  color: var(--first-clr);
  text-transform: capitalize;
  opacity: 0.88;
}
.close_modal_btn {
  color: var(--first-clr);
}

Result ⬇️

3. Social sharing options

These options are structured with the help of CSS Grid, for the background color of social sharing options, we used the data-icon attribute property on each tag in html file & added light color as a background to add contrast against the actual logo.


.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.125em;
}

.list__item {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  color: var(--first-clr);
  font-size: var(--normal-font-size);
  font-weight: 500;
  opacity: 0.9;
  cursor: pointer;
}
.icon_holder {
  width: 4.5em;
  height: 4.5em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social__logo {
  width: 2em;
  height: 2em;
}

[data-icon="twitter"] {
  background-color: var(--twitter);
}
[data-icon="facebook"] {
  background-color: var(--facebook);
}
[data-icon="reddit"] {
  background-color: var(--reddit);
}
[data-icon="discord"] {
  background-color: var(--discord);
}
[data-icon="whatsapp"] {
  background-color: var(--whatsapp);
}
[data-icon="messenger"] {
  background-color: var(--messenger);
}
[data-icon="telegram"] {
  background-color: var(--telegram);
}
[data-icon="wechat"] {
  background-color: var(--wechat);

4. Share link input

we use the input with the fake placeholder value to share the link of the current page, the style for these is pretty generic & straight forward.


.share__modal_link {
  display: flex;
  flex-direction: column;
  row-gap: 1.1em;
}
.share__modal_link span {
  font-weight: 500;
  font-size: var(--share-link-span);
  text-transform: capitalize;
  color: var(--first-clr);
}
.share__modal_input {
  position: relative;
}
.share__modal_input input {
  width: 100%;
  background-color: var(--text-input-bg);
  padding: 0.88em;
  border-radius: 0.5em;
  border: none;
  outline: none;
  font-size: var(--share-input-font-size);
}
.copy_icon {
  position: absolute;
  right: 1.5em;
  top: 1em;
  color: var(--first-clr);
  cursor: pointer;
}

5. Show modal

Before moving to the final, here is the class that handles the styles when the modal is opened.


.show-modal {
  opacity: 1;
  visibility: visible;
}

6. Media queries to make it responsive 📱

Finally, we want to make it responsive or at least look good on both mobile and desktop, so below are the few breakpoints on the share modal button, modal, modal content, and list.

@media screen and (min-width: 768px) {
  .share__modal_btn {
    padding: 0.9em 1.75em;
    font-size: var(--share-link-span);
  }
  .share__modal {
    width: 28em;
    height: 30em;
    border-radius: 1.3em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  .share__modal_content {
    padding: 2.5em;
  }
  .list {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1.5em;
    column-gap: 1em;
  }
}

Desktop View

Mobile View

😤 Finally, To make our modal popup box intractive or actually work, we will be using few lines of javascript logic 🧠

Javascript code ⬇️


/*=============== SHOW MODAL ===============*/

const openBtn = document.querySelector(".share__modal_btn");
const modalContainer = document.querySelector(".share__modal");

if (openBtn && modalContainer) {
  openBtn.addEventListener("click", () => {
    modalContainer.classList.add("show-modal");
  });
}

/*=============== CLOSE MODAL ===============*/

const closeBtn = document.querySelector(".close_modal_btn");

function closeModal() {
  const modalContainer = document.querySelector(".share__modal");
  modalContainer.classList.remove("show-modal");
}
closeBtn.addEventListener("click", closeModal);

/*====== ESC BUTTON TO CLOSE MODAL ======*/

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    closeModal();
  }
});

So here we have three event listeners who are adding or removing the show-modal class from the modalContainer :

When OpenBtn is clicked, we want to add a show-modal class to modalContainer in order to show the modal to users.
When closeBtn is clicked, we perform the opposite operation to open the button that is to remove the show-modal class & hide the modal.
Escape key-down event listener on dom to hide the modal by simply calling the closeModal() function.

So, the end result will finally look like this ⬇️

and that's what we wanted 🥳🤘

I hope you find this post to be helpful and thanks for reading it 😇

Conclusion
As always, I hope you found it interesting. If you noticed any
errors in this article, please mention them in the comments. 🧑🏻‍💻

Hope you have a great day! ✌️

✍️ Awesome Fonts resources for your Next Project 🚀

Aniket — Tue, 20 Sep 2022 15:09:23 +0000

Hello Everyone, at last, after a huge break we are gonna start with the fresh topic on design... Let's get started...

Typography is the art of arranging all the contents of your website, giving a feel to it, and presenting the information in a professional way.

Introdution

Typography is the art and technique of arranging type to make written language legible, readable ** & **appealing when displayed.

We have a curated list of free font websites which deliver a beautiful & legit font collections for your next project.

So without any concern let's get started.

Google Fonts

The #1 resource for free and easy-to-use web fonts.
Google Fonts enables designers and developers to choose and use types with purpose.

Font Space

97,000+ Free fonts download legally licensed fonts that are perfect for your design projects.

Font Fabric

A digital type foundry crafting retail fonts and custom typography for various brands. 100% FREE—Beautiful typeface collection includes Sans, Serif, Script, Rust, Display
Cyrillic.

Font Squirrel

Font Squirrel scours the internet for high-quality, legitimately free fonts.
Download thousands of completely legal, high-quality, free fonts.

FontStruct

FontStruct. Build, Share, Download Font

Fontpair

Font pair - Free, beautiful fonts and font pairings curated just for you.

Fontesk

Fontesk is a curated font library of the best high-quality free fonts to download for commercial and personal use.

DaFont

Archive of freely downloadable fonts. Browse by alphabetical listing, style, author, or by popularity.

1001 Free Fonts

Download free fonts for Windows and Mac. Browse categories such as calligraphy, handwriting, script, serif, and more. New fonts are added daily.

Font Finder or Font identifier

Font finder is the one that helps you to identify fonts from any image. 🔎

WhatTheFont

Font Spring's Font Finder

FontSquirrel's Font identifier

WhatFontis

WhatFontis helps you to identify fonts from any image. 🔎 Upload the image and choose the font you need. 820,000 fonts indexed free or commercial.

P.S.

If something is left from my side I m extremely sorry for that! Or else if you want to suggest some more resources that you used please post them below in the comments.

Thank you so much for watching the Post! Happy Coding !!!

⚡Create a Responsive Landing Page using HTML CSS & JS 🔥

Aniket — Tue, 11 Jan 2022 14:35:53 +0000

Hello, Dear developers 👩‍💻👨‍💻, sorry to belated a Happy New year to you! So after a long break & time, we'll work on the making of another responsive landing page using fundamental front-end technology like HTML, CSS, Javascript & much more.

Another Responsive?

Yes, We have created various blogs on creating responsive landing page whose links are given below ⤵️

👨‍💻 Create a Responsive Landing Page using HTML CSS & JS 🔥

Aniket ・ Oct 13 '21

#html #css #javascript #webdev

Create a Responsive Landing Page Using HTML CSS & JS 🔥

Aniket ・ Sep 8 '21

#html #css #javascript #webdev

if you are interested in watching code tutorial instead of reading the complete blog post make sure you watch the video below :

If you want to see more web design tutorials just like these ! Please consider subscribing to our Youtube Channel.

Source Code for this post is available on Github with all images and much more so please visit the below-given link to get source code

Source Code Link

So once again in this coding blog post, we cover the two most fundamental & modern layout building systems which are CSS Flexbox & CSS Grid.

Did you know that what is the main difference between?
If you know already you are absolute genius ! if no don't worry below given is the image which simply describes What the hell is CSS Flexbox VS CSS Grid.

Okay 😆, that's it for now! Let's get into the coding part for which we are here !!!

Starting with our project folder structure first 👇

Typically we have used 3 external libraries which includes 👇

Boxicons - An Open Source icons library.
Google Fonts - A font embedding library.
GSAP by GreenSock - Create Professional-grade JavaScript animation for the modern web.

So from the above project folder structure, we required index.html, style.css, script.js & IMG folder where a all image files are stored.

So after creating those files let's jump into your favorite code editor.

First of all, we will look at making some basic changes in our CSS file which includes resets of the root, HTML & CSS variables & some basic styles.

Style.css

/* ===== GOOGLE FONTS : www.fonts.google.com ======  */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Rubik:wght@300;400;500&display=swap");
/* ==== ROOT ==== */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}
/* ==== CSS VARIABLES ==== */
:root {
 --logo-text-color: #23241f;
 --lg-text-color: #000000;
 --sm-text-color: #828282;
 --md-light-text: #353534;
 --light-text: #959188;
 --text-color: #80b801;
 --light-border: #d9eab3;
 --gradient-start: #f0fff1;
 --gradient-middle: #fefefa;
 --gradient-end: #fff;
}
/* ==== HTML RESET ==== */
html,
body {
 scroll-behavior: smooth;
}
body {
 height: 100vh;
 width: 100%;
 background: linear-gradient(
  124deg,
  var(--gradient-start) 0%,
  var(--gradient-middle) 50%,
  var(--gradient-end) 100%
 );
}
a {
 text-decoration: none;
}
button {
 border: none;
 outline: none;
 cursor: pointer;
}
ul li {
 list-style-type: none;
}

/* ==== CONTAINER ==== */
.container {
    max-width: 1028px;
    margin: 0 auto;
    padding: 0rem;
}
.grid {
    display: grid;
}

@media screen and (min-width: 64em) {
    .container {
        width: 100%;
        padding: 1rem;
    }
}

Great! As you can see we have imported Google fonts in our project which namely includes Poppins and Rubik, according to their font weights.

we are moving further to add a skeleton that is to add HTML.
so come inside in our index.html file to make add basic Markup.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Medme Landing Page - Responsive Landing Page</title>
        <!-- ======= STYLE ====== -->
        <link rel="stylesheet" href="./CSS/style.css" />
        <!-- ======= BOXICONS CDN ====== -->
        <link
            href="https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css"
            rel="stylesheet"
        />
        <!-- ======= GSAP CDN ====== -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    </head>
    <body>


        <!-- ======= Script.js ====== -->
        <script src="./JS/script.js"></script>
    </body>
</html>

So, Here are our blank results 😆 =>

Okay! Now Let's make our very first component and most important that is navigation bar or Navbar.

index.html

<header class="header container">
    <nav class="navbar">
        <div class="logo">
            <h2 class="logo-name">
                <a href="#">Med<span>me</span> </a>
            </h2>
        </div>
        <div class="nav_menu">
            <div class="close-nav">
                <button class="close_btn">&#10005;</button>
            </div>
            <ul class="nav-link-list">
                <li class="nav-link-list-item">
                    <a class="nav-link active" href="#">home</a>
                </li>
                <li class="nav-link-list-item">
                    <a class="nav-link" href="#">product</a>
                </li>
                <li class="nav-link-list-item">
                    <a class="nav-link" href="#">contact</a>
                </li>
                <li class="nav-link-list-item">
                    <a class="nav-link" href="#">about</a>
                </li>
            </ul>
        </div>
        <button class="toggle_btn">
        <i class="bx bx-menu"></i>
        </button>
    </nav>
</header>

Result =>

Adding Styles in it in our style.css file

Style.css


/* ==== ROOT RESET ==== */
/* ==== HTML RESET ==== */
/* ==== CSS VARIABLES ==== */
/* ==== CONTAINER ==== */
/* ==== HEADER ==== */
.header {
    width: 100%;
    height: 4rem;
    margin-bottom: 3rem;
}
.navbar {
    width: 100%;
    height: 100%;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    min-width: 100px;
}
.logo-name a {
    font-family: "Rubik", sans-serif;
    letter-spacing: 0.7px;
    font-size: 1.5rem;
    color: var(--logo-text-color);
}
.logo-name a span {
    font-family: "Rubik", sans-serif;
    color: var(--text-color);
    font-weight: 400;
}

.close-nav {
    display: none;
}
.close-nav {
    display: none;
}

.close_btn {
    background-color: #f3f4f6;
    font-size: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 600;
}
.close_btn:hover {
    background-color: #ffffff;
}

.nav-link-list {
    display: flex;
}
.nav-link-list-item {
    margin: 0 1.5rem;
}
.nav-link-list-item .nav-link {
    font-family: "Rubik", sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    color: var(--logo-text-color);
}
.nav-link.active {
    font-weight: 600;
}
.nav-link:hover {
    color: var(--text-color);
}

.toggle_btn {
    background-color: transparent;
    display: none;
}
.toggle_btn i {
    font-size: 1.5rem;
}

.show {
    right: 0 !important;
}

.no-scroll {
    overflow-y: hidden;
}

Result =>

So until this we created our navbar and added style for ease of navigation 🎉

but wait we are not finished yet...!

HERO SECTION 😎

Oh Yes, A Hero Section 😎 which defines a glimpse of your company and offers.

Let's add markup for our hero section in our index.html file

index.html

<!-- ====== HEADER ====== -->
<!-- ====== HERO SECTION ====== -->
<div class="container">
   <section class="grid grid-cols-2">
      <!-- ===== GRID-ITEM-1 ===== -->
      <div class="grid-item-1">
         <div class="flex-item-1">
            <p class="product-intro">#1 Best Herbal by JEZ</p>
            <h1 class="product-tagline">
               herbal without <span>side effects</span>
            </h1>
            <p class="product-desc">
               No need to worry about taking medicines,all our products are
               herbal remedies that have been proven tob be potent and certified.
            </p>
            <a href="#" class="cta-btn">buy now</a>
         </div>
         <div class="flex-item-2">
            <ul class="customer-list">
               <li class="customer-list-item">
                  <img class="customer-img" src="./img/01.png" alt="cusomtor-1" />
               </li>
               <li class="customer-list-item">
                  <img class="customer-img" src="./img/02.png" alt="cusomtor-2" />
               </li>
               <li class="customer-list-item">
                  <img class="customer-img" src="./img/03.png" alt="cusomtor-3" />
               </li>
            </ul>
            <div class="customer-related-desc">
               <p>our satisfied customers</p>
               <span class="rating-star">
               <i class="bx bxs-star"></i>
               </span>
               <span class="rating-count">4.9</span>
               <span class="ratings">( 110k Ratings )</span>
            </div>
         </div>
      </div>
      <!-- ===== GRID-ITEM-2 ===== -->
      <div class="grid-item-2">
         <div class="plant-img">
            <img src="./img/plant-img.png" alt="plant-img" />
         </div>
      </div>
   </section>
</div>

Result =>

I guess it might be taking some shape. Okay Let's add style to it.

Style.css

 .grid-cols-2 { 
    grid-template-columns: repeat(2, 1fr);
}

.grid-item-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.flex-item-1 {
    width: 80%;
}
.product-intro {
    font-size: 1rem;
    color: var(--lg-text-color);
    font-weight: 500;
}
.product-tagline {
    font-size: 3.2rem;
    color: var(--lg-text-color);
    line-height: 1.25;
    text-transform: capitalize;
    margin-top: 1.5rem;
}
.product-tagline span {
    color: var(--text-color);
}

.product-desc {
    color: var(--sm-text-color);
    font-weight: 500;
    margin-top: 2rem;
    font-size: 1rem;
}

.cta-btn:active,
.cta-btn:visited {
    color: var(--gradient-end);
}
.cta-btn {
    display: block;
    width: 150px;
    height: 43px;
    background-color: var(--text-color);
    font-size: 1rem;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    border-radius: 5px;
    margin-top: 3rem;
    transition: 0.5s;
    color: var(--gradient-end);
    box-shadow: 0px 3px 10px 0px rgba(128, 184, 1, 0.75);
}
.cta-btn:hover {
    background-color: #73a601;
}
.cta-btn:active {
    transform: scale(0.85);
}

.flex-item-2 {
    display: flex;
    gap: 2rem;
    padding-left: 0.7rem;
}

.customer-list {
    display: flex;
}
.customer-list-item {
    width: 3rem;
    height: 3rem;
}
.customer-list-item .customer-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.customer-img {
    border: 3px solid var(--light-border);
}
.customer-list-item {
    margin-left: -0.7rem;
}

.customer-related-desc p {
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    font-family: "Rubik", sans-serif;
    color: var(--md-light-text);
    margin-bottom: 0.2rem;
}
.rating-star {
    color: #ffac37;
}
.rating-count {
    color: var(--lg-text-color);
    font-weight: 500;
    font-size: 0.95rem;
    font-family: "Rubik", sans-serif;
}
.ratings {
    color: var(--light-text);
    letter-spacing: 0.3px;
    font-size: 0.9rem;
    font-family: "Rubik", sans-serif;
    font-weight: 400;
}

.plant-img {
    width: 100%;
    height: 100%;
}
.plant-img img {
    width: 100%;
    height: 100%;
}

Now Let's make it responsive on smaller screen devices like mobile and tablet, by adding responsive media query.

Style.css

/* ===== HEADER ===== */
/* ===== HERO  ===== */
/* ===== RESPONSIVE MEDIA QUERIES  ===== */
@media screen and (max-width: 991px) {
body {
background: linear-gradient(
90deg,
var(--gradient-start) 0%,
var(--gradient-middle) 50%,
var(--gradient-end) 100%
);
}
.close-nav {
width: 100%;
display: flex;
justify-content: flex-end;
}
.nav_menu {
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 100%;
padding: 2rem;
background: rgba(215, 215, 215, 0.6);
backdrop-filter: blur(7px);
z-index: 50;
transition: 0.5s ease;
opacity: 1;
}
.nav-link-list {
flex-direction: column;
align-items: center;
margin-top: 2rem;
}
.nav-link-list-item {
margin: 1.4rem 0;
}
.nav-link-list-item .nav-link {
font-size: 1.2rem;
}
.nav-link:hover {
color: #fff;
}
.toggle_btn {
display: block;
}
.grid-cols-2 {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.grid-item-1 {
gap: 3rem;
}
.flex-item-1 {
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.product-tagline {
font-size: 2.5rem;
}
.product-desc {
font-size: 0.8rem;
padding: 0 1.25rem;
}
.flex-item-2 {
width: 100%;
justify-content: center;
}
.customer-list-item {
width: 2.5rem;
height: 2.5rem;
}
.customer-related-desc p {
font-size: 0.85rem;
}
.rating-star {
font-size: 0.7rem;
}
.rating-count {
font-size: 0.75rem;
}
.ratings {
font-size: 0.8rem;
}
.plant-img {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.plant-img img {
width: 20rem;
}
}

Now here, we make our navbar responsive on smaller screen to look diffrent than other screen.

here we go, we observe that nav-links were hidden on mobile screen while they were visible on desktop screen. so here we add some little Javascript to make nav-links visible after clicking on toggle menu button.
Now come inside our script.js file to add logic 🧠

Script.js

const navMenu = document.querySelector(".nav_menu"),
    ToggleBtn = document.querySelector(".toggle_btn"),
    CloseBtn = document.querySelector(".close_btn");

// ==== SHOW MENU ==== //
ToggleBtn.addEventListener("click", () => {
    navMenu.classList.add("show");
    document.querySelector("body").classList.add("no-scroll");
});

// ==== HIDE MENU ==== //
CloseBtn.addEventListener("click", () => {
    navMenu.classList.remove("show");
    document.querySelector("body").classList.remove("no-scroll");
});

So here in our .js file we grab the elements on which we want to perform action which includes navMenu, toggleBtn, closeBtn and added eventlistener on toggleBtn and CloseBtn to show & hide the navbar.

Please see the below given output in GIF Format for better understanding.

Result in GIF Format ⤵️

So onclick toggleBtn that is three bar at top right corner we can see the navlinks. ( for the creation of toggle button is used the icon from the boxicons library or website ).

so after clicking on it a new div is open where we see the navlinks and on that div at top right corner we again see a close button in order to close that div.

Absolutely Fantastic!

Thank you so much for reading this till end where we created our medme responsive landing page.

Now inorder to make our landing page way more interesting let's add some animations to it by using GSAP Library.

So Let's come inside our Script.js file.

// ==== TOGGLE MENI ==== //
// ==== GSAP Animations ==== //
// ==== LOGO  ==== //
gsap.from(".logo", {
    opacity: 0,
    y: 10,
    delay: 1,
    duration: 0.5,
});
// ==== NAV-MENU ==== //
gsap.from("ul li", {
    opacity: 0,
    y: 10,
    delay: 1.4,
    duration: 0.5,
    stagger: 0.3,
});
// ==== TOGGLE BTN ==== //
gsap.from(".toggle_btn", {
    opacity: 0,
    y: 10,
    delay: 1.2,
    duration: 0.5,
});

// ==== FLEX ITEM ==== //
gsap.from(".flex-item-1", {
    opacity: 0,
    y: 20,
    delay: 2.8,
    duration: 1,
});

gsap.from(".customer-related-desc p", {
    opacity: 0,
    y: 20,
    delay: 2.8,
    duration: 0.8,
});

gsap.from(".rating-star i", {
    opacity: 0,
    y: 20,
    delay: 3,
    duration: 1,
});

gsap.from(".rating-count", {
    opacity: 0,
    y: 20,
    delay: 3,
    duration: 1,
});

gsap.from(".ratings", {
    opacity: 0,
    y: 20,
    delay: 3,
    duration: 1,
});

// ==== PLANT IMAGE ==== //
gsap.from(".plant-img img", {
    opacity: 0,
    y: 20,
    delay: 3,
    duration: 1,
});

And that's it guys here we end our project! Thank you so much for reading the post till the end !!! Please Make sure you check out my Youtube Channel where I post this kind of coding tutorial.

Thank You! Happy Coding

👨‍💻 Create a Responsive Landing Page using HTML CSS & JS 🔥

Aniket — Wed, 13 Oct 2021 07:11:50 +0000

👋 Hello, Dear developers 👩‍💻👨‍💻, Today we'll see, how we can easily create another Responsive Landing page using HTML, CSS, and JS with GreenSock Animation library for creating those animations.

Making a landing page with HTML & CSS is a pretty easy & simple task, but did you know what makes our post more interesting! Okay, will discuss it.

But Before that, For demo with code tutorial. You can watch the video below.

Code Tutorial

If you want to see more web design tutorials just like these ! Please consider subscribing to our Youtube Channel.

Source Code for this post is available on Github with all images and much more so please visit the below-given link to get source code

Source Code Link

So in this coding blog post, we cover the two most fundamental & modern layout building systems which are CSS Flexbox & CSS Grid.

Did you know that what is the main difference between?
If yes you're an absolute genius but if no, let me explain to you in simple words that is CSS Flexbox is a one Dimensional Layout system, while CSS grid is a Two Dimensional Layout system.

Okay 😆, that's it for now! Let's get into the coding part for which we are here !!!

Starting with our project folder structure first 👇

Typically we have used 4 external libraries which includes 👇

Remixicon - An Open Source icons library.
Google Fonts - a font embedding service library.
Animate on scroll - Small library to animate elements on your page as you scroll.
GSAP by GreenSock - Create Professional-grade JavaScript animation for the modern web.

So from the above project folder structure, we required index.html, style.css, script.js & IMG folder where a single image file is stored.

So after creating those files let's jump into your favorite code editor.

First of all, we will look at making some basic changes in our CSS file which includes resets of the root, HTML & variables.

Style.css

/* ==== "Inter" FONT-FAMILY FROM FONTS.GOOGLE.COM ==== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
/* ==== ROOT RESET ==== */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Inter", sans-serif;
}
*,
*::before,
*::after {
 box-sizing: border-box;
}
/* ==== CSS VARIABLES ==== */
:root {
 - primary-color: #335eea;
 - link-color: #506690;
 - btn-hover-color: #2b50c7;
 - lg-heading: #161c2d;
 - text-content: #869ab8;
 - fixed-header-height: 4.5rem;
}
/* ==== RESET HTML ==== */
body {
 width: 100%;
 height: 100vh;
 overflow-x: hidden;
 background-color: #fafbfb;
}
ul li {
 list-style-type: none;
}
a {
 text-decoration: none;
}
button {
 background-color: transparent;
 border: none;
 outline: none;
 cursor: pointer;
}

Okay Nice ! we are moving further to add skeleton that is to add HTML.
so come inside in our index.html file to make add basic markup.

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Responsive Landing Page using HTML, CSS & Javascript</title>
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
 </head>
 <body>
 <! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer></script>
 </body>
</html>

Okay Great! Now moving a bit further to make our navbar,
Did you know that? Navigation bar is a section of a graphical user interface intended to aid visitors in accessing information.

Okay 😆, Now Let's add markup for navbar inside index.html file

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Responsive Landing Page using HTML, CSS & Javascript</title>
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link
 href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
 </head>
 <body>
 <! - ==== HEADER ==== →
 <header class="container header">
 <! - ==== NAVBAR ==== →
 <nav class="nav">
 <div class="logo">
 <h2>Devkit.</h2>
 </div>
<div class="nav_menu" id="nav_menu">
 <button class="close_btn" id="close_btn">
 <i class="ri-close-fill"></i>
 </button>
<ul class="nav_menu_list">
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">account</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">about</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">service</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">contact</a>
 </li>
 </ul>
 </div>
<button class="toggle_btn" id="toggle_btn">
 <i class="ri-menu-line"></i>
 </button>
 </nav>
 </header>
<! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer></script>
 </body>
</html>

Let's Add styles on it took look more better.

Style.css

/* ==== CONTAINER ==== */
.container {
 width: 100%;
}
@media screen and (min-width: 1040px) {
 .container {
 width: 1040px;
 margin: 0 auto;
 }
}
/* ==== HEADER ==== */
.header {
 height: var( - fixed-header-height);
 padding: 0 1.7rem;
}
/* ==== NAV ==== */
.nav {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
/* ==== LOGO ==== */
.logo h2 {
 font-size: 28px;
 color: var( - primary-color);
}
/* ==== NAV-MENU ==== */
.nav_menu_list {
 display: flex;
 align-items: center;
}
.nav_menu_list .nav_menu_item {
 margin: 0 2rem;
}
.nav_menu_item .nav_menu_link {
 font-size: 16.5px;
 line-height: 27px;
 color: var( - link-color);
 text-transform: capitalize;
 letter-spacing: 0.5px;
}
.nav_menu_link:hover {
 color: var( - primary-color);
}
.toggle_btn {
 font-size: 20px;
 font-weight: 600;
 color: var( - lg-heading);
 z-index: 4;
}
.nav_menu,
.close_btn {
 display: none;
}
.show {
 right: 3% !important;
}

Result

Now final move to make it responsive to diffrent on devices,
So to achieve this we need to add some media queries to our navbar, come inside in our style.css file and make so changes.

Style.css

/* ==== MEDIA QURIES FOR RESPONSIVE DESIGN ==== */
@media screen and (min-width: 768px) {
 .toggle_btn {
 display: none;
 }
 .nav_menu {
 display: block;
 }
}
@media screen and (max-width: 768px) {
 .logo h2 {
 font-size: 23px;
 }
 .nav_menu {
 position: fixed;
 width: 93%;
 height: 100%;
 display: block;
 top: 2.5%;
 right: -100%;
 background-color: #fff;
 padding: 3rem;
 border-radius: 10px;
 box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
 z-index: 50;
 transition: 0.4s;
 }
 .nav_menu_list {
 flex-direction: column;
 align-items: flex-start;
 margin-top: 4rem;
 }
 .nav_menu_list .nav_menu_item {
 margin: 1rem 0;
 }
 .nav_menu_item .nav_menu_link {
 font-size: 18px;
 }
}

here we go we observe that nav-links we hidden on mobile screen while they were visible on desktop screen. so here we add some little Javascript to make nav-links visible after clicking on toggle menu button
Now come inside our script.js file to add logic 🧠

Script.js

const navId = document.getElementById("nav_menu"),
 ToggleBtnId = document.getElementById("toggle_btn"),
 CloseBtnId = document.getElementById("close_btn");
// ==== SHOW MENU ==== //
ToggleBtnId.addEventListener("click", () => {
 navId.classList.add("show");
});
// ==== HIDE MENU ==== //
CloseBtnId.addEventListener("click", () => {
 navId.classList.remove("show");
});

Result in GIF Format

Moving further to make hero section which defines a glimpse of your company and offers.

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Responsive Landing Page using HTML, CSS & Javascript</title>
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link
 href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
 rel="stylesheet"
 />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
 </head>
 <body>
 <! - ==== HEADER ==== →
 <header class="container header">
 <! - ==== NAVBAR ==== →
 <nav class="nav">
 <div class="logo">
 <h2>Devkit.</h2>
 </div>
<div class="nav_menu" id="nav_menu">
 <button class="close_btn" id="close_btn">
 <i class="ri-close-fill"></i>
 </button>
<ul class="nav_menu_list">
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">account</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">about</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">service</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">contact</a>
 </li>
 </ul>
 </div>
<button class="toggle_btn" id="toggle_btn">
 <i class="ri-menu-line"></i>
 </button>
 </nav>
 </header>
<! - ==== HERO ==== →
 <section class="wrapper">
 <div class="container">
 <div class="grid-cols-2">
 <div class="grid-item-1">
 <h1 class="main-heading">
 Welcome to <span>Devkit.</span>
 <br />
 Develop anything.
 </h1>
 <p class="info-text">
 Build a beautiful, modern website with flexible components built
 from scratch.
 </p>
<div class="btn_wrapper">
 <button class="btn view_more_btn">
 view all pages <i class="ri-arrow-right-line"></i>
 </button>
<button class="btn documentation_btn">documentation</button>
 </div>
 </div>
 <div class="grid-item-2">
 <div class="team_img_wrapper">
 <img src="./img/team.svg" alt="team-img" />
 </div>
 </div>
 </div>
 </div>
 </section>
<! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer></script>

style.css

/* ==== WRAPPER ==== */
.wrapper {
 width: 100%;
 padding-left: 1.7rem;
 padding-right: 1.7rem;
 padding-top: 5rem;
 margin-bottom: 5rem;
}
.grid-cols-2 {
 width: 100%;
 height: 100%;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 4rem;
}
.grid-item-1 {
 padding-top: 5rem;
 padding-left: 1.5rem;
}
.main-heading {
 font-weight: 300;
 font-size: 40px;
 line-height: 55px;
}
.main-heading span {
 color: var( - primary-color);
}
.info-text {
 margin-top: 1.5rem;
 font-size: 19px;
 line-height: 28px;
 color: #334157;
}
.btn_wrapper {
 margin-top: 3.5rem;
 display: flex;
 width: 100%;
}
.btn {
 width: 110px;
 height: 50px;
 background-color: var( - primary-color);
 display: block;
 font-size: 16px;
 color: #fff;
 text-transform: capitalize;
 border-radius: 7px;
 letter-spacing: 1px;
 transition: 0.4s;
}
.btn:hover {
 transform: translateY(-3px);
 background-color: var( - btn-hover-color);
}
.view_more_btn {
 width: 180px;
 height: 55px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 letter-spacing: 0;
 color: #fff;
 font-weight: 500;
 margin-right: 10px;
 box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
}
.view_more_btn i {
 margin-left: 0.7rem;
}
.view_more_btn:hover {
 transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.documentation_btn {
 width: 150px;
 height: 55px;
 font-size: 16px;
 font-weight: 500;
 color: #fff;
 letter-spacing: 0;
 background-color: #e1e7fc;
 color: #0e2a86;
 box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
}
.documentation_btn:hover {
 background-color: #d7ddf1;
 transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.grid-item-2 {
 width: 100%;
 height: 100%;
}
.team_img_wrapper {
 width: 500px;
 max-width: 100%;
 height: 440px;
}
.team_img_wrapper img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}
@media screen and (max-width: 768px) {
 .logo h2 {
 font-size: 23px;
 }
 .nav_menu {
 position: fixed;
 width: 93%;
 height: 100%;
 display: block;
 top: 2.5%;
 right: -100%;
 background-color: #fff;
 padding: 3rem;
 border-radius: 10px;
 box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
 z-index: 50;
 transition: 0.4s;
 }
 .nav_menu_list {
 flex-direction: column;
 align-items: flex-start;
 margin-top: 4rem;
 }
 .nav_menu_list .nav_menu_item {
 margin: 1rem 0;
 }
 .nav_menu_item .nav_menu_link {
 font-size: 18px;
 }
 .close_btn {
 display: block;
 position: absolute;
 right: 10%;
 font-size: 25px;
 color: #50689e;
 }
 .close_btn:hover {
 color: #000;
 }
.wrapper {
 padding: 0 0.7rem;
 }
 .grid-item-1 {
 padding-left: 0rem;
 }
 .main-heading {
 font-size: 35px;
 }
 .view_more_btn {
 width: 140px;
 height: 55px;
 font-size: 13.5px;
 margin-right: 1rem;
 }
}
@media screen and (max-width: 991px) {
 .wrapper {
 padding-top: 3rem;
 }
 .grid-cols-2 {
 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 }
 .grid-item-1 {
 order: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding-top: 0;
 }
 .main-heading {
 font-size: 32px;
 text-align: center;
 line-height: 40px;
 }
 .info-text {
 font-size: 16px;
 text-align: center;
 padding: 0.7rem;
 }
 .btn_wrapper {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .grid-item-2 {
 order: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 }
 .team_img_wrapper {
 width: 350px;
 height: 350px;
 }
}

Result

Nice We are making great progress Now let's move on to the final components which is featured info and footer

index.html

<! - ==== NAVBAR ==== →
 <! - ==== HERO ==== →
<section class="wrapper">
 <div class="container">
 <div class="grid-cols-3">
 <div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M9.75 17L9 20l-1 1h8l-1–1-.75–3M3 13h18M5 17h14a2 2 0 002–2V5a2 2 0 00–2–2H5a2 2 0 00–2 2v10a2 2 0 002 2z"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Built for developers </span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
 ratione facilis animi voluptas exercitationem molestiae.
 </p>
 </div>
 </div>
 <div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M17 14v6m-3–3h6M6 10h2a2 2 0 002–2V6a2 2 0 00–2–2H6a2 2 0 00–2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002–2V6a2 2 0 00–2–2h-2a2 2 0 00–2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002–2v-2a2 2 0 00–2–2H6a2 2 0 00–2 2v2a2 2 0 002 2z"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Designed to be modern</span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
 ipsum esse corrupti. Quo, labore debitis!
 </p>
 </div>
 </div>
<div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M10 20l4–16m4 4l4 4–4 4M6 16l-4–4 4–4"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Documentation for everything</span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Non
 nostrum voluptate totam ipsa corrupti vero!
 </p>
 </div>
 </div>
 </div>
 </div>
 </section>
<footer></footer>

style.css

/* ==== RESET CSS ==== */
/* ==== Navbar ==== */
/* ==== Hero Section ==== */
/*
.
.
.
.
.
*/
.grid-cols-3 {
 width: 100%;
 height: 100%;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 column-gap: 3rem;
 row-gap: 2rem;
 padding: 1rem;
}
.grid-col-item {
 height: 100%;
}
.icon {
 width: 100%;
 line-height: 40px;
}
.icon svg {
 width: 30px;
 height: 30px;
 color: #6b85d8;
}
.featured_info {
 width: 100%;
}
.featured_info span {
 width: 100%;
 display: block;
 font-size: 21px;
 line-height: 33px;
 color: var( - lg-heading);
}
.featured_info p {
 display: block;
 width: 100%;
 margin-top: 7px;
 font-weight: 400;
 color: #334157;
 line-height: 25px;
 font-size: 15.5px;
}
footer {
 width: 100%;
 background-color: var( - primary-color);
 height: 12px;
 margin-top: 8rem;
}
@media screen and (max-width: 768px) {
 .grid-cols-3 {
 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 }
 .featured_info p {
 line-height: 23px;
 font-size: 14px;
 }
}
@media screen and (max-width: 991px) {
 .featured_info span {
 font-size: 19px;
 }
}

Result

Now we come to a very end in this post, Now Let's add Animate on scroll properties, in order to add them first we have to add them with the data- attribute in our HTML file and late we have initialized them inside script js.
Let's make little change at our featured section that is 👇

<section class="wrapper">
 <! - ==== ADDITION OF data- attribute ==== →
 <div class="container" data-aos="fade-up" data-aos-duration="1000">
 <div class="grid-cols-3">
 <div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M9.75 17L9 20l-1 1h8l-1–1-.75–3M3 13h18M5 17h14a2 2 0 002–2V5a2 2 0 00–2–2H5a2 2 0 00–2 2v10a2 2 0 002 2z"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Built for developers </span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
 ratione facilis animi voluptas exercitationem molestiae.
 </p>
 </div>
 </div>
 <div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M17 14v6m-3–3h6M6 10h2a2 2 0 002–2V6a2 2 0 00–2–2H6a2 2 0 00–2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002–2V6a2 2 0 00–2–2h-2a2 2 0 00–2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002–2v-2a2 2 0 00–2–2H6a2 2 0 00–2 2v2a2 2 0 002 2z"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Designed to be modern</span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
 ipsum esse corrupti. Quo, labore debitis!
 </p>
 </div>
 </div>
<div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M10 20l4–16m4 4l4 4–4 4M6 16l-4–4 4–4"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Documentation for everything</span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Non
 nostrum voluptate totam ipsa corrupti vero!
 </p>
 </div>
 </div>
 </div>
 </div>
 </section>

Script.js

// ==== Animate on Scroll Initialize ==== //
AOS.init();

by adding data- attribute & initialize AOS in our js file it gives us a small fade up effect.

Perfect ! Now gone end our project by adding GSAP animations using javascript.

Script.js

// ==== GSAP Animations ==== //
// ==== LOGO ==== //
gsap.from(".logo", {
 opacity: 0,
 y: -10,
 delay: 1,
 duration: 0.5,
});
// ==== NAV-MENU ==== //
gsap.from(".nav_menu_list .nav_menu_item", {
 opacity: 0,
 y: -10,
 delay: 1.4,
 duration: 0.5,
 stagger: 0.3,
});
// ==== TOGGLE BTN ==== //
gsap.from(".toggle_btn", {
 opacity: 0,
 y: -10,
 delay: 1.4,
 duration: 0.5,
});
// ==== MAIN HEADING ==== //
gsap.from(".main-heading", {
 opacity: 0,
 y: 20,
 delay: 2.4,
 duration: 1,
});
// ==== INFO TEXT ==== //
gsap.from(".info-text", {
 opacity: 0,
 y: 20,
 delay: 2.8,
 duration: 1,
});
// ==== CTA BUTTONS ==== //
gsap.from(".btn_wrapper", 
 opacity: 0,
 y: 20,
 delay: 2.8,
 duration: 1,
});
// ==== TEAM IMAGE ==== //
gsap.from(".team_img_wrapper img", {
 opacity: 0,
 y: 20,
 delay: 3,
 duration: 1,
});

And that's it guys here we end our project! Thank you so much for reading the post till the end !!! Please Make sure you check out my Youtube Channel where I post this kind of coding tutorial.

Thank You! Happy Coding