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.

As now you know about document flow, let's start with Relative positioning

📌 Relative Position

- Relative positioning do not take an element out of document flow
- Relative positioning is relative to element's original position which can be changed using offset

🔹 Relative position is relative to itself.

For example: Consider the code and output in the attached image below

As you can see red box is shifted 100px from left because I applied left offset after giving it relative positioning

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

useEffect take two parameters, first is a function and second is an array.

The function inside the useEffect will run every single time component re-render. Consider this piece of code and check the output in next tweet

{ 4 / 15 }

As you can see in the output the function is executed every single time my component re-render

{ 5 / 15 }

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

useState hook takes a parameter as initial value of state and return an array having two values

- The first value is the current state
- The second value is the function that allow us to change our state

Let me show you the return value by printing it out on console👇

Now we know what useState hook return, it's time to destruct our value

const [currentState, setCurrentState] = useState(0);

🔹 currentState is the value of our state
🔹 setCurrentState is the function using which we can change our state value

A compiled tweet of the CSS cheats sheet I created in the last few days

🧵👇

Border-radius

Flexbox

Relative and absolute positioning

Grid Layout

Web development resources for free

Mega Thread 🧵 👇🏻

1️⃣ Online learning platforms 📘

- Udemy
- FreeCodeCamp
- Treehouse
- Frontend masters
- Coursera
- Traversy media
- SoloLearn
- Codecademy
- Udacity
- Alison
- Code college
- LinkedIn Learning
- Skillshare
- EdX

2️⃣ Editors and share code snippets ✍🏻

- PlayCode
- JSFiddle
- CodePen
- StackBlitz
- JSBin
- Codesandbox
- Codeinterview .io
- godbolt .org
- wandbox .org
- carbon .now.sh
- pastebin .com
- ideone .com
- ide .judge0.com

3️⃣ Documentations and notes 📄

- w3 schools
- mdn
- Devdocs
- geeksforgeeks
- tutorialspoint
- javapoint

4️⃣ Competitive programming 👩‍💻

- CodeChef
- HackerEarth
- HackerRank
- AlgoExpert
- LeetCode
- TopCoder
- Codewars
- Codeforces
- Coderbyte
- Exercism

You must have used the border-radius property in CSS, but here is complete guide covering some of the hidden concept of it

🧵👇🏻

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a border-radius in order to make round edges of sharp cornered box

Well we know that every element is a box in webpage. Consider that box clipped using 8 clips 👇🏻

We can adjust that clips in order to make distorted shapes

We can shift the position of eight clips and make some amazing random shapes.

The syntax is pretty easy, we can consider it as border-radius accepts 8 value for each clip, four value before slash (/) and four values after slash

Let's decode what each value means.

border-radius: 2px 4px 6px 8px / 10px 12px 20px 16px;

The first 2px simply means the distance of first clip from the top left corner and second value that is 4px means the distance of second clip from top right corner

React Hooks are so powerful and especially some additional hooks.

Do you know there is an alternative to useState called useReducer hook? It is used to manage more complex states.

Let's look into detail 🧵👇🏻

Usually, the useState hook is used to tackle states in React where you can pass the initial state and React preserves state for you between re-renders

What if you need to manage more complex states? Here useReducers comes into play

Similar to useState, the useReducer hook also returns a pair of values. Let's see what these two things are

The first value is `undefined` which is the current state (it is undefined because we didn't pass any initial state in the useReducer hook)

The second value is a dispatch function using which we can update our state.

The useReducer hook accepts 3 parameter

1. reducer
2. Initial state
3. init

Some amazing templates👇

📌 html5up .net
• Free fully responsive HTML5 template

📌 bootswatch .com
• Free themes for Bootstrap

📌 html5boilerplate .com
• The web’s most popular front-end template