• HTML
• CSS
• JS

HTML

<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>

<div class="container">
    <i class="fa-brands fa-html5"></i>
    <span class="num">1000<span data-val="1000"></span></span>
    <span class="text">HTML,CSS y JS Projects</span>
</div>

CSS

*{
    margin:0;
    padding:0;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    font-family:consolas;
    background:#48c9b0;
    background:linear-gradient(45deg,#8e44ad,#4a235a);
}
.container{
    width:170px;
    display:flex;
    flex-direction:column;
    background:#fff;
    text-align:center;
    padding:1.5rem 0.5rem;
    border-radius:0.5rem;
    box-shadow:1px 1px 10px rgba(0,0,0,0.1);
}
.container i{
    font-size:6rem;
    color:#8e44ad;
}
.container .num{
    position:relative;
    font-size:3rem;
    font-weight:700;
    color:#e5e7e9;
}

.container .num span{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    color:#333;
}
.container .text{
    margin-top:0.5rem;
    color:#626567;
}

JS

let endValue = document.querySelector('.num span');

let interval   = 4000;
let startValue = 0;

let val = endValue.getAttribute('data-val');

let duration = Math.floor(interval/val);

let counter  = setInterval(function(){
    
    startValue += 1;
    endValue.innerText = startValue;
    
    if(val == startValue){
        clearInterval(counter);
    }
    
},duration);