Bun is the best alternative to npm
Bun is the best alternative to the NPM package manager and it is up to 25x faster. I’ve been using NPM for a long time but it takes more…
Feature Blogs
You can find blogs related to web programming such as HTML, CSS, Javascript, React Gatsbyjs, etc
How to improve your sales with a website?
A website can make it easier for customers to find you and learn about your products and services. It can also help you reach a wider…
5 Reasons to choose Sanity CMS for the frontend website
Sanity io consists of Sanity Studio and Sanity database. Sanity Studio is a headless CMS that connects to the Sanity database and provides…
3 CSS button styles with hover and active effects
The button is the call-to-action on the website. We can use CSS hover and active effects to add interaction to the button. For example, when…
9 reasons to use Gatsby Framework for React developer
Gatsby is a React-based framework that can be used to create static and dynamic websites. Most React developers would think why would we…
How to submit a form with a captcha using Puppeteer?
In this blog, we’ll learn how to submit the form programmatically using Puppeteer and 2Captcha. I’ll be working on my previous Netlify form…
How to solve captcha with 2captcha
2Captcha is a CAPTCHA recognition service and is primarily used to solve CAPTCHAs in a quick and accurate manner. You can learn more about…
Create An Image Slider Using Javascript
In this section, we learn how to create an image slider using javascript. We are adding functionality to this image slider by adding a left…
Submission of forms using Netlify Forms
Netlify forms allow you to manage forms and submissions without writing any server-side code or JavaScript. As soon as the form is deployed…
Get started with Html
Html stands for hypertext markup language. It is used to define the foundation, skeleton and structure of the website e.g. text, images and…
How to format input text while typing using Javascript?
The input element in the HTML is used to take the user’s input. The user’s input can be of any type e.g. bank account, decimal digits, phone…
How to code and build your website?
In this blog, I share with you a brief roadmap on how you can start to code and build your website online. To start writing code, you first…
How I Built my Website
Today, we have many options when it comes to choosing a technology and framework for building a website. In this blog, I’ll walk through…
Productivity apps for remote workers
Working remotely means managing a lot of work, and all you want to do is manage your time efficiently. I have compiled some productivity…
CSS Positioning - Absolute and Relative Position
Absolute and relative positioning are both used to position HTML elements in relation to a reference point. Recently, I used absolute and…
Pseudo-classes in CSS
A pseudo-class is used to define (or style) special state of an HTML elements. They are useful in a variety of situations. e.g. Change the…
Create an image slider using HTML and CSS
In this section, we learn how to create image slider using HTML and CSS. You can view the full source code at the below link. https…
How do I build a platform to sell my course?
There are many online platforms for selling courses online, however, I found a few limitations. For the course platform, I would like more…
Create your own Custom React hooks
Custom react hooks is a JavaScript function allows you to add feature/functionality to your react application. We can reuse react hooks code…
How to create an HTML form
The HTML form is used to collect user input data. We can validate the input data from the client side (JavaScript) before sending it to the…
Learn SVG basics
SVG (Scalable Vector Graphics) is a two-dimension vector-based graphic, ** supports animation and interaction**. SVG can be rendered to any…
How to create responsive text
To create a responsive text, we can adjust font properties based on the browser size. On the mobile screen, text should be large enough so…
How to use Promise in JavaScript
Promise in JavaScript is the way to wait for a certain action to process or complete. The promise has the following states: Pending…
How to choose programming stack for web development
To start your career in website development, the first thing you need to choose is the programming language. Below mentioned are some of the…
How to structure data in HTML table
We can use tables to structure data in columns and rows. The table is the HTML way to layout the data. The CSS way to create layout in web…
10 React Hooks in General
The react hook is the function that allows you to use the state and react feature from the function base component (FOC). It provides you…
Practical Guide to CSS Flexbox
Flexbox is one-dimensional layout that allow the content to sit side-by-side. To understand about flexbox, consider the below structure of…
Practical Guide to CSS Grid
CSS grid is the most powerful layout system available. It makes life easy to layout content in 2-dimension. It allows you to layout content…
HSL color for developers
HSL stand for Hue, Saturation and lightness. In most of the photo editing software, it is used to adjust the color of the graphic as shown…
How to Build a profitable SAAS Product
SAAS (software-as-a-service) products are the software that makes customer life/work easy and could be accessed via the Internet or offline…
create-react-app, Gatsby or Next JS
React is the most popular JavaScript library for building the user interface. In React, we create reusable UI components and render these…
Different way to create a React application
React is a JavaScript library for building User Interface. There are different way to create a react application. Here, I can option three…
Float in CSS
The float CSS property places an element on the left or right side with respect to other elements, allowing text and inline elements to wrap…
4 Ways to define layout in CSS
Layout in CSS makes your content sit in a row or column. A Flexible layout helps to fit more content in less space. Below are the ways in…
How to request data using JavaScript Fetch API
API (Application Programming Interface) is just like the radio where you tune the frequency to listen to specific FM’s. You don’t care about…
Respond on Scroll with JavaScript
In this tutorial, we build a page that responds on scroll. Here are the things that we will cover in this tutorial. Click to navigate to the…
Get started with CSS
CSS (cascading style sheet) is used to style HTML elements. CSS Box Model → CSS Varibles → Pseudo-Classes In CSS CSS Positioning - Absolute…
How to host static site on GitHub pages
Github is the server way for a version control system using Git, tracks your files, and helps coordinate on project files among a group of…
Fundamental ingredient for website development
The fundamental ingredient for website development are HTML, CSS and JavaScript. Let’s understand what each stand for… HTML is the markup…
Write Better Code with Javascript
Javascript is a language that’s understood by the browser. It is used to load dynamic content without refreshing the page. You need to make…
Canvas
In HTML, Canvas is like a whiteboard and we can draw on canvas using Javascript. In HTML, we can define canvas as below: We can draw on…
Guide to CSS animation
The CSS animation is the smooth transition of an object from one style to another. There are different ways to do animation in CSS as below…
Explain regex in JavaScript with examples
Regular expressions (Regex) are patterns used to match set of strings. Below mentioned are some of the use case of Regex. Find and Replace…
Custom scrollbar in CSS
You can customize the scrollbar in CSS using pseudo-elements with WebKit browsers. You can use the following pseudo-elements in CSS to…
How to style HTML form with CSS
HTML forms are used for user input/interaction. We can style the HTML form using CSS. In this blog, we style the HTML form with a search…
Box model in CSS
We can consider HTML elements as boxes that take some area. Area of HTML element can be sum as below: Content of HTML element Space from the…
How to create Responsive Image
Images are visuals that display on the browser. Responsive image responds to different screen size and pixel ratio. In HTML, we can define…
How to rank on traffic keywords with SEO
There are millions of websites on the internet, struggling to rank on the first page of Google for traffic keywords. Ranking in Google is a…
How to use an HTML Link
HTML Link in the website is used to navigates from page to page. We can define an attribute on the HTML link to make it more meaningful. The…
Why need for React JS?
Javascript is used to add content dynamically without refreshing the page while HTML and CSS load the content on the initial page load. HTML…
How to become a web developer in 2021
To learn about web development in 2021, you have to understand what makes up the websites. In the blog, we cover the fundamental concepts to…
Schedule task with setTimeout and setInterval using javascript
The setTimeout and setInterval functions in JavaScript can schedule the task. We main difference between setTimeout and setInterval…
How to manipulate the DOM using javascript
Javascript is an object-oriented programming language and was designed to add interactivity to HTML pages. For DOM manipulation, we can…
How to preview an image using Javascript
We can use the blob object in JavaScript to preview an image. It is useful in scenarios when you want your user to preview the image post…
How to use blob object in JavaScript?
The blob object in javascript used to represent the raw data with different media types (MIME Type). We can use blob as a file system and…
Get started with JavaScript
Javascript is used for dynamic content appearing without refreshing the page and interactivity to HTML pages. Javascript could be used to…
Guide to the HTML custom data attributes
Data attribute allows storing/embed an extra bit of information private in HTML elements. The data-* attributes consist of two parts…
Disabled Property in HTML, CSS, and Javascript
The disabled attribute is used to disable the user from interaction (e.g. typing and selecting) of HTML elements. In CSS, we can style the…
How to define variables in CSS
CSS variables are the value that can be reused throughout the entire document and it saves from the reputation of values. We can also create…
How to manipulate CSS with javascript
CSS is used to style the HTML elements. We can assign the style property to HTML elements by targeting their class name and ID. Also, we can…
How to use media queries in CSS
Media queries used to assign custom styling based on the browser screen size. For example, we can adjust the font color of text on desktop…
Validate email address using regex in JavaScript
We can define regular expressions to match the patterns in strings. To validate the email address, we can define the regex expression for…
How to loop through an array in JavaScript
There are different ways to loop in an array using JavaScript. In JavaScript, we use the loop to iterate over an array. We will discuss two…
What is JAMStack?
Let’s break down the word as JAM, stack. JAM means Javascript, API, and markup. The Jamstack is a modern way of developing applications…
Conditional Statements in JavaScript
Conditional Statements execute certain operations based on logic. In Javascript, we can execute the conditional statements in three (3) ways…
How to use objects in JavaScript
In JavaScript, we have 5 types of primitive data types: string number boolean null undefined The primitive data type in javascript has a…
How to combine two array in JavaScript?
You can combine arrays in Javascript in two ways: (ES5 version) Spread operation / destructuring (ES6 version) So, let suppose you have…
How to setup the environment variable in Next.js
The environment variables are the secrets that you don’t want to share in public. We need to create the environment variable that is…
Tools I use to create and find assets for my content
There are tons of resources on the internet where you can find and create photos and videos for your content. I have mentioned some of the…
How to get the most out of your work?
Let’s explain this to you by a story. A person was working hard continuously for the morning. Someone asked him what are you doing. He…
Is create-react-app good for SEO?
In short, create-react-app is not good for SEO. why? create-react-app is a SPA(single page application). In a SPA, all necessary HTML…
My first GatsbyJS course has been published
Build A Standout Website With Gatsby, Sanity, And Stripe 👆👆👆
I write a course for the web developer
On the internet, there are plenty of resources and too many disciplines that might confuse you at first. You have to spend a lot of time…
How to define environment variable in create-react-app?
Environment Variable works differently in create-react-app. To access the environment variable in your app, you have to add the prefix…
How to Document your repository in GitHub?
Documentation of your repo will help you in many aspects. When you link your repo to the hiring team, they will better understand what your…
How can I be better suited for remote jobs?
Remote Jobs helps you to eliminate the 9-5 working hours of the office and you can earn extra money. But finding remote jobs is not as easy…
The Best Remote Jobs Websites / Boards to Find a Dream Job In 2022
Searching for remote jobs is a convenient way to work remotely at home or while traveling. Here are a few reasons to look for remote jobs…
How to format Date in JavaScript that looks Clean
Javascript has a built-in object called . object in Javascript is used to work with Date and Time. In Javascript, we use the below command…
How to setup node js | Get started
NodeJs is open sources, cross-platform run-time environment for writing server-side application. To start writing your Node js script, you…
How to write an effective blog post | Get Started
Good writing is about explaining the reader the exact scenario of the scene. Explain the things in writing by writing a complete sentence…
6 Tips related to Google search
Google is one of the most popular search engines. We use Google to search for different queries. Below we cover some tips and tricks to…
Markdown Basic Guide | Getting started
Markdown is the lightweight, plain text language that you can use to add formatting to your document. The best part of Markdown is that you…
How to rank your web page as SEO get smarter?
SEO is search engine optimization which helps to reach better ranking in search engine like GOOGLE, YAHOO, and BING, etc. The search engine…
Things you should know about WordPress?
Question May be arising in your mind about WordPress and I will answer one by one. Why we use WordPress? WordPress is a CMS(Content…