Gatsby CourseBuild a payment website for you product or service.

Enroll in the course
Dismiss

Feature Blogs

You can find blogs related to web programming such as HTML, CSS, Javascript, React Gatsbyjs, etc

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 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…

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 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 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…

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…

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…

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…

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 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…

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…

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…

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 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…

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 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…

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…