Forem: Shreya Purohit

Exploratory Data Analysis: A Step-by-Step Approach

Shreya Purohit — Mon, 23 Jan 2023 20:29:59 +0000

Exploratory data analysis (EDA) is a method of analyzing and understanding data to gain insight and identify patterns, trends, and relationships within the data through visualizations and statistical techniques.

The main goal of this analysis is to understand the trends and identify any potential issues or outliers that may need to be addressed before building models or making predictions.

By performing EDA, analysts can make informed decisions about the data, identify areas that require further exploration, and ensure that the final model is robust and accurate.

It is a crucial step in the data science process as it allows analysts to:

Gain a deeper understanding of the data they are working with.
Identify patterns and correlations.
Identify outliers that may need to be addressed before building models or making predictions.

Additionally, EDA is an iterative process, it can be done multiple times to dig deeper into the data and make sure that the final model is robust and accurate.

Let us now deep dive into the step-by-step approach to performing EDA:

1. Define the problem 🎲:

The first step in the exploratory data analysis process is to clearly define the question or problem you want to investigate. This will guide the data collection process and ensure that you are gathering the necessary data to answer your question.

Once you have defined the problem, you can gather the relevant data from various sources such as databases, spreadsheets, or external data sets (Kaggle, GitHub).

2. Clean and organize the data 🧹:

Once you have collected the data, it is important to clean and organize it to ensure that it is ready for analysis. This step involves removing any missing or irrelevant data, correcting any errors, and organizing the data in a way that makes it easy to work with. This might include:

Removing any missing/ irrelevant data
Sorting the data
Creating new columns
Merging multiple data sets, etc

3. Univariate Analysis 🧮:

This step involves analyzing each variable individually to understand the distribution of the data and identify any outliers or anomalies. You can use statistical measures such as mean, median, mode, and standard deviation to describe the data, and visualizations such as histograms, box plots, and scatter plots to help you understand the distribution of the data.

You can use statistical measures to describe data:
- mean, median, mode, standard deviation, etc.
Data viz. to understand the distribution:
- histograms, boxplots, scatterplots, etc.

4. Bivariate Analysis 🔍:

Bivariate analysis allows you to analyze the relationship between pairs of variables.

Useful for identifying patterns or correlations in the data. Visualizations such as scatter plots, line plots, and bar charts help you understand the relationship b/w variables.

5. Multivariate Analysis 📉:

Multivariate analysis allows you to analyze the relationship among multiple variables.

Helps you gain a deeper understanding of the data and identify any trends or patterns.
Use techniques such as principal component analysis, factor analysis, and cluster analysis to conduct multivariate analysis.

6. Data visualization 🧙‍♂️:

Once you're done with data analysis, it's time to be a data wizard and create some visuals to get some deeper insights and communicate your findings. 🧙‍♂️

Data visualization is an important step in the exploratory data analysis process. It allows you to better understand the data and communicate your findings to others.

Use data viz libraries such as Matplotlib, Seaborn, Plotly and Bokeh to create scatter plots & heat maps.

7. Draw conclusions and identify the next steps 🎯:

Once you have completed the exploratory data analysis, you should summarize your findings, draw conclusions, and identify any next steps for further analysis or investigation.

This step allows you to make sense of the data and determine what additional analysis or research is needed to answer your initial question or problem.

To conclude, Exploratory Data Analysis (EDA) is an invaluable step in the data science process that allows analysts to gain a deeper understanding of the data, identify patterns and correlations, and identify outliers that need to be addressed before building models or making predictions.

By following a step-by-step process, analysts can make sense of the data and explore new possibilities to answer questions and solve problems.

Thanks for reading! 👋

// Detect dark theme var iframe = document.getElementById('tweet-1615722788496760832-328'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1615722788496760832&theme=dark" }

Learn data analysis for free - A Study Plan

Shreya Purohit — Mon, 28 Nov 2022 07:03:39 +0000

Hey there! Are you looking to learn Data Analysis?

Here are some excellent short & concise playlists to follow.

Topics covered:

🐍 0. Python:

Want to brush up your python skills right from the fundamentals? This playlist will do the job -

Python Programming Beginner Tutorials - Corey Schafer

🔢 1. NumPy:

This is a 1-hour video covering concepts like arrays, indexing, math, statistics, reshaping, and more.

Python NumPy Tutorial - Freecodecamp

🧮 2. Pandas:

One of the most widely used library to analyse data, this playlist covers everything you need to know -

Pandas Tutorials - Corey Schafer

📊 3. Matplotlib:

Now that you know how to analyze data, it's time to create beautiful plots for visualization -

Matplotlib Tutorials - Corey Schafer

📈 4. Seaborn:

Built up on matplotlib, Seaborn takes a level-up and makes it easier to work with dataframes and make more descriptive plots-

Seaborn Tutorial - Derek Banas

🧙 5. Plotly:

Want to level-up your plotting games and make interactive, animated plots? Learn Plotly -

Plotly Tutorial - Derek Banas

🏗️ Data Analysis Projects:

Woosh, you now know the data analysis libraries, it's time to make some projects, right?

That's all for this one! Thanks for reading :)

Resources that will help you get started as a Technical Writer

Shreya Purohit — Fri, 11 Feb 2022 13:34:08 +0000

Technical Writing 101

Technical writing means writing a documentation in a way that it is easy-to-understand for both technical as well as non-technical people.

If you have the right resources, the journey can be a little easier and can save you loads of time:

✅ Challenges To Commit:

Write 1 article/ week.
Write 500 words/ day.
At least 4-5 blogs/ month.

Consider joining public challenges like 2articles1week by Hashnode. It will give you a push to write as you're committing in public:
Hashnode: #2articles1week Challenge

🧠 Learn:

Coursera's tech writing course:
Visit Here
Google's Technical Writing Course:
Visit Here

🧩 Where to Publish - Build Portfolio

Your Own Blog
Hashnode
DEV
Medium

💵 Paid Article Writing Platforms

This is the section that interests people the most.
But you should have a writing portfolio first as they look out for articles you've published and reach out to you if it goes well.

Resources:

⚒️ Tools

📷 Cover Images

Canva
CoverView (this is one of my favorites)

📽️ YouTube Channels

🔗 Amruta Ranade

Remember you're doing this for yourself only, so don't take it as a liability. Enjoy the process and don't pressurize.
Don't worry about the completion of goals, something is always better than nothing.

Thanks for reading. Hope it helped you.

Learn TailwindCSS: Make A Profile Card

Shreya Purohit — Mon, 17 Jan 2022 18:46:03 +0000

Tailwind is a CSS framework that lets you build amazing responsive UI with less effort.
If you're learning TailwindCSS, this blog can help you to build concepts stronger by creating a mini profile card with a button in less than 5 minutes.

First you need to install Tailwind in your project. Now there are 3 ways as given below. Visit the one you prefer. As this is a simple card, I'll just use CDN:
- Through CLI (fastest): read here
- Through CDN: read here - we will use this
- As a PostCSS plugin: read here
We're using CDN for this project. So add this link inside the <head> tag:

 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

If you're using React, I have a step-by-step blog on it already.
Read it here: How to setup TailwindCSS in your React App

Now we're ready to use Tailwind. Let's start by defining the basic structure first:
- To use the image used in this project, copy this link

   <!-- main - parent div -->
    <div class="main">
        <!--card-->
        <div class="card">
            <!--profile-image-->
            <div class="image">
                <img src="#" alt="profile">
            </div>
            <!--name-->
            <div class="name">
                <p>Simp</p>
            </div>
            <!--username-->
            <div class="username">
                <p>@simpyy</p>
            </div>
            <!--work-->
            <div class="work">
                <p>Front-end developer 🧑‍💻</p>
            </div>
            <!-- follow button -->
            <div>
                <button>Follow</button>
            </div>
        </div>
    </div>

Here's what you see right now.

Pretty boring right?

Let's make it interesting by adding classes that Tailwind provides us:

We'll start from top to bottom to avoid confusions. But first I'll pick up the div having a class "card":

CARD SECTION

<div class="card bg-white flex flex-col items-center justify-center p-4 shadow-lg rounded-2xl w-64">

bg-white: sets the white background to the div
flex items-center justify-center: works just as we centre a div using CSS flexbox model.
- flex: sets display to flex
- items-center: align-items: center; in CSS
- justify-center: justify-content: center; in CSS
p-4: sets a padding of 1rem
- check all possible values here
shadow-lg: sets shadow to the div
- possible values: sm | md | lg | xl | 2xl | inner

rounded-2xl: sets border radius to the element
- md | lg | full | xl | 2xl
  - w-64: We want our card to be of a fixed width so setting it accordingly.
  - Experiment with w-{number} and explore more

Result:

Our card has started getting shape, so let's center it and start designing!

PARENT (TOPMOST) DIV

To center the card div, I'd take the parent div main and set CSS grid to it:

<!-- parent div -->
<div class="main bg-yellow-400 grid place-items-center h-screen">

bg-yellow-400: set the yellow background color.
- bg: background
- yellow: color | try more colors available here
- 400: shades | ranges from 50-900
grid h-screen place-items-center: To centre the card div
- grid: sets display to grid
- place-items-center
  - works like place-items: center; in css
- h-screen: sets full viewport height (full width as screen)

Result:

Now the card looks much better and visible.

PROFILE PICTURE DIV

<div class="profile mx-auto rounded-full py-2 w-16 "> 
    <img src="/simp.jpg" alt="profile">
</div>

To use the image used in this project, copy this link
mx-auto: sets equal margins to both (left and right) sides, so centres the image
rounded-full: gives the circular shape
- works just like border-radius: 50%
py-2: sets padding-top and padding-bottom values to 0.5rem both
w-16: sets image width
- sizes the image according to the card (experiment with the values)

Result:

NAME DIV

<div class="name text-gray-800 text-2xl font-medium mt-4 ">
      <p>Simp</p>
</div>

text-gray-800: sets the font-color property to greyish black
text-2xl: increases the font size
- possible values: sm | base | lg | xl | 2xl ...
font-medium: sets the font-weight property
- light | normal | medium | semibold | bold
mt-4: sets margin-top

USERNAME DIV

<div class="username text-gray-500">
      <p>@simpyy</p>
</div>

text-gray-500: sets the font color to light gray.

WORK DIV

<div class="work text-gray-700 mt-4">
     <p>Front-end developer 🧑‍💻</p>
</div>

text-gray-700: changes the font color to gray.
mt-4: sets margin-top

Now almost everything is done. Let's do the final work of designing the Follow Button.

FOLLOW BUTTON

<div class="w-full mt-8">
    <button class="bg-blue-500 py-2 px-4 hover:bg-blue-600 text-white w-full font-semibold rounded-lg shadow-lg">
        Follow
    </button>
</div>

div:

w-full sets the full width (according to the parent div) so covers the card properly.
mt-8: sets margin-top

button:

bg-blue-500: sets the blue color
- explore all the possible colors here
py-2 and px-4: sets padding-bottom and padding-top, respectively
text-white: sets the font-color to white
hover:bg-blue-600: sets the CSS hover properties, in this case we've simply increased the shade from 500 to 600 to give it a realistic look.

Congratulations! 🎉 Your follow card is completed now.

My motive for this post was to make you understand how to add Tailwind classes to a project. I hope I was able to complete this job.

Thanks for reading!

I share content related to web development and technical writing on Twitter daily.

Would love to connect!

How to setup Tailwind in your project

Shreya Purohit — Sun, 09 Jan 2022 09:41:42 +0000

Tailwind is a utility-first framework consisting of various classes to help you build clear and responsive designs fast inside HTML markup file.
In this post, you will learn how to set up tailwind in you project step-by-step.

Create a new directory:

mkdir tailwind-website

Generate a package.json file:

npm init -y

Now we can install all our required dependencies. Simply install Tailwind using the command:

npm install tailwindcss

Inside your project folder, create these files:

./public
./src
   ../styles.css

Our project will have two stylesheets, one inside public folder, which will contain all the Tailwind classes we talked about earlier. To get this, we'll make use of our second CSS file which is in the src folder.

Add custom styles for Tailwind in your source file:

/*   src/styles.css:   */
@tailwind base;
@tailwind components;
@tailwind utilities;

Now we need to write a script that will process Tailwind classes inside our public folder.

Write the build script inside package.json. You can name it whatever you want. I call it build-tw:

 "scripts": {
 "build-tw": "tailwindcss build src/styles.css -o public/styles.css"
 },

src/styles.css → source css file
public/styles.css → output css file

The final step is to run the script. Simply open your terminal and run the command:

run the above script:

npm run build-tw

# runs tailwind and generate the output css file 
# (public/styles.css) where all our css lies.

And it's done. Check out the file public/styles.css which was empty before. All the Tailwind CSS utilities can be now found in public/styles.css.

That's all for this one. Let me know if you've any doubts. Thank you for reading!

ES6 Handbook: Everything You Need to Know

Shreya Purohit — Sun, 19 Sep 2021 19:32:46 +0000

Hey readers! This blog is all about ES6. It includes all the topics related with examples. Before reading further, I want to specify that this was not a blog post initially, these are just my personal notes that I use as a reference guide, so I apologize for any misspells here :)

let/const
objects
this
arrow functions
destructuring
spread
classes
modules

Notes

let/const

Before moving to the point, let us understand two concepts here:

Global Scope - Variable is declared outside the function. This variable is accessible inside every function present in the code.
Function Scope - Variable is declared inside (within) a function, outside that it is not accessible anywhere.
Block Scope - In short, block scope means variables which are declared in a { } block are not accessible outside it. This block can be an if statement, for/while loop, etc.

`var`: function/ global scoped. Eg:

→ as you can see, var is both global and function scoped, which often creates a confusion. So avoid using it.

var name = 'Jack';              // global scope

function message() {
    var msg = 'Hey Jack!'       //function scope
}

console.log(msg);               // ERROR

The above line of code will throw an error as there's no variable msg outside the function message (where we have logged the variable). So it will show as undefined.

`let`: block scoped. Eg:

→ let keyword can't be redeclared:

let x = 1;
let x = 3;

result: SyntaxError - redeclaration of let x

But when we use let inside a function, it works like:

let size = "big";

function box() {
    for (let x = 0; x < 7; x++) {
        console.log(size);

        //Output: ReferenceError - `size` is not defined

        let size = "small";
        console.log(size);
    }
}

box();                          // small
console.log(size);              //big

Inside the function box() when we log the value of size, it shows a reference error. That is because, let is block scoped.

Anything inside curly braces { } is block scoped. In the above scenario, the function box() is a block.

`const`: block scoped. Eg:

const are very similar to let except that they can't be changed and redeclared.

const m = 8;
console.log(m);             //m = 8

m = 5;                     // 🚫 this will throw an error 
console.log(m);

// Uncaught TypeError: invalid assignment to const 'm'.
}

→ therefore let and const are preferred over var keyword for declaring variables.

Objects

objects are written within curly braces { } as collection of key:value pairs.

key: property name

value: value of that property

Creating an empty object:

const car = {
    model: 'Tesla',
    color: 'black',
    price: 800
}

Talking specifically about ES6, before ES6 we had to specify both (key, value) even if both are of same names.

function Boy(name, age) {
    return(
        name: name,
        age: age
    );
}

ES6 help us to get rid of duplication when we have same key:value names. So now our code will look like this:

function Boy(name, age) {
    return(name, age);
}

this

this is a keyword. It basically returns a reference to the object it is placed within

💡 NOTE:

When we call a function as a method in an object, the this keyword returns a reference to that object. 👇

const user = {
    name: 'Mike';
    call() {
        console.log(this);
    }
}
user.call();

// ⚙️ Output: {name: 'Mike, call: f}

But when we call the function alone, outside the object this returns the global object (browser window) and hence we get the result as undefined 👇

const user = {
    name: 'Mike';
    call() {
        console.log(this);
    }
}

const myCall = user.call;

myCall();

// ⚙️ Output: undefined

Arrow Functions

Normally, before ES6:

const square = function(num) {
    return num * num;
}

In ES6:

const square = num => num * num;

array.map()

If we have an array -

const colors = ["red", "green", "blue"];

We want to map the objects. Now there are two methods, es6 one is shorter and easier.

normal case:

const items1 = colors.map(function (color) {
    return "<li>" + color + "</li>";
});

es6:

const items2 = colors.map((color) => `<li> ${color}  </li>`);

Object Destructuring

Let's say we have an object called girl such that it has 3 keys as follows:

const girl = {
    name: "",
    age: "",
    country: "",
};

Normally, we would do something like this to get the values:

const name = girl.name;
const age = girl.age;
const country = girl.country;

here, as you can see we have to repeat the object name girl everytime we want to get a value. This problem can be solved by object destructuring:

const { name, age, country } = girl;

this one line code works same as the previous code. So destructuring made our code shorter and easier to understand.

In case you want to use an alias (a different variable name) for your work:

const {country: ctry} = girl;

This above line of code means we've defined a new variable called ctry and set that equals to country.

Spread Operator

CASE I - COMBINING ARRAYS

If we want to combine these two arrays:

const one = [1, 2, 3];
const two = [4, 5, 6];

without ES6:

const combined = one.concat(two);

With ES6:

const combined = [...one, ...two];

If we want to add things in-between:

const combined = [...one, '9', '7', ...two ];

If we want to clone an array:

const myDupli = [...two];

CASE II - COMBINING OBJECTS

If we want to combine these two objects:

const alpha = { name: 'Shreya' };
const beta = { age: 19 };

In ES6:

const combined = {...alpha, ...beta};

If we want to add more properties in b/w:

const gamma = { ...alpha, surName:'Purohit', ...beta, country: 'India'}

cloning an object:

const betaV2 = {...beta};

Classes

Let us take an example of an object boy here. We have a function called run inside it. Now if we've some bug in the future or we've to modify our function for a different object, it would be a long way.

const boy = {
    name: "Sam",
    run() {
        console.log("running...");
    },
};

To overcome this and make our work easier, we use classes:

class Boy {
    constructor(name) {
        this.name = name;
    }

    run() {
        console.log("running...");
    }
}

Now that we've created a class, let's try building our object again -

const boy = new Boy("Samridh");

with this above class, we've implemented the run method in a single line of code. If someday we find a bug here, we've to modify it in just a single place {inside class Boy}. So this is the advantage of using classes in JS.

Inheritance

If we have a class Boy such that -

class Boy {
    constructor(name) {
        this.name = name;
    }

    run() {
        console.log("running");
    }
}

and we want to create another class (having similar properties + some specific properties of its own). We can do this using the keyword extends

class Girl extends Boy {
    eat() {
        console.log("eating");
    }
}

we just created the class Girl here. Let us now create a const using this -

const myGirl = new Girl("Shreya");

and we're done. This code basically means that now the const myGirl will have the functions eat + run + constructor property of Boy class. So we can use it like -

myGirl.eat();
myGirl.run();

Now let's say we want to create another constructor inside the Girl class {which is extended from Boy class, So the constructor inside this Girl class is called derived class constructor.}.
We MUST HAVE TO call super() constructor inside the new constructor, otherwise we'll get an error (as using this in derived class constructor requires super() class). Now this must be looking confusing, let's look at the example below -

class Girl extends Boy {
    constructor(age) {
        this.age = age;
    }
    eat() {
        console.log("eating");
    }
}

// *result - Uncaught ReferenceError: must call super constructor before using 'this' in derived class constructor*

calling super() constructor:

class Girl extends Boy {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    eat() {
        console.log("eating");
    }
}
const myGirl = new Girl("Shreya");

In a child class constructor, this cannot be used until super is called.

Modules

Sometimes we have many no. of classes declared in a single file. This makes the code long, confusing and messy. To avoid this, we separate these classes into different files and import them as a module into the main file. This is called modularity.

Let's look it in action. Here's what our folder src will look like:


// src/boy.js

export class Boy {
    constructor(name) {
        this.name = name;
    }

    run() {
        console.log("running");
    }
}


// src/girl.js

import { Boy } from './src/boy';

export class Girl extends Boy {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    eat() {
        console.log("eating");
    }
}

both Boy and Girl classes are private in the folder, in order to use them we made them public using the export keyword.

We use import keyword in line 1 of girl.js as it is an extended version of the Boy class.

Now half of the work is done. For now, these classes are not accessible in our main app.js file. For that we've to import them in our app.js file. We can do that by using -

import { Boy } from './src/boy';

import { Girl } from './src/girl';

Default and Named Exports

Named Exports

We can export more than one objects from a specific module. This is called named export. Eg:

export class Car {
    constructor(model) {
        this.model = model;
    }
}

export function add(a, b){
    return a + b;
}

Here we exported a class Car and a function add.

Default Exports

It is basically the main object that is exported from the module. It is generally used in case we've only a single object to export. Let's see how it is -

export default class Car {
    constructor(model) {
        this.model = model;
    }
}

💡 Now we don't need the import { Car } from "./car";

Instead, we use import Car from "./car"; in case of default exports.

Default exports → import Car from "./car";
Named exports → import { Car } from "./car";

👋 Woosh! You've made it to the end. Hope I've helped you somehow. I write articles like this whenever I've some spare time. Besides this, I share content related to web development daily on Twitter. Let's connect there! @eyeshreya

10+ Ways To Make Side Income Online as a Developer

Shreya Purohit — Thu, 15 Jul 2021 11:30:59 +0000

Making side income as a developer can be a rewarding and valuable experience, both personally and professionally.

Financial stability: Having multiple streams of income can provide financial stability and security. This can be especially important in today's uncertain economy.
Professional development: Taking on side projects can be a great way to gain new skills and experiences, which can help you grow as a developer and increase your value in the job market.
Personal fulfillment: Working on side projects can be a great source of personal fulfillment and allow you to pursue your passions and interests outside of your full-time job.
Flexibility: Making side income as a developer can provide flexibility in terms of the projects you take on and the amount of time you dedicate to them.

In this post, we'll be discussing some ways through which you can make a side income as a developer. So without further ado, let's get started!

Contribute to Open Source Projects / Or Make One

1.You an contribute to millions of open source projects available on GitHub. It could be resolving issues or improving the documentation. This way you can :

Be a part of awesome communities
Establish an online presence
Make your portfolio
You might end up getting a job if you have an awesome portfolio!

2.If you love building open source projects, GitHub is an amazing way to make a side income while doing what you love. People out there are willing to give back, you can ask for sponsors on GitHub or support

Write blogs

Writing blogs is one of the best thing you can do for yourself as a developer. If you have knowledge, why not help others too? You can write tutorials, tips, advices or your personal stories (how you became a developer). The major profit of having a blog is that it can help you as a portfolio or in freelancing projects .

There are some websites that pay you to write articles too! Here are some of them:

hashnode
medium
vocal media

Open a YT channel

Opening a YouTube channel of your own is another great way to teach and learn. You can give step-by-step tutorials, share your experiences, give tips and advices.

BONUS: If you've a developer blog already, use it as a script for your videos. You can give a video walkthrough of your blog 😉

Sell Video Courses

If you've enough knowledge to teach someone, you can make courses of your own. There are many platforms that allow you to do the same while making a handsome amount of money.

Udemy
Skillshare
Teachable

Coding Tutor

If you love to teach, this can be the perfect method for you to make a living by teaching others for as short as an hour. Some of the platforms where you can teach as a coding tutor are:

Codementor : Visit here
Id Tech : Visit here
Programming lessons on Fiverr : Visit here

If you're feeling skeptical, read this blog post by Yogesh on How he Made $408 As an Extra Income on Codementor In One Month

Freelancing / Work on small projects

Freelancing is something very big today. There are many people who make full time living working for few hours a day. Some of the great freelancing sites are:

Fiverr : Visit here
Upwork : Visit here
People Per Hour : Visit here

Ask for Support

If you provide quality content to your audience, they will be more than happy to support you in return. You can ask them for support in many ways. Some of them are:

Buy me a coffee: Visit here
KoFi : Visit here
Paypal Donation : Visit here
Patreon : Visit here

Content Creator

You can be a content creator. Now this includes some of the ways I mentioned above like creating content on YouTube and writing blogs. But do you know Twitter is a powerful tool as a developer for being a content creator? You can build your online presence and promote some good resources to your audience. In return you'll be getting commissions for the share. Pretty good deal, right! Affiliate marketing can be a powerful strategy to use here.

Sell Your Products

When you have established a sufficient online presence, you can roll out digital products as per your niche. Now this can include eBooks, 1:1 sessions, snippets and codes, etc. The best platform to put these products is Gumroad. Check it out here.

Like for me, even though I don't have a good online presence for now, I did a experiment by publishing a very own FREE product of developer tools. And believe me, I did earned a good amount here. Tech twitter community is a great place to be in.

If you're interested, check out my free product Developer tools here: gum.co/devtools

Sell Themes and Plugins

This one is my favorite. You can sell many code resources if you love coding. This can include selling code scripts, web plugins, website themes, templates, etc.

Here are some platforms for the same:

Themeforest
Theme Snap
Template Monster
Code Canyon
Creative Market
Codester
Envato Marketplace

The most important key factor to become successful in any of the ways mentioned above is to be consistent. Stay positive!

That's all for this one. I hope I was able to help you. Thank you for your time!

Let's connect on Twitter!

70+ Awesome Free Resources To Learn JavaScript

Shreya Purohit — Wed, 26 May 2021 07:39:18 +0000

Hey there, today in this blog we'll be discussing some great free resources to learn JavaScript right from the scratch.

So, are you excited? Let's go then! 🚀

So first things first, are you a person like me who prefers written tutorials more effective than video tutorials? (comment below 😉)

Here are some GREAT tutorials out there:

Documentations 📑

MDN Web Docs : Link

This is regarded as bible of references, and why shouldn't? It might look overwhelming to look over the content but with time, it would act like a butter to your bread! 😜

2. JavaScript Info : Link

It contain all topics you need, from the basics to advanced topics with simple, but detailed explanations.

3. W3 Schools : Link

You know W3 schools already. When I first started with HTML 3 years ago, I use this as my only ultimate reference. This tutorial will teach you JavaScript from basic to advanced.

4. DevDocs : Link

This is basically MDN docs in a fast, organized, and searchable interface.

5. JavaScript Garden : Link

This is a growing collection of documentation about the most quirky parts of the JavaScript programming language.

Web Tutorials 📝

6. Learn JS: Link

This is an amazing interactive javascript tutorial in the form of chapters.

7. JavaScript Tutorial : Link

Divided and categorised into beautiful sections, this JavaScript Tutorial helps you learn the JavaScript programming language from scratch quickly and effectively.

GitHub Repositories 🐱

8. 30 seconds of code : Link

This awesome JS repo contains short JavaScript code snippets for all your development needs

9. Airbnb JavaScript Style Guide : Link

This is a clean and reasonable style guide to javascript language. Must have a look.

10. JS Questions: Link

A long list of (advanced) JavaScript questions, and their explanations.

11. 33 JS concepts: Link

Awesome resource containing 33 JavaScript concepts every developer should know.

12. JS by example: Link

As you must have guesses, here you can learn JavaScript by examples.

13. Modern JavaScript tutorials : Link

This repository has the English content of the Modern JavaScript Tutorial, published in https://javascript.info.

Free eBooks 📒

You Don't Know JS (book series) - This is a series of books diving deep into the core mechanisms of the JavaScript language.
Eloquent JavaScript - This is a web book about JavaScript covering the language and runtime specifics.
Mostly Adequate Guide to Functional Programming - A documented web book covering functional programming in JavaScript, this is an excellent primer to functional programming using JavaScript.
Functional-Light JavaScript -This book explores the core principles of functional programming (FP) as they are applied to JavaScript.
JavaScript Design Patterns - This is a classical approach to JavaScript specific design patterns.
Human JavaScript - A great web book by @HenrikJoreteg
Speaking JavaScript - This is an in-depth guide beginning with the basics.
JavaScript For Beginners - Learn JavaScript Programming with ease
The JavaScript Beginner's Handbook

Interactive Tutorials 💻

Codeacademy - Fundamentals of JavaScript.
Exercism JavaScript Track - Exercism provides individual practice and mentor-based learning for free.
Functional programming - Learn basic principles of functional programming in an interactive way by using map, filter, concatAll, reduce and zip.

Online Courses 👩🏻‍🏫

Udacity JavaScript Basics - Link
Scrimba - Link
Coursera - Link
Udemy - Link

YouTube Tutorials 📽️

JavaScript Tutorial for Beginners by JavaScript Mastery : Link
JavaScript Tutorial for Beginners - Full Course in 8 Hours by Clever Programmer : Link
JavaScript Full Course by Edureka : Link
Full JavaScript Course by Freecodecamp : Link
Learn JavaScript in 1 Hour by Programming With Mosh : Link

Tips and Tricks 💡

JavaScript Tips by Kirupa - Link
JS Tips by Catalinpit - Link

I've learnt so many things from this one. Must have a look!

JS tips - Link

Cheat Sheets 🤑

JS Cheatsheet by iLoveCoding: Link
Cheatography - JavaScript Cheat Sheet : Link
OverAPI - Link
JS CheatSheet - Link
Awesome Cheatsheets by LeCoupa - Link
Modern JavaScript Cheatsheet: Link
ES6 Cheatsheet by Devhints - Link

JavaScript Projects (Beginners to Advanced) 🕹️

30 Day Vanilla JS by wesbos : Link
Learn JavaScript by Building 7 Games (YouTube) : Link
Build 15 JavaScript Projects by freecodecamp (YouTube) : Link
10 JS Projects in 10 Hours by FlorinPop : Link
Beginners JavaScript Projects by strongdan: Link
20+ Projects You Can Do With JavaScript : Link
40 JavaScript Projects for Beginners : Link
100+ JavaScript Projects: Link
50 projects 50 days by Brad Traversy : Link

DOM in JavaScript 🧱

Traversing the DOM with JavaScript - Link
A tutorial featuring native methods to traverse the DOM.
DOM Enlightenment - Link
A whole book about how to access an manipulate the DOM without a library.
You Might Not Need jQuery - Link
Get plain JavaScript code snippets (and see their jQuery equivalents).

ES6 ✨

ES6 Overview - Link
Bullet point overview including in-depth articles.
Exploring ES6 - Link
Good introduction with in-depth chapters.
Practical ES6 - Link
eBook with practical examples and advices.
ES6 Katas - Link
Learn ES6 by solving unit test online.
Setting up ES6 - Link
Explains how to set up ES6 projects that are transpiled to ES5.
Exploring ES2016 and ES2017 - Link
Follow up of »Exploring ES6«.

Aand.. if you need to learn JS Algorithms 🤖

The Algorithms - JavaScript : Link
JavaScript Algorithms and Data Structures : Link

Some Awesome Free Resources 🎖️

Get Butterfly : Link
30 seconds of code : Link
JavaScript Snippets : Link
JS source : Link
JS Fiddle : Link

Forem: Shreya Purohit

Exploratory Data Analysis: A Step-by-Step Approach

Learn data analysis for free - A Study Plan

🐍 0. Python:

🔢 1. NumPy:

🧮 2. Pandas:

📊 3. Matplotlib:

📈 4. Seaborn:

🧙 5. Plotly:

🏗️ Data Analysis Projects:

Resources that will help you get started as a Technical Writer

Technical Writing 101

✅ Challenges To Commit:

🧠 Learn:

🧩 Where to Publish - Build Portfolio

💵 Paid Article Writing Platforms

⚒️ Tools

📷 Cover Images

📽️ YouTube Channels

Learn TailwindCSS: Make A Profile Card

CARD SECTION

Result:

PARENT (TOPMOST) DIV

Result:

PROFILE PICTURE DIV

Result:

NAME DIV

USERNAME DIV

WORK DIV

FOLLOW BUTTON

How to setup Tailwind in your project

ES6 Handbook: Everything You Need to Know

Table of Contents

Notes

let/const

var: function/ global scoped. Eg:

let: block scoped. Eg:

const: block scoped. Eg:

Objects

this

Arrow Functions

array.map()

Object Destructuring

Spread Operator

Classes

Inheritance

Modules

Default and Named Exports

Named Exports

Default Exports

10+ Ways To Make Side Income Online as a Developer

Contribute to Open Source Projects / Or Make One

Write blogs

Open a YT channel

Sell Video Courses

Coding Tutor

Freelancing / Work on small projects

Ask for Support

Content Creator

Sell Your Products

Sell Themes and Plugins

70+ Awesome Free Resources To Learn JavaScript

Documentations 📑

Web Tutorials 📝

GitHub Repositories 🐱

Free eBooks 📒

Interactive Tutorials 💻

Online Courses 👩🏻‍🏫

YouTube Tutorials 📽️

Tips and Tricks 💡

Cheat Sheets 🤑

JavaScript Projects (Beginners to Advanced) 🕹️

DOM in JavaScript 🧱

ES6 ✨

Aand.. if you need to learn JS Algorithms 🤖

Some Awesome Free Resources 🎖️

Other Tutorials 🌱

`var`: function/ global scoped. Eg:

`let`: block scoped. Eg:

`const`: block scoped. Eg: