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

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 5.

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

css 3csscss iconicons

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

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

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

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

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 Icons to your Bootstrap 5 Project

tailwind cssbootstrapbootstrap 5 alpha

Bootstrap 5 Icons are small pictures or symbols representing a piece of information or content on a website. Icons can also link to…

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 tailwind navbar is built to help users navigate around a webpage easily. It is…

Theme

How to create a Bootstrap 5 Modal.

bootstrapfrontendcontrast

Bootstrap 4 Modals are a piece of web component that is used to show information or solicit response ora certain kind of interaction from…

Theme

How to create a React Modal using Tailwind CSS.

frontendreactjstailwindcss

React Modals have solidified their presence in the modern web page, they provide new information asides from the information presented to…

Theme

How to create a Responsive Bootstrap 5 Sidebar

tailwind cssbootstrapbootstrap 5 alpha

Sometimes, there are pieces of information in a column to the right or left of the main content in a website layout. This column is known as…

Theme

How to create a Angular Bootstrap Sidebar

tailwind cssbootstrapbootstrap 5 alpha

A sidebar is a user interface element usually to the left or right of your website that contains pieces of additional information. Examples…

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 Beautiful Bootstrap 5 Checkboxes and Radios .

tailwind cssbootstrapbootstrap 5 alpha

A Bootstrap 5 Checbox is a user interface component that is used to allow a user choose an item or several items from a group of options…

Theme

How to create Beautiful Bootstrap 5 Navbars

tailwind cssbootstrapbootstrap 5 alpha

Bootstrap Navigation Bars are user interface elements that contain links to different sections of the website; they help users navigate or…

Theme

How to create Beautiful Bootstrap Tabs in Bootstrap 5

tailwind cssbootstrapbootstrap 5 alpha

Bootstrap 5 Tabs are small pieces of a clickable area that help the user navigate different web pages in a single window. They are…

Theme

How to create React Forms using TailwindCSS.

frontendreactjstailwindcss

Forms have been used throught out modern history, whether it be physical forms or virtual forms. They have been used to collate information…

Theme

How to create React Tables using TailwindCSS.

frontendreactjstailwindcss

React Bootstrap Tables are arrangements of data, displayed in rows and columns,they make it easier to compare data and make sense of the…

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. in this Tailwind CSS flex tutorial…

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

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

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

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

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

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

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

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

Tutorial: Javascript Data Output

javascript tutorialjavascriptjavascript display

Ways JavaScript output can be displayed Data can be "displayed" in a variety of ways using Using innerHTML to write into an HTML element…

Theme

Tutorial: Javascript Events

javascript tutorialjavascriptjavascript events

JavaScript Events The "things" that happen to HTML components are known as HTML events. JavaScript can "respond" to these events when it is…

Theme

Tutorial: Javascript Loop

javascript tutorialjavascriptjavascript loop

JavaScript Loop JavaScript Loop is used to execute a section of code many times JavaScript Loops: Loops are useful if you want to run the…

Theme

Tutorial: Javascript Functions

javascript tutorialjavascriptjavascript functions

JavaScript function A JavaScript function is a snippet of code that performs a specific task. When "something" calls a JavaScript function…

Theme

Tutorial: How Javascript Works

javascript tutorialjavascript usagejavascript

How JavaScript is placed in our projects They are several ways JavaScript can be placed in our projects. The <script> Tag JavaScript code…

Theme

Tutorial: Javascript Dom Events

javascript tutorialjavascriptjavascript dom events

JavaScript HTML DOM Events JavaScript can respond to HTML events thanks to HTML DOM: Reacting to Events When an event occurs, such as when a…

Theme

Tutorial: Javascript Array Iteration

javascript tutorialjavascript iterationjavascript arrayjavascript

JavaScript Array Iteration Methods Array iteration methods run through all of the items inside the array. Array.forEach() : For each array…

Theme

Tutorial: Javascript Dom Methods

javascript tutorialjavascriptjavascript dom methods

JavaScript - HTML DOM Methods The DOM methods in HTML are actions that you can take (on HTML Elements). The values (of HTML Elements) that…

Theme

Tutorial: Javascript Let And Const

javascript tutorialjavascript letjavascript constjavascript es6javascript

JavaScript let and Const Let and const are two essential new JavaScript keywords introduced in ES2015. In JavaScript, these two keywords…

Theme

Tutorial: Javascript Math Object

javacsript tutorialhtmlhtml 5 alpha

JavaScript Math Object The JavaScript Math object lets you do math using numbers. JavaScript Code: The Math Object The Math object, unlike…

Theme

Tutorial: Javascript Number Methods

javacsript tutorialjavascript number methodsjavascript

JavaScript Number Methods You can use number methods to work with numbers. Number Methods and Properties Property and method cannot be…

Theme

Tutorial: Javascript Objects

javascript tutorialjavascriptjavascript objects

JavaScript Object A automobile is an object in real life. A car has properties such as weight and color, as well as procedures such as start…

Theme

Tutorial: Javascript Operator

javacsript tutorialjavascript operatorjavascript

JavaScript Operator What is an Operator? Let's look at a simple example. The expression 3 + 8 will give you 11. The operands in this case…

Theme

Tutorial: Javascript Scope

javascript tutorialjavascript scopejavascript

JavaScript Scope The accessibility (visibility) of variables is determined by their scope. JavaScript Function Scope There are two kinds of…

Theme

Tutorial: Sorting In Javascript

javascript tutorialjavascript sortjavascript

JavaScript Sorting Arrays Sorting an Array The sort() method alphabetically sorts an array: JavaScript Code: Reversing an Array The reverse…

Theme

Tutorial: Javascript statement, syntax and comments

javascript tutorialjavascript syntaxjavascript commentsjavascript

JavaScript Statement, Syntax and Comments A computer program is a set of "instructions" that a computer will "execute". These computer…

Theme

Tutorial: Javascript String Methods

javascript tutorialjavascript stringsjavascript

JavaScript String Methods You can use string methods to work with strings. String Methods and Properties Values with no properties or…

Theme

Tutorial: Javascript This Keyword

javascript tutorialjavascriptjavascript this keyword

The JavaScript this Keyword JavaScript Code: What is this? This Keyword in JavaScript refers to object that it belongs to. it has different…

Theme

Introduction to Javascript

javascript tutorialjavascript variablesjavascript

JavaScript Tutorial We'll cover the fundamentals of JavaScript and how to use it in projects and at work in this JavaScript lesson. What is…

Theme

Tutorial: Javascript Variables

javascript tutorialjavascript variablesjavascript

JavaScript Variables In JavaScript, variables are data storage containers. A variable must be declared before it can be used in a JavaScript…

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

Tailwind 3.0 is finally available. here are all the major

tailwind cssbootstrapbootstrap 5 alpha

Tailwind 3.0 version is finally available. The Tailwind 3.0 version addresses some issues found on the version 1 and 2 and includes a…

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

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

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

What is Nodejs, Express and When Should It Be Used.

nodejsexpressjsserver

What is Node.js According to the Node.js docs, Node.js can be defined as an asynchronous event-driven JavaScript runtime built on Chrome's…

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…