Works
Blogs
Resume
CV
github.io

Rai Sonahang

My Icon
Responsive web Design with SASS
Web Tutorials
Responsive web Design with SASS

Responsive web design is one of the most challenging part for the web devs. As the world is accelerating in creating new gadgets, there are tons of various devices with different shapes. It has become hectic job for the web devs to adjust the size of the website in each and every of the device.

Read More
Horizontal Scroll with button in REACT
React JS
Horizontal Scroll with button in REACT

We saw a feature in the youtube where the recommended search tags are shown. This horizontal scroll tags are managed in such a way that it looks like a carousel slider. There is also two buttons like a nav of the carousel. The button behave in a way that if the items are visible of

Read More
Gulp Starter for Twig Templating
Web Tutorials
Gulp Starter for Twig Templating

What is Gulp Starter? Gulp Starter is the twig templating starter pack. It consist of some pre configured gulpjs setting for creating an HTML templates with twig. It was always geting an extra burden of work when I need to start my templating works. So, I planned to create this repo which will consist of all

Read More
Pagination in React Javascript
React JS
Pagination in React Javascript

Pagination is one of the most common component in the web apps and also in mobile apps. Lots of ecommerce website and content websites uses the pagination. The pagination helps to browse the content or datas of the apps. So lets create this pagination in REACT javascript today. We will use the create react app

Read More
Flaticon as Webfont’s
Web Tutorials
Flaticon as Webfont’s

Today we will learn how to use flaticon as webfont’s. Firstly lets know something about the flaticon. Flaticon is a product of freepik company. Freepik company offers the best high-quality content. They are illustrations, photos, icons, mockups, and presentations templates. This flaticon is the specific for the icons only. The flaticon provide lots of free

Read More
Corona Virus status tracker with REACT.js
React JS
Corona Virus status tracker with REACT.js

Corona virus status tracker helps us to find about the current situation of the country. It will display some important data to the user related to the corona virus effect. I have previously used simple JavaScript to show the country COVID-19 status. And now in this blog we will create a more advanced tracker. Here

Read More
Animation On Scroll
Web Tutorials
Animation On Scroll

Animation on scroll is one of the unique way to give your website a good look. It makes the visitor very pleased and interactive to your websites. There are lots of sites which are implementing the animation during the scroll. The different types of animations with different transition will make the website more lifely. This

Read More
Website Preloader
Web Tutorials
Website Preloader

Website Preloader are a loading screen which comes before all the website loads.  There are lots of fancy websites which implements this cool features. The preloader makes the user refreshed to wait before the site loads. Lots of eye catching animations are being used in these preloaders. In this blog I will be teaching to

Read More
COVID-19 tracker with HTML, CSS and JAVASCRIPT
Web Tutorials
COVID-19 tracker with HTML, CSS and JAVASCRIPT

My COVID-19 tracker is a simple covid-19 data display. Today we wil be using a free covid-19 api and display it using HTML. We will use the javascript to fetch the datas from api. The fetched data wil be displed in HTML. We can get lots of api for the covid data. I am using

Read More
Responsive Menu Bar in HTML CSS and JS
Web Tutorials
Responsive Menu Bar in HTML CSS and JS

Menu or the navbar are the most important part of the websites. Not only the websites but it is also very important part for any kind of application. The menu are the map for finding out the way to any website, web app and applicaitons. In this blog we will learn to create the menu.

Read More
CSS Skill Bar Webdesign (Neumorphic Design)
Web Tutorials
CSS Skill Bar Webdesign (Neumorphic Design)

A skill bar is one of the most significant part of the UI design. We can see it in lots of websites mainly are the personal website or the company websites. The skill bar is a very easy way to inform the user about some value. It is one of the significant way to tell

Read More
Simple Weather Info Webdesign
Web Tutorials
Simple Weather Info Webdesign

In this blog we will create a simple webdesign to display the current weather information. We will be using the openweather’s free api for this tutorial. Openweather is a weather forcasting company. They have lots of weather services. They also have thier oen app and also been providing the weather data to other apps like

Read More
Masonry Layout by Bootstrap
Web Tutorials
Masonry Layout by Bootstrap

Masonry layout is a grid layout technique. The websites consists of card or image designed to align optimally. The masonry actually standed for the brick arrangement during the construction of the house and buildings. Mainly the it is used to create an attractive gallery in the websites. Many websites also implemented their card view in the

Read More
Create a stopwatch in Javascript
Web Tutorials
Create a stopwatch in Javascript

In this blog we will be learning to make a stopwatch from the javascript and will be designing it in a neumorphic way. Lets get started with the tutorial. Step 1: Creating our backbone ie: Our HTML   <!DOCTYPE html> <html> <head> <title>Timer</title> <link href=”https://fonts.googleapis.com/css2?family=Poppins&display=swap” rel=”stylesheet”> <link href=”http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”> <link rel=”stylesheet” type=”text/css” href=”css/style.css”> </head> <body>

Read More