The Importance of Having a Website for Every Business

In today’s digital age, having a strong online presence is crucial for the success and growth of any business. While social media platforms and online marketplaces offer some visibility, having a dedicated business website is a fundamental component of a robust online strategy. In this blog post, we will explore the reasons why every business needs a website and how it can significantly impact its growth and overall success.

Online Success Made Simple: Why Your Business Needs a Website -

Establishes Credibility and Trust:
A well-designed website serves as a virtual storefront, instantly establishing credibility and trust with potential customers. It showcases your brand’s professionalism, expertise, and legitimacy. In the absence of a website, customers may perceive your business as outdated or unreliable, ultimately leading them to choose your competitors.

Enhances Online Visibility:
With billions of people actively using the internet, having a website increases your business’s visibility exponentially. By incorporating relevant keywords, optimizing content, and implementing effective SEO strategies, you can improve your website’s search engine rankings. This, in turn, drives organic traffic to your site, ensuring that potential customers find you easily when searching for products or services related to your industry.

24/7 Availability and Accessibility:
Unlike a physical store with limited operating hours, a website is available 24/7, providing customers with access to your business at their convenience. Whether it’s making a purchase, finding information, or contacting customer support, a website allows users to engage with your brand anytime, anywhere. This accessibility strengthens customer satisfaction and expands your potential customer base globally.

Showcases Products and Services:
A website offers a platform to showcase your products or services in a visually appealing and informative manner. You can provide detailed descriptions, high-quality images, videos, and even customer testimonials to effectively communicate the value and benefits you offer. By highlighting your unique selling points, you can persuade potential customers to choose your business over competitors.

Facilitates Business Growth and Expansion:
A website opens up new opportunities for business growth and expansion. It allows you to reach a wider audience beyond your local market, potentially attracting customers from different geographical locations. Additionally, you can integrate e-commerce functionalities, enabling online sales and expanding revenue streams. With the right marketing strategies, a website can significantly contribute to your business’s long-term success.

Builds Customer Relationships:
A website is not just a one-way communication tool; it also enables you to build and nurture valuable customer relationships. By incorporating features such as contact forms, live chat support, or interactive comment sections, you can engage with your audience, address their queries, and provide personalized assistance. This level of interaction fosters trust, loyalty, and customer satisfaction.

In an increasingly digital world, having a website is no longer optional for businesses; it is a necessity. From establishing credibility and trust to enhancing online visibility and facilitating growth, a well-designed website offers numerous benefits. Investing in a professional website is an investment in the long-term success and growth of your business. So, don’t miss out on the opportunity to maximize your potential and stay ahead of the competition. Get started on creating or improving your business website today! Contact Now.

How to change Select dropdown arrow?

To change the appearance of the select dropdown arrow in an HTML, you can use CSS to target the select element and add a custom arrow. For example, the following CSS code will change the arrow:

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns=''><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: .7rem;
  padding-right: 2rem;

Note that you need to put the CSS code in your CSS file and make sure the -webkit-appearance/-moz-appearance is none.

Top 10 Git commands with example

Top 10 Git commands listed here:

  • git config
    • git config -global “[name]”
    • git config -global “[email]”
  • git clone
    • git clone [url]
  • git add
    • git add [file]
    • git add *
  • git commit
    • git commit -m “commit message text”
    • git commit -am “commit message text” ( add & commit file with this command )
  • git status
    • git status ( This command lists all the files that have to be committed )
  • git stash
    • git stash ( This command discards all changes )
  • git branch
    • git branch ( This command shows all local branches )
    • git branch -a ( This command shows all branches )
  • git fetch
    • git fetch ( This command fetches all updates )
  • git checkout
    • git checkout [branch-name]
    • git checkout -b [branch-name] ( new branch created and checkout )
  • git merge
    • git merge [branch-name]
    • example –
      • git checkout [main-branch]
      • git merge [branch-name]
  • git push
    • git push ( This command sends the committed changes of the working branch to your remote repository )
  • git pull
    • git pull ( This command fetches and merges changes on the remote server to your working directory )
  • git show
    • git show ( This command shows the content changes of specified files )
  • git log
    • git log ( This command is used to list the version history for the current branch )

Countdown timer hours minutes seconds jquery

The countdown functionality can easily be added to HTML code, you do need to set the expiry time and add some jquery code to your project.


<div id="countdown">
  <div id="days"></div>
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>

<script src=""></script>


function counterTime() {
    var endTime = new Date("10 June 2023 12:00:00 GMT+05:30");         
    endTime = (Date.parse(endTime) / 1000);

    var now = new Date();
    now = (Date.parse(now) / 1000);

    var timeLeft = endTime - now;

    var days = Math.floor(timeLeft / 86400); 
    var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
    var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
    var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

    if (hours < "10") { hours = "0" + hours; }
    if (minutes < "10") { minutes = "0" + minutes; }
    if (seconds < "10") { seconds = "0" + seconds; }

    if(days >= 0 && hours >= 0 && minutes >= 0 && seconds >= 0){
        $("#days").html(days + "<span>Days</span>");
        $("#hours").html(hours + "<span>Hours</span>");
        $("#minutes").html(minutes + "<span>Minutes</span>");
        $("#seconds").html(seconds + "<span>Seconds</span>");

setInterval(function() { counterTime(); }, 1000);


  display: flex;
  font-family: 'Poppins';

#countdown div{
  margin: 0 7px;
  font-size: 24px;
  font-weight: bold;

#countdown span{
  font-weight: normal;
  font-size: 16px;
  margin: 0 5px;



Difference between two dates in days jquery

In this post, we find a difference between two dates in days

TypeScript File

var timeStart= new Date(this.startDate).getTime();
var timeEnd = new Date(this.endDate).getTime();
var diff = timeEnd - timeStart; //in ms
var milliseconds = timeStart > timeEnd ? timeStart % timeEnd : timeEnd % timeStart;
var seconds = milliseconds / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var weeks = days / 7;
var totalDays = Math.ceil(days);
this.result = totalDays + ' Days';
// console.log('Days',days.toFixed(2));
console.log('Total Days',totalDays);


<h1>Difference b/w two dates in days</h1>

<p>Start Date - <b>{{startDate}}</b></p>
<p>End Date - <b>{{endDate}}</b></p>
<p>Result - <b>{{result}}</b></p>


difference between two days

StackBiltz working example here Open StackBiltz

Display row only if certain conditions are met in ngx-datatable

TypeScript File

In ngx-datatable we show our data to the datatable link this [rows]=”rows”, what you need to do is filter out the objects you don’t want to be in the datatable, something like this in your TypeScript file

filterDataList: any;

const case1= 'Aryan';
const case2= 'Maurya';
this.filterDataList = this.rows.filter(row => case1.includes(row.first_name));
this.filterDataList = this.rows.filter(row => !case2.includes(row.last_name));


    name="Sr. No"
    headerClass="no-sorting text-center"
    <ng-template let-value="value" ngx-datatable-cell-template>
      <div class="text-center">{{ value }}</div>
    name="First Name"
    <ng-template let-value="value" ngx-datatable-cell-template>
      <div class="text-center text-wrap">
        {{ value }}
    name="Last Name"
    <ng-template let-value="value" ngx-datatable-cell-template>
      <div class="text-center text-wrap">
        {{ value }}


ngx datatable


jQuery Add/Remove class on parent/sibling

The jQuery siblings() method is used to get the sibling elements of the selected element.

The following example will highlight the siblings of the <li> element by adding the class .active on document ready.


In the initial step, you need to load the latest version of jQuery into your file.

<script src=""></script>

<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>


ul li{
  cursor: pointer;
  background: #008f8d;
  list-style: none;
  margin-bottom: 15px;
  padding: 7px 15px;

  background: black;
  color: white;

jQuery CODE

Finally, we will write down our jquery code.

  $('li').click( function(){


How to create pulse effect animation CSS?

I’ve been playing around the past week with this CSS animation and that I thought that it would be nice and useful to write down a brief article about how we will create it.

Where can you use this type of effect? Well… you’ll be able to use this effect if you would like to highlight something on the website. I’m using this to highlight the subscribe button.


<button class="btn">Subscribe</button>

In this HTML, we just adding a button with btn class.


.btn {
    background: #EF5350;
    color: #fff;
    padding: 12px 20px;
    border: none;
    position: relative;

In this CSS, simply we added some basic CSS styles. And now for the fun part, let’s create the animation:

.btn:after {
    content: '';
    position: absolute;
    border: 2px solid #F44336;
    left: -8px;
    top: -7px;
    right: 0;
    bottom: 0;
    animation: pulse 1.5s infinite;
    height: 49px;
    width: 111px;
    z-index: -1;

@keyframes pulse { 
  0% { 
    transform: scale(.1);
    opacity: 1;
  80% { 
    transform: scale(1);
    opacity: .5;
  100% { 
    transform: scale(1);
    opacity: 0;

Simple yet powerful effect because it will get your visitor’s attention to the element on the page that you simply want to be highlighted.

I hope you like it! Let me know where you’ll use this effect!

How to customize input type=”file” using CSS?

A tutorial on how to style and customize <input type=”file”> in a very semantic, accessible way using the element with CSS only. No need to add a single line jquery code. There are quite few examples for “customizing” the <input type=”file” /> element.


<input type="file" id="file" />
<label for="file" class="btn">choose a file</label>
<input type="file" id="file" />
<label for="file" class="btn-1">upload file</label>
<input type="file" id="file" />
<label for="file" class="btn-2">upload file</label>
<input type="file" id="file" />
<label for="file" class="btn-3">select file</label>

CSS Code

[type="file"] {
  height: 0;
  overflow: hidden;
  width: 0;

label {
  font-family: "lato", sans-serif;
  border: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 15px;
  outline: none;
  padding: 15px 50px;
  position: relative;
  transition: all 0.3s;

  background: #f7347a;

    background: #800080;

.btn-1 {
  background: #ffd700;
  box-shadow: 0 6px #ffa500;

.btn-1:hover {
  box-shadow: 0 0 #ffa500;

.btn-2 {
  background: #800080;
  border-radius: 100px;

.btn-2:hover {
  background: #ff80ed;

.btn-3 {
  background: #008000;
  border-radius: 0px;

.btn-3:hover {
  background: #065535;


How to create a custom scrollbar using CSS?

Although scrollbar has just a small area on the web browser, to me — as an interface designer — it’s not that tiny, nor okay to ignore. If you care about every small detail of the website, this short tutorial would be helpful for you. To customize your website’s scrollbar, there are only a couple of lines of code in your CSS file needed. You don’t even need to write JavaScript to customize it! The following code snippet shows CSS code to customize the web browser’s scrollbar.

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    background-color: #f00;
::-webkit-scrollbar {
    width: 6px;
    background-color: #ff0;
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    border-radius: 10px;
    background-color: #ff0;

Customizing a web browser’s scrollbar is a non-standard method to styling, so you would like to use -webkit- vendor prefix to use pseudo-elements above. Only Webkit browsers(e.g., Chrome, Safari) support these properties. Other browsers like Firefox or IE don’t support this method.