DEV Community: margishpatel

13 Principles of Information Architecture Every Web Designer Should Know✅

margishpatel — Fri, 18 Jul 2025 04:45:59 +0000

1. Organization:
Information architecture is about organizing information in a logical and meaningful way, making it easy for users to find what they're looking for.

2. Labeling:
Use clear and descriptive labels for content to help users understand its context and purpose.

3. Navigation: Create a clear and consistent navigation system to guide users through the website.

4. Search:
Provide a search function that is easy to use and returns relevant results.

5. Chunking:
Group related information together in smaller, manageable chunks to make it easier for users to understand and find what they need.

6. Hierarchy:
Use a clear hierarchy to indicate the relative importance of different pieces of content.

7. Consistency:
Maintain consistency throughout the website to help users understand the relationships between different pieces of content.

8. Flexibility:
Allow for different ways of accessing and interacting with the content to accommodate different user needs and preferences.

9. Simplicity:
Keep the information architecture simple and straightforward to minimize confusion and increase usability.

10. Feedback:
Provide feedback to users to help them understand their actions and the results of those actions.

11. Testing:
Test the information architecture with real users to ensure it is effective and efficient.

12. Scalability:
Design the information architecture to be scalable, so it can accommodate future growth and changes.

13. Accessibility:
Ensure the information architecture is accessible to users with disabilities and comply with the web accessibility guidelines.

It's important to remember that good information architecture is not only about making the website easy to use but also about creating an effective communication channel between the user and the website.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

10 Best Practices for Improved HTML Code Quality 💯✅

margishpatel — Fri, 18 Jul 2025 04:42:32 +0000

Here are 10 best practices for improving the quality of your HTML code:

1. Use semantic HTML: Write HTML that clearly conveys the meaning and structure of the content, using appropriate tags such as <header>, <nav>, <main>, <section>, <article>, <footer>, etc.

2. Use lowercase tags and attributes: It is considered good practice to use lowercase letters for all HTML tags and attributes, as this makes the code easier to read and maintain.

3. Validate your code: Use an HTML validator tool to check your code for errors and ensure that it complies with the HTML standard.

4. Use indentation and comments: Use proper indentation and comments to make your code more readable and understandable for other developers.

5. Use appropriate attribute values: Use appropriate values for attributes such as alt, title, and href to improve accessibility and SEO.

6. Use CSS for presentation: Use CSS for styling and layout, rather than inline styles or HTML tags such as <font>, <b>, or <i>.

7. Avoid deprecated tags and attributes: Avoid using deprecated HTML tags and attributes, such as <center> or <font>, as they are no longer considered best practices and may cause compatibility issues.

8. Use relative paths: Use relative paths for links and references to other files and resources, as this makes the code more portable and easier to maintain.

9. Optimize images: Use optimized and appropriately sized images to improve page load times and overall performance.

10. Test your code: Test your HTML code on different browsers and devices to ensure that it displays and functions correctly for all users.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

Fix Flatpickr Showing Multiple Date & Time Pickers on Mobile & Tablet

margishpatel — Mon, 03 Mar 2025 12:46:32 +0000

If Flatpickr is displaying multiple date or time pickers on mobile and tablet devices, it's likely due to the native browser pickers conflicting with Flatpickr's UI. Here’s how to fix it:

1️⃣ Change Input Type to "Text"
Use <input type="text"> instead of <input type="date"> to prevent the native picker.

<input type="text" id="datepicker" />
<input type="text" id="timepicker" />

2️⃣ Initialize Flatpickr Properly (React/Next.js)

Ensure Flatpickr is correctly set up in your component:
import { useEffect, useRef } from "react";
import flatpickr from "flatpickr";

const DateTimePicker = () => {
  const datepickerRef = useRef(null);
  useEffect(() => {
    flatpickr(datepickerRef.current, { dateFormat: "Y-m-d" });
  }, []);
  return <input type="text" ref={datepickerRef} />;
};

3️⃣ Force Flatpickr on Mobile (disableMobile: true)
This prevents the browser’s native picker from appearing:

flatpickr(datepickerRef.current, {
  dateFormat: "Y-m-d",
  disableMobile: true, // Forces Flatpickr's custom UI
});

4️⃣ Check for CSS Conflicts
Ensure no styles are interfering:

.flatpickr-calendar {
  z-index: 9999 !important;
}

5️⃣ Test on Multiple Browsers & Devices
Try Chrome, Safari, and Firefox on iOS & Android to ensure compatibility.

By following these steps, Flatpickr will work smoothly on all devices! 🚀

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

Build an Image Magnifier Component in ReactJs

margishpatel — Wed, 01 May 2024 11:02:37 +0000

React image magnifier tutorial.

Create an Image Magnifier Component in ReactJs. With step-by-step instructions and code examples, you'll learn how to enhance user experience by allowing them to zoom in on images for a closer look. Follow along to build your own customizable image magnifier component and elevate your web development skills!"

Step 1: Setting Up the Component Structure
First, let's establish the basic structure of our image magnifier component. We'll define the component function and set up its initial state.

import React, { useState } from 'react';

function ImageMagnifier({
  src,
  width,
  height,
  magnifierHeight = 100,
  magnifierWidth = 100,
  zoomLevel = 1.5
}) {
  const [[x, y], setXY] = useState([0, 0]);
  const [[imgWidth, imgHeight], setSize] = useState([0, 0]);
  const [showMagnifier, setShowMagnifier] = useState(false);

  // Rest of the component code will be added in subsequent steps
}

Step 2: Managing Mouse Events
Next, let's handle mouse events to control the display of the magnifier when hovering over the image.

<img
  src={src}
  style={{ height: height, width: width }}
  onMouseEnter={(e) => {
    const elem = e.currentTarget;
    const { width, height } = elem.getBoundingClientRect();
    setSize([width, height]);
    setShowMagnifier(true);
  }}
  onMouseMove={(e) => {
    const elem = e.currentTarget;
    const { top, left } = elem.getBoundingClientRect();
    const x = e.pageX - left - window.pageXOffset;
    const y = e.pageY - top - window.pageYOffset;
    setXY([x, y]);
  }}
  onMouseLeave={() => {
    setShowMagnifier(false);
  }}
  alt={"img"}
/>

Step 3: Rendering the Magnifier
Now, let's add the magnifier element and style it based on the cursor position and image dimensions.

<div
  style={{
    display: showMagnifier ? "" : "none",
    position: "absolute",
    pointerEvents: "none",
    height: `${magnifierHeight}px`,
    width: `${magnifierWidth}px`,
    top: `${y - magnifierHeight / 2}px`,
    left: `${x - magnifierWidth / 2}px`,
    opacity: "1",
    border: "1px solid lightgray",
    backgroundColor: "white",
    backgroundImage: `url('${src}')`,
    backgroundRepeat: "no-repeat",
    backgroundSize: `${imgWidth * zoomLevel}px ${imgHeight * zoomLevel}px`,
    backgroundPositionX: `${-x * zoomLevel + magnifierWidth / 2}px`,
    backgroundPositionY: `${-y * zoomLevel + magnifierHeight / 2}px`
  }}
></div>

We done it. Here is the full code and a demo:

// ImageMagnifier.js
import { useState } from 'react';

const ImageMagnifier = ({
    src,
    className,
    width,
    height,
    alt,
    magnifierHeight = 150,
    magnifierWidth = 150,
    zoomLevel = 3
}) => {
    const [showMagnifier, setShowMagnifier] = useState(false);
    const [[imgWidth, imgHeight], setSize] = useState([0, 0]);
    const [[x, y], setXY] = useState([0, 0]);

    const mouseEnter = (e) => {
        const el = e.currentTarget;

        const { width, height } = el.getBoundingClientRect();
        setSize([width, height]);
        setShowMagnifier(true);
    }

    const mouseLeave = (e) => {
        e.preventDefault();
        setShowMagnifier(false);
    }

    const mouseMove = (e) => {
        const el = e.currentTarget;
        const { top, left } = el.getBoundingClientRect();

        const x = e.pageX - left - window.scrollX;
        const y = e.pageY - top - window.scrollY;

        setXY([x, y]);
    };

    return <div className="relative inline-block">
        <img
            src={src}
            className={className}
            width={width}
            height={height}
            alt={alt}
            onMouseEnter={(e) => mouseEnter(e)}
            onMouseLeave={(e) => mouseLeave(e)}
            onMouseMove={(e) => mouseMove(e)}
        />
        <div
            style={{
                display: showMagnifier ? '' : 'none',
                position: 'absolute',
                pointerEvents: 'none',
                height: `${magnifierHeight}px`,
                width: `${magnifierWidth}px`,
                opacity: '1',
                border: '1px solid lightgrey',
                backgroundColor: 'white',
                borderRadius: '5px',
                backgroundImage: `url('${src}')`,
                backgroundRepeat: 'no-repeat',
                top: `${y - magnifierHeight / 2}px`,
                left: `${x - magnifierWidth / 2}px`,
                backgroundSize: `${imgWidth * zoomLevel}px ${imgHeight * zoomLevel}px`,
                backgroundPositionX: `${-x * zoomLevel + magnifierWidth / 2}px`,
                backgroundPositionY: `${-y * zoomLevel + magnifierHeight / 2}px`,
            }}
        />
    </div>
};

export default ImageMagnifier;

// App.js
import React from 'react';
import ImageMagnifier from './ImageMagnifier';

const App = () => {
    return (
        <div>
            <ImageMagnifier 
                src="../images/demo-img.jpg"
                width={300}
                height={200}
                magnifierHeight={100}
                magnifierWidth={100}
                zoomLevel={2}
                alt="Sample Image"
            />
        </div>
    );
};

export default App;

Conclusion
And there you have it! We've successfully created a simple yet functional image magnifier component in React. Users can now hover over images to inspect them closely, thanks to our intuitive magnifier feature.

Feel free to customize and enhance this component further to suit your specific needs. Happy coding!

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

💡 Understanding SEO for Web Developers

margishpatel — Wed, 29 Nov 2023 10:27:22 +0000

SEO (Search Engine Optimization) is crucial for websites to rank higher in search engine results pages (SERPs). As a web developer, optimizing a website for search engines involves various technical aspects. Here are some techniques, including meta tags, structured data, and other SEO strategies:

1. Optimizing Meta Tags:

Title Tag: Ensure each page has a unique, descriptive title tag (within 50-60 characters) containing relevant keywords to the content.
Meta Description: Write compelling meta descriptions (around 150-160 characters) summarizing the page content. Use keywords naturally and entice users to click.
Meta Robots Tag: Use meta tags like robots to instruct search engine crawlers on how to index or follow links on a page.

2. Structured Data Markup:

Implement structured data using schemas like Schema.org to provide search engines with additional context about the content. This can enhance rich snippets in search results. -Use markup for various content types such as articles, events, reviews, products, and FAQs.

3. Optimizing Website Speed and Performance:

Ensure fast-loading pages by optimizing images, leveraging browser caching, minifying CSS/JavaScript files, and reducing server response time.
Implementing Accelerated Mobile Pages (AMP) for mobile users can significantly improve site speed and visibility.

4. Mobile Responsiveness:

Design websites to be mobile-friendly and responsive across various devices. Use responsive design principles to adapt content layouts to different screen sizes.

5. URL Structure:

Create clean, descriptive, and user-friendly URLs that include relevant keywords. Avoid using long strings of numbers or special characters.

6. Optimizing Images:

Use descriptive file names and include alt text for images, incorporating relevant keywords where appropriate. This helps search engines understand the content of images.

7. Site Navigation and Internal Linking:

Ensure a logical and organized site structure that allows search engines to crawl and index pages easily. Use internal linking to connect related content and distribute link authority.

8. HTTPS and Security:

Secure your website with HTTPS as it not only encrypts data but is also a ranking factor for search engines. It builds trust and credibility among users.

9. Monitoring and Analytics:

Use tools like Google Analytics and Google Search Console to monitor website performance, track keywords, identify issues, and improve SEO strategies based on data.

10. Content Quality and Relevance:

While not a direct development task, collaborating with content creators to ensure high-quality, relevant, and engaging content is crucial for SEO success.

Staying updated with SEO best practices and algorithm changes is essential for developers to adapt and optimize websites effectively for search engines. Regularly auditing and refining these techniques can lead to better search visibility and user experience.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

Top 10 Unique HTML Attributes You Should Know About. 🚀💡💯

margishpatel — Tue, 21 Nov 2023 05:25:50 +0000

HTML, the markup language for creating web pages, has a variety of attributes that provide functionalities and define different aspects of elements on a web page. Some unique or less commonly known attributes include:

1) contenteditable: This attribute makes the content of an element editable by the user. It can be applied to various HTML elements like <div>, <p>, or <span> to allow direct user input.

Example:

<div contenteditable="true">
    This content can be edited by the user.
</div>

2) draggable: When set to true, this attribute allows an element to be draggable. It's often used in conjunction with JavaScript to create drag-and-drop functionalities.

Example:

<img src="image.jpg" draggable="true" alt="Drag me">

3) hidden: This attribute hides the element from being displayed. It's different from CSS display: none; as it completely removes the element from the document's layout flow.

Example:

<p hidden>This paragraph is hidden</p>

4) download: Used with <a> elements, it prompts the user to download the linked resource rather than navigating to it. When clicked, it initiates the download of the specified resource.

Example:

<a href="myfile.pdf" download>Download PDF</a>

5) spellcheck: This attribute, when included in an editable element, enables or disables spell checking for the content within that element.

Example:

<textarea spellcheck="true"></textarea>

6) sandbox: Primarily used with <iframe> elements, it restricts what the embedded content can do (such as preventing scripts, form submission, or same-origin restrictions) for added security.

Example:

<iframe src="https://example.in" sandbox="allow-scripts"></iframe>

7) loading: This attribute controls how the browser loads an external resource specified in elements like <img>, <iframe>, <script>, etc. It helps improve page performance by specifying lazy loading or eager loading of resources.

Example:

<img src="image.jpg" loading="lazy" alt="Lazy-loaded image">

8) defer: Used with the <script> element, the defer attribute ensures that the script will be executed after the document has been parsed.

Example:

<script defer src="myscript.js"></script>

9) async: Similar to defer, the async attribute is used with the <script> element, but it indicates that the script should be executed asynchronously.

Example:

<script async src="myscript.js"></script>

10) Translate: This attribute is used to specify whether the content of an element should be translated when the page is localized.

Example:

<p translate="no">This content should not be translated.</p>

While these attributes provide additional functionalities, it's essential to use them appropriately and consider browser compatibility and accessibility concerns when implementing them in web projects.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

Clean UI Guide: 15 White Space Design Tips 🚀💡

margishpatel — Wed, 09 Aug 2023 05:17:03 +0000

White space, also known as negative space, is the blank area around the design elements of a user interface (UI). It plays an important role in creating a visually appealing and easy-to-use UI. Here are 15 white space design tips to help you create a clean UI:

Use white space to create a clear hierarchy of information. More white space can be used to separate important elements from less important ones.
Use white space to make important elements stand out. It can help to draw the eye to a call to action or other important feature.
Use ample white space between lines of text to improve readability. This makes it easier for users to read and understand the content on your website or app.
Use generous padding around buttons and other interactive elements. This makes them easier to click on, which is important for improving usability.
Use consistent spacing throughout your UI. This helps to create a sense of order and balance.
Use white space to create a sense of breathing room. This makes your UI feel less cluttered and overwhelming.
Use white space to create a focal point. This can be achieved by increasing the amount of white space around a particular element.
Use white space to group related elements together. This can help to create a visual hierarchy and make it easier for users to understand the content on your site or app.
Use white space to create a sense of elegance and sophistication. By using white space effectively, you can create a design that looks clean, modern, and stylish.
Use white space to create contrast. This can help to make important elements stand out from the background.
Use white space to create a sense of movement. This can be achieved by using white space to guide the eye from one element to the next.
Use white space to create a sense of order. By using white space effectively, you can create a design that looks organized and well thought out.
Use white space to create a sense of simplicity. A design with ample white space can look clean and simple, which can be very effective in certain contexts.
Use white space to create a sense of professionalism. A design that makes good use of white space can look polished and professional, which can be very important for certain types of websites and apps.
Use white space to create a sense of balance. By using white space effectively, you can create a design that looks balanced and harmonious, which can be very appealing to users.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

10 Rules I Follow When Writing HTML To Make It Concise and Readable🚀💡

margishpatel — Sat, 13 May 2023 05:22:34 +0000

Here are 10 rules that can be followed when writing HTML to make it more concise and readable:

1. Use semantic elements:
Use semantic elements such as <header>, <nav>, <main>, <article>, <section>, <footer> and more to clearly communicate the purpose of the content.

2. Use descriptive class and id names:
Use descriptive class and id names that clearly communicate the purpose of the element.

3. Use the alt attribute for images:
Use the alt attribute for images, to provide a text description of the image in case the image can't be loaded.

4. Use the title attribute for links:
Use the title attribute for links, to provide additional information about the link.

5. Keep nesting to a minimum:
Keep nesting to a minimum to avoid complex structure, which makes it harder to understand the relationships between elements.

6. Use comments:
Use comments to explain the purpose of different sections of your HTML, and to help other developers understand your code.

7. Use a template engine:
Use a template engine such as Handlebars or Mustache, which allows you to separate the presentation logic from the data and make your HTML more readable and maintainable.

8. Use the correct header levels:
Use the correct header levels H1, H2, H3, etc. to create a logical structure of the content.

9. Use lists correctly:
Use lists correctly, either as an ordered list <ol> or unordered list <ul> to structure the content.

10. Keep it simple:
Keep your HTML simple and avoid over-engineering solutions. The simpler your HTML is, the easier it will be to maintain and understand.

By following these rules, your HTML will be more concise, readable and semantic, which makes it easier to maintain and collaborate on projects.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

Free Design Resources 🤩🚀

margishpatel — Fri, 05 May 2023 10:51:22 +0000

Free Design Resources refer to a collection of digital design assets, including Typography, Images, Mockups, Icon, Illustrations, and Colors, that are available for free, and can be used by designers, developers, and creative professionals for personal and commercial projects. Refer billow links and do create creativity in your design.

Typography

1.font.google.com

Google Fonts is a free and open-source resource that offers a vast collection of fonts optimized for web use, which can be easily integrated into websites and other design projects.

2.dafont.com

Dafont.com offers free fonts for personal use, but it's important to check the license of each font before using it for commercial projects, as some fonts may have restrictions on commercial use.

3.fontshare.com

Fontshare.com offers a collection of free and open-source fonts for personal and commercial use without restrictions, created by independent designers from around the world.

4.fontsquirrel.com

Fontsquirrel.com offers a large collection of high-quality, free fonts licensed for commercial use.

5. cufonfonts.com

Cufonfonts.com offers a large collection of free and paid fonts for personal and commercial use, but it's important to check the license of each font before using it for commercial projects.

6.fontspace.com

Fontspace.com is a website that offers a large collection of free fonts for personal and commercial use, with an easy-to-use interface for searching and downloading fonts in various formats.

Images

1.unsplash.com

Unsplash.com provides a large library of high-quality, royalty-free stock photos for personal and commercial use, with no attribution required and an active community of contributors.

2.pexels.com

Pexels.com provides a large library of high-quality, royalty-free stock photos and videos for personal and commercial use, with no attribution required and an active community of contributors.

3.pixabay.com

Pixabay.com provides a vast collection of high-quality, royalty-free stock photos, illustrations, vectors, and videos, which can be used for personal and commercial projects without attribution, with a user-friendly search interface and an active community of contributors.

4.freepik.com

Freepik.com is a website that offers a large collection of free and premium design resources, including vectors, illustrations, icons, PSD files, and photos, with free resources available for personal and commercial use with attribution and premium resources available through a paid subscription.

5.kaboompics.com

Kaboompics.com is a website that provides a large collection of high-quality, royalty-free stock photos, including lifestyle, food, travel, and fashion photography, which can be used for personal and commercial projects without attribution, with a simple and user-friendly interface for searching and downloading photos.

6.freeimages.com

Stock.xchng (SXC) was a website that provided free-to-use stock photography and illustrations, founded in 2001 by Peter Hamza, which was later acquired by Getty Images and rebranded as "FreeImages.com" before being shut down in 2019.

Mockups

1.mockupworld.co

Mockupworld.co provides a variety of free mockup templates for personal and commercial use, spanning stationery, packaging, and device mockups.

2.unblast.com

Unblast.com provides a comprehensive range of free and premium design resources, including mockups, templates, icons, and graphics, for personal and commercial use.

3.pixeden.com

Pixeden.com is a website that provides a variety of design resources, including mockups, graphics, templates, and icons, which can be used for personal and commercial projects through a free or paid membership.

4.previewed.app

Previewed.app is a website that offers free design resources, including mockups, templates, graphics, and fonts, which can be used for personal and commercial projects, with new resources added daily.

5.mockups-design.com

Mockups-design.com is a website that offers a variety of free and premium mockup templates for personal and commercial use, with a focus on high-quality and photorealistic mockups for a wide range of design projects.

6.ls.graphics

LS.graphics is a website that offers a range of free and premium design resources, including mockups, templates, illustrations, and textures, which can be used for personal and commercial projects, with new resources added regularly.

Icon

1.iconsax.io

Iconsax.io is a website that provides a collection of high-quality, customizable icons that can be used for personal and commercial projects, with both free and paid plans available.

2.icons8.com

Icons8.com is a website that offers a large library of free icons, illustrations, and photos, as well as premium design assets, which can be used for personal and commercial projects with proper attribution or through a paid subscription.

3.feathericons.com

Feathericons.com is a website that offers a collection of open-source icons that can be used for personal and commercial projects, with an easy-to-use interface for browsing and downloading icons in various formats.

4.iconscout.com/free-icons

Iconscout.com/free-icons is a website that offers a vast collection of free icons, illustrations, and stock photos, which can be used for personal and commercial projects with proper attribution, as well as premium design assets available through a paid subscription.

5.thenounproject.com

Thenounproject.com is a website that provides a large collection of high-quality, customizable icons, with both free and paid plans available for personal and commercial use, as well as an easy-to-use interface for searching and downloading icons in various formats.

Illustrations

1.opendoodles.com

Opendoodles.com is a website that provides a collection of open-source illustrations that can be used for personal or commercial projects.

2.undraw.co

Undraw.co is a website that provides a collection of open-source illustrations that can be used for personal or commercial projects, with the ability to change the color of the illustrations to match the user's needs.

3.drawkit.com

Drawkit.com is a website that provides a collection of customizable vector illustrations, icons, and elements that can be used for personal or commercial projects, with a focus on simple and clean designs.

4.icons8.com/illustrations

Icons8.com/illustrations is a website that offers a wide range of vector illustrations and 3D designs in various styles and formats that can be used for personal or commercial projects, with the ability to customize colors, sizes, and formats.

5.humaaans.com

Humaaans.com is a website that provides a collection of customizable vector illustrations of people, with the ability to mix and match different body parts, clothing, and accessories to create unique characters that can be used for personal or commercial projects.

Colors

1.coolors.co

Coolors.co is a color scheme generator and palette tool that allows designers to create and customize color palettes, providing additional features such as color blindness simulation, accessibility checks, and export of color codes.

2.khroma.co

Khroma.co is a website that provides an AI-powered color palette generator that suggests unique and personalized color schemes based on user preferences and selections.

3.colorhunt.co

Colorhunt.co is a website that provides a curated collection of color palettes created by designers and artists, allowing users to explore and use different color schemes for their projects. The website also allows users to create and save their own color palettes.

4.colors.dopely.top

colors.dopely.top is a website that offers a curated collection of color palettes with the ability to browse and copy hex codes for use in design projects.

5.colors.muz.li

Colors.muz.li is a website that provides a curated collection of color palettes created by designers and artists, with the ability to explore and use different color schemes for inspiration in design projects. The website also includes other design resources and tools.

6.flatuicolors.com

Flatuicolors.com is a website that provides a collection of flat UI color palettes that can be used in web design and mobile app development, with the ability to copy the hex codes for each color in the palette.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

13 Rules I Follow When Writing CSS To Make It Concise and Readable🚀💡

margishpatel — Sun, 23 Apr 2023 08:28:55 +0000

Here are 13 rules that can be followed when writing CSS to make it more concise and readable:

1. Use a preprocessor: Use a CSS preprocessor such as SASS or LESS, which allows you to use variables, functions, and nested rules, making your CSS more modular and easier to maintain.

$primary-color: #011A52;
$secondary-color: #990000;

body {
  background-color: $primary-color;
  color: $secondary-color;
}

2. Use a style guide: Use a style guide such as SMACSS or BEM, which provides a consistent structure for your CSS.
HTML

<div class="card">
  <div class="card__header">
    <h2 class="card__title">Card Title</h2>
  </div>
  <div class="card__body">
    <p class="card__text">Card Text</p>
  </div>
  <div class="card__footer">
    <a href="#" class="card__link card__link--primary">Primary Link</a>
    <a href="#" class="card__link card__link--secondary">Secondary Link</a>
  </div>
</div>

Blocks: .block
Elements: .block__element
Modifiers: .block__element--modifier

CSS:

.card {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 10px;
}

.card__header {
  margin-bottom: 10px;
}

.card__title {
  font-size: 1.5em;
  margin: 0;
}

.card__body {
  padding: 10px;
}

.card__text {
  font-size: 1.2em;
  margin: 0;
}

.card__footer {
  margin-top: 10px;
}

.card__link {
  color: #333333;
  text-decoration: none;
  margin-right: 10px;
}

.card__link--primary {
  color: #ffffff;
  background-color: #336699;
  padding: 5px 10px;
  border-radius: 5px;
}

.card__link--secondary {
  border: 1px solid #336699;
  padding: 5px 10px;
  border-radius: 5px;
}

4. Use CSS classes: Avoid using element selectors and instead, use classes to target specific elements. This makes it easier to reuse styles across different elements.

5. Keep it organized: Use a consistent naming convention and organize your CSS into sections such as base styles, layout, and modules.

6. Avoid !important: Avoid using the !important keyword, as it can make it harder to override styles later.

7. Be mindful of specificity: Be mindful of the specificity of selectors, as this can affect which styles are applied to elements.

8. Use shorthand: Use shorthand properties such as padding, margin, and font to make your CSS more concise.

font: 700 16px/1.5 'Roboto', sans-serif;
margin: 40px 0 20px;
padding: 10px 20px;

9. Use CSS variables: Use CSS variables to store values that are used throughout the stylesheet, such as colors and fonts.

/* Variables */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-family: 'Roboto', sans-serif;
}

/* Typography */
body {
  font: 16px/1.5 var(--font-family);
  color: var(--secondary-color);
}

h1{
  font: bold 32px/1.2 var(--font-family);
  margin: 40px 0 20px;
}

/* Button Variations */
button{
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font: bold 16px/1.5 var(--font-family);
}

10. Minimize nesting: Minimize the use of nesting in your CSS, as this can make it harder to understand the relationships between elements.

11. Use comments: Use comments to explain the purpose of different sections of your CSS and to help other developers understand your code.

12. Use a linter: Using a linter such as Stylelint can help enforce good coding practices, identify errors in your CSS, and assist in fixing them.

13. Use a framework: Use a CSS framework such as Bootstrap or Foundation, which provides a set of pre-built styles and components that can be used to quickly create a professional-looking website.

Keep your CSS simple and avoid over-engineering solutions. The simpler your CSS is, the easier it will be to maintain and understand.

By following these rules, your CSS will be more concise and readable, which makes it easier to maintain and collaborate on projects.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

What is Flexbox in CSS?💡

margishpatel — Tue, 11 Apr 2023 09:12:43 +0000

Flexbox is a layout system in CSS that allows for flexible and responsive design without relying on float, positioning, or other layout techniques. It simplifies the creation of complex layouts and is especially useful for building user interfaces and responsive designs. Here is a beginner's guide to flexbox:

1) Understanding the Flex Container and Flex Items

To use Flexbox, you must first create a flex container by setting the 'display' property of an element to 'flex. Once an element is a flex container, its child elements become flex items. Flex items can be aligned, ordered, and sized within the flex container using Flexbox properties.

2) Flexbox Properties

Here are some of the most commonly used Flexbox properties:

'justify-content': aligns flex items horizontally within the container.
'align-items': aligns flex items vertically within the container.
'flex-direction': sets the direction of the main axis of the flex container.
'flex-wrap': controls whether flex items should wrap to multiple lines if there is not enough space in the container.
'flex-grow': determines how much a flex item should grow relative to other flex items in the container.
'flex-shrink': determines how much a flex item should shrink relative to other flex items in the container.
'flex-basis': specifies the initial size of a flex item before any remaining space is distributed.
'align-self': allows individual flex items to override the 'align-items' property.

3) Creating a Basic Flex Layout

To create a basic flex layout, follow these steps:

Create a container element and set the 'display' property to 'flex'.
Set the 'flex-direction' property to determine the main axis of the container. The default value is row, which means the main axis runs horizontally. You can also set it to 'column' for a vertical main axis.
Add child elements to the container, which become the flex items.
Use Flexbox properties such as 'justify-content', 'align-items', and 'flex-wrap' to position and style the flex items within the container.

Here's an example of a basic flex layout:
HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-item {
  background-color: #9e9898;
  color: #ffffff;
  padding: 10px;
  margin: 10px;
  text-align: center;
  font-size: 24px;
}

In this example, the container is set to 'display: flex' and the 'justify-content' and 'align-items' properties are used to center the items horizontally and vertically. The 'flex-item' class is applied to each item, and its styles determine the background color, font color, padding, margin, text alignment, and font size.

4) Conclusion
Flexbox is a powerful tool for creating flexible and responsive layouts. By understanding the basics of the flex container and flex items, and using Flexbox properties effectively, you can easily create complex and dynamic layouts that work on any device.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

How to make your HTML responsive using display grid. 💯✅

margishpatel — Fri, 07 Apr 2023 04:43:04 +0000

To make your HTML responsive using display grid, you can follow these steps:

Define the grid container: First, define the container element that will hold your grid using the display: grid property. This will enable the grid layout.

Set the grid template columns and rows: Next, set the grid template columns and rows using the grid-template-columns and grid-template-rows properties. These properties allow you to specify how many columns and rows the grid should have, as well as their size and spacing.

Place grid items: After defining the grid template columns and rows, you can place your grid items using the grid-column and grid-row properties. These properties allow you to specify which cells your items should span across.

Use media queries: Finally, to make your grid responsive, you can use media queries to adjust the grid layout based on the screen size. You can use the @media rule to set different grid properties at different breakpoints, such as changing the number of columns or their size.

Here's an example code snippet that demonstrates how to create a simple responsive grid layout:

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Output

In this example, the .container element is set to display: grid and has three columns with a gap of 20px between them. The .item elements are placed within the grid using the grid-column and grid-row properties.

Then, two media queries are used to adjust the grid layout at different screen sizes. When the screen size is less than or equal to 768px, the grid is set to have two columns instead of three. And when the screen size is less than or equal to 480px, the grid is set to have only one column. This allows the grid to adapt and remain responsive on different devices and screen sizes.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

What is Flexbox : A Beginner's Guide to Flexbox CSS Layouts

👋Hey there, Let’s connect on:
Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com