Tweet

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @Prathkum

Pratham 👨‍💻🚀

@Prathkum

6 Feb

We can't create gradient border directly but we have a trick😉

A SHORT THREAD🧵

This is pretty easy. It will just take 5 minutes😄

STEP 1:
- Create your element around which you want to create gradient border

In this example I have a sqaure around which I'll create gradient border

STEP 2:
- Create pseudo-element with little extra height and width

Let's say if my sqaure height width is 300px then I'll set 304px height and width of pseudo-element

Read 6 tweets

Pratham 👨‍💻🚀

@Prathkum

4 Feb

Everything you need to know about useEffect hook of React

A beginner's guide

Thread🧵👇

If you're familiar with class components then you might know that we have various lifecycle methods but in functional components, we don't have any lifecycle methods.

Instead we have a powerful hook called useEffect💪

By using useEffect, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates

So let's start by understanding the syntax first👇

Read 14 tweets

Pratham 👨‍💻🚀

@Prathkum

2 Feb

Use the border radius effectively and create awesome shapes🤩

A Quick Thread🧵👇

You might have used something like this before👇

border-radius: 10px;
border-radius: 50%;
border-radius: 20px 10px;
border-radius: 10px 20px 30px 40px;

but have you used this?👇

border-radius: 40% 22% 33% 45% / 45% 69% 65% 36%;

Attached image showing a rectangle with 10px border-radius all sides. This is what we probably all know.

border-radius: 20px;

Read 9 tweets

Pratham 👨‍💻🚀

@Prathkum

31 Jan

Positioning in CSS allows you to display your element wherever you want on the screen

But when I was learning it, I found it little bit confusing😅

So in this thread I'll try to explain it in easiest manner with practical implementation. Let's start

THREAD🧵👇

There are 5 values that you can pass in position property

- static
- relative
- absolute
- fixed
- sticky

In this thread we will be focusing on relative and absolute positioning as both are widely used

Let's start with understanding what document flow is?

📌 Elements are displayed on the screen as they written in the HTML document

Consider the following piece of code:

H1, P, H3 and div are displayed on the screen in exact order as they written in the HTML file.

Read 14 tweets

Pratham 👨‍💻🚀

@Prathkum

29 Jan

Everything you need to know about useState hook of React

A beginner's guide

Thread🧵👇

Hey👋

Hooks are powerful but confusing. Don't worry, I'll try to explain each hook in the easiest way in this thread series of React hooks

Let's start with useState, the most useful and simple hook in my opinion

Working with React hooks, first thing you need to do is to import the particular hook

It's quite easy👇

📌 import { useState } from "react";

Read 14 tweets

Pratham 👨‍💻🚀

@Prathkum

27 Jan

Complete Beginner's guide to React in 2021⚛️

A Long Thread🧵

If you just started or planning to getting started with React, this thread might help you.

In this thread I'll try to give you a quick overview to the world of React.

So if you find that sound interesting, prepare a coffee and give this thread a read😉

Before you go further into the React, make sure to check these things

✅ Basic knowledge of HTML and CSS
✅ JavaScript fundamentals and ES6 features

I would like to suggest you build a decent hold on JavaScript concepts because that is the backbone of React

Read 35 tweets

Share this page!

Pratham 👨‍💻🚀

Try unrolling a thread yourself!

More from @Prathkum

Pratham 👨‍💻🚀

Pratham 👨‍💻🚀

Pratham 👨‍💻🚀

Pratham 👨‍💻🚀

Pratham 👨‍💻🚀

Pratham 👨‍💻🚀

Did Thread Reader help you today?

Like this author's thread?