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

18 May

Some of my handmade JavaScript notes and cheat sheets that can help you 🧵👇

1. JavaScript Function Anatomy

2. JavaScript Arrow Function

Read 9 tweets

Pratham

@Prathkum

18 May

5 amazing GitHub repositories for every React developer

🧵 👇🏻

1️⃣ Beautiful React Hooks

A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development

🔗 github.com/beautifulinter…

2️⃣ React cheat sheet

Cheatsheets for experienced React developers getting started with TypeScript

🔗 github.com/typescript-che…

Read 6 tweets

Pratham

@Prathkum

18 May

Glassmorphism is a unified name for the popular frosted Glass design. It is trendy web design nowadays which looks super cool

Let's create a glassmorphic form using few simple CSS steps

A thread 🧵

Few days back I have covered neumorphic design in one of my thread and now in this thread we will be creating glassmorphic form.

Glassmorphism design is all about one CSS property which is backdrop-filter. Let's start 🔽

Step 1: Starting of the basic structure

Just start with writing all necessary tags for form layout. You can any number of input field according to you.

Read 11 tweets

Pratham

@Prathkum

18 May

React Hooks are the functions which "hook into" React state and lifecycle features from function components. Hooks allows you to manipulate state and other React feature without writing a class. Let's talk about widely used hook

useEffect hook at a glance 🧵👇🏻

useEffect hook is the heart of React functional components

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

3/15

Read 15 tweets

Pratham

@Prathkum

17 May

Have you heard the term "Tooltip" in web development?

Tooltips guide your visitors to take action and hence provides extra layer of guidance without any difficulties and hence increase the user experience

Let's create a tooltip using HTML and CSS only 🧵👇🏻

We just need to create an element that we will be visible only when user moves the mouse pointer over an elment

STEP1: Let's start with the HTML structure

STEP2: Popup text

- Add some width and padding
- Hide the popup element throughout and show it only on hover
- Place it above the element
- Add little transition for smooth rendering

Read 7 tweets

Pratham

@Prathkum

17 May

CSS art is a good way to enhance and improve your CSS knowledge.

Let's create Phineas using pure CSS in few simple steps 🧵👇🏻

STEP 1. Create a head

create a triangle and rotate it so that it looks like a head

STEP 2. Create smile and ear

We have a pseudo elements in CSS, so we can create smile and ear using head::after and head::before. Its a good way to learn about pseudo-elements

Read 11 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?