6 amazing GitHub repositories that can help you as a developer

🧵 👇🏻

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

Neumorphism is a trendy UI style nowadays. So let's create a neumorphic form using few simple steps

THREAD🧵

Neumorphic design is another UI design that has become popular these days.

Making neumorphic effect is actually pretty easy using only just CSS box-shadow

We'll be creating a neumorphic form in steps👇🏼

2.

STEP 1:

Place a light source(virtually) on screen. In this example I'm considering that my light source is placed top left corner of the screen

3.

STEP 2:

Create a container div and set background color slightly darker than white. I picked #ecf0f3

* Make sure that the color of body and container should be same

CONTINUE...

4.

As we placed our light source on top-left corner, make sure left and top border of container should be brighter than right and bottom border.

This will make the element looks like it has the light source illuminating from the top left corner of the screen.

5.

Roadmap to learn CSS 🎨🛣️

➳ Color
➳ Background
➳ Box model
➳ Height and width
➳ Margin and padding
➳ Border
➳ Positioning
➳ display
➳ Layouts
➳ Grid and Flex
➳ Alignment
➳ Fonts
➳ Animation
➳ Pseudo-classes
➳ Media query

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

Want to start with SQL? It can be your first step into the programming world!

Top resources for SQL! 🧵👇

1⃣ SQL Course by DataCamp
Only 4 hours long!

Link:

2⃣ SQL Course by KhanAcademy
The course covers basic to advanced topics.

Link:

3⃣ SQL by W3Schools
This is a SQL resource that you will turn to time and again. It covers everything you can learn about SQL.

Link:

4⃣ SQL by FreeCodeCamp
Beginner-friendly SQL Course.
4 hours long tutorial only!

Link:

If you're learning or planning to learn Web Development in 2021 then this thread is for you

🧵👇🏻

WHERE TO START? Front-end or Backend?

- Well this may be a debatable question but I would suggest you to start with front-end development

- It depends entirely on the individual but in my opinion, starting with front-end development has its advantages.

{ 2 / 16 }

WHY TO START WITH FRONT-END DEVELOPMENT?

- More visual content gives you an aesthetic vibe

- You can share your creations

- Easier to get feedback as you can show your webpages to any non technical person as well

{ 3 / 16 }

FUNDAMENTALS ARE IMPORTANT

- Don't rush! Spend some time on HTML, CSS and JavaScript. You can do pretty amazing things using these three languages

{ 4 / 16 }

- Make sure to learn and build some web pages using HTML and CSS before jumping onto JavaScript

- JavaScript is the backbone of web development, Don't rush to start with React/Angular/vue or any other front-end framework or library

{ 5 / 16 }