Getting Started in Web Dev

These are the top items to look in to if you are interested in getting started in Web Development (mostly front-end).

This page is meant to be a resource of the most common things I end up linking to people as they are learning web dev. It should be short so it doesn’t overwhelm people.

Mandatory Knowledge

  1. 2022 Web Dev Getting Started/Career Guide Video – MANDATORY WATCHING
  2. MarkSheet – HTML/CSS/Sass
  3. JSFiddle – Use this when you are having trouble getting code to work and need help from someone
  4. CodePen – Create an account. Use this for stuff you want to keep track of, or to search for existing examples.
  5. Free Code Camp – Bootstrap, JS, and more
  6. Can I Use – Tells you what browser support specific web features have.
  7. Learn Chrome Dev Tools – Basically the same for other browsers as well.
  8. Why learning to code is so damn hard – important write up

JavaScript Books

  1. JavaScript: The Good Parts – Book. Pay for it on Amazon, pirate it, or just get it from your local library.
  2. You Don’t Know JS – Free online book
  3. Eloquent JavaScript – Free online book
  4. ExploringJS – Several free online books that stick close to the ES spec
  5. – Online JS resource, little easier to read than MDN

Getting Started with Vue.js

  1. Open, then follow the official Getting Started guide.
  2. Vue Mastery (Intro to Vue is free, advanced classes are not, but they have free weekends occasionally you can look out for)
  3. Anything from Maximilian Schwarzmüller is good:
  4. Sarah Drasner is one of the core members of the Vue team, she has a decent course on Intro to Vue, and is an expert in web animation.
  5. – Like JSFiddle but for large webpack based projects.

CSS Fun Time

  1. MarkSheet – HTML/CSS/Sass
  2. CSS Fundementals – Conference Talk from Bootstrap creator
  3. CSS Layout Basics – CSS Tutorial
  4. CSS Sushi – CSS Selector game
  5. Flexbox Game – Interactive CSS Flexbox Tutorial
  6. Flexbox Froggies – CSS Flexbox Game
  7. Flexbox Tower Defence – CSS Flexbox Game
  8. CSS Grid Garden – CSS Grids Game
  9. Grid By Example – CSS Grids Video Tutorials
  10. WTF HTML & CSS – Common issues people run into with HTML/CSS and their solutions

Photo credit:

Source link

Defining Variable in CSS with var()


Defining a variable in the program helps us to store and modify. We can change the variable’s value easily with one change. Variable are helpful in many scenarios.

CSS does support variable declaration and we are going to learn more about the variable declaration and utilization today.

So let’s get started.

Defining the variable

We can declare a variable with two scopes i.e, global and local. Declaring a variable with a global scope can be accessed throughout the document. While with local, it is limited within the selector.

Global Declaration

Global are declared in a special selector : root. Within the selector, we define the variable as a double hyphen(–) followed by name of the variable.

  --background: #f1f7fe;
  --boderRadius: 10px;

Local Variable

The local variable will be defined and used within the same selector.

     --background: #f1f7fe;
    background-color: var(--background);

You can use this variable in the document with the var() function. You need to provide the name of the variable within the bracket.

  background-color: var(--background);

Overriding Variable

You can override i.e, change the value of a variable within a selector. This value will be valid within the same selector in which it will be defined.

  --background: #f1f7fe;
  --boderRadius: 10px;

  --background: #DD4847;
  background-color: var(--background)

CSS Variable in JavaScript

CSS variable can be accessed and modified within the javascript. It can be accessed by the query selector.

let element = document.querySelector(':root')

You can get the value of the property with getPropertyValue() fucntion.

let background = element.getPropertyValue('--background')

You can change the value of this Variable with style.setProperty() function. It takes two values within the quotation marks separated by comma(,). The first value is the name of the variable and the second one is the updated value.


We are going to change the color palette of the website by clicking on the button. Changing of color will be done in javascript.


We are having two containers. One for our color palette and the other for the button.

<div class="container">
        <div class="circle two"></div>
        <div class="circle three"></div>
        <div class="circle four"></div>
        <button id="palette1" onclick="palette1()">Color 1</button>
        <button id="palette2" onclick="palette2()">Color 2</button>
        <button id="palette3" onclick="palette3()">Color 3</button>
        <button id="palette4" onclick="palette4()">Color 4</button>


We have used the CSS variable to define and use the variable in the stylesheet for defining the color palette of our webpage.

  --one: #f9ed69;
  --two: #f08a5d;
  --three: #b83b5e;
  --four: #6a2c70;


We will change the value of the variable when the user clicks on the button.

var element = document.querySelector(":root")

console.log("HEELO WORLD")

const palette1 = () =>'--one', '#f9ed69')'--two', '#f08a5d')'--three', '#b83b5e')'--four', '#6a2c70')


Here is the Codepen of the App. You can change the color of the webpage by clicking on the button. By default Color 1 is active.

Last Note

That’s it for CSS Variable for now. I hope you will try to use variables in your CSS.

Thanks for reading the blog post.

Source link

How to create a two-column layout with HTML & CSS (YouTube Clone – part 1)

Welcome to this lesson which is a part of a series of tutorials to build a YouTube Clone unlike what you have seen before.

In this lesson, we are going to discuss how to make the layout of our YouTube clone project with HTML and CSS and you are going to learn how to make a two-column layout.

If you have been struggling to build a real website with HTML & CSS, you’re so lucky to be reading this because I am about to teach you to do it step by step to reduce your struggle.

Just wait: If you’re a total beginner and you can’t operate computers properly, please check out the video below to learn everything you need…

If you know me very well, you would have known I am an advocate of breaking things up into sections, sub-sections and components. So, we have to break this YouTube clone into smaller units and we’re going to be building each of them step by step.

In this YouTube clone, the website has about 6 units:

Youtube clone

  1. Header: It contains three sections (left, center and right). The left section contains the logo and menu; the center section contains the search box and an icon, while the right section contains navigation icons. The icons have a similar element, which means, we design an icon element; then, copy, paste and edit it to create others.

  2. Main: It contains two sections (sidebar and content). The navigation links in the sidebar are also similar, so they are just one thing. The same thing happens to the videos in the content section.

So, it has a header, main, sidebar, content, video-card, navigation link and navigation icon as the major units. That is the breakdown of the units of the web page we want to create.

The first thing we have to do is create the layout structure of the YouTube clone with HTML as in below:

<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Material Icons -->
    <link href="" rel="stylesheet" />
    <!-- CSS File -->
    <link rel="stylesheet" href="styles/index.css" />
    <title>Youtube Clone with HTML & CSS</title>
      <header class="header">.</header>
          <div class="side-bar">.</div>
          <div class="content">.</div>
  <!-- Main Body Ends -->

In this lesson, I assume you have an understanding of how to use HTML meta tags and how to link a CSS file. If you don’t, learn more about it later in the video I added above. But you don’t need to understand them for what we are learning in this lesson, so keep on reading.

We have a header tag to create the header section of the YouTube clone. YouTube logo, search box and other navigation icons will be added to the header later.

There is also the main section that contains side-bar and content. The side-bar will contain some navigation links while the content will contain videos. So, that is it for the structure with just HTML.

Then, let’s add CSS to it to really create a YouTube layout.

Here is the CSS step by step:

@import url(';400;700&display=swap');

Let’s start with “import url(‘path’)…What does it do? It is used to link to the Google font called Roboto so that we can use it as the font of our website.

  margin: 0;
  padding: 0;
  box-sizing: border-box;

The (*) is CSS selector that selects all HTML tags on our page and we set their margin and padding to 0; We finally set their box-sizing to border-box. Why do we do that?

We want width or height, border, margin and padding to be sum up to be the total length. This is what I meant. In css, if a box has width of 100px and padding of 10px, the width of the box will now be 110px

but we don’t want that, we want everything to be 100px. Width should still be 100px including the margin of 10px instead of making it 110px. That is what box-sizing: border-box does.

Note: when you’re using it, you will understand better but that gives an insight a beginner can quickly relate with.

  font-family: 'Roboto', sans-serif;

We select the body tag and set it font-family to Roboto and use sans-serif as a fall-back in case Roboto is not available.

/* header section*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 15px;

.header class name is used to select (or connect to) the header section of our website so that we can add some styles to it. We set its display property to flex to create a layout out of it and then, we can easily divide it into sections. We will divide it into sections later.

Justify-content: space-between means we want the contents in the header to have space between each other once they are more than one.

Align-items: centre is used to move all the contents of the header to the centre-left of your screen. That is called vertical alignment. We finally set the height of the header to 60px and its padding to 15px. Do you know what padding is? Well, we will talk about it later.

    height: calc(100vh - 70px);
    display: flex;
    background-color: #f9f9f9;

We set the height of the main section to calc( 100vh - 70px)…What does it mean? V stands for a viewport which is the visible part of a window’s screen without scrolling while “height” means vertical length and we may also use “w” which means width – horizontal length. In short, 100vh means the total height that is visible in a browser without scrolling. And we use calc ( 100vh – 70px) to run a calculation that subtract 70px from 100vh.

We set its display property to flex to create a layout out of it. Finally, we set its background colour to #f9f99f which is a kind of silver or ash.

/* Sidebar */ 
    height: 100%;
    width: 17%;
    background-color: white;
    overflow-y: hidden;

The height of the .side-bar is set to 100% of its parent. That means it will have the same height as its parent. Its width is set to 17% of its parent and background colour set to white. Hey! What is overflow-y: hidden? When Twitter loads 10 tweets at once, you can’t see everything at once and you have to scroll, right? In this case, we hide the scroll bar. Gracias!

@media (max-width: 768px) 
      display: none;

This media query is used to make a website responsive on mobile, tablet and desktop. When the YouTube clone is on a device whose screen is less or equal to 768px (e.g mobile & tablet), the sidebar will disappear. Also, max-width: 768px means such device’s screen can be less or equal to 768px.

Yeah, we have built the layout of our YouTube clone. Below is the result…next time, we will add some other things. See you soon.

youtube clone layout.PNG

One more thing

Learn more by joining one of the groups below:



Source link

CSS Methodologies

Writing CSS is easy. Making it scalable and maintainable is not.

  • You must have experienced the scenario when you update the CSS of your application and you broke something else?
  • did you wonder where the CSS you have to change is coming from?
  • did you update some HTML and it broke your design?
  • did you write some CSS and wonder why it wasn’t applied to the browser and then ultimately discovered that it was overridden by some other CSS?

This is when you decide there is a better way and come across some CSS methodologies, which seems like a good solution to all those headaches.

There are multiple CSS methodologies , but at the end of the day, it’s all about what fits your projects.

Also, you may think you’re perfectly fine without them and you may be right. But you might be missing out on big improvements too. You should at least have an idea on what’s out there and why you’re or you’re not using it.

⭐ It’s all about maintaining your CSS code and reusability ⭐

The Big Reveal !!!
There is no best CSS methodology. It depends on you and the type of your project.

Top 3 CSS methodologies:

  1. OOCSS (Object Oriented CSS)
  2. BEM (Block Element Modifier)
  3. SMACSS (Scalable and Modular Architecture CSS)

Applying a modular approach to your CSS will save you hours.
Web components are the future of the web and starting now will make your life easier.
Each piece of your application helps you build the final results and you should be able to move or replace it without breaking anything else. This is the goal most CSS methodologies aim for.

OOCSS Methodology

  • OOCSS stands for Object Oriented CSS.
  • OOCSS is concerned with converting your regular CSS styles to reusable classes.

OOCSS has two major principles
1. Separate structure and skin:
The structure refers to invisible styles applied to elements (width, height, margin, padding) while the skin is the visible styles (colors, fonts, shadows).
OOCSS defines these 2 separately. For example, Below there is a random snippet of CSS:

    width: 100px;
    height: 50px;
    background: #000;
    color: #fff;

    width: 100px;
    height: 50px;
    background: #fff;
    color: #333;

We can see in the previous example that both classes have the same structure but differs in the skin properties. OOCSS deals with this situation and separate them as follows:

    background: #000;
    color: #fff;

    background: #fff;
    color: #333;

    width: 100px;
    height: 50px;

Now we don’t have redundant code and the .btn-structure class can be used on any button having the same structure.

2. Separate container and content:
Content refers to the elements such as images, paragraphs, divs which are nested inside other elements that serve as Containers. CSS Styles used for Content elements should be independent of the Container class so that it can be used without restrictions on their parent element. For example, this is a random piece of code dealing with the styling for a sidebar component.

    left: 0;
    margin: 3px;
    position: absolute;
    width: 140px;

#sidebar .list 
    margin: 3px;

#sidebar .list .list-header 
    font-size: 16px;
    color: red;

#sidebar .list .list-body 
    font-size: 12px;
    color: #FFF;
    background-color: red;

But if we separate content from container, it will something like this:

  padding: 2px;
  left: 0;
  margin: 3px;
  position: absolute;
  width: 140px;

  margin: 3px;

  font-size: 16px;
  color: red

  font-size: 12px;
  color: #FFF;
  background-color: red;

Now these classes can be used in many situations without the restriction of having a parent with an id of #sidebar or .list.

Advantages of OOCSS:

  • Improved Scalability and Reusability.
  • Better Readability.

Disadvantages of OOCSS:

  • It is not suitable for small projects.
  • It increases number of classes.

BEM Methodology

BEM stands for Block-Element-Modifier.
When the use of CSS is no longer to just style the personal websites or small projects and moves to large, scalable and complex projects, there is a need to organize and think about the architecture for the CSS. Simple things like class naming can become a huge problem in future maintenance.
To correct problems like these, some organizational architectures and methodologies were created and one of the most popular is BEMCSS.

What is BEM?

  • The acronym comes from Block-Element-Modifier, which is basically a method to create names for the CSS classes.
  • The idea is to create a rigid standard for class naming, making it easy to read and understand what the class does and what component it targets.

⭐ The class names follow the line

  • One point to Note here is that there are Two underlines that separate the block from the element and two lines that separate the element from the modifier.


  • A block is an independent, modular UI component.
  • A block may be composed of multiple HTML elements, or even multiple blocks.

So basically a Block is the element or component that a class is assigned to. You don’t need to respect the name of the element, the idea is that it describes what the component is doing in the scope of the project. For example, if you create a class for a login form, the name would not be .form, even though in HTML you do create a form.
In the scope of the project the class could be .Login, which would make it clear to everyone what it is about. A general naming rule is to separate compound names with a single dash for example, .select-box-container would be the correct way to write a name with three words.

For example, .login, .select-box-container


  • An element is a component of a block. Each element serves a singular purpose.
  • For example, if you have a navigation menu block, then elements of it might be your navigation menu’s links, which in turn might be in the form of list items (li elements) and anchor tag’s (a elements).

The Element are internal parts of the component. In the example shown in previous slide, inside the login block there would be multiple inputs for the username, email, password and few action button’s.
So the CSS class naming convention for block-element will be like,
.login__username, .login__email, .login__password, .login__button

A modifier is a CSS class that changes the default presentation of a block or element.
For example, in the login form when the user put something that does not match the password or email in the inputs and there was a check to confirm this, the visual feedback of the error, for example, could be done by changing the colors of the edges of the incorrect inputs to red. The modifier class that would be used to create this case will be in this way:

The modifiers can also be used for the block as a whole, and can be applied directly over it in the class, ignoring the existence of the elements. For example, .login–error

Point to remember:

  • We have to remember that each element has its class in an isolated way. For example, if an element has another element within it, it is not correct to join the elements into a single class, such as:
  • In these cases each element has its own class, ignoring the order of the HTML structure, such as:

Advantages of using BEM:

  • BEM is a very robust class-naming convention.
  • It successfully distinguishes the different concerns that classes are used for.
  • It is easy to see in the markup which classes are related to one another.

Disadvantages of using BEM:

  • The class names can end up being long and ugly.
  • The naming convention is not intuitive to inexperienced developers.

SMACSS Methodology

  • SMACSS stands for Scalable and Modular Architecture for CSS.
  • SMACSS offers a simpler naming convention than BEM.
  • There are no class names for base styles because only type selectors like h1, p, a, etc. are used for those.
  • Modules are given their own unique class names. Also, in SMACSS the Sub-components and variations are prefixed with the name of their parent module.
  • SMACSS is a style guide rather than a framework.

SMACSS is all about organising your CSS in 5 Categories:
1) Base: Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It is defining the default styling for how that element should look in all occurrences on the page.
This category include applying CSS to the selector. No CSS is applied to classes or id here. This is to reset browser rules and set a base style for elements which are going to be consistent and reused.
In this category you are defining the default style for your elements. This can include html, body, h1, h2, h3, h4, h5, h6, a, img.

An example for the BASE rule is given here,

body, form 
  margin: 0;
  padding: 0;

  color: #039;

  color: #03F;    

2) Layout:

  • This is where the style used to lay out your pages will sit. It should be separated from your module style for flexibility.
  • Layout styles can also be divided into major and minor styles based on reuse.
  • Major layout styles such as header and footer are traditionally styled using ID selectors but it takes time to think about the elements that are common across all components of the page and use class selectors where appropriate.
  • Therefore, Usually layout modules are not many so id selector can be used.

An example for the LAYOUT rule is given here,

#header, #article, #footer 
  width: 960px;
  margin: auto;

  border: solid #CCC;
  border-width: 1px 0 0;

3) Module:

  • A module is a part or a component of your page. Your menu, dialog box, download list or any widget you have on your page can be a module.
  • A module is independent from your layout so it can live anywhere in you application.
  • You should be able to copy/paste the html and move somewhere else, and it will look and behave the same.
  • Each Module should be designed to exist as a standalone component. In doing so, the page will be more flexible. If done right, Modules can easily be moved to different parts of the layout without breaking.

An example for the MODULE rule is given here,

<ul class="tabnav">
    <li class="" tabnav__item"><a href="" class="tabnav__link">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
  display: flex;

.tabnav li 
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;

.tabnav li:first-child 
  border-left: 1px solid black;

.tabnav li a 
  display: block;
  padding: 10px 30px;
  text-decoration: none;

4) State:

  • A state will be a style which modifies or overrides other rules.
  • Good practise is to prefix or add a namespace to the classes which fall under this category like is- or has- –> is-hidden, is-displayed, is-collapsed, has-children, etc.
  • A great example is accordion when collapsing or expanding elements. Using a is-collapsed class will make sure your element is collapsed.
  • This is a good place to use !important (and probably the only one) as you want this state to be applied no matter what.
    background-color: red;

    pointer-events: none;
    color: black;

5) Theme:
In Theme rule, the idea is to have a file called theme.css where you can define all the theme rules. For example,

// in module-name.css
    border: 1px solid;

// in theme.css
    border-color: blue;

Advantages of using SMACSS:

  • Modular.
  • Flexible.
  • Better file organisation.

Disadvantages of using SMACSS:

  • No specific naming convention to write a class.
  • Modules and submodules can be hard to identify.

*Thank you for reading this blog post!!! 🙂 *

Source link

15 awesome CSS animation libraries you need to know.

Transitions from one CSS style configuration to another can be animated using CSS animations. A style describing the CSS animation and a set of keyframes indicating the start and end states of the animation’s style, as well as possible intermediate waypoints, make up an animation.

CSS animations provide three major advantages over traditional script-driven animation techniques:

  1. They’re simple to use for simple animations; you don’t even need to know JavaScript to make them.

  2. Even with moderate system load, the animations work well. In JavaScript, simple animations often run poorly. To make the performance as smooth as possible, the rendering engine can use frame-skipping and other approaches.

  3. Allowing the browser to regulate the animation sequence allows the browser to improve performance and efficiency by limiting the update frequency of animations in tabs that aren’t currently visible, for example.

While most animations can be done with pure CSS, you can use animation libraries and frameworks to create better animations in lesser time.

Website                            Description
Animate.css Just-add-water CSS animations
Anime.js Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects
CSShake CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page
Hover.css Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website
AniJS AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure
Animista CSS Animations On Demand
Tachyons-animate Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need
Sequence.js Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications
Infinite These animations, like rotations and pulses, that are specifically designed to run and repeat forever
OBNOXIOUS.CSS Animations for the strong of heart, and weak of mind
MOTION UI A Sass library for creating flexible CSS transitions and animations A graphical user interface for generating custom CSS keyframe animations
AnimXYZ AnimXYZ helps you create, customize, and compose animations for your website. Built for Vue, React, SCSS, and CSS
Whirl CSS loading animations with minimal effort!
Hamburgers Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway’s newsletter

Source link

How to toggle dark mode

Hi all. In this post, I’ll show you how to create a toggle button to switch between dark and light mode.


<!DOCTYPE html>
<html lang="en" data-theme ="light">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 

    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>


    <div class="toggle-container">
        <input type="checkbox" id="toggle" name="toggle">
        <label for="toggle"></label>

    <h1>Long Live Rock 'n Roll</h1>
    <p>Rock and Roll ain't noise pollution!
Rock and Roll will never die!
I like that old time Rock and Roll!</p>



    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;

    min-height: 100vh;
    flex-direction: column;
    padding: 5rem;
    transition: background 0.4s linear, color 0.4s linear;
    font-size: 2rem;

    background: #201e1e;
    color: white;

    user-select: none;
    cursor: pointer;
    background-color: #201e1e;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    transition: background 0.4s linear;

body.dark label
    background-color: #ffff;

    position: fixed;
    top: 10px;

    visibility: hidden;


const toggle = document.getElementById("toggle")

toggle.addEventListener('change', (e)=>


Final Result

I hope you find this tutorial useful. See you on the next article.
Here’s the Source Code on GitHub
Here’s the YouTube Video where I code it from scratch.
Check it out on CodePen

Follow me on

Source link

HTML Code to create website using HTML & CSS

HTML Code:


<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <title>Test Page</title>
    <link rel="stylesheet" href="style.css">
    <div class="menu">
      <center><h1>Hello World 👋</h1></center>
    <form class="search">
      <p>This is search form</p>
    <input type="text" name="" placeholder="Hello this is input text">
    <input type="submit" name="" value="This is Button" class="btn">
  <form class="text">
    <p>This is text form type anything what you want</p>

CSS Code:


  background-color: #1f1f1f;
  font-family: "Microsoft Sans Serif";
  color: white;

.menu /* you need div element to use this */
  background-color: #3d3d3d;
  width: 100%;
  height: 80px;
  color: white;

  background-color: #4CAF50; /* You can change what ever you want */
  border: none;
  color: white;
  padding: 12px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;

.btn:hover /* When your mouse on the btn it will change the color */
  background-color: #5ccc60; input[type=text] 
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;

/* Created by @SupremeWyn */

You can get the code by clicking this link


Source link

Maximize your Tailwind efficiency by using these resources

I have been using Tailwind for the past few months and I don’t think now I would switch to other styling frameworks. It is just a lifesaver! It is mobile first, has an easy learning curve and saves a lot of time. And it doesn’t make me feel dumb like CSS does 😟

Tailwind is already pretty good, but we can make it even better. Here are a few resources that helped me to build projects with Tailwind efficiently and fast.

Before starting, I expect you to be already familiar with Tailwind and know about its workings. I have discussed CSS prerequisites and use cases for Tailwind in my last blog, which you can read here.

Online Playground

Tailwind Play is an online playground for Tailwind CSS. The best thing about it is that it shows the output in no seconds! You can also change the CSS3 styling or tailwind.config file if needed.

It also has autocomplete and syntax highlighting for tailwind classes.

🌐 Tailwind Play

VS Code Extensions

Tailwind CSS IntelliSense

This is a MUST have extension. It has autocomplete, syntax highlighting and lining abilities. It also lets us see CSS for a particular tailwind class when hovered.


🔥 Get it on Visual Studio Marketplace.


Headwind is an opinionated CSS class sorter that enforces consistent order of classes. It parses the entire file on each save and sorts classes on the basis of importance and removes duplicates.
It also highlights conflicting classes and lets us choose what to omit.

Headwind .gif

🔥 Get it on Visual Studio Marketplace.

Tailwind Docs

This extension will open the documentation directly from VS Code. Open command palette by ctrl/cmnd + shift + p and type the topic you want to search.

🔥 Get it on Visual Studio Marketplace.

Tailwind Styled Snippets

This is useful only if you’re using styled-components with your react project. This extension rocks in creating components with tailwind and styled components or emotionjs.

🔥 Get it on Visual Studio Marketplace.

Components Library


Flowbite is a freemium component library consisting of 400+ components and elements. The free version is enough to fulfil basic use cases but there is also a premium version. Two premium plans are ‘developers’ and ‘designers’ that give you more features to use. Premium version has features like post CSS configuration, JS minification, Figma preview and etc.

🌐 Flowbite

Tailwind Components

The biggest open source component library for Tailwind UI components and templates. It has a variety of components to choose from and you can copy paste the code that you need.

🌐 Website link

GitHub Repo


PostSrc also has a wide range of tailwind components to use, but it’s not as famous as Tailwind.

🌐 PostSrc


Tailwind Shades

This website generates color shades when a base color is given as the input. You can also change hue, saturation or light of colors. At last, you can copy code to paste in tailwind.config file.

🌐 Website link

GitHub Repo

Shades Generator

Similar to Tailwind Shades but it has a color picker that you can use to get the color from the browser in real time. It doesn’t have the functionality to adjust HSL but you can remove a shade from the palette if you want to.

🌐 Website link

GitHub Repo

Cheat Sheet

Actually, official docs are so great that you don’t even need cheat sheets. But these are quick references if you need everything in one place. Jay Alraj has created a site that has everything about Tailwind CSS in a clean and concise way.

One thing, it is not updated to Tailwind v3 yet but I assume something will come out soon.

🌐 Cheatsheet link


Tailwind CSS also gives you the flexibility to add custom plugins.

There are many tailwind plugins available on the internet, but one that I used is from a GitHub repo tailwind-plugins. It has plugins for animations, gradients, keyframes and pagination.





Another repo, tailwind-typography is a plugin for manipulating the typography of the app.




HeroIcons is an open source project for SVG icons created by the makers of Tailwind CSS itself! You can integrate them with React or Vue libraries and also get a Figma file to use in your designs

🌐 Website link

GitHub Repo

🎨 Figma


I found these resources very helpful while developing projects. If you think I am not using something that would make my life easier, do let me know! I am most active on Twitter, LinkedIn and Showwcase.

This is my second article about Tailwind CSS. I am planning to write more as learn more about this. Subscribe to the newsletter or follow me to have an update about it 🙂

Happy Designing! 🎨

Source link