🥳
Black Friday Sale is on: Get Amazing deals on tools and resourcess
Blog
Theme

10 Awesome projects built with Tailwind CSS

tailwind cssbootstrapbootstrap 5 alpha

Introduction Tailwind CSS projects are those works built with Tailwind CSS and any other technology. Tailwind CSS is a first-utility…

Theme

10 tailwind CSS templates and themes

tailwind cssbootstrapbootstrap 5 alpha

Introduction Tailwind CSS is not a UI kit or has any in-built themes components. It’s not like other CSS frameworks like Bootstrap. Tailwind…

Theme

All you need to know about Bootstrap 5

bootstrap 5bootstrapbootstrap 5 alpha

Now that Tech is proliferating, it is essential to learn web development. If you are already learning web development, you must have heard…

Theme

Major changes to bootstrap 5

bootstrap 5bootstrapbootstrap 5 alpha

The new Bootstrap 5 has been released and has seen so many changes. We will be discussing these Bootstrap 5 changes in detail here, and it's…

Theme

How To Create A Beautiful Navbar Using Bootstrap

bootstrapbootstrap 4bootstrap navbar

A navigation bar, which is often called a navbar, is one of, if not the most important, component or element of a website. This is so…

Theme

How to create Tailwind CSS Animation

tailwind cssbootstrapbootstrap 5 alpha

Web Animations make your websites come alive, when done properly they capture users attention and make for an immaculate user experience…

Theme

How To Create Bootstrap Charts using Bootstrap 5

chartsbootstrap 5bootstrap charts

What are charts and uses? Data in its raw form is usually hard to comprehend and make meaning off. To make use of data or be able to read…

Theme

How To Create A Datatable Using Angular Bootstrap

datatablecontrastangular 10angular datatable

What is a Datatable? Datatables are simply tables with options that can be used to configure and process the data to be displayed. What is…

Theme

How to create a beautiful Bootstrap Datatable with Icons

contrastbootstrapdatatabledropdown

How to create a datatable in react using Contrast DataTables are components that mix tables with advanced options like searching, sorting…

Theme

How to create a React datepicker.

contrastbootstrapdatepickerdropdown

A datepicker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code. This can be…

Theme

How to create React forms

contrastbootstrapformssign insign up

How to create beautiful React Bootstrap forms. React Bootstrap forms are input-based components that are designed to collect user data. Used…

Theme

How to create a beautiful React multiselect.

contrastbootstrapmultiselectdropdown

React Bootstrap Multi-selects are a form control that displays a collapsable list of multiple values after the click. This is especially…

Theme

How to create a beautiful React Bootstrap progress bar.

contrastbootstrapprogress

How to create linear and circular React progress bars. React Bootstrap Progress bars are components that display the progress of a process…

Theme

How to create a responsive React Bootstrap Sidebar

bootstrap sidebarreact sidebarreact bootstrap

Most websites these days are filled with lots of content, and one of the ways to separate or set apart a part of the website is by using…

Theme

How to create a beautiful React Bootstrap select with icons.

contrastbootstrapselectdropdown

How to create beautiful React Bootstrap select with icons. The React Bootstrap Select component is a form control that displays a…

Theme

How to create a beautiful Bootstrap stepper

contrastbootstrapstepper

How to create a React Bootstrap stepper component. A React Bootstrap Stepper is a component that displays content as a process defined by…

Theme

How to create a beautiful React Bootstrap table.

contrastbootstraptableseditable-table

React Bootstrap tables are component with basic tables features. They let you aggregate a massive amount of data and present it in a clear…

Theme

How to create beautiful React Bootstrap tabs

contrastbootstraptabs

How to Create a beautiful React Bootstrap tab component with Contrast. React Bootstrap Tabs are components that separate content placed in…

Theme

Introduction to CSS Animations

css 3csscss animationstutorial

CSS Animations An animation lets an element gradually change from one style to another. CSS allows animation of HTML elements without using…

Theme

CSS Colors, Backgrounds, Borders, Margins and Padding

css 3csscss colorscss backgroundscss borderscss marginscss paddingtutorial

CSS Colors, Backgrounds, Borders, Margins and Padding CSS color property defines the text color or the foreground color of an element…

Theme

CSS Combinators

css 3csscss combinatorscss selectors

CSS Combinators A CSS Combinators explain the relationship between two selectors. Between the selectors, we can include a combinator. CSS…

Theme

CSS Flexbox

css 3csscss flexboxflexbox

CSS Flexbox CSS Flexbox Layout Module Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage…

Theme

CSS Fonts

css 3csscss fontcss text

CSS Font Choosing the right font has a significant impact on how the readers experience a website. The right font can create a strong…

Theme

CSS Grid

css 3csscss gridcss layout

CSS Grid The CSS Grid Layout Module offers a grid-based layout system with rows and columns, making it easier to design web pages without…

Theme

CSS Height And Width

css 3csscss heightcss width

CSS Height and Width CSS height and width properties are used to set the height and width of an element. The CSS max-width property is used…

Theme

Tutorial: CSS Pagination

css 3csscss paginationpagination

CSS Pagination You can create a responsive pagination using CSS. Simple Pagination: If you have a website with lots of pages, you may wish…

Theme

CSS Syntax and Selector

css 3csscss syntaxcss selector

CSS Syntax and Selector There are some rules that guild writing code for CSS style. These rules help the browser to interpret the code and…

Theme

CSS Text and Layout

css 3csscss text layoutcss layout

CSS Text and Layout max-width CSS has many properties used to format text. Text Color: The color property is used to set the color of the…

Theme

Tutorial: CSS Icons

css 3csscss iconicons

CSS Icons Icons can easily be added to your HTML page, by using an icon library. How To Add Icons The simplest way to add an icon to your…

Theme

Introduction to CSS

css 3csscss tutorialcss usage

What is CSS? CSS stands for cascading style sheet. It is normally used to control the style of the web document in a simple and easy way…

Theme

Differences between TailwindCSS and SASS

tailwind cssbootstrapbootstrap 5 alpha

Given how vast the web development world is, It will be a shame if you haven’t used tailwind CSS and SASS on your project. I have been…

Theme

Differences Between Tailwind CSS and Bootstrap

tailwind cssbootstrapbootstrap 5 alpha

Bootstrap is a CSS framework that many programmers have been using for a long time now. After many years of dominance in the CSS world, here…

Theme

How to add tailwind CSS colors and Fonts to your project

tailwind cssbootstrapbootstrap 5 alpha

Adding Tailwind CSS colors and fonts to your project is easy and only takes a few classes. Colors and fonts make our designs more appealing…

Theme

How to use tailwind CSS grid templates in your project.

tailwind cssbootstrapbootstrap 5 alpha

Tailwind CSS boasts of many classes that we can use to style our projects. In today’s Tailwind CSS tutorial, we will look closely at adding…

Theme

How to create a Beautiful Responsive Navigation bar Using Tailwind CSS

tailwind cssbootstrapbootstrap 5 alpha

Almost every website out there has a navigation bar. The navigation bar is built to help users navigate around a webpage easily. It is…

Theme

How to create and style a Responsive Form using Tailwind CSS

tailwind cssbootstrapbootstrap 5 alpha

If you are one of those keeping in the trend of CSS framework, you will notice that tailwind CSS is fast growing in popularity among…

Theme

How to create Tailwind CSS Components for your Website

tailwind cssbootstrapbootstrap 5 alpha

Tailwind CSS is a growing popular Utility-first CSS framework for building custom website components. It means that it doesn’t provide pre…

Theme

How to create Tailwind CSS dropdown

tailwind cssbootstrapbootstrap 5 alpha

Creating a Tailwind CSS dropdowns is much easier than creating it on normal CSS. Dropdowns are very important for responsive websites and…

Theme

How to create Tailwind CSS Modal

tailwind cssbootstrapbootstrap 5 alpha

When building web applications, one of the most important thing a developer must have in mind is user experience. One of the ways a…

Theme

How to Create Tailwind CSS tables

tailwind csstailwindtailwind css tables

Introduction Using Tailwind CSS to create UI components is easy. Tailwind CSS is the first utility CSS framework that allows you, to use low…

Theme

How to install Tailwind CSS in Laravel

tailwind cssbootstrapbootstrap 5 alpha

Tailwind CSS is a utility-first class CSS framework unlike other CSS frameworks like material UI and Bootstrap. It offers a lot of…

Theme

How to Install Tailwind CSS in Vuejs

tailwind cssbootstrapbootstrap 5 alpha

Tailwind CSS is not really the first utility-first CSS framework, but it’s safe to say it’s the most popular among developers. Using this…

Theme

How to use Tailwind CSS Flex

tailwind cssbootstrapbootstrap 5 alpha

Flexbox is a vital feature used for frontend development. This feature is also available in tailwind CSS. Tailwind CSS flex has four…

Theme

How to use Tailwind CSS in HTML

tailwind csstailwindHTML5

CSS is a utility-first CSS framework. It provides you with CSS classes that you can use to create designs for your web pages quickly and…

Theme

How to use Tailwind CSS in React

bootstrap 5bootstrapbootstrap 5 alpha

Tailwind CSS makes it possible for us to easily style every element directly on the components without having to create one big class in a…

Theme

How to use tailwind css padding, margin and border in your project.

bootstrap 5bootstrapbootstrap 5 alpha

As important as CSS margin, padding, and border are, most developers often struggle to understand this concept. New developers usually use…

Theme

How to use the Tailwind CSS JIT CDN

tailwind cssbootstrapbootstrap 5 alpha

CSS is a utility-first CSS framework. It provides you with CSS classes that you can use to create designs for your web pages quickly and…

Theme

Html 5 Basic Example

html 5htmlhtml 5 alpha

In this chapter, we are going to look at some of the examples in html. We are going to go through all the tags that will be used one by one…

Theme

Html 5 Basic Tags Example

html 5htmlhtml 5 tags

In this chapter, we are going to look at some of the examples in html. We are going to go through all the tags that will be used one by one…

Theme

Html Editors

html 5htmlhtml editorstutorial

HTML EDITORS All you need is just a simple text editor to learn HTML. Web pages are created with this simple code editor or text editor as…

Theme

All you need to know about Html Elements

html 5htmlhtml elements

HTML ELEMENT: An HTML element is defined by a start tag, an end tag and some content in-between the tags. Example The html element is…

Theme

HTML File path, Charset and Meta

Html Tutorialhtmltutorial for beginnersFree HTML course

A file path describes the location of a file in web site’s folder structure. File paths are important when linking to external files such as…

Theme

HTML Forms

Html Tutorialhtmltutorial for beginnersfree HTML course

A HTML form is used to collect user input. Which is usually sent to a server for processing. Form Element: The <form> element is used to…

Theme

Including JavaScript in your HTML project.

Html Tutorialhtmltutorial for beginnersfree HTML course

JavaScript makes a HTML page more dynamic. In this chapter we are going to look at how JavaScript is linked to the html page. The HTML…

Theme

HTML Quotations and comments

HTML TUTORIALhtmltutorial for beginnersfree HTML course

We are going to look into some quotations element and what comment is. HTML blockquote tag for quotations This element defines a section…

Theme

Creating Responsive HTML web design

Html Tutorialhtmltutorial for beginnersFree HTML course

Responsive design is about creating a website that looks good on all devices. It will automatically adjust for different screen sizes and…

Theme

HTML Tables, Classes and Ids

Html Tutorialhtmltutorial for beginnersfree HTML course

HTML Table A HTML table is defined with the <table> tag. This allows HTML to arrange words in tabular form. Each table row is defined with…

Theme

Introducing HTML

HTML TUTORIALhtmltutorial for beginners

What is HTML? HTML is the language of the web. It is very important for both building web application and web pages. HTML stands for…

Theme

Tutorial: Javascript Array Method

javascript tutorialhtmlhtml 5 alpha

JavaScript Array Methods Converting Arrays to Strings The JavaScript method toString() converts an array to a string of (comma separated…

Theme

Tutorial: Javascript Arrays

javascript tutorialjavascriptjavascript arrays

JavaScript Arrays Arrays in JavaScript are used to store several values in a single variable. JavaScript Code: What is an Array? An array is…

Theme

Tutorial: Javascript Arrow Functions

javascript tutorialjavascriptjavascript arrow functions

JavaScript Arrow Function In ES6, the arrow functions were introduced. Using arrow functions, we may create shorter function syntax: Before…

Theme

Basics of Javascript

javascript tutorialjavascript basicsjavascript

Basics of JavaScript We'll look at some examples of what JavaScript can accomplish. If you don't understand the code, don't worry. The…

Theme

Tutorial: Javascript Boolean

javascript tutorialjavascriptjavascript boolean

JavaScript Booleans True or false are the two values that a JavaScript Boolean represents. Boolean Values In programming, you'll frequently…

Theme

Tutorial: Javascript Control Flow

javascript tutorialjavascript control flowjavascript if and elsejavascript

JavaScript If else and else if Conditional statements are used to perform a variety of actions in response to a variety of circumstances…

Theme

Tutorial: Javascript Classes

javascript tutorialjavascriptjavascript classes

JavaScript Classes JavaScript Classes were introduced in ECMAScript 2015, often known as ES6. JavaScript Classes are JavaScript Object…

Theme

Tutorial: Javascript Data Type

javascript tutorialjavascriptjavascript data type

JavaScript Data Type Variables in JavaScript can hold a wide range of data types: they include String Numbers Booleans Arrays Object…

Theme

How to set up your first Tailwind CSS Project

tailwind cssbootstrapbootstrap 5 alpha

Unlike any other CSS framework, Tailwind CSS is not opinionated and allows you to create your components and design your elements for any…

Theme

How to use Tailwind CSS in Nextjs

tailwind cssbootstrapbootstrap 5 alpha

Tailwind CSS is a CSS framework that can be included in any of your projects. Tailwind CSS is not like other CSS frameworks like bootstrap…

Theme

Tutorial: Javascript Date Objects

javascript objectsjavascriptjavascript date objects

JavaScript Date Objects The JavaScript Date Object allows us to manipulate dates. By default, JavaScript will display a date as a full text…

Theme

How to use Bootstrap in React Using a React Library

bootstrap 5reactreact bootstrap

React is one of the most popular javascript frontend frameworks out there and its popularity does not come as a surprise as it is very…

Theme

Why tailwind CSS is good

tailwind cssbootstrapbootstrap 5 alpha

Tailwind CSS is one of the latest technology making its way in the front-end world. As a front-end developer, my natural inclination was to…